/* The site's styles: parchment, gold and olive, as since the start (the colours come from RIP.ie's measured design, see
   design/RIPIE_REFERENCE.md), in the layout and sizes of the November 2026 redesign. One white bar (candle mark and wordmark, section links,
   account and the family-notice button), a quiet band with the search, a two-column body, the listing table, the notice
   page set as a printed notice, the funeral-home directory, accounts and forms, a light footer. Type is Newsreader for
   names and headings and Inter for everything else, on a 16px base: most visitors are on a phone and many are old.
   Container = 1120px with 24px padding. Written in logical properties (see rtl.css for what they cannot say). */
[hidden] { display: none !important; }
:root {
  color-scheme: light;
  --paper: #f9f5ec; --paper-2: #f3ebd6; --surface: #fff;
  --ink: #1b2124; --ink-2: #4a4226; --ink-3: #6f6548; --ink-4: #9a917a; --head: #3d320e;
  --line: #ebe3d2; --line-2: #c3ac93;
  --gold: #7b5d0e; --gold-2: #604808; --gold-3: #8f7014; --gold-tint: #f8f2df; --gold-line: #e2cb80; --gold-mid: #d2ae38; --deep: #342b0a;
  --grad-gold: linear-gradient(182deg, #e2cb80 1.3%, #d2ae38 97.93%);
  --grad-dark: linear-gradient(182deg, #ba8c00 1.3%, #7b5d0e 97.93%);
  --flame: #d2ae38; --flame-ink: #53470a; --flame-tint: #fff6d6; --flame-line: #e2cb80;
  --red: #a12b2b; --red-tint: #fcecec; --red-line: #efc4c4;
  --ok: #24643f; --ok-tint: #e8f3ec; --ok-line: #b9d8c5;
  --serif: Newsreader, Georgia, "Times New Roman", serif; --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(28, 27, 24, .04), 0 10px 28px rgba(28, 27, 24, .07);
  --arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%231b2124' stroke-width='1.6'/></svg>");
  --glass: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380786a' stroke-width='1.8'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>");
  /* names the templates' few inline styles still use */
  --g700: var(--ink-3); --body: var(--paper); --p900: var(--ink); --p700: var(--ink-2);
}
/* Chinese pages (Taiwan, lang="zh-hant"): Inter and Newsreader carry Latin only, so the stacks go on to the system faces
   that carry Traditional Chinese (macOS and iOS: PingFang TC, Songti TC; Android: Noto Sans TC and Noto Serif TC;
   Windows: Microsoft JhengHei, PMingLiU). Chinese has no italic (a browser would slant the glyphs), and a name is kept
   on one line rather than broken between its characters. */
:root:lang(zh) {
  --serif: Newsreader, "Noto Serif TC", "Songti TC", PMingLiU, Georgia, serif;
  --sans: Inter, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
}
/* Hong Kong (lang="zh-HK"): the system's Hong Kong faces first, which draw the characters in their Hong Kong forms and
   carry the HKSCS characters of names (macOS and iOS: PingFang HK; Android: Noto Sans HK and Noto Serif HK; Windows:
   Microsoft JhengHei and MingLiU_HKSCS), then Taiwan's. */
:root:lang(zh-HK) {
  --serif: Newsreader, "Noto Serif HK", "Songti TC", MingLiU_HKSCS, "Noto Serif TC", PMingLiU, Georgia, serif;
  --sans: Inter, "PingFang HK", "Noto Sans HK", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
}
:lang(zh) em, :lang(zh) .cta-item .when i, :lang(zh) .nt .tbc, :lang(zh) .cbook .entry .sig { font-style: normal; }
:lang(zh) .nt a.nm, :lang(zh) .cta-item .nm, :lang(zh) .dn-head h1, :lang(zh) .cbook-head .who, :lang(zh) .fam-card h3 { word-break: keep-all; }
/* the announcement above the name breaks at its 、, not between 82 and 歲 */
:lang(zh) .dn-head .occ { word-break: keep-all; overflow-wrap: anywhere; }
/* the date of death with its 民國 and lunar date needs the box's whole width (Taiwan has no second entry beside it) */
:lang(zh) .dates { grid-template-columns: minmax(0, 1fr); }
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
html { overflow-x: hidden; }
body { overflow-x: hidden; overflow-x: clip; }  /* clip where the browser knows it: hidden would make the body a scroller and stop anything sticking */
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 600; color: var(--head); letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: 1168px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide-m { display: block; } .show-m { display: none; }
svg.ic { width: 1em; height: 1em; flex: none; }
/* Latin and numeric tokens inside translated text keep their own direction on a right-to-left page (a time, a date,
   a Latin name or address, a source's link): isolated, so a Hebrew or Arabic sentence never reorders them. On a
   left-to-right page isolation changes nothing. */
bdi, time, .nt .when, .nt td.added, .funeral .when b, .glance .when b, .dates .vl, .cta-item .when b, .url, a[href^="mailto:"], a[href^="tel:"], a[href^="http"] { unicode-bidi: isolate; }

/* buttons: one solid (dark gold), one light gold, two outlined, one dark */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 600 15px/20px var(--sans); transition: background-color .15s, border-color .15s, color .15s; }
.btn .ic { width: 18px; height: 18px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-pri { background: var(--grad-dark); color: #fff; }
.btn-pri:hover { background: var(--gold); }
.btn-light { background: var(--grad-gold); border-color: var(--gold-mid); color: var(--head); }
.btn-light:hover { background: var(--gold-mid); }
.btn-sec { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn-outline { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-sec:hover, .btn-outline:hover { border-color: var(--ink-3); }
.btn-dark { background: #423a2a; color: #fff; }
.btn-dark:hover { background: var(--deep); }
.btn.sm { min-height: 36px; padding: 7px 14px; border-radius: 8px; font-size: 14px; }
.btn.sm .ic { width: 16px; height: 16px; }
.btn.xs { min-height: 30px; padding: 4px 10px; border-radius: 8px; font-size: 13px; }
.btn.xs .ic { width: 14px; height: 14px; }
.btn.lg { min-height: 52px; padding: 12px 28px; font-size: 16px; }
.btn.block { width: 100%; }

/* form controls */
.fld { position: relative; min-width: 0; }
.fld input, .fld select { display: block; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; font-size: 16px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.fld input:focus, .fld select:focus, .frm .f input:focus, .frm .f select:focus, .frm .f textarea:focus { outline: 0; border-color: var(--gold-3); box-shadow: 0 0 0 3px rgba(184, 148, 34, .28); }
.fld input::placeholder { color: var(--ink-4); }
.fld select { appearance: none; -webkit-appearance: none; padding-inline-end: 38px; color: var(--ink-3); background: #fff var(--arrow) no-repeat right 14px center; }
.fld select.has { color: var(--ink); }
.fld .lbl { position: absolute; inset-inline-start: 10px; top: -8px; padding: 0 4px; background: #fff; font: 600 12px/14px var(--sans); color: var(--ink-3); }
.fld select:disabled { background-color: var(--paper); color: var(--ink-4); cursor: not-allowed; }


/* ===== header ===== */
.shell { position: relative; padding-top: 68px; }
header.site { position: fixed; top: 0; inset-inline: 0; z-index: 30; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
header.site .wrap { max-width: 1328px; }
.bar { height: 68px; display: flex; align-items: center; gap: 22px; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.logo .mark { width: 26px; height: 33px; flex: none; }
.logo .word { font: 600 25px/1 var(--serif); color: #53470a; letter-spacing: -.02em; white-space: nowrap; }
.logo .word small { font-size: 15px; font-weight: 500; color: #b89422; }
.logo .word .own { margin-inline-start: 9px; font-size: 20px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); }  /* the brand's name in the country's script (Hong Kong's 最後一程) */
.logo .tag { display: block; margin-top: 4px; font: 400 11.5px/1 var(--sans); letter-spacing: .01em; color: var(--ink-3); }
nav.links { margin-inline-start: 10px; }
nav.links ul { display: flex; gap: 2px; }
nav.links a { position: relative; display: flex; align-items: center; height: 68px; padding: 0 12px; font: 500 15px/20px var(--sans); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
nav.links a::after { content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 3px; background: var(--gold-mid); opacity: 0; transition: opacity .15s; }
nav.links a:hover, nav.links a.on { color: var(--ink); }
nav.links a.on::after { opacity: 1; }
.actions { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
.actions .acct { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/18px var(--sans); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.actions .acct .ic { width: 18px; height: 18px; color: var(--ink-3); }
.actions .acct:hover { color: var(--ink); text-decoration: underline; }
.menu-btn { display: none; }
/* language switch (countries with several languages): DE FR IT in the bar, names in the footer */
.langs.codes { margin-inline-start: auto; display: flex; gap: 2px; }
.langs.codes + .actions { margin-inline-start: 8px; }
.langs.codes a { display: block; padding: 6px 7px; border-radius: 6px; font: 600 12.5px/14px var(--sans); letter-spacing: .04em; color: var(--ink-3); text-decoration: none; }
.langs.codes a:hover { color: var(--ink); }
.langs.codes a.on { color: var(--head); background: var(--gold-tint); box-shadow: inset 0 -2px 0 var(--gold-mid); }
.fbottom .langs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fbottom .langs a.on { color: #fff; font-weight: 600; }
/* the switch's room comes out of the menu's spacing (French and Italian labels run long) */
.bar:has(.langs.codes), .bar.snug { gap: 10px; }
.bar:has(.langs.codes) nav.links, .bar.snug nav.links { margin-inline-start: 0; }
.bar:has(.langs.codes) nav.links a, .bar.snug nav.links a { padding: 0 6px; font-size: 14px; }
.bar:has(.langs.codes) nav.links a::after, .bar.snug nav.links a::after { inset-inline: 6px; }
.bar:has(.langs.codes) .actions, .bar.snug .actions { gap: 10px; }
.bar:has(.langs.codes) .actions .btn, .bar.snug .actions .btn.sm { padding-inline: 11px; }
.bar:has(.langs.codes) .langs.codes a { padding-inline: 5px; }
/* a language whose words still don't fit the bar (site.js adds .snug, then .notag): a size down, then no tagline */
.bar.snug nav.links a { font-size: 13px; } .bar.snug .actions .btn.sm, .bar.snug .actions .acct { font-size: 13px; }
.bar.notag .logo .tag { display: none; }
.totop { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 40; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(255, 255, 255, .92); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s; display: grid; place-items: center; box-shadow: var(--shadow); }
.totop.show { opacity: 1; visibility: visible; }
.totop svg { width: 28px; height: 28px; }
.totop svg path { fill: var(--ink); stroke: none; }

/* drawer (mobile menu) */
.drawer { position: fixed; inset: 0; z-index: 50; background: #fff; overflow-y: auto; }
.drawer .dhead { height: 60px; padding: 0; padding-inline-start: 16px; background: #fff; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.drawer .close { width: 72px; height: 60px; background: none; border: 0; cursor: pointer; display: grid; justify-items: center; align-content: center; gap: 2px; font: 500 12px/16px var(--sans); color: var(--ink-2); }
.drawer ul.dl { padding: 8px 20px 16px; }
.drawer ul.dl li { border-bottom: 1px solid var(--line); }
.drawer ul.dl a { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; font: 600 22px/28px var(--serif); color: var(--ink); text-decoration: none; }
.drawer ul.dl a.on { color: var(--gold); }
.drawer ul.dl a.rep { font: 400 15px/22px var(--sans); color: var(--ink-3); }
.drawer .dbtns { display: grid; gap: 12px; padding: 8px 20px 32px; }


/* ===== cards, sections ===== */
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 18px; }  /* the link drops under the heading when both don't fit */
.sec-head h2 { font: 600 28px/34px var(--serif); }
.inline-link { font: 500 14px/20px var(--sans); color: var(--gold); }

/* the band with the search: on the home page the heading stands on the paper, the form is the card */
.band { position: relative; background: linear-gradient(180deg, #e6cf8a 0, #efdfae 34%, rgba(249, 245, 236, 0) 100%); }
/* a drawing in each upper corner of the band, in fine pale lines, the far one mirrored: candles of different heights, each
   with its flame and its glow, fading downwards (the mark's candle, many times). Where the mark a visitor leaves is not a
   candle (Taiwan's incense, the prayer of Israel's Arabic pages) the home page says `class="band sprigs"` and the
   drawing is two sprigs of paired leaves. Each is as wide as the room beside the heading and its line, so nothing runs
   behind the words; a narrow window has no room and no drawing. No url() inside a drawing: the static pipeline would
   rewrite it (tests/test_stylesheet.py) */
.band { --candles: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 330' fill='none' stroke='%23fffbe8' stroke-linecap='round' stroke-linejoin='round'><defs><g id='c'><circle cx='0' cy='15' r='44' fill='%23fffdf2' fill-opacity='0.05' stroke='none'/><circle cx='0' cy='15' r='34' fill='%23fffdf2' fill-opacity='0.06' stroke='none'/><circle cx='0' cy='15' r='25' fill='%23fffdf2' fill-opacity='0.08' stroke='none'/><circle cx='0' cy='15' r='17' fill='%23fffdf2' fill-opacity='0.11' stroke='none'/><circle cx='0' cy='15' r='10' fill='%23fffdf2' fill-opacity='0.14' stroke='none'/><path d='M-9 36H9V58H-9z' fill='%23fffbe8' fill-opacity='0.2' stroke='none'/><path d='M-9 58H9V80H-9z' fill='%23fffbe8' fill-opacity='0.15' stroke='none'/><path d='M-9 80H9V102H-9z' fill='%23fffbe8' fill-opacity='0.1' stroke='none'/><path d='M-9 102H9V124H-9z' fill='%23fffbe8' fill-opacity='0.06' stroke='none'/><path d='M-9 124H9V146H-9z' fill='%23fffbe8' fill-opacity='0.03' stroke='none'/><path d='M-9 36V58M9 36V58' stroke-opacity='0.95' stroke-width='1.2'/><path d='M-9 58V80M9 58V80' stroke-opacity='0.8' stroke-width='1.2'/><path d='M-9 80V102M9 80V102' stroke-opacity='0.62' stroke-width='1.2'/><path d='M-9 102V124M9 102V124' stroke-opacity='0.45' stroke-width='1.2'/><path d='M-9 124V146M9 124V146' stroke-opacity='0.3' stroke-width='1.2'/><path d='M-9 146V168M9 146V168' stroke-opacity='0.17' stroke-width='1.2'/><path d='M-9 168V190M9 168V190' stroke-opacity='0.07' stroke-width='1.2'/><path d='M-9 36q0-5 9-5t9 5' stroke-width='1.2'/><path d='M0 24v7' stroke-width='1.2'/><path d='M0 0c5.5 7 8 11.5 8 16a8 8 0 0 1-16 0c0-4.5 2.5-9 8-16z' fill='%23fffbe8' fill-opacity='.3' stroke-width='1.2'/><path d='M0 8c2.5 3.5 3.6 6 3.6 8.2a3.6 3.6 0 0 1-7.2 0c0-2.2 1.1-4.7 3.6-8.2z' fill='%23fffbe8' fill-opacity='.75' stroke='none'/></g></defs><use href='%23c' transform='translate(46 30) scale(1.55)'/><use href='%23c' transform='translate(116 122) scale(1.1)'/><use href='%23c' transform='translate(182 56) scale(1.3)'/><use href='%23c' transform='translate(254 156) scale(0.9)'/><use href='%23c' transform='translate(322 100) scale(0.75)'/></svg>");
  --sprigs: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 330' fill='none' stroke='%23fffbe8' stroke-linecap='round' stroke-linejoin='round'><path d='M-12 26C120 16 255 70 372 214M-12 150C60 170 130 215 176 300' stroke-width='1.6'/><path d='M28 25C38 0 65 -15 89 -17C78 5 54 25 28 25M42 26C68 28 90 50 99 72C76 68 50 51 42 26M75 29C87 7 115 -4 137 -3C125 16 100 32 75 29M89 31C114 37 132 59 137 81C116 75 94 56 89 31M123 39C137 20 163 14 183 17C170 33 145 44 123 39M137 43C159 51 173 74 175 95C156 86 138 66 137 43M170 55C185 40 210 37 228 42C214 55 190 63 170 55M184 61C203 71 213 94 213 113C197 103 182 83 184 61M217 78C232 66 255 66 271 73C257 83 234 87 217 78M230 86C246 97 253 119 251 136C237 126 226 106 230 86M262 108C277 98 298 101 312 109C298 116 277 118 262 108M276 118C289 130 293 150 290 166C278 155 270 135 276 118M307 145C322 138 340 142 352 150C338 156 319 155 307 145M320 157C331 169 333 187 328 201C319 190 314 172 320 157M351 189C364 184 380 189 390 198C377 202 361 199 351 189M363 203C372 215 372 232 366 243C359 233 356 216 363 203M372 214C386 219 396 233 398 247C386 242 374 229 372 214M10 157C22 142 43 138 59 142C48 154 27 162 10 157M17 160C34 167 45 186 46 203C31 195 17 178 17 160M54 176C67 165 87 164 101 170C89 179 69 184 54 176M61 180C75 189 82 208 81 223C68 214 58 197 61 180M96 204C109 196 127 198 139 205C126 212 108 213 96 204M102 209C114 219 117 237 113 251C103 241 97 224 102 209M134 240C147 235 162 240 171 248C160 252 143 250 134 240M140 247C148 257 148 274 143 285C136 275 133 259 140 247M167 285C180 283 192 290 199 299C188 300 174 295 167 285M173 294C178 305 175 319 169 328C165 317 165 303 173 294M176 300C187 306 193 320 193 331C183 325 175 313 176 300' stroke-width='1.3' fill='%23fffbe8' fill-opacity='.14'/><path d='M28 25L80 -11M42 26L91 65M75 29L128 2M89 31L131 74M123 39L175 20M137 43L170 87M170 55L220 44M184 61L209 106M217 78L263 73M230 86L248 129M262 108L305 109M276 118L288 159M307 145L345 150M320 157L327 195M351 189L384 197M363 203L366 238M372 214L395 242M10 157L52 144M17 160L42 197M54 176L94 171M61 180L78 217M96 204L133 205M102 209L112 245M134 240L166 247M140 247L142 280M167 285L194 297M173 294L169 323M176 300L191 327' stroke-width='.8' stroke-opacity='.75'/></svg>");
  --art: var(--candles); }
.band.sprigs { --art: var(--sprigs); }
.band::before, .band::after { content: ""; position: absolute; top: 0; width: clamp(0px, calc((100vw - 660px) / 2), 440px); aspect-ratio: 4 / 3; pointer-events: none; opacity: .8;
  background: var(--art) no-repeat; background-size: 100% 100%; }
.band::before { inset-inline-start: 0; } .band::after { inset-inline-end: 0; transform: scaleX(-1); }
.search-box { position: relative; z-index: 1; padding: 18px 22px 20px; }
.search-box .sh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; min-height: 30px; }
.search-box h1 { font: 600 22px/28px var(--serif); color: var(--ink); }
.search-box .lead { display: none; }
.search-box .clear { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font: 400 14px/18px var(--sans); color: var(--ink-3); text-decoration: none; }
.search-box .clear:hover { color: var(--ink); text-decoration: underline; }
.search-box .clear svg { width: 18px; height: 18px; }
/* Who: surname, first name (maiden name where the country uses one) and the button on one line; every field has
   a permanent label above it. Narrow down: region > county > town (each select appears once the one before it is
   chosen, see the template) and the period, smaller and greyer, under a caption. */
.sform { display: grid; gap: 16px; }
.sform .lab { display: block; margin-bottom: 6px; font: 600 13px/16px var(--sans); color: var(--ink-2); }
.sform .row.names { display: grid; grid-template-columns: 2fr 1.4fr 1.4fr 160px; gap: 12px; align-items: end; }
.sform .row.names.two { grid-template-columns: 2fr 1.6fr 160px; }
.sform .row.names.one { grid-template-columns: 1fr 160px; }
.sform .names .q input { padding-inline-start: 42px; background: #fff var(--glass) no-repeat 13px center / 19px; }
.sform .names .btn { width: 100%; min-height: 48px; padding: 6px 10px; font-size: 16px; }
.sform .row.refine { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; padding-top: 14px; border-top: 1px solid var(--line); }
.sform .refine .cap { flex: 0 0 100%; font: 400 13px/16px var(--sans); color: var(--ink-3); margin-bottom: -2px; }
.sform .refine .fld { flex: 1 1 160px; max-width: 300px; }
.sform .refine .fld.period { flex: 0 1 190px; }
.sform .refine .lab { font-weight: 500; color: var(--ink-3); }
.sform .refine select { height: 40px; font-size: 15px; color: var(--ink); border-radius: 8px; }
/* county and town before a region is chosen: greyed and empty, no arrow; the tap goes to the field, which opens the region's list */
.sform .refine .cap[id] { font-size: 14px; line-height: 20px; color: var(--ink-2); }  /* the caption that says what to choose first */
.sform .refine .wait { flex: .7 1 120px; cursor: pointer; }  /* empty: they leave the region's name its room */
.sform .refine .wait select { pointer-events: none; background-image: none; }
.wrap.home-search { max-width: 968px; padding-top: 60px; padding-bottom: 44px; }
.home-search .search-box { padding: 0; border: 0; background: none; }
.home-search .search-box .sh { display: block; margin-bottom: 10px; min-height: 0; text-align: center; }
.home-search .search-box h1 { font: 600 50px/56px var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.home-search .search-box .lead { display: block; max-width: 620px; margin: 0 auto 30px; font: 400 18px/28px var(--sans); color: var(--ink-2); text-align: center; text-wrap: balance; }
.home-search .sform { padding: 22px 24px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }

/* body two columns */
.wrapper { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 32px 40px; align-items: start; }
.wrapper .main, .wrapper .side { min-width: 0; }
.home-body { padding-top: 24px; padding-bottom: 24px; }
.map-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px 18px; margin-bottom: 40px; }
.map-card h2 { font: 600 28px/34px var(--serif); margin-bottom: 12px; }
.map-area { padding: 0 44px; text-align: center; }
.map-area.wide { padding: 0; } /* a map wider than it is tall (Mexico, Austria) fills the card */
.map-area svg { width: 100%; height: auto; display: block; }
.region-list { list-style: none; margin: 0; padding: 4px 0; columns: 3 180px; column-gap: 24px; text-align: start; }
.region-list li { padding: 4px 0; break-inside: avoid; }
.region-list .n { color: var(--ink-3); font-size: .9em; }
.region-list li.soon a { color: var(--ink-3); }
.map-area path { stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }
.map-area path:hover { fill: var(--gold-line); }
.map-area text { font: 600 11px var(--sans); fill: #3a3a3a; pointer-events: none; text-anchor: middle; }
.map-area text.n { font: 700 12.5px var(--sans); fill: var(--head); }
.map-foot { padding: 14px 0 6px; font: 400 13.5px/20px var(--sans); color: var(--ink-3); }
.map-area path.soon:hover { fill: #e2dac6; }
.map-area rect.inset { fill: none; stroke: var(--line-2); stroke-width: 1; pointer-events: none; } /* an inset's frame (not .frame: that is the photo frame, and its width would apply to the rect) */
.map-area text.soon { fill: var(--ink-4); font-weight: 500; }
.map-credit a { color: inherit; }
.map-credit { margin-top: 6px; font: 400 11.5px/14px var(--sans); color: var(--ink-3); text-align: end; }
.cities-sec { margin-bottom: 40px; }
.city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.city-card { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.city-card:hover { border-color: var(--gold-line); box-shadow: var(--shadow); }
.city-card .kind { font: 600 11.5px/16px var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--gold-3); }
.city-card h3 { font: 600 24px/30px var(--serif); margin: 2px 0 6px; }
.city-card p { font: 400 14px/20px var(--sans); color: var(--ink-3); }
.city-next { margin-top: 14px; font: 400 14px/22px var(--sans); color: var(--ink-3); }
.city-next a { color: var(--gold); }
/* a place's or a home's few words under the title: text on the paper, no box */
.city-intro { margin: 0 0 20px; max-width: 68ch; font: 400 16px/26px var(--sans); color: var(--ink-2); }
.city-intro .city-stats { margin-top: 6px; font: 400 14px/22px var(--sans); color: var(--ink-3); }
.city-intro a { color: var(--gold); }

/* the latest notices: a list of names in a card, each with its town and its funeral */
.cta-list { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.cta-head { padding: 13px 20px 12px; border-radius: 13px 13px 0 0; background: var(--grad-gold); font: 700 12.5px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--head); }
.cta-center { padding: 2px 20px; }
.cta-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); text-decoration: none; }
.cta-item:first-child { border-top: 0; }
.cta-item.nopic { grid-template-columns: minmax(0, 1fr); }
.cta-item .ph { width: 48px; height: 48px; border-radius: 8px; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.cta-item .ph svg { width: 30px; height: 38px; }
.cta-item .ph img { width: 100%; height: 100%; object-fit: cover; }
.cta-item .ph.auto { background: var(--paper); } .cta-item .ph.auto svg { width: 24px; height: 30px; }
.cta-item .txt { min-width: 0; }
.cta-item .nm { display: block; font: 600 18px/23px var(--serif); color: #7e6822; }
.cta-item:hover .nm { color: var(--head); text-decoration: underline; text-decoration-thickness: 1px; }
.cta-item .nm.fn { font-weight: 500; }
.cta-item .loc { display: block; margin-top: 2px; font: 400 14px/19px var(--sans); color: var(--ink-3); }
/* the funeral (a family notice's date) on a line under the town, so the name has the item's whole width. "Details to
   follow" where the funeral isn't known yet, as in the listing */
.cta-item .when { display: block; margin-top: 2px; font: 400 13.5px/19px var(--sans); color: var(--ink-3); }
.cta-item .when b { font-weight: 600; color: var(--ink); }
.cta-item .when i { font-style: italic; }
.cta-foot { padding: 10px 20px 20px; }  /* in flow: as tall as its buttons */
.cta-foot .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }  /* label and chevron centred together; a long label wraps */
.cta-foot .btn .ic { width: 14px; height: 14px; }
/* two buttons: side by side when both fit, else one under the other, each full width */
.cta-foot.two { display: flex; flex-wrap: wrap; gap: 8px; } .cta-foot.two .btn { width: auto; flex: 1 1 auto; }
.cta-list + .cta-list, .side-block + .cta-list { margin-top: 20px; }
.rail .cta-item { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.rail .cta-item.nopic { grid-template-columns: minmax(0, 1fr); }  /* a family notice: no thumbnail */
.rail .cta-item .ph { width: 40px; height: 40px; } .rail .cta-item .ph svg { width: 24px; height: 30px; } .rail .cta-item .ph.auto svg { width: 20px; height: 26px; }
.rail .cta-item .nm { font-size: 17px; line-height: 22px; }

/* home: funeral-home directory teaser */
.teaser { padding: 24px; display: grid; gap: 12px; justify-items: start; }
.teaser h2 { font: 600 26px/32px var(--serif); }
.teaser h3 { font: 600 19px/26px var(--serif); }
.teaser p { font: 400 16px/26px var(--sans); color: var(--ink-2); }
.teaser.small { padding: 18px; gap: 8px; margin-top: 16px; }

/* footer: a paper band with the wordmark and the invitation, four link groups, a slim dark bar */
footer.site { margin-top: 56px; background: var(--gold-tint); border-top: 3px solid var(--gold-mid); color: var(--ink); }
footer.site > .wrap { padding-top: 44px; padding-bottom: 44px; }
.fbrand { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line-2); }
.fid { max-width: 480px; }
.fid .logo { margin-bottom: 12px; }
.fid p { font: 400 15px/24px var(--sans); color: var(--ink-2); }
/* the invitation to funeral homes: in the footer, the listing sidebar and the directory */
.invite { flex: none; max-width: 420px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.invite h3 { font: 600 21px/27px var(--serif); margin-bottom: 4px; }
.invite p { font: 400 14.5px/22px var(--sans); color: var(--ink-2); margin-bottom: 14px; }
.invite .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.invite .btn { max-width: 100%; white-space: normal; text-align: center; }  /* in the notice page's narrow rail a label longer than the box wraps ("Crear una cuenta de funeraria") */
.invite .eg { margin: 12px 0 0; } .invite .eg a { color: var(--gold); }
.side .invite, .rail .invite { max-width: none; margin-bottom: 20px; }
.side .invite .acts, .rail .invite .acts { flex-direction: column; } .side .invite .btn, .rail .invite .btn { width: 100%; }
.fcol a.mail { color: var(--gold); }
.fcols { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 28px 32px; min-width: 0; }
.fcol { min-width: 0; overflow-wrap: anywhere; }
.fcol h3 { font: 600 12.5px/18px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.fcol ul { display: grid; gap: 10px; }
.fcol a { font: 400 15px/20px var(--sans); color: var(--ink); text-decoration: none; }
.fcol a:hover { color: var(--gold); text-decoration: underline; }
.fcol.places .cities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fcol.places .cities a { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font: 500 14px/18px var(--sans); color: var(--ink); }
.fcol.places .cities a:hover { border-color: var(--gold-3); text-decoration: none; }
.fcol.places .regions { font: 400 14px/24px var(--sans); color: var(--ink-4); }
.fcol.places .regions a { font-size: 14px; color: var(--ink-2); }
.fbottom { background: var(--deep); color: #d6cba8; font: 400 13px/18px var(--sans); }
.fbottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding-top: 16px; padding-bottom: 16px; }
.fbottom ul { display: flex; flex-wrap: wrap; gap: 4px 0; }
.fbottom li { display: flex; align-items: center; padding: 0 10px; border-inline-start: 1px solid rgba(255, 255, 255, .2); }
.fbottom li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.fbottom a { color: #ece3c4; text-decoration: none; }
.fbottom a:hover { color: #fff; text-decoration: underline; }

/* ===== list page ===== */
.crumbs-wrap { padding: 6px 0; border-bottom: 1px solid var(--gold-line); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; min-height: 32px; }
.crumbs li { display: flex; align-items: center; font: 400 13.5px/18px var(--sans); color: var(--ink-3); }
.crumbs li a, .crumbs li span { padding: 7px 8px; text-decoration: none; }
.crumbs li a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li:first-child a { padding-inline-start: 22px; position: relative; }
.crumbs li:first-child a::before { content: ""; position: absolute; inset-inline-start: 2px; top: 8px; width: 15px; height: 15px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 11l9-7 9 7v9h-6v-6H9v6H3z' fill='%23b89422'/></svg>") no-repeat center / contain; }
.crumbs li + li::before { content: ""; width: 5px; height: 8px; margin-inline-end: 2px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path d='M1 1l5 5-5 5' fill='none' stroke='%23b89422' stroke-width='1.6'/></svg>") no-repeat center / contain; }
.crumbs li.active { color: var(--ink); max-width: 100%; }
.crumbs li.active span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip { border-bottom: 1px solid var(--gold-line); }
.strip.srch { padding: 22px 0 26px; background: var(--paper-2); }  /* padding, not a margin on the card: a margin would collapse out and leave the rule flush under the card */
.list-body { padding-block: 40px 16px; }
.list-h { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; margin-bottom: 10px; }
.list-h h1 { font: 600 38px/44px var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.list-h .btn { flex: none; }
.list-body .lead { font: 400 16px/26px var(--sans); color: var(--ink-2); margin-bottom: 12px; }
.list-tools { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.list-tools .count { font: 600 14px/20px var(--sans); color: var(--ink-2); }
.list-tools .period { font: 400 14px/20px var(--sans); color: var(--ink-3); }
.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin: 16px 0; }
.filters .fld { width: 230px; }
.filters .fld input, .filters .fld select { height: 42px; font-size: 15px; }
.filters .chks { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }  /* the two checkboxes stay together: beside the selects or under them */
.filters .chk { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--sans); color: var(--ink); cursor: pointer; }
.filters .chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); }
/* the site's lists (the death notices, the funeral-home directory, family notices, the home's panel, the account's
   alerts): one table sized by its content, so every language's words fit; surname first, the town with its county
   beneath, the funeral as day and time with today's and tomorrow's marked and past ones greyed, and the day the notice
   was added. On a phone each row is a block: the name on a line of its own, the rest beneath it (see the end) */
.nt { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.nt th { padding: 12px 18px; border-bottom: 1px solid var(--gold-line); background: var(--gold-tint); font: 600 12px/16px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: #53470a; text-align: start; vertical-align: middle; white-space: nowrap; }
.nt th a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.nt th a:hover { color: var(--ink); }
.nt th svg { width: 14px; height: 14px; opacity: .5; } .nt th[aria-sort] { color: var(--head); } .nt th[aria-sort] svg { opacity: 1; }
.nt td { padding: 14px 18px; border-bottom: 1px solid var(--line); font: 400 15px/21px var(--sans); color: var(--ink-2); vertical-align: top; }
.nt tbody tr:last-child td { border-bottom: 0; }
.nt tbody tr:hover td { background: #fbf7ec; }
.nt a.nm { font: 400 19px/25px var(--serif); color: #7e6822; text-decoration: none; }
.nt a.nm b { font-weight: 600; }
.nt a.nm:hover { color: var(--head); text-decoration: underline; text-decoration-thickness: 1px; }
.nt .flag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--flame-tint); border: 1px solid var(--flame-line); font: 600 12px/16px var(--sans); color: var(--flame-ink); }
.nt .flag.chg { background: var(--red-tint); border-color: var(--red-line); color: var(--red); }
.nt td.name .flag { display: block; width: max-content; margin-top: 4px; }  /* under the name, not beside it */
.nt .pill { display: inline-block; margin-inline-start: 4px; padding: 2px 10px; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--gold-tint); font: 600 12px/16px var(--sans); color: var(--gold); text-decoration: none; white-space: nowrap; vertical-align: 2px; }
.nt .pill:hover { background: #f1e6bf; }
.nt td.place { white-space: nowrap; color: var(--ink); }  /* the town and its county each on one line; the name column wraps instead */
.nt td.place a { color: inherit; text-decoration: none; } .nt td.place a:hover { text-decoration: underline; }
.nt td.place.fp { white-space: normal; min-width: 9em; }  /* a funeral's place (Hong Kong's parlour and hall) is longer than a town */
.nt .sub { display: block; margin-top: 2px; font: 400 13px/18px var(--sans); color: var(--ink-3); }
.nt .sub a { color: inherit; }
.nt td.num, .nt td.date { white-space: nowrap; }
.nt td.acts a, .nt td.acts button { display: inline-block; margin-inline-end: 12px; font: 600 14px/20px var(--sans); color: var(--gold); white-space: nowrap; }
.nt td.acts form { display: inline; }
.nt td.acts button { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.nt td.acts button.del { color: var(--red); }
.nt td.fu { color: var(--ink); }
.nt td.fu .when { white-space: nowrap; }
.nt td.fu .when b { font-weight: 600; }
.nt td.fu.past { color: var(--ink-4); } .nt td.fu.past b { font-weight: 400; }
.nt .soon { display: block; width: max-content; margin-top: 4px; padding: 1px 9px; border-radius: 999px; background: var(--gold-mid); border: 1px solid var(--gold-mid); font: 700 12px/17px var(--sans); color: var(--head); }
.nt .tbc { font: italic 400 15px/21px var(--sans); color: var(--ink-3); }
.nt td.added { color: var(--ink-3); white-space: nowrap; }
.nt td.empty { padding: 40px 24px; text-align: center; color: var(--ink-3); }
.nt td.empty a { color: var(--gold); }
.nt .aud { display: block; font: 400 13px/18px var(--sans); color: var(--ink-3); }
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 0 0; }
.pager .arr { width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.pager a.arr:hover { border-color: var(--ink-3); }
.pager .arr svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; }
.pager .arr:disabled { opacity: .4; cursor: default; }
.pager ul { display: flex; gap: 2px; }
.pager li { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 500 15px/20px var(--sans); color: var(--ink-2); }
.pager li:not(.on):not(.dots):hover { background: var(--paper-2); }
.pager li.on { font-weight: 700; background: var(--gold-mid); color: var(--head); }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; padding: 4px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.tiles .cta-item:nth-child(2) { border-top: 0; }
.tiles.flat { border: 0; padding: 0; background: none; }
.side-title { font: 600 22px/28px var(--serif); margin-bottom: 12px; }
.sd-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 0 4px; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; }
.side-title + .sd-item { border-top: 0; padding-top: 0; }
.sd-item svg { width: 18px; height: 20px; stroke: #b89422; }
.sd-item b { font: 500 15px/20px var(--sans); color: var(--ink); margin-inline-end: 8px; }
.sd-item:hover b { color: var(--gold); }
.sd-item b small { display: block; font: 400 13px/18px var(--sans); color: var(--ink-3); }
.sd-item.on b { color: var(--gold); font-weight: 600; }
.sd-item .cnt { justify-self: end; min-width: 30px; padding: 2px 8px; border-radius: 999px; background: var(--paper-2); font: 600 13px/18px var(--sans); color: var(--ink-2); text-align: center; }
.side-block { margin-bottom: 28px; }
.side-block > .btn { margin-top: 12px; }
.side-block .btn .ic { width: 14px; height: 14px; margin: 0; margin-inline-start: 4px; }

/* facets: the places one level below the page's place, as chips under the title; the first chip is the level itself */
.facets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.facets .lb { font: 500 14px/20px var(--sans); color: var(--ink-3); margin-inline-end: 2px; }
.facets a, .chips a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font: 500 14px/20px var(--sans); color: var(--ink); text-decoration: none; }
.facets a:hover, .chips a:hover { border-color: var(--ink-3); }
.facets a.on, .chips a.on { background: var(--grad-gold); border-color: var(--gold-mid); color: var(--head); }
.facets a b { font: 400 13px/18px var(--sans); color: var(--ink-3); }
.facets a.on b { color: #53470a; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

/* ===== notice page ===== */
.qsearch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 0; }
.qsearch .fld { flex: 1 1 240px; max-width: 360px; }
.qsearch .fld input { height: 42px; padding-inline-start: 38px; font-size: 15px; background: #fff var(--glass) no-repeat 12px center / 17px; }
.qsearch .btn { min-height: 42px; }
.qsearch .adv { font: 500 14px/20px var(--sans); color: var(--gold); text-decoration: none; }
.qsearch .adv:hover { text-decoration: underline; }
.center { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 28px 40px; align-items: start; padding: 40px 0 8px; }
.center > * { min-width: 0; }
/* the notice: a sheet with a fine rule inside its edge, as a printed notice has its frame */
.dn { position: relative; padding: 48px 52px 44px; display: grid; gap: 30px; border-radius: 16px; box-shadow: var(--shadow); }
.dn::before { content: ""; position: absolute; inset: 11px; border: 1px solid var(--gold-line); border-radius: 7px; pointer-events: none; }
.dn-main { display: grid; gap: 16px; }
.dn-main.pic { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: center; }
.dn-head { min-width: 0; }
.dn-head .occ { font: 400 18px/28px var(--serif); color: var(--ink-2); max-width: 46ch; text-wrap: balance; }  /* the announcement, a klepsydra's first lines */
.dn-head .sp { margin-top: 14px; font: 400 19px/24px var(--serif); letter-spacing: .04em; color: var(--ink-3); }  /* "ś.p." / "†" over the name */
.dn-head .sp + h1 { margin-top: 2px; }
.dn-head .occ + h1 { margin-top: 12px; }
.dn-head .sp svg { width: auto; height: 1.15em; vertical-align: -.2em; }  /* the crescent and star of a Muslim notice */
.dn-main:not(.pic) .dn-head { text-align: center; }  /* no photo: the notice is centred like a printed one */
.dn-main:not(.pic) .dn-head .occ { margin-inline: auto; }
.dn-main:not(.pic) .tags, .dn-main:not(.pic) .socials { justify-content: center; }
.dn-head h1 { font: 600 44px/50px var(--serif); letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.dn-head .latin { margin-top: 4px; font: 500 15px/20px var(--sans); letter-spacing: .04em; color: var(--ink-3); }  /* the identity card's spelling under a Chinese name */
.dn-head h1.long { font-size: 36px; line-height: 42px; }  /* a double-barrelled name, two given names */
.dn-head h1 .nee { font-weight: 400; font-size: 24px; letter-spacing: 0; color: var(--ink-2); }
.dn-head h1 .hon { font-weight: 400; font-size: 26px; color: var(--ink-3); }  /* ז״ל after a Jewish name on the Hebrew pages */
.tags { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 10px; }
.tag { font: 400 15px/22px var(--sans); color: var(--ink-3); }
a.tag { text-decoration: none; }
a.tag:hover { color: var(--ink); text-decoration: underline; }
.tag + .tag::before { content: "·"; display: inline-block; margin-inline: 8px; color: var(--ink-4); text-decoration: none; }
.tag.flag { margin-inline-start: 10px; padding: 0 8px; border: 1px solid var(--red-line); border-radius: 6px; background: var(--red-tint); color: var(--red); font-weight: 600; font-size: 13px; }
.tag.flag::before { display: none; }
.dn-head .kind { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--gold-line); background: var(--gold-tint); font: 600 12.5px/18px var(--sans); color: var(--gold); }
.dn-head .kind.auto { border-color: var(--line-2); background: var(--paper); color: var(--ink-3); }
.dn-head .kind svg { width: 13px; height: 13px; }
/* the action row: printable notice, the messenger, share, save; an icon and a word each, in a line that wraps */
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.socials form { display: contents; }
.socials button, .socials a.soc { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; cursor: pointer; font: 500 14px/20px var(--sans); color: var(--ink-2); text-decoration: none; transition: border-color .15s, color .15s; }
.socials svg { width: 17px; height: 17px; }
.socials button:hover, .socials a.soc:hover { border-color: var(--ink-3); color: var(--ink); }
.socials a.share-wa:hover { color: #1a7f4b; border-color: #1a7f4b; }
.socials a.share-line:hover { color: #06a546; border-color: #06a546; }
/* the photo: no mat, no shadow, the picture itself */
.frame { width: 220px; }
.frame .photo { width: 220px; height: 280px; border-radius: 10px; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.frame .photo svg { width: 110px; height: 138px; }
.frame .photo img { width: 100%; height: 100%; object-fit: cover; }
.frame.small { width: 150px; } .frame.small .photo { width: 150px; height: 190px; } .frame.small .photo svg { width: 76px; height: 96px; }
.desc { font: 400 19px/31px var(--serif); color: var(--ink); }
.desc p { margin: 0 0 20px; }
.desc p:last-child { margin-bottom: 0; }
.desc a { color: var(--gold); overflow-wrap: anywhere; }
.desc { max-width: 38em; }
.dn-main:not(.pic) ~ .desc { margin-inline: auto; }
/* sympathy: condolences and the candle, right under the name */
.sympathy { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.dn .sympathy { margin-top: 0; }
.sympathy .ttl { display: flex; align-items: center; margin-bottom: 16px; }
.sympathy .ttl span { width: 50%; text-align: center; font: 600 26px/32px var(--serif); }
.sympathy .ttl i { flex: 1; border-top: 1px solid var(--line-2); }
.sympathy .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sympathy .row > * { flex: 0 1 260px; }
.sympathy .row .btn { width: 100%; min-height: 50px; font-size: 16px; white-space: normal; text-align: center; }
.sympathy .row .btn .ic { width: 20px; height: 20px; }
.btn.lit { background: var(--flame-tint); border-color: var(--flame-line); color: var(--flame-ink); }
.sympathy .words { font: 400 15px/22px var(--sans); color: var(--ink-2); text-align: center; }  /* after a candle: the book's invitation in a line under the buttons */
.sympathy .words a { color: var(--gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sympathy .words a:hover { text-decoration: underline; }
.sympathy .words a .ic { width: 14px; height: 14px; vertical-align: -2px; }
/* the funeral panel: the day, the time large, the place, directions and the calendar */
.funeral { padding: 22px 26px 24px; border-radius: 12px; background: #fdfcf7; border: 1px solid var(--gold-line); }
.funeral.past { background: #f8f8f8; border-color: #e1e1e1; }
.funeral.past .lb, .funeral.past .when { color: var(--ink-3); }
.funeral.past .when b { background: var(--ink-4); }
.funeral .fh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.funeral .lb { font: 600 12.5px/16px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--gold-3); }
.funeral .soon { padding: 2px 10px; border-radius: 999px; background: var(--gold-mid); border: 1px solid var(--gold-mid); font: 700 12.5px/18px var(--sans); color: var(--head); }
.funeral .when { font: 600 28px/36px var(--serif); color: var(--ink); }
.funeral .when::first-letter { text-transform: uppercase; }
.funeral .when b { display: inline-block; margin-inline-start: 6px; padding: 0 10px; border-radius: 8px; background: var(--gold); font: 600 21px/32px var(--sans); color: #fff; white-space: nowrap; vertical-align: 3px; }
.funeral .where { margin-top: 10px; font: 400 17px/27px var(--sans); color: var(--ink); }
/* several ceremonies (a wake, the rosary, the funeral, the burial): a list down a fine line in the order of the day, each
   under its own name; the funeral itself keeps the large type and the solid hour, the others read a size down */
.funeral.multi .ev { position: relative; padding-inline-start: 30px; }
.funeral.multi .ev + .ev { margin-top: 20px; }
.funeral.multi .ev::before { content: ""; position: absolute; inset-inline-start: 4px; top: 3px; width: 11px; height: 11px; box-sizing: border-box; border: 2px solid var(--gold-mid); border-radius: 50%; background: #fff; }
.funeral.multi .ev.main::before { inset-inline-start: 2px; top: 1px; width: 15px; height: 15px; background: var(--gold-mid); }
.funeral.multi .ev:has(+ .ev)::after { content: ""; position: absolute; inset-inline-start: 9px; top: 20px; bottom: -20px; width: 1px; background: var(--gold-line); }
.funeral.multi .ev .fh { margin-bottom: 2px; }
.funeral .ev:not(.main) .lb { color: var(--ink-3); }
.funeral .ev:not(.main) .when { font-size: 20px; line-height: 28px; }
.funeral .ev:not(.main) .when b { padding: 0 8px; border: 1px solid var(--gold-line); background: #fff; font-size: 16px; line-height: 24px; color: var(--head); vertical-align: 2px; }
.funeral .ev:not(.main) .where { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.funeral.multi .ev ~ :not(.ev) { margin-inline-start: 30px; }  /* the source's last check, the mourning, the buttons: in line with the list */
.funeral.past .ev::before { border-color: var(--ink-4); } .funeral.past .ev.main::before { background: var(--ink-4); }
.funeral.past .ev:not(.main) .when b { border-color: #e1e1e1; background: #fff; color: var(--ink-3); }
/* a second calendar's date under the civil one, and the mourning the funeral opens (Israel: the shiva, the shloshim) */
.funeral .when .sec, .dates .vl .sec, .event .vl .sec { display: block; margin-top: 2px; font: 400 15px/22px var(--sans); color: var(--ink-3); }
.funeral .mourning { margin-top: 10px; font: 400 16px/26px var(--sans); color: var(--ink); }
.funeral .mourning .sec-in { color: var(--ink-3); }
.funeral .mourning.house { padding-inline-start: 12px; border-inline-start: 3px solid var(--gold-line); }
.funeral .later { font: 500 18px/28px var(--serif); color: var(--ink-2); }
/* when the source last showed a collected funeral; amber once it is a day and a half old while the funeral is ahead */
.funeral .checked { margin-top: 10px; font: 400 13.5px/20px var(--sans); color: var(--ink-3); }
.funeral .checked.warn { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--flame-line); background: var(--flame-tint); font: 600 15px/22px var(--sans); color: var(--flame-ink); }
.funeral .go { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
.funeral .go .btn .ic { width: 16px; height: 16px; }
.dates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dates .lb { font: 600 12.5px/18px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.dates .vl { font: 400 16px/22px var(--sans); color: var(--ink); }
/* the funeral home's card under its notice and above its own listing */
.fd { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 32px; margin-top: 24px; padding: 26px 30px; }
.fd h2 { grid-column: 1 / -1; font: 600 24px/30px var(--serif); margin-bottom: 8px; }
.fd .hlogo { grid-column: 1 / -1; margin-bottom: 12px; }  /* the home's logo (FuneralHome.logo), above its name */
.fd .hlogo img { display: block; max-width: min(240px, 100%); max-height: 72px; width: auto; height: auto; }
.fd .addr { display: grid; gap: 2px; align-content: start; }
.fd .addr div { font: 400 16px/25px var(--sans); color: var(--ink-2); }
.fd .contact { display: grid; gap: 10px; align-content: start; }
.fd .contact span { position: relative; padding-inline-start: 28px; font: 400 16px/22px var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.fd .contact > span > svg { position: absolute; inset-inline-start: 0; top: 2px; width: 18px; height: 18px; color: var(--gold-3); }
.fd .contact a { color: inherit; }
.fd .contact .srcbtn { justify-self: start; margin-top: 6px; }
.fd .note { grid-column: 1 / -1; margin-top: 16px; font: 400 15px/24px var(--sans); color: var(--ink-2); }
.fd .note.pub { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }
.fd .note.remove { margin-top: 6px; }
.fd .note.remove a { color: inherit; text-decoration: underline; }
.fd.top { margin: 0 0 24px; }  /* above the home's own listing: the contact details the directory promises */
.fd.verified { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.fd .seal { position: absolute; top: 22px; inset-inline-end: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--gold-line); background: var(--gold-tint); font: 600 12.5px/18px var(--sans); color: var(--gold); }
.fd .seal::before { content: ""; width: 13px; height: 13px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b5d0e' stroke-width='3'><path d='M5 12l5 5 9-10'/></svg>") no-repeat center / contain; }
.fd.verified h2 { padding-inline-end: 200px; }
.fd .claim { grid-column: 1 / -1; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--paper); font: 400 14.5px/22px var(--sans); color: var(--ink); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
/* a collected notice's source: name, place and platform in two lines, the link out, the removal note, the claim line */
.src { margin-top: 24px; padding: 22px 28px; display: grid; gap: 12px; background: transparent; border-style: dashed; border-color: var(--line-2); }
.src .src-name { font: 600 19px/26px var(--serif); color: var(--ink); }  /* the source's name in a line: the page's headings are the person's */
.src .meta { font: 400 14px/21px var(--sans); color: var(--ink-3); }
.src .meta a { color: var(--gold); }
.src .srcbtn { justify-self: start; }
.src .note { font: 400 14px/21px var(--sans); color: var(--ink-3); }
.src .note a { color: inherit; text-decoration: underline; }
.src .src-head { display: grid; gap: 3px; }
.src .claim { margin-top: 0; font: 400 14px/21px var(--sans); color: var(--ink-3); }  /* the home's invitation in a line, not a box */
.src .claim b { color: var(--ink-2); }
.src .claim a { color: var(--gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.src .claim a:hover { text-decoration: underline; }
.src .claim a .ic { width: 14px; height: 14px; vertical-align: -2px; }
.src .claim a.eg { font-weight: 400; white-space: normal; }
/* the example of a published notice (notices.sample): its banner, and the card alone in a frame */
.sample-banner { margin-top: 20px; padding: 18px 22px; display: grid; gap: 8px; border-color: var(--gold-line); background: var(--gold-tint); }
.sample-banner h2 { font: 600 21px/28px var(--serif); }
.sample-banner p { font: 400 15px/24px var(--sans); color: var(--ink); }
.sample-banner .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.draft-bar.bottom { margin-top: 16px; }
.draft-bar.bottom .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
body.embed { padding: 12px; background: var(--paper); }
body.embed .wrap { padding: 0; }
body.embed .center { grid-template-columns: minmax(0, 1fr); padding: 0; }
/* the page for funeral homes: the same person as collected and as published, side by side */
.compare { margin: 0 0 48px; }
.compare h2 { font: 600 28px/34px var(--serif); margin-bottom: 8px; }
.compare .lead { font: 400 17px/27px var(--sans); color: var(--ink-2); max-width: 760px; margin-bottom: 18px; }
.compare .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare .pair.solo { grid-template-columns: minmax(0, 640px); }
.compare figure { margin: 0; }
.compare figcaption { font: 600 15px/22px var(--sans); color: var(--ink); margin-bottom: 8px; }
.compare .shot { position: relative; height: 900px; overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); }
.compare .shot iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.compare .shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(rgba(247, 244, 238, 0), var(--paper)); pointer-events: none; }
.compare .pub .shot { border-color: var(--gold-3); box-shadow: var(--shadow); }
.compare .open { margin-top: 16px; }
/* the rail's last card on a long notice: the funeral at a glance, in view while the text and the condolences scroll by */
.rail { display: flex; flex-direction: column; align-self: stretch; }
.rail > * { flex: none; }
.glance { position: sticky; top: 92px; margin-top: 20px; padding: 18px 20px 20px; border: 1px solid var(--gold-line); border-radius: 14px; background: #fdfcf7; }
.glance .who { font: 600 19px/25px var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.glance .lb { margin-top: 10px; font: 600 12px/16px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--gold-3); }
.glance .when { margin-top: 2px; font: 600 17px/24px var(--sans); color: var(--ink); }
.glance .when::first-letter { text-transform: uppercase; }
.glance .when b { white-space: nowrap; }
.glance .where { margin-top: 2px; font: 400 15px/22px var(--sans); color: var(--ink-2); }
.glance .go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.glance .go .btn { flex: 1 1 auto; }
/* the rail's offer of a family notice */
.rail .banner { margin-bottom: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.rail .tree { position: relative; height: 96px; background: linear-gradient(180deg, #dcba50, #d0ab32); overflow: hidden; }
.rail .tree svg { position: absolute; left: 50%; top: 8px; width: 120px; height: 112px; transform: translateX(-50%); fill: #c5a132; }
.rail .tree svg path { stroke: #c5a132; }
.rail .inner { display: grid; gap: 10px; padding: 18px 20px 20px; }
.rail .inner h3 { font: 600 19px/25px var(--serif); }
.rail .inner p { font: 400 15px/22px var(--sans); color: var(--ink-2); }

/* about page */
.about-body { padding-block: 40px 16px; }
.about { padding: 16px 44px 32px; max-width: 800px; }
.about h1 { font: 600 38px/44px var(--serif); letter-spacing: -.02em; padding: 20px 0; }
.about section { padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.about h2 { font: 600 24px/30px var(--serif); margin-bottom: 10px; }
.about p, .about li { font: 400 17px/28px var(--sans); color: var(--ink-2); }
.about p + p, .about ul + p { margin-top: 10px; }
.about ul { list-style: disc; padding-inline-start: 22px; margin: 6px 0 10px; }
.about a { color: var(--gold); }
.toast { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 70; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 10px; background: var(--ink); color: #fff; font: 500 15px/20px var(--sans); box-shadow: var(--shadow); }
.toast.error { background: #7a1f1f; }
.toast.success { background: var(--ink); }
/* Google Analytics consent banner (only when GA_MEASUREMENT_ID is set) */
.consent { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 80; max-width: 620px; margin: 0 auto; padding: 18px 22px; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); }
.consent p { font: 400 15px/23px var(--sans); color: var(--ink); }
.consent a { color: var(--gold); }
.consent .row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* ===== home: family notices, the family-notice band, the funeral-home band ===== */
.fam-sec { margin-bottom: 40px; }
.fam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fam-card { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.fam-card:hover { border-color: var(--gold-line); box-shadow: var(--shadow); }
.fam-card .kind { font: 600 11.5px/16px var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--gold-3); }
.fam-card h3 { font: 600 22px/28px var(--serif); margin: 4px 0 6px; }
.fam-card h3 small { font-weight: 400; font-size: 16px; color: var(--ink-3); }
.fam-card p { font: 400 15px/23px var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fam-card .meta { margin-top: 10px; font: 400 13.5px/18px var(--sans); color: var(--ink-3); }
.grey { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; padding: 30px 40px; border-radius: 16px; margin: 16px 0 40px; background: radial-gradient(60% 120% at 50% 0, #5c626a 0, #474c52 60%, #40454b 100%); }
.grey .ln, .grey .orn { display: none; }
.grey .txt { min-width: 0; }
.grey .txt h2 { font: 600 28px/34px var(--serif); color: var(--gold-line); }
.grey .txt p { margin-top: 4px; font: 400 16px/25px var(--sans); color: #fdfcf7; max-width: 60ch; }
.grey .btn { flex: none; }
.fdband { background: #fff; border-top: 1px solid var(--line); padding: 64px 0; }
.fdband h3 { font: 600 38px/44px var(--serif); letter-spacing: -.02em; }
.fdband .sub { margin-top: 12px; font: 400 18px/29px var(--sans); color: var(--ink-2); max-width: 720px; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0 28px; }
.benefit { padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.benefit svg { width: 34px; height: 34px; margin-bottom: 14px; stroke: #b89422; }
.benefit b { display: block; font: 600 20px/26px var(--serif); color: var(--ink); margin-bottom: 6px; }
.benefit p { font: 400 15px/23px var(--sans); color: var(--ink-2); }
.fdband .ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fdband .ctas .note { font: 400 14px/21px var(--sans); color: var(--ink-3); margin-inline-start: auto; }
footer.site:has(+ *), .fdband + footer.site { margin-top: 0; }

/* ===== condolences ===== */
.cond { padding: 22px 26px; display: grid; gap: 12px; margin-top: 24px; }
.cond h2 { font: 600 24px/30px var(--serif); }
.cond .note { padding: 10px 14px; border-radius: 10px; background: var(--flame-tint); border: 1px solid var(--flame-line); font-size: 14.5px; color: var(--ink); }
.cond ul li { padding: 14px 0; border-top: 1px solid var(--line); }
.cond ul .who { font: 600 15px/20px var(--sans); color: var(--ink); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cond ul .who span { font-weight: 400; color: var(--ink-3); }
.cond ul p { font: 400 18px/28px var(--serif); color: var(--ink); }
.cond ul time { font: 400 13px/18px var(--sans); color: var(--ink-3); }
.cond ul .rep { margin-inline-start: auto; font: 400 13px/18px var(--sans); color: var(--ink-3); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.cond .empty, .cond .off { font: 400 15px/23px var(--sans); color: var(--ink-3); }
.cond .acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* the condolence book's page: the person's card, the form's button, the entries */
.cbook-head { padding: 32px 28px; display: grid; gap: 10px; text-align: center; justify-items: center; }
.cbook-head h1 { font: 600 30px/38px var(--serif); }
.cbook-head h1 span { display: block; }
.cbook-head .who { font: 600 36px/42px var(--serif); color: var(--ink); }
.cbook-head .who .nee { font-weight: 400; font-size: 22px; color: var(--ink-2); }
.cbook-head .where { font: 400 16px/22px var(--sans); color: var(--ink-3); }
.cbook-head .media { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; width: 100%; max-width: 420px; margin-top: 6px; }
.cbook-head .media.nophoto { grid-template-columns: 1fr; justify-items: center; }
.cbook-head .media img { width: 100%; max-width: 240px; justify-self: center; border-radius: 10px; }
.cbook-head .socials { margin-top: 0; justify-content: center; }
.cbook-head .media:not(.nophoto) .socials { flex-direction: column; }
.cbook .info { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; width: 100%; text-align: start; padding: 14px 16px; border: 1px solid var(--gold-line); border-radius: 10px; background: var(--gold-tint); font: 400 15px/22px var(--sans); color: var(--ink); }
.cbook .info svg { width: 18px; height: 18px; color: var(--gold); grid-row: span 2; margin-top: 2px; }
.cbook .info p { grid-column: 2; }
.cbook-head .btn.block { width: 100%; }
.cbook .cond { margin-top: 16px; }
.cbook .sort { display: flex; justify-content: flex-end; gap: 8px; margin: 22px 0 12px; }
.cbook .sort select { border: 1px solid var(--line-2); border-radius: 8px; padding-block: 9px; padding-inline: 12px 36px; font: 400 15px/20px var(--sans); background: #fff var(--arrow) no-repeat right 12px center; appearance: none; -webkit-appearance: none; }
.cbook .entries { display: grid; gap: 14px; margin-top: 16px; }
.cbook .sort + .entries { margin-top: 0; }
.cbook .entry { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px 18px; }
.cbook .entry .txt { font: 400 19px/30px var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.cbook .entry .foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cbook .entry .rep { font: 400 13px/18px var(--sans); color: var(--ink-3); text-decoration: underline; flex: none; }
.cbook .entry .sig { font: 500 14.5px/21px var(--sans); color: var(--ink-3); text-align: end; margin-inline-start: auto; }
.cbook .entry.mine { border-style: dashed; border-color: var(--line-2); }
.cbook .entry.empty p { font: 400 15px/23px var(--sans); color: var(--ink-3); }
/* the newest condolences on the notice page itself: words on the sheet, a rule between them */
.cbook-inline { margin-top: 24px; padding: 26px 30px 28px; display: grid; gap: 0; }
.cbook-inline .cb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cbook-inline .cb-head h2 { font: 600 26px/32px var(--serif); }
.cbook-inline .cb-head a { font: 500 14px/20px var(--sans); color: var(--gold); white-space: nowrap; }
.cbook-inline .entries { margin-top: 8px; gap: 0; }
.cbook-inline .entry { padding: 18px 0 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.cbook-inline .entry .txt { font-size: 19px; line-height: 30px; }
.cbook-inline .entry .foot { margin-top: 8px; }
.cbook-inline .entry .sig { text-align: start; margin-inline-start: 0; }
.cbook-inline > .btn { justify-self: start; margin-top: 20px; }
.cbook-head, .cbook .cond, #condolences, .sympathy { scroll-margin-top: 84px; } /* anchors clear the fixed header */
.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; }
.st { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 600 12px/17px var(--sans); white-space: nowrap; }
.st.pend { background: var(--flame-tint); border: 1px solid var(--flame-line); color: var(--flame-ink); }
.st.ok { background: var(--ok-tint); border: 1px solid var(--ok-line); color: var(--ok); }
.st.auto { background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-3); }
.st.chg { background: var(--red-tint); border: 1px solid var(--red-line); color: var(--red); }

/* ===== forms, pages with a single card (login, alert, add family notice, account, panel) ===== */
.page { padding-block: 40px 16px; }
.page .card { padding: 32px 40px 36px; }
.page .card > h1 { font: 600 34px/40px var(--serif); letter-spacing: -.02em; margin-bottom: 10px; }
.page .lead { font: 400 16px/26px var(--sans); color: var(--ink-2); margin-bottom: 22px; }
:where(.page .card) a:where(:not(.btn):not(.nm):not(.cta-item):not(.pill)) { color: var(--gold); }  /* a plain link in a form's card; any class's own colour wins */
.narrow { max-width: 600px; margin: 0 auto; }
.frm { display: grid; gap: 16px; }
.picture-read { margin: -8px 0 18px; font: 500 14px/20px var(--sans); }
.picture-read > summary { color: var(--gold); cursor: pointer; width: max-content; max-width: 100%; }
.picture-read[open] { background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 18px; }
.picture-read .frm { margin-top: 10px; }
.picture-read .acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.frm .f { display: grid; align-content: start; gap: 6px; font: 600 14px/18px var(--sans); color: var(--ink); min-width: 0; }
.frm .f input, .frm .f select, .frm .f textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 14px; font: 400 16px/22px var(--sans); background: #fff; min-height: 46px; transition: border-color .15s, box-shadow .15s; }
.frm .f select { padding-inline-end: 36px; appearance: none; -webkit-appearance: none; background: #fff var(--arrow) no-repeat right 12px center; }
.frm .f input[type=file] { padding: 9px 12px; font-size: 14px; }
.frm .f.chk { grid-template-columns: auto 1fr; align-items: center; gap: 10px; font-weight: 400; font-size: 15px; line-height: 22px; cursor: pointer; }
.frm .f.chk input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--gold); }
.frm .f .hint { font: 400 13.5px/19px var(--sans); color: var(--ink-3); }
.frm .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.frm .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.frm .row.tight { gap: 8px; }  /* a ceremony's opening and closing hour side by side */
.frm h3 { font: 600 21px/28px var(--serif); margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.frm .acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.frm .acts a:not(.btn) { font: 500 14.5px/20px var(--sans); color: var(--ink-3); }
.frm .err { color: var(--red); font: 500 14px/20px var(--sans); }
.frm .photo-up { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; }
.frm .logo-up { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; }
.frm .logo-prev { display: grid; place-items: center; height: 96px; padding: 8px; border: 1px dashed var(--line-2); border-radius: 10px; background: #fff; }
.frm .logo-prev img { max-width: 100%; max-height: 80px; }
.msg { padding: 14px 18px; border-radius: 10px; border: 1px solid var(--flame-line); background: var(--flame-tint); font: 400 15px/23px var(--sans); color: var(--ink); }
.msg.ok { border-color: var(--ok-line); background: var(--ok-tint); }
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); margin-bottom: 24px; }
.tabs a { padding: 11px 16px; font: 500 15px/20px var(--sans); color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); font-weight: 600; border-color: var(--gold); }
.sections > section { padding: 28px 0; border-top: 1px solid var(--line); }
.sections > section:first-child { border-top: 0; padding-top: 0; }
.sections h2 { font: 600 24px/30px var(--serif); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 30px; }
.stat { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.stat b { display: block; font: 600 32px/38px var(--serif); color: var(--ink); }
.stat span { font: 400 14px/19px var(--sans); color: var(--ink-3); }
.stat a { display: block; margin-top: 4px; font: 600 13.5px/18px var(--sans); }
.setup { margin: 18px 0 0; padding: 20px 22px; border: 1px solid var(--gold-line); border-radius: 14px; background: var(--gold-tint); }
.setup h2 { margin-bottom: 14px; font: 600 21px/27px var(--serif); }
.setup ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.setup li { position: relative; padding-inline-start: 32px; font: 400 14.5px/22px var(--sans); color: var(--ink-2); }
.setup li::before { content: ""; position: absolute; inset-inline-start: 0; top: 1px; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--gold-3); border-radius: 50%; background: #fff; }
.setup li.done::before { border-color: var(--ok); background: var(--ok) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.setup li b { display: block; font: 600 15.5px/22px var(--sans); color: var(--ink); }
.setup li.done b { font-weight: 500; color: var(--ink-3); }
.setup li form, .setup li .btn { margin-top: 8px; }
.later > summary { cursor: pointer; font: 600 21px/28px var(--serif); color: var(--ink); }
.cond-list { display: grid; gap: 12px; }
.cond-row { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cond-row .who { font: 600 15px/21px var(--sans); color: var(--ink); }
.cond-row .on { font: 400 13.5px/19px var(--sans); color: var(--ink-3); }
.cond-row .txt { margin: 8px 0; font: 400 16px/25px var(--sans); overflow-wrap: anywhere; }
.cond-row form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.phead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; }
.phead h1 { font: 600 34px/40px var(--serif); letter-spacing: -.02em; }
.phead .who { font: 400 14.5px/20px var(--sans); color: var(--ink-3); }
.phead .acts { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 40px; align-items: center; margin-bottom: 48px; }
.hero h1 { font: 600 46px/52px var(--serif); letter-spacing: -.025em; margin-bottom: 14px; text-wrap: balance; }
.hero p { font: 400 18px/29px var(--sans); color: var(--ink-2); margin-bottom: 22px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; }
.step { position: relative; padding: 22px; padding-inline-start: 72px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.step i { position: absolute; inset-inline-start: 20px; top: 20px; width: 38px; height: 38px; border-radius: 50%; background: var(--gold-tint); border: 1px solid var(--gold-line); font: 600 19px/36px var(--serif); color: var(--gold); text-align: center; font-style: normal; }
.step b { display: block; font: 600 19px/25px var(--serif); color: var(--ink); margin-bottom: 4px; }
.step p { font: 400 15px/23px var(--sans); color: var(--ink-2); }
.faq dt { font: 600 17px/25px var(--sans); color: var(--ink); margin-top: 18px; }
.faq dd { margin: 4px 0 0; font: 400 16px/26px var(--sans); color: var(--ink-2); }
.fam-head .kind { font: 600 12.5px/16px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold-3); }
.fam-head h1 { font: 600 40px/46px var(--serif); margin: 6px 0; }
.fam-head .sub { font: 400 16px/23px var(--sans); color: var(--ink-3); }
.event { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.event .lb { font: 600 12.5px/18px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-3); } .event .vl { font: 400 16px/23px var(--sans); color: var(--ink); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
/* consent / terms line under forms that collect personal data */
.legal-note { font-size: 13.5px; line-height: 20px; color: var(--ink-3); margin: 4px 0 10px; }
.legal-note a { color: inherit; text-decoration: underline; }
/* claim prompt for a funeral home without an account (its notice list, sign-up page) */
.home-claim { margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--gold-line); border-radius: 12px; background: var(--gold-tint); font: 400 15px/23px var(--sans); color: var(--ink); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.home-claim p { margin: 0; flex: 1 1 320px; }

/* a laptop's width: the bar's words a size down, so the longest languages' labels still fit beside each other */
@media (max-width: 1440px) {
  .bar { gap: 14px; }
  nav.links { margin-inline-start: 2px; }
  nav.links a { padding: 0 9px; font-size: 14px; }
  nav.links a::after { inset-inline: 9px; }
  .actions { gap: 12px; }
  .actions .btn.sm { padding-inline: 12px; font-size: 13.5px; }
  .actions .acct { font-size: 13.5px; }
  .logo .word { font-size: 23px; }
}
/* ===== the bar folds into the menu button below 1240px (four links, the language switch and three actions need the room) ===== */
@media (max-width: 1240px) {
  .shell { padding-top: 60px; }
  .bar { height: 60px; }
  .logo .mark { width: 22px; height: 28px; } .logo .word { font-size: 22px; } .logo .tag { display: none; }
  .logo .word .own { margin-inline-start: 7px; font-size: 17px; }
  nav.links, .actions { display: none; }
  .langs.codes ~ .menu-btn { margin-inline-start: 0; }
  .menu-btn { position: relative; margin-inline-start: auto; margin-inline-end: -8px; width: 56px; height: 60px; background: none; border: 0; cursor: pointer; display: grid; justify-items: center; align-content: center; gap: 4px; font: 500 11.5px/14px var(--sans); color: var(--ink-2); }
  .menu-btn i { display: block; width: 20px; height: 14px; background: linear-gradient(var(--ink) 0 2px, transparent 2px 6px, var(--ink) 6px 8px, transparent 8px 12px, var(--ink) 12px 14px); }
}
@media (max-width: 860px) { .band::before, .band::after { display: none; } }
/* ===== one column below 980px ===== */
@media (max-width: 980px) {
  .hide-m { display: none !important; } .show-m { display: block; }
  .totop { width: 40px; height: 40px; inset-inline-end: 16px; bottom: 28px; }
  .wrap { padding: 0 16px; }
  .wrap.home-search { padding-top: 36px; padding-bottom: 28px; }
  .home-search .search-box h1 { font-size: 34px; line-height: 40px; }
  .home-search .search-box .lead { font-size: 16px; line-height: 25px; margin-bottom: 22px; }
  .home-search .sform { padding: 18px 16px 16px; border-radius: 16px; }
  .search-box { padding: 16px; }
  /* the surname on its own line, first and maiden names in halves (first name alone full width), the button full
     width; each narrowing select on its own line */
  .sform .row.names, .sform .row.names.two, .sform .row.names.one { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sform .row.names .q, .sform .row.names .btn, .sform .row.names.two .fld { grid-column: 1 / -1; }
  .sform .refine .fld, .sform .refine .fld.period { flex: 1 1 100%; max-width: none; }
  .sform .refine .fld.wait { flex: 1 1 calc(50% - 6px); }  /* still empty: side by side, one line instead of two */
  .search-box .clear span { display: none; }
  .wrapper { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-body { padding-top: 8px; }
  .home-body .main { display: contents; }
  .home-body .map-card { order: 0; margin-bottom: 0; } .home-body .side { order: 1; } .home-body .teaser { order: 2; }
  .home-body .cities-sec { order: 1; margin-bottom: 0; } .home-body .fam-sec { order: 2; margin-bottom: 0; } .home-body .grey { order: 3; }
  .map-card { padding: 20px 16px 12px; }
  .map-card h2 { font-size: 24px; line-height: 30px; }
  .map-area { padding: 0; }
  .sec-head h2 { font-size: 24px; line-height: 30px; }
  .side .show-m .grey { margin-top: 0; margin-bottom: 20px; }
  footer.site { margin-top: 40px; }
  footer.site > .wrap { padding-top: 32px; padding-bottom: 32px; }
  .fbrand { flex-direction: column; }
  .invite { max-width: none; width: 100%; }
  .fcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
  .fcol.places { grid-column: 1 / -1; }
  .fbottom .wrap { justify-content: center; text-align: center; }
  .fbottom ul { justify-content: center; }
  .list-body { padding-block: 28px 8px; }
  .list-h { flex-wrap: wrap; }
  .list-h h1 { font-size: 30px; line-height: 36px; }
  .filters .fld { width: auto; flex: 1 1 150px; }
  .center { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px 0 8px; }  /* minmax(0, …): never wider than the phone */
  .dn { padding: 34px 22px 28px; gap: 24px; border-radius: 14px; }
  .dn::before { inset: 8px; }
  .dn-main, .dn-main.pic { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dn-main.pic .frame { justify-self: center; }
  .dn-head { text-align: center; }
  .dn-head .occ { margin-inline: auto; font-size: 17px; line-height: 26px; }
  .dn-head h1 { font-size: 34px; line-height: 40px; }
  .dn-head h1.long { font-size: 30px; line-height: 36px; }
  .rail { display: block; }
  .glance { display: none; }
  .dn-head h1 .nee { font-size: 20px; }
  .tags, .socials { justify-content: center; }
  .sympathy .row > * { flex: 1 1 180px; }  /* the two buttons side by side; one under the other when the labels don't fit (Spanish, German) */
  .funeral { padding: 18px 18px 20px; }
  .funeral .when { font-size: 24px; line-height: 32px; }
  .funeral .when b { font-size: 19px; line-height: 30px; }
  .dates { grid-template-columns: 1fr 1fr; gap: 12px; }
  .src { padding: 18px; }
  .src .srcbtn { justify-self: stretch; white-space: normal; text-align: center; }
  .cbook-inline { padding: 22px 20px 24px; }
  /* the quick search in one row, the advanced link under it */
  .qsearch { padding: 10px 0; gap: 8px; }
  .qsearch .fld { flex: 1 1 0; max-width: none; }
  .qsearch .btn { padding: 6px 14px; }
  .qsearch .adv { flex: 0 0 100%; text-align: end; }
  .fd, .fd.verified { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .fd .contact { padding-top: 12px; }
  .fd .seal { position: static; justify-self: start; margin-top: 12px; }
  .fd.verified h2 { padding-inline-end: 0; }
  .about-body { padding-block: 24px 8px; }
  .about { padding: 4px 20px 20px; }
  .about h1 { font-size: 30px; line-height: 36px; }
  .about section { scroll-margin-top: 80px; }
  .grey { flex-direction: column; align-items: flex-start; padding: 24px 22px; margin-bottom: 0; }
  .grey .txt h2 { font-size: 24px; line-height: 30px; }
  .fam-grid, .city-grid { grid-template-columns: 1fr; }
  .fdband { padding: 44px 0; margin-top: 40px; }
  .fdband h3 { font-size: 30px; line-height: 36px; }
  .fdband .sub { font-size: 16px; line-height: 26px; }
  .benefits { grid-template-columns: 1fr; gap: 12px; }
  .fdband .ctas .note { margin-inline-start: 0; width: 100%; }
  .sympathy .ttl span { width: 100%; }
  .sympathy .ttl i { display: none; }
  .rail .banner { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .rail .tree { height: 100%; }
  .rail .tree svg { width: 84px; height: 80px; top: 50%; transform: translate(-50%, -50%); }
  .page { padding-block: 24px 8px; }
  .page .card { padding: 22px 18px 24px; }
  .page .card > h1, .phead h1 { font-size: 28px; line-height: 34px; }
  .frm .row, .frm .row3 { grid-template-columns: minmax(0, 1fr); }
  .frm .photo-up, .frm .logo-up { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 32px; }
  .hero h1 { font-size: 34px; line-height: 40px; }
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .event { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tiles .cta-item:nth-child(2) { border-top: 1px solid var(--line); }
  .compare .pair { grid-template-columns: minmax(0, 1fr); }
  .compare .shot { height: 640px; }
  .fam-head h1 { font-size: 30px; line-height: 36px; }
  .cbook-head .who { font-size: 30px; line-height: 36px; }
}
/* ===== phones: a list's row is a block, the name on a line of its own and the rest beneath it; the headings that sort
   become a row of chips ===== */
@media (max-width: 640px) {
  .crumbs li:not(:first-child):not(:nth-last-child(-n+2)) { display: none; }
  .crumbs li a, .crumbs li span { padding: 7px 4px; }
  .crumbs li:first-child a { padding-inline-start: 20px; }
  .nt, .nt tbody { display: block; }
  .nt thead { display: block; border-bottom: 1px solid var(--line); background: #fcfbf8; }
  .nt thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
  .nt thead tr:not(:has(a)), .nt th:not(:has(a)), .nt .added, .nt .online, .nt.fam .type, .nt .freq { display: none; }
  .nt th { padding: 0; border: 0; background: none; letter-spacing: .04em; }
  .nt th a { padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; }
  .nt th[aria-sort] a { border-color: var(--ink-3); }
  .nt tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .nt tbody tr:last-child { border-bottom: 0; }
  .nt td { display: block; padding: 0; border: 0; }
  .nt tbody tr:hover td { background: none; }
  .nt td:first-child { grid-column: 1 / -1; }
  .nt td.place { white-space: normal; color: var(--ink-2); }
  .nt td.fu { text-align: end; }
  .nt td.fu .soon { margin-inline-start: auto; }
  .nt td.empty { padding: 24px 0; }
  .nt td.acts a, .nt td.acts button { white-space: normal; } .nt td.status .st { white-space: normal; }
  .dates { grid-template-columns: 1fr 1fr; }
  .pager li { min-width: 36px; height: 36px; } .pager .arr { width: 36px; height: 36px; }
}