/* Pożegnamy.pl site styles. Derived from design/pozegnamy.html (RIP.ie's measured design, see design/RIPIE_REFERENCE.md). */
/* RIP.ie's current design (measured on rip.ie, 2026-10-02; see design/RIPIE_REFERENCE.md), trimmed on
   2026-10-03 to what the collector can feed: one white bar (candle mark + wordmark, section links with a gold active
   underline, account and the family-notice button on the right), gold leaf band with the search card, 632/304 two-column body with
   the voivodeship map and the recent-notices sidebar, listing table, facts-only notice page, funeral-home
   directory, About page, olive-brown footer, plus the product features built out on 2026-10-03: user and
   funeral-home accounts, notice posting with photos, family notices, condolence book, alerts, saved notices,
   no font-size or contrast controls (browser zoom does that). No shop, podcast or editorial. Light theme like the reference, plus a
   high-contrast mode. Container = 1008px with 24px padding (960px content). */
[hidden] { display: none !important; }
:root {
  color-scheme: light;
  --body: #f9f5ec; --bg2: #e0d4bd; --white: #fff;
  --ink: #1b2124; --g900: #1d1d1d; --g800: #2e2e2e; --g700: #6a6a6a; --g600: #9a9a9a; --g400: #cbcbcb; --g300: #e1e1e1; --g200: #efefef; --g100: #f8f8f8;
  --p100: #fdfcf7; --p200: #f8f2df; --p400: #e2cb80; --p500: #d2ae38; --p600: #b89422; --p700: #7e6822; --p800: #53470a; --p900: #3d320e;
  --heading-yellow: #ba8c00; --heading-yellow-dark: #7b5d0e; --heading-contrast: #423a2a; --footer-bottom: #342b0a;
  --input-border: #c3ac93; --input-icon: #80786a; --blue: #221cbb; --service-title: #80786a;
  --table-border: #e8e2dc; --row-hover: #fbf7ec; --pag-active: #efe2b8; --fn-name: #988b25;
  --grad-light: linear-gradient(180deg, #fbf8f4, #f5eae1);
  --grad-gold: linear-gradient(182deg, #e2cb80 1.3%, #d2ae38 97.93%);
  --grad-dark: linear-gradient(182deg, #ba8c00 1.3%, #7b5d0e 97.93%);
  --serif: Domine, Georgia, serif; --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --shadow-btn: 0 2px 0 rgba(61, 50, 14, .2); --shadow-bar: 0 4px 4px rgba(80, 60, 5, .2);
}
* { box-sizing: border-box; }
html { font-size: 14px; }
html, body { overflow-x: hidden; }
body { background: var(--body); color: var(--ink); font: 14px/21px var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--p600); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 700; color: var(--p900); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: 1008px; 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; }

/* buttons (MUI variants on rip.ie) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 6px 20px; border: 0; border-radius: 4px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 600 13px/22.75px var(--sans); letter-spacing: .37px; box-shadow: var(--shadow-btn); transition: box-shadow .15s; }
.btn:hover { box-shadow: 0 4px 0 rgba(61, 50, 14, .2); }
.btn .ic { width: 20px; height: 20px; margin-left: -4px; }
.btn-pri { background: var(--grad-dark); color: #fff; }
.btn-light { background: var(--grad-gold); color: var(--p900); }
.btn-sec { background: var(--grad-light); border: 1px solid var(--input-border); color: var(--p900); }
.btn-outline { background: transparent; border: 1px solid var(--input-border); color: var(--p900); box-shadow: none; }
.btn-dark { background: var(--heading-contrast); color: #fff; }
.btn.sm { height: 32px; padding: 6px 15.5px; }
.btn.xs { height: 24px; padding: 6px 8px; }
.btn.lg { height: 52px; padding: 6px 32px; font-size: 15px; line-height: 26.25px; letter-spacing: .43px; }
.btn.lg .ic { width: 18px; height: 18px; }
.btn.block { width: 100%; }

/* form controls */
.fld { position: relative; min-width: 0; }
.fld input, .fld select { display: block; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--input-border); border-radius: 4px; background: #fff; font-size: 14px; color: var(--ink); }
.fld input::placeholder { color: var(--g600); font-size: 16px; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 36px; color: var(--g600); font-size: 16px;
  background: #fff 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>") no-repeat right 14px center; }
.fld select.has { color: var(--ink); font-size: 14px; }
.fld .lbl { position: absolute; left: 10px; top: -7px; padding: 0 3px; background: #fff; font: 700 11px/13px var(--sans); color: var(--p700); }


/* ===== header: top strip + nav (absolute, 134px) ===== */
.shell { position: relative; padding-top: 72px; }
header.site { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: #fff; box-shadow: var(--shadow-bar); }
header.site .wrap { max-width: 1232px; }
.bar { height: 72px; display: flex; align-items: center; gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.logo .mark { width: 28px; height: 35px; flex: none; }
.logo .word { font: 700 23px/1 var(--serif); color: var(--p800); letter-spacing: -.02em; white-space: nowrap; }
.logo .word small { font-size: 13px; font-weight: 600; color: var(--p600); }
.logo .tag { display: block; margin-top: 5px; font: 400 11px/1 var(--sans); letter-spacing: .2px; color: var(--g700); }
nav.links { margin-left: 8px; }
nav.links ul { display: flex; gap: 2px; }
nav.links a { position: relative; display: flex; align-items: center; height: 72px; padding: 0 11px; font: 500 14px/18px var(--sans); color: var(--g700); text-decoration: none; white-space: nowrap; }
nav.links a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px; background: var(--p500); opacity: 0; transition: opacity .15s; }
nav.links a:hover, nav.links a.on { color: var(--p900); }
nav.links a.on::after { opacity: 1; }
.actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.actions .acct { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/18px var(--sans); color: var(--p900); text-decoration: none; white-space: nowrap; }
.actions .acct .ic { width: 18px; height: 18px; color: var(--p600); }
.actions .acct:hover { 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-left: auto; display: flex; gap: 2px; }
.langs.codes + .actions { margin-left: 10px; }
.langs.codes a { display: block; padding: 6px 7px; font: 600 12px/14px var(--sans); letter-spacing: .4px; color: var(--g700); text-decoration: none; }
.langs.codes a:hover { color: var(--p900); }
.langs.codes a.on { color: var(--p900); box-shadow: inset 0 -2px 0 var(--p500); }
.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) { gap: 14px; }
.bar:has(.langs.codes) nav.links { margin-left: 0; }
.bar:has(.langs.codes) nav.links a { padding: 0 8px; font-size: 13px; }
.bar:has(.langs.codes) nav.links a::after { left: 8px; right: 8px; }
.bar:has(.langs.codes) .actions { gap: 14px; }
.totop { position: fixed; right: 28px; bottom: 28px; z-index: 40; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(29, 29, 29, .15); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, transform .1s; display: grid; place-items: center; }
.totop.show { opacity: 1; visibility: visible; }
.totop:hover { transform: scale(1.1); }
.totop svg { width: 24px; height: 24px; }

/* drawer (mobile menu) */
.drawer { position: fixed; inset: 0; z-index: 50; background: #fff; overflow-y: auto; }
.drawer .dhead { height: 60px; padding: 0 0 0 16px; background: #fff; border-bottom: 1px solid var(--table-border); 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: 600 12px/16px var(--sans); color: var(--heading-contrast); }
.drawer ul.dl { padding: 0 16px 24px; }
.drawer ul.dl li { border-bottom: 2px solid var(--g200); }
.drawer ul.dl a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font: 600 14px/18px var(--sans); color: var(--ink); text-decoration: none; }
.drawer ul.dl a.on { color: var(--heading-yellow); }
.drawer ul.dl a.rep { color: var(--p700); font-weight: 500; }


/* ===== cards, sections ===== */
.card { background: #fff; border: 1px solid var(--input-border); border-radius: 8px; }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.sec-head h2 { font: 600 24px/22px var(--serif); color: var(--p900); }

/* gold band + search */
.band { position: relative; margin-top: 0; padding-top: 24px; background: linear-gradient(180deg, #d4af34 0, #d9b946 40%, rgba(252, 250, 245, .9) 72%, rgba(249, 245, 236, 0) 100%);
  background-size: 100% 480px; background-repeat: no-repeat; }
.band::before, .band::after { content: ""; position: absolute; top: 0; width: 520px; height: 330px; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 330' fill='none' stroke='%23fff7d6' stroke-width='1.2'><path d='M60 310C40 250 20 190 30 120 50 60 110 20 200 10c-30 40-50 90-40 150s50 100 80 140'/><path d='M30 120l170-110M45 180l150-80M70 240l120-60M100 290l80-40M100 60l40 120M150 35l40 130M200 10l20 160'/><path d='M60 310c60 10 130 0 190-40 40-30 70-70 90-120-50 30-110 40-170 40-40 0-80-10-110-30'/><path d='M60 310c30-30 70-50 110-60l90-30M80 290c50 0 100-20 150-50'/><path d='M330 20c40 20 80 60 100 110s30 100 20 150c-50-40-80-100-100-160-10-30-15-70-20-100z'/><path d='M330 20l80 120 40 140M340 60l70 80M360 120l60 60M330 20c20 60 60 110 110 150'/></svg>") no-repeat; background-size: 520px 330px; }
.band::before { left: 0; } .band::after { right: 0; transform: scaleX(-1); }
.search-box { position: relative; z-index: 1; padding: 12px 16px 16px; }
.search-box .sh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; min-height: 30px; }
.search-box h1 { font: 700 24px/30px var(--serif); color: var(--ink); }
.search-box .clear { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font: 400 14px/17px var(--sans); color: var(--g800); }
.search-box .clear:hover { text-decoration: underline; }
.search-box .clear svg { width: 22px; height: 22px; }
.search-box .clear span + svg { margin-left: 2px; }
/* 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: 14px; }
.sform .lab { display: block; margin-bottom: 4px; font: 600 12px/16px var(--sans); color: var(--p800); }
.sform .row.names { display: grid; grid-template-columns: 2fr 1.4fr 1.4fr 150px; gap: 12px; align-items: end; }
.sform .row.names.two { grid-template-columns: 2fr 1.6fr 150px; }
.sform .names .q input { padding-left: 36px; background: #fff 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>") no-repeat 11px center / 17px; }
.sform .names input { font-size: 16px; }
.sform .names .btn { width: 100%; padding: 6px 8px; }
.sform .row.refine { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; padding-top: 12px; border-top: 1px solid var(--table-border); }
.sform .refine .cap { flex: 0 0 100%; font: 400 12px/16px var(--sans); color: var(--g700); margin-bottom: -4px; }
.sform .refine .fld { flex: 1 1 150px; max-width: 300px; }
.sform .refine .fld.period { flex: 0 1 170px; }
.sform .refine .lab { font-weight: 500; color: var(--g700); }
.sform .refine select { height: 36px; font-size: 14px; color: var(--ink); }
.fld select:disabled { background-color: var(--g100); color: var(--g600); cursor: not-allowed; }
.home-search { padding-top: 20px; padding-bottom: 24px; }

/* body two columns */
.wrapper { display: flex; justify-content: space-between; gap: 24px; }
.wrapper .main { width: 632px; min-width: 0; }
.wrapper .side { width: 304px; flex: none; }
.home-body { padding-top: 44px; padding-bottom: 24px; }
.map-card { background: var(--p100); border: 1px solid var(--pag-active); border-radius: 8px; padding: 24px 24px 16px; margin-bottom: 20px; }
.map-card h2 { font: 700 24px/30px var(--serif); margin-bottom: 12px; }
.map-area { padding: 0 60px; 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: left; }
.region-list li { padding: 3px 0; break-inside: avoid; }
.region-list .n { color: var(--g700); font-size: .9em; }
.region-list li.soon a { color: var(--g700); }
.map-area path { stroke: #fff; stroke-width: 1.15; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }
.map-area path:hover { fill: var(--p400); }
.map-area text { font: 700 11px var(--sans); fill: #3a3a3a; pointer-events: none; text-anchor: middle; }
.map-area text.n { font: 700 12px var(--sans); fill: var(--p900); }
.map-foot { display: flex; justify-content: flex-end; height: 67px; align-items: center; font: 400 12px/16px var(--sans); color: var(--g700); text-align: right; }
.map-area path.soon:hover { fill: #e2dac6; }
.map-area rect.inset { fill: none; stroke: #cfc8b4; 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: #8f8873; font-weight: 500; }
.map-credit { margin-top: 6px; font: 400 11px/14px var(--sans); color: var(--g700); text-align: right; }
.cities-sec { margin-bottom: 20px; }
.city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.city-card { display: block; padding: 14px 16px; border: 1px solid var(--input-border); border-radius: 8px; background: #fff; text-decoration: none; }
.city-card:hover { border-color: var(--p600); }
.city-card .kind { font: 500 11px/16px var(--sans); text-transform: uppercase; letter-spacing: .4px; color: var(--p600); }
.city-card h3 { font: 700 20px/26px var(--serif); color: var(--p900); margin: 2px 0 4px; }
.city-card p { font: 400 13px/18px var(--sans); color: var(--g700); }
.city-next { margin-top: 12px; font: 400 13px/20px var(--sans); color: var(--g700); }
.city-intro { margin: 0 0 16px; padding: 14px 16px; background: var(--p100); border: 1px solid var(--pag-active); border-radius: 8px; font: 400 14px/22px var(--sans); color: var(--ink); }
.city-intro .city-stats { margin-top: 6px; font-weight: 500; color: var(--p900); }

/* recent notices sidebar card (RIP.ie's featured list, without photos) */
.cta-list { position: relative; background: #fff; border-radius: 8px; }
.cta-head { position: relative; min-height: 32px; border-radius: 8px 8px 0 0; background: var(--grad-gold); padding: 0 16px; font: 700 13px/30px var(--sans); color: var(--p900); }
.cta-center { padding: 9px 12px; border-left: 1px solid var(--p500); border-right: 1px solid var(--p500); }
.cta-scroll { height: 690px; overflow-y: auto; }
.cta-scroll.short { height: auto; max-height: 350px; }
.cta-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 12px; min-height: 60px; border: 1px solid var(--g300); border-radius: 6px; background: #fff; text-decoration: none; }
.cta-item:first-child { margin-top: 0; }
.cta-item:hover { background: var(--row-hover); }
.cta-item .nm { display: block; font: 600 13px/17.6px var(--sans); color: var(--p600); }
.cta-item .loc { display: block; margin-top: 2px; font: 400 12px/15px var(--sans); color: var(--g700); }
.cta-item .when { text-align: right; font: 400 10px/12px var(--sans); color: var(--g700); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.cta-item .when b { display: block; font: 600 12px/16px var(--sans); color: var(--p900); text-transform: none; letter-spacing: 0; }
.cta-foot { padding: 10px; border: 1px solid var(--p500); border-top: 0; border-radius: 0 0 8px 8px; }  /* in flow: as tall as its buttons */
.cta-foot .btn { width: 100%; justify-content: space-around; }
.cta-foot .btn .ic { width: 14px; height: 14px; }

/* home: funeral-home directory teaser (RIP.ie's services band, reduced to the one category we have) */
.teaser { padding: 24px; display: grid; gap: 12px; justify-items: start; }
.teaser h2 { font: 700 24px/30px var(--serif); }
.teaser h3 { font: 700 16px/24px var(--serif); }
.teaser p { font: 400 14px/24px var(--sans); color: var(--ink); }
.teaser.small { padding: 16px; gap: 8px; margin-top: 16px; }

/* footer */
/* footer: a parchment band with the wordmark and the help line, four link groups, a slim dark bar */
footer.site { margin-top: 24px; background: var(--p200); border-top: 3px solid var(--p500); color: var(--ink); }
footer.site > .wrap { padding-top: 36px; padding-bottom: 36px; }
.fbrand { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--p400); }
.fid { max-width: 520px; }
.fid .logo { margin-bottom: 10px; }
.fid p { font: 400 13px/20px var(--sans); color: var(--p700); }
/* the invitation to funeral homes: in the footer, the listing sidebar and the directory */
.invite { flex: none; max-width: 400px; padding: 16px 18px; border: 1px solid var(--p400); border-radius: 8px; background: #fff; }
.invite h3 { font: 700 18px/24px var(--serif); color: var(--p900); margin-bottom: 4px; }
.invite p { font: 400 13px/20px var(--sans); color: var(--p700); margin-bottom: 12px; }
.invite .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.side .invite { max-width: none; margin-bottom: 16px; background: var(--p100); }
.side .invite .acts { flex-direction: column; } .side .invite .btn { width: 100%; }
/* two buttons: side by side when both fit, else one under the other, each full width (the Spanish and Polish labels
   are longer than half a 304px card; a nowrap button never shrinks below its label, so they ran past the card) */
.cta-foot.two { display: flex; flex-wrap: wrap; gap: 8px; } .cta-foot.two .btn { width: auto; flex: 1 1 auto; justify-content: center; height: auto; min-height: 40px; white-space: normal; text-align: center; }
.fcol a.mail { color: var(--p700); }
.fcols { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 24px 32px; min-width: 0; }
.fcol { min-width: 0; overflow-wrap: anywhere; }
.fcol h3 { font: 700 13px/18px var(--sans); letter-spacing: .3px; text-transform: uppercase; color: var(--p800); margin-bottom: 12px; }
.fcol ul { display: grid; gap: 9px; }
.fcol a { font: 400 14px/18px var(--sans); color: var(--ink); text-decoration: none; }
.fcol a:hover { color: var(--p700); text-decoration: underline; }
.fcol.places .cities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fcol.places .cities a { padding: 4px 10px; border: 1px solid var(--p400); border-radius: 14px; background: #fff; font: 600 13px/16px var(--sans); color: var(--p900); }
.fcol.places .cities a:hover { border-color: var(--p600); text-decoration: none; }
.fcol.places .regions { font: 400 13px/22px var(--sans); color: var(--p700); }
.fcol.places .regions a { font-size: 13px; }
.fbottom { background: var(--p900); color: var(--g300); font: 400 12px/16px var(--sans); }
.fbottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding-top: 12px; padding-bottom: 12px; }
.fbottom ul { display: flex; flex-wrap: wrap; gap: 4px 0; }
.fbottom li { display: flex; align-items: center; padding: 0 10px; border-left: 1px solid rgba(255, 255, 255, .25); }
.fbottom li:first-child { padding-left: 0; border-left: 0; }
.fbottom a { color: var(--g300); text-decoration: none; }
.fbottom a:hover { color: #fff; text-decoration: underline; }

/* ===== list page ===== */
.crumbs-wrap { background: var(--body); padding: 4px 0; box-shadow: inset 0 -1px 0 var(--p600); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; min-height: 32px; }
.crumbs li { display: flex; align-items: center; font: 400 12px/16px var(--sans); letter-spacing: .2px; color: var(--p900); }
.crumbs li a, .crumbs li span { padding: 8px; text-decoration: none; }
.crumbs li:first-child a { padding-left: 22px; position: relative; }
.crumbs li:first-child a::before { content: ""; position: absolute; left: 4px; top: 9px; width: 14px; height: 14px; 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-right: 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: #8f6f31; text-decoration: underline; max-width: 100%; }
.crumbs li.active span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip { box-shadow: inset 0 -1px 0 var(--p600); }
.strip.srch { padding: 20px 0 24px; }  /* padding, not a margin on the card: a margin would collapse out and leave the rule flush under the card */
.list-body { padding: 40px 0; }
.list-h { display: flex; justify-content: space-between; margin-bottom: 8px; }
.list-h h1 { font: 700 24px/30px var(--serif); color: var(--p900); }
.list-body .lead { font: 400 14px/22px var(--sans); color: var(--g700); margin-bottom: 8px; }
.list-tools { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
.list-tools .count { font: 400 12px/18px var(--sans); color: var(--g700); }
.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin: 16px 0; }
.filters .fld { width: 220px; }
.filters .chk { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/18px var(--sans); color: var(--p900); cursor: pointer; }
.filters .chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--p600); }
/* 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 (the fixed pixel columns of the old flex grid,
   tuned for Polish, overflowed in Spanish: "próximamente", "Fecha de alta", "Esquelas (30 días)"); 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 */
.nt { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 4px 4px 0 0; }
.nt th { padding: 8px 10px; background: var(--grad-gold); border-bottom: 1px solid rgba(0, 0, 0, .12); font: 700 12px/16px var(--sans); color: var(--p900); text-align: left; vertical-align: middle; white-space: nowrap; }
.nt th:first-child { border-radius: 4px 0 0 0; } .nt th:last-child { border-radius: 0 4px 0 0; }
.nt th a { display: inline-flex; align-items: center; gap: 3px; color: inherit; text-decoration: none; }
.nt th a:hover { text-decoration: underline; }
.nt th svg { width: 16px; height: 16px; opacity: .45; } .nt th[aria-sort] svg { opacity: 1; }
.nt td { padding: 9px 10px; border-bottom: 1px solid var(--table-border); font: 500 13px/17px var(--sans); color: var(--p900); vertical-align: top; }
.nt tbody tr:hover td { background: var(--row-hover); }
.nt a.nm { font: 400 14px/18px var(--sans); color: var(--p600); text-decoration: none; }
.nt a.nm b { font-weight: 700; }
.nt a.nm:hover { text-decoration: underline; }
.nt .flag { display: inline-block; padding: 2px 6px; border-radius: 3px; background: var(--p200); border: 1px solid var(--p400); font: 600 10px/12px var(--sans); color: var(--p800); }
.nt .flag.chg { background: #ffeaea; border-color: #f3c3c3; color: #a33; }
.nt td.name .flag { display: block; width: max-content; margin-top: 4px; }  /* under the name, not beside it */
.nt .pill { display: inline-block; margin-left: 4px; padding: 2px 9px; border: 1px solid var(--p400); border-radius: 10px; background: var(--p100); font: 600 11px/14px var(--sans); color: var(--p800); text-decoration: none; white-space: nowrap; vertical-align: 1px; }
.nt .pill:hover { background: var(--p200); }
.nt td.place { white-space: nowrap; }  /* 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 .sub { display: block; margin-top: 2px; font: 400 11px/14px var(--sans); color: var(--g700); }
.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-right: 10px; font: 600 12px/16px var(--sans); color: var(--p700); white-space: nowrap; }
.nt td.acts form { display: inline; }
.nt td.acts button { background: none; border: 0; padding: 0; cursor: pointer; }
.nt td.acts button.del { color: #a33; }
.nt td.fu .when { white-space: nowrap; }
.nt td.fu.past { color: var(--g700); font-weight: 400; } .nt td.fu.past b { font-weight: 400; }
.nt .soon { display: block; width: max-content; margin-top: 3px; padding: 1px 7px; border-radius: 10px; background: var(--p500); font: 700 11px/16px var(--sans); color: #fff; letter-spacing: .3px; }
.nt .tbc { font: italic 400 13px/17px var(--sans); color: var(--g700); }
.nt td.added { font-weight: 400; color: var(--g700); white-space: nowrap; }
.nt td.empty { padding: 32px; text-align: center; color: var(--g700); }
.pager { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 3px 6px; background: var(--p500); border-radius: 0 0 4px 4px; box-shadow: 0 3px 6px rgba(80, 60, 5, .2); }
.pager .arr { width: 26px; height: 26px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.pager .arr svg { width: 26px; height: 26px; fill: none; stroke: var(--p900); stroke-width: 2.2; }
.pager .arr:disabled { opacity: .35; cursor: default; }
.pager ul { display: flex; }
.pager li { width: 26px; height: 26px; margin: 0 1px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 400 12px/16px var(--sans); color: var(--p900); cursor: pointer; }
.pager li.on { font-weight: 700; background: var(--pag-active); }
.pager li.dots { cursor: default; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--table-border); border-top: 0; }
.tiles .cta-item { margin: 0; }
.side-title { font: 700 20px/30px var(--serif); color: var(--p800); margin-bottom: 8px; }
.sd-item { display: grid; grid-template-columns: 25px 1fr 62px; align-items: center; min-height: 48px; padding-top: 6px; padding-bottom: 6px; margin-bottom: 8px; padding: 0 12px 0 14px; border: 1px solid var(--input-border); border-radius: 6px; background: #fff; text-decoration: none; }
.sd-item svg { width: 16px; height: 20px; }
.sd-item b { font: 700 13px/16px var(--sans); color: var(--p900); margin-right: 8px; }
.sd-item b small { display: block; font: 400 11px/14px var(--sans); color: var(--g700); }
.sd-item.on { border-color: var(--p500); background: var(--p100); }
.sd-item .cnt { justify-self: end; min-width: 32px; padding: 4px 8px; border: 1px solid var(--pag-active); border-radius: 4px; background: var(--grad-light); font: 700 12px/16px var(--sans); color: var(--p800); text-align: center; }
.side-block { margin-bottom: 16px; }
.side-block .btn .ic { width: 14px; height: 14px; margin: 0 0 0 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: 6px 8px; margin: 0 0 16px; }
.facets .lb { font: 600 12px/16px var(--sans); color: var(--g700); margin-right: 2px; }
.facets a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--input-border); border-radius: 16px; background: #fff; font: 500 13px/16px var(--sans); color: var(--p900); text-decoration: none; }
.facets a:hover { border-color: var(--p600); }
.facets a.on { background: var(--grad-gold); border-color: var(--p500); }
.facets a b { font: 400 12px/16px var(--sans); color: var(--g700); }
.facets a.on b { color: var(--p800); }
.list-tools .period { font: 400 12px/18px var(--sans); color: var(--g700); }

/* ===== notice page ===== */
.qsearch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 0; }
.qsearch .fld { flex: 1 1 240px; max-width: 360px; }
.qsearch .btn .ic { width: 18px; height: 18px; }
.qsearch .fld input { padding-left: 34px; background: #fff 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>") no-repeat 10px center / 16px; }
.qsearch .adv { font: 600 13px/16px var(--sans); color: var(--p700); }
.center { display: grid; grid-template-columns: 697.5px 232.5px; gap: 25px 30px; padding: 40px 0; }
.dn { padding: 16px 20px; display: grid; gap: 20px; }
.dn-main { display: grid; gap: 16px; }
.dn-head { min-width: 0; padding-top: 4px; }
.dn-head .occ { font: 700 15px/22px var(--serif); color: var(--p700); }
.dn-head h1 { font: 700 26px/32px var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.dn-head h1 .nee { font-weight: 400; font-size: 18px; color: var(--p900); }
/* the action row: printable notice, WhatsApp, share, save; icons over short labels, in a line that wraps */
.socials { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--table-border); }
.socials button, .socials a.soc { display: grid; justify-items: center; gap: 4px; min-width: 56px; background: none; border: 0; cursor: pointer; padding: 0; font: 400 11px/16px var(--sans); letter-spacing: .2px; color: var(--p900); text-decoration: none; }
.socials svg { width: 16px; height: 16px; }
.socials a.share-wa:hover { color: #1a7f4b; }
.socials button:hover, .socials a.soc:hover { color: var(--p700); }
.tags { display: flex; flex-wrap: wrap; margin-top: 4px; }
.tag { padding: 4px; margin: 4px 4px 4px 0; font: 500 14px/16px var(--sans); letter-spacing: .2px; color: var(--p700); }
a.tag { text-decoration: none; }
a.tag:hover { text-decoration: underline; }
.tag.flag { border: 1px solid var(--p400); border-radius: 4px; background: var(--p200); color: var(--p800); font-weight: 600; }
.desc { font: 400 16px/28px var(--serif); color: var(--p900); }
.desc p { margin: 0 0 28px; }
.desc p:last-child { margin-bottom: 0; }
.desc a { color: var(--p500); }
/* the funeral panel: the day, the time large, the place, directions and the calendar */
.funeral { padding: 14px 16px 16px; border-radius: 6px; border: 1px solid var(--p400); background: var(--p100); }
.funeral.past { background: var(--g100); border-color: var(--g300); }
.funeral.past .lb, .funeral.past .when b { color: var(--g700); }
.funeral.past .when b { border-color: var(--g300); }
.funeral .fh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; }
.funeral .lb { font: 700 12px/16px var(--sans); letter-spacing: .6px; text-transform: uppercase; color: var(--p700); }
.funeral .soon { padding: 2px 8px; border-radius: 10px; background: var(--p500); font: 700 11px/16px var(--sans); color: #fff; letter-spacing: .3px; }
.funeral .when { font: 700 20px/28px var(--serif); color: var(--ink); }
.funeral .when::first-letter { text-transform: uppercase; }
.funeral .when b { margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #fff; border: 1px solid var(--p400); font: 700 18px/26px var(--sans); color: var(--p800); white-space: nowrap; }
.funeral .where { margin-top: 6px; font: 400 15px/24px var(--sans); color: var(--p900); }
.funeral .later { font: 600 15px/24px var(--sans); color: var(--p900); }
.funeral .go { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.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: 700 13px/19px var(--sans); color: var(--p600); margin-bottom: 4px; }
.dates .vl { font: 400 14px/17px var(--sans); color: var(--p900); }
.fd { position: relative; display: grid; grid-template-columns: 204px 1fr; gap: 0 26px; min-height: 202px; margin-top: 50px; padding: 17px 16px 16px; overflow: hidden; }
.fd::after { content: "i"; position: absolute; right: 8px; bottom: -22px; width: 121px; height: 122px; border-radius: 50%; border: 1px solid var(--p200); background: #fff; font: 700 86px/122px var(--serif); color: var(--p200); text-align: center; pointer-events: none; }
.fd h2 { grid-column: 1 / -1; font: 700 20px/30px var(--serif); color: var(--p900); }
.fd .addr { display: grid; gap: 4px; align-content: start; }
.fd .addr div { font: 400 14px/24px var(--sans); color: var(--p700); }
.fd .contact { display: grid; gap: 10px; align-content: start; padding-top: 10px; }
.fd .contact span { position: relative; padding-left: 27px; font: 400 14px/17px var(--sans); color: var(--p900); }
.fd .contact > span > svg { position: absolute; left: 0; top: 0; width: 16px; height: 16px; color: var(--p600); }
.fd .contact a { color: inherit; }
.fd .contact .srcbtn { justify-self: start; margin-top: 6px; }
.fd .note { grid-column: 1 / -1; position: relative; z-index: 1; margin-top: 16px; padding-right: 130px; font: 400 13px/20px var(--sans); color: var(--g700); }
.fd .note.remove { margin-top: 6px; }
.fd .note.remove a { color: inherit; text-decoration: underline; }
/* a collected notice's source: name, place and platform in two lines, the link out, the removal note, the claim box */
.src { margin-top: 24px; padding: 16px 20px; display: grid; gap: 12px; }
.src h2 { font: 700 18px/26px var(--serif); color: var(--p900); }
.src .meta { font: 400 13px/20px var(--sans); color: var(--g700); }
.src .meta a { color: var(--p700); }
.src .srcbtn { justify-self: start; }
.src .note { font: 400 13px/20px var(--sans); color: var(--g700); }
.src .note a { color: inherit; text-decoration: underline; }
.src .claim { margin-top: 0; }
.rail .cta-scroll.short { height: auto; max-height: 430px; }

/* about page */
.about-body { padding: 40px 0; }
.about { padding: 8px 32px 24px; max-width: 760px; }
.about h1 { font: 700 24px/30px var(--serif); padding: 16px 0; }
.about section { padding: 20px 0; border-top: 1px solid var(--table-border); scroll-margin-top: 90px; }
.about h2 { font: 700 20px/28px var(--serif); margin-bottom: 8px; }
.about p, .about li { font: 400 15px/26px var(--sans); color: var(--ink); }
.about p + p, .about ul + p { margin-top: 8px; }
.about ul { list-style: disc; padding-left: 20px; margin: 4px 0 8px; }
.toast { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 70; padding: 9px 14px; border-radius: 4px; background: var(--g900); color: #fff; font-size: 13px; }
/* Google Analytics consent banner (only when GA_MEASUREMENT_ID is set) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 600px; margin: 0 auto; padding: 16px 20px; background: #fff; border: 1px solid var(--input-border); border-radius: 4px; box-shadow: var(--shadow-bar); }
.consent p { font: 400 14px/22px var(--sans); color: var(--ink); }
.consent a { color: var(--blue); }
.consent .row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 12px; }

/* ===== responsive: rip.ie switches to the mobile layout below 1240px ===== */
@media (max-width: 1240px) {
  .hide-m { display: none !important; } .show-m { display: block; }
  .shell { padding-top: 60px; }
  .bar { height: 60px; }
  .logo .mark { width: 24px; height: 30px; } .logo .word { font-size: 20px; } .logo .tag { display: none; }
  nav.links, .actions { display: none; }
  .langs.codes ~ .menu-btn { margin-left: 0; }
  .menu-btn { position: relative; margin-left: auto; width: 56px; height: 60px; background: none; border: 0; cursor: pointer; display: grid; justify-items: center; align-content: center; gap: 4px; font: 600 11px/14px var(--sans); color: var(--heading-contrast); }
  .menu-btn i { display: block; width: 18px; height: 14px; background: linear-gradient(var(--heading-contrast) 0 2px, transparent 2px 6px, var(--heading-contrast) 6px 8px, transparent 8px 12px, var(--heading-contrast) 12px 14px); }
  .totop { width: 36px; height: 36px; right: 16px; bottom: 35px; }
  .wrap { padding: 0 16px; }
  .band { padding-top: 20px; background-size: 100% 300px; }
  .band::before, .band::after { width: 260px; height: 165px; background-size: 260px 165px; }
  .home-search { margin-top: 28px; padding-top: 0; }
  .search-box h1 { font-size: 20px; line-height: 24px; }
  /* phones: 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 { 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%; }
  .search-box .clear span { display: none; }
  .wrapper { flex-direction: column; }
  .wrapper .main, .wrapper .side { width: 100%; }
  .home-body { padding-top: 0; }
  .home-body .main { display: contents; }
  .home-body .map-card { order: 0; } .home-body .side { order: 1; } .home-body .teaser { order: 2; }
  .map-card { padding: 16px 20px 12px; }
  .map-card h2 { font-size: 20px; text-align: center; margin-bottom: 16px; }
  .map-area { padding: 0; }
  .cta-scroll { height: 560px; }
  .side .cta-list { margin-bottom: 40px; }
  footer.site > .wrap { padding-top: 28px; padding-bottom: 28px; }
  .fbrand { flex-direction: column; }
  .invite { max-width: none; }
  .fcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 20px; }
  .fcol.places { grid-column: 1 / -1; }
  .fbottom .wrap { justify-content: center; text-align: center; }
  .list-body { padding: 24px 0; }
  .list-h { flex-direction: column; gap: 8px; }
  .list-h h1 { text-align: center; }
  .filters .fld { width: auto; flex: 1 1 150px; }
  .nt td { padding: 8px; } .nt th { padding: 7px 8px; }
  .center { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
  .dn { padding: 16px; }
  .dn-main, .dn-main.pic { grid-template-columns: 1fr; gap: 16px; }
  .dn-main.pic .frame { justify-self: center; }
  .dn-head { text-align: center; }
  .dn-head h1 { font-size: 24px; line-height: 30px; }
  .tags { justify-content: center; }
  .socials { justify-content: center; gap: 8px 20px; }
  .dn .sympathy .row { flex-direction: row; }
  .dn .sympathy .row > * { flex: 1 1 0; }
  .funeral .when { font-size: 18px; line-height: 26px; }
  .dates { grid-template-columns: 1fr 1fr; gap: 12px; }
  .src { padding: 16px; }
  .src .srcbtn { justify-self: stretch; }
  /* 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: right; }
  .fd { grid-template-columns: 1fr; margin-top: 24px; }
  .fd h2 { grid-column: 1; }
  .fd .contact { padding-top: 12px; }
  .fd .note { padding-right: 0; }
  .about-body { padding: 24px 0; }
  .about { padding: 0 16px 16px; }
  .about section { scroll-margin-top: 80px; }
}
@media (max-width: 600px) {
  .crumbs li:not(:first-child):not(:nth-last-child(-n+2)) { display: none; }
  .crumbs li a, .crumbs li span { padding: 8px 4px; }
  .crumbs li:first-child a { padding-left: 20px; }
  .dates { grid-template-columns: 1fr 1fr; }
  /* the phone keeps name, town and funeral in the listing (the funeral header, now the last one shown, takes the corner),
     name, town and count in the directory, name, town and date among family notices; the panel drops the day added and
     the account's alerts their frequency */
  .nt .added, .nt .online, .nt.fam .type, .nt .freq { display: none; } .nt th.fu:nth-last-child(2) { border-radius: 0 4px 0 0; }
  .nt td { padding: 8px 6px; font-size: 12px; } .nt th { padding: 6px; font-size: 11px; white-space: normal; } .nt a.nm { font-size: 13px; } .nt .tbc { font-size: 12px; }
  .nt td.acts a, .nt td.acts button { white-space: normal; } .nt td.status .st { white-space: normal; }  /* the panel's four columns fit once its labels wrap */
}

.drawer .dbtns { display: grid; gap: 16px; padding: 16px 0 24px; }
.drawer .dbtns .btn-pri { border-radius: 0; }
.drawer .dbtns .btn-sec { margin: 0 16px; }

/* ===== sidebar lists with thumbnails (rip.ie featured list) and the family-notices variant ===== */
.cta-item { grid-template-columns: 58px 1fr auto; padding: 8px 12px 8px 8px; min-height: 72px; }
.cta-item.nopic { grid-template-columns: 1fr auto; padding: 10px 12px; min-height: 60px; }
.cta-item .ph { width: 56px; height: 56px; padding: 2px; border: 1px solid var(--g300); background: linear-gradient(160deg, #ece7d8, #d9d2bd); display: grid; place-items: center; overflow: hidden; }
.cta-item .ph svg { width: 36px; height: 44px; }
.cta-item .ph img { width: 100%; height: 100%; object-fit: cover; }
.cta-item .ph.auto { background: var(--g100); } .cta-item .ph.auto svg { width: 28px; height: 28px; }
.cta-item .nm.fn { font-weight: 400; color: var(--fn-name); line-height: 19px; }
.cta-item .nm .star { color: var(--p500); margin-right: 4px; }
.cta-head.dark { background: radial-gradient(50% 2949%, #636971 0, #494e54 100%); color: #fff; font: 700 16px/32px var(--serif); text-align: center; min-height: 51px; padding-top: 8px; }
.cta-head.dark::before { content: ""; display: block; height: 10px; margin: 2px auto -4px; width: 80px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='12' viewBox='0 0 80 12' fill='none' stroke='%23fff' stroke-width='1'><path d='M2 6c10-6 20 6 30 0s20-6 28 0 10 6 18 0M30 6c3-3 6-3 10 0-4 3-7 3-10 0z'/></svg>") no-repeat center; }
.cta-list.fn .cta-center, .cta-list.fn .cta-foot { border-color: var(--heading-contrast); }
.cta-list + .cta-list, .side-block + .cta-list { margin-top: 16px; }

/* ===== home: family-notices section, grey banner, funeral-home band ===== */
.fam-sec { margin-bottom: 40px; }
.fam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fam-card { display: block; padding: 16px; border: 1px solid var(--input-border); border-radius: 8px; background: #fff; text-decoration: none; }
.fam-card .kind { font: 500 11px/16px var(--sans); text-transform: uppercase; letter-spacing: .4px; color: var(--p600); }
.fam-card h3 { font: 700 18px/26px var(--serif); color: var(--p900); margin: 4px 0; }
.fam-card p { font: 400 13px/20px var(--sans); color: var(--g700); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fam-card .meta { margin-top: 8px; font: 500 11px/16px var(--sans); text-transform: uppercase; color: var(--ink); }
.grey { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; min-height: 125px; padding: 20px 54px; border-radius: 4px; margin: 0 0 40px;
  background: radial-gradient(60% 120% at 50% 0, #5c626a 0, #474c52 60%, #40454b 100%); }
.grey::after { content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60' fill='none' stroke='%23fff' stroke-width='.6'><path d='M0 30c20-20 40 20 60 0s40-20 60 0M0 10c20-20 40 20 60 0s40-20 60 0M0 50c20-20 40 20 60 0s40-20 60 0'/></svg>"); }
.grey .ln { position: absolute; background: var(--p400); }
.grey .ln.tl { top: 7px; right: 19px; width: 30px; height: 1px; } .grey .ln.rl { top: 19px; right: 7px; width: 1px; height: 30px; }
.grey .ln.bl { bottom: 7px; left: 19px; width: 30px; height: 1px; } .grey .ln.ll { bottom: 19px; left: 7px; width: 1px; height: 30px; }
.grey .orn { position: absolute; width: 30px; height: 30px; fill: var(--p400); }
.grey .orn.tr { top: 9px; right: 7px; } .grey .orn.bl2 { bottom: 9px; left: 7px; transform: rotate(180deg); }
.grey .txt { padding-right: 10px; z-index: 1; }
.grey .txt h2 { font: 700 24px/30px var(--serif); color: var(--p400); }
.grey .txt p { font: 400 14px/24px var(--sans); color: var(--p100); }
.grey .btn { z-index: 1; }
.fdband { background: #fff; padding: 48px 0; }
.fdband h3 { font: 700 32px/40px var(--serif); color: var(--p900); }
.fdband .sub { margin-top: 12px; font: 400 16px/28px var(--serif); color: var(--service-title); max-width: 720px; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0 24px; }
.benefit { padding: 20px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--p100); }
.benefit svg { width: 36px; height: 36px; margin-bottom: 12px; }
.benefit b { display: block; font: 700 15px/22px var(--sans); color: var(--p900); margin-bottom: 6px; }
.benefit p { font: 400 13px/20px var(--sans); color: var(--g700); }
.fdband .ctas { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.fdband .ctas .note { font: 400 13px/20px var(--sans); color: var(--g700); margin-left: auto; }

/* ===== notice page: photo frame, seal, sympathy row, condolence book, rail promo ===== */
.dn-main.pic { grid-template-columns: 220px 1fr; gap: 28px; }
.frame { margin-top: -32px; width: 220px; padding: 15px; border: 1px solid #d2bd7c; border-radius: 6px; background: var(--grad-light); box-shadow: 0 3px 6px rgba(0, 0, 0, .25); }
.frame .photo { width: 188px; height: 282px; background: linear-gradient(170deg, #f4f6ea 0, #e7ead6 55%, #d8dcc2 100%); display: grid; place-items: center; overflow: hidden; }
.frame .photo svg { width: 120px; height: 150px; }
.frame .photo img { width: 100%; height: 100%; object-fit: cover; }
.frame.small { margin: 0; width: 150px; padding: 8px; } .frame.small .photo { width: 132px; height: 176px; } .frame.small .photo svg { width: 80px; height: 100px; }
.dn-main.pic .dn-head { align-self: center; }
.dn-head .kind { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--p400); background: var(--p200); font: 600 11px/16px var(--sans); color: var(--p800); }
.dn-head .kind.auto { border-color: var(--g300); background: var(--g100); color: var(--g700); }
.dn-head .kind svg { width: 12px; height: 12px; }
.fd.verified { grid-template-columns: 204px 1fr 102px; }
.fd .seal { grid-column: 3; align-self: start; justify-self: end; z-index: 1; width: 70px; height: 70px; border-radius: 50%; border: 2px solid var(--p500); background: #fff; display: grid; place-items: center; text-align: center; font: 700 9px/11px var(--sans); color: var(--p700); padding: 6px; }
.fd .claim { grid-column: 1 / -1; position: relative; z-index: 1; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--p400); border-radius: 6px; background: var(--p100); font: 400 13px/20px var(--sans); color: var(--p900); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.sympathy { margin-top: 50px; display: flex; flex-direction: column; gap: 24px; }
.dn .sympathy { margin: -6px 0 0; }
.dn .sympathy .row { gap: 12px; }
.dn .sympathy .row > * { flex: 0 1 240px; }
.sympathy .ttl { display: flex; align-items: center; margin-bottom: 16px; }
.sympathy .ttl span { width: 50%; text-align: center; font: 700 24px/30px var(--serif); color: var(--p900); }
.sympathy .ttl i { flex: 1; border-top: 1px solid var(--input-border); }
.sympathy .row { display: flex; justify-content: space-between; gap: 24px; }
.sympathy .row > * { flex: 1; }
.btn.lit { background: linear-gradient(180deg, #fff6d6, #f5e4a8); border-color: var(--p500); }
.cond { padding: 16px 20px; display: grid; gap: 12px; margin-top: 24px; }
.cond h2 { font: 700 20px/30px var(--serif); }
.cond .note { padding: 8px 12px; border-radius: 4px; background: var(--p200); border: 1px solid var(--p400); font-size: 13px; }
.cond ul li { padding: 12px 0; border-top: 1px solid var(--table-border); }
.cond ul .who { font: 700 13px/18px var(--sans); color: var(--p900); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cond ul .who span { font-weight: 400; color: var(--g700); }
.cond ul p { font: 400 15px/24px var(--serif); color: var(--p900); }
.cond ul time { font: 400 11px/16px var(--sans); color: var(--g700); }
.cond ul .rep { margin-left: auto; font: 400 11px/16px var(--sans); color: var(--g700); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.cond .empty { font: 400 13px/20px var(--sans); color: var(--g700); }
.cond .acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* condolence book page (RIP.ie layout: header card, "add" button, entry cards) */
.cbook-head { padding: 24px 20px; display: grid; gap: 10px; text-align: center; justify-items: center; }
.cbook-head h1 { font: 700 26px/34px var(--serif); color: var(--p900); }
.cbook-head h1 span { display: block; }
.cbook-head .who { font: 700 26px/34px var(--serif); color: var(--p500); }
.cbook-head .who .nee { font-weight: 400; font-size: 20px; }
.cbook-head .where { font: 500 15px/20px var(--sans); color: var(--p700); }
.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: 8px; }
.cbook-head .socials { position: static; grid-template-columns: auto auto; gap: 24px; }
.cbook-head .media:not(.nophoto) .socials { grid-template-columns: auto; }
.cbook .info { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--blue); border-radius: 6px; background: #eef4fb; font: 400 14px/20px var(--sans); color: var(--ink); }
.cbook .info svg { width: 18px; height: 18px; color: var(--blue); grid-row: span 2; margin-top: 1px; }
.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: 20px 0 12px; }
.cbook .sort select { border: 1px solid var(--input-border); border-radius: 4px; padding: 8px 36px 8px 12px; font: 400 15px/20px var(--sans); background: #fff 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>") 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(--input-border); border-radius: 8px; box-shadow: 0 2px 0 rgba(61,50,14,.08); padding: 18px 20px 14px; }
.cbook .entry .txt { font: 400 17px/26px var(--serif); color: var(--p900); overflow-wrap: anywhere; }
.cbook .entry .foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.cbook .entry .rep { font: 400 12px/16px var(--sans); color: var(--g700); text-decoration: underline; flex: none; }
.cbook .entry .sig { font: italic 400 16px/22px var(--serif); color: var(--p700); text-align: right; margin-left: auto; }
.cbook .entry.mine { border-style: dashed; }
.cbook .entry.empty p { font: 400 14px/20px var(--sans); color: var(--g700); }
.cbook-head, .cbook .cond, #condolences, .sympathy { scroll-margin-top: 84px; } /* anchors clear the fixed mobile 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; }
.cond .off { font: 400 13px/20px var(--sans); color: var(--g700); }
.st { display: inline-block; padding: 2px 6px; border-radius: 3px; font: 600 10px/12px var(--sans); white-space: nowrap; }
.st.pend { background: #fff6d6; border: 1px solid var(--p400); color: var(--p800); }
.st.ok { background: #e8f3e8; border: 1px solid #b8d8b8; color: #2a6a2a; }
.st.auto { background: var(--g100); border: 1px solid var(--g300); color: var(--g700); }
.st.chg { background: #ffeaea; border: 1px solid #f3c3c3; color: #a33; }
.rail .banner { padding: 6px; border-radius: 8px; background: radial-gradient(50% 50%, #fbf8f4 0, #fff 100%); margin-bottom: 16px; }
.rail .tree { height: 150px; margin: -6px -6px 8px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #dcba50, #d0ab32); position: relative; overflow: hidden; clip-path: ellipse(90% 100% at 50% 0); }
.rail .tree svg { position: absolute; left: 50%; top: 14px; width: 150px; height: 140px; transform: translateX(-50%); fill: #c5a132; }
.rail .inner { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--p200); border-radius: 7px; }
.rail .inner h3 { font: 700 16px/24px var(--serif); color: var(--p900); text-align: center; }
.rail .inner p { font: 400 14px/24px var(--sans); color: var(--ink); text-align: center; }

/* ===== forms, pages with a single card (login, alert, add family notice, account, panel) ===== */
.page { padding: 40px 0; }
.page .card { padding: 24px 32px 28px; }
.page .card > h1 { font: 700 24px/30px var(--serif); margin-bottom: 8px; }
.page .lead { font: 400 14px/22px var(--sans); color: var(--g700); margin-bottom: 20px; }
.narrow { max-width: 560px; margin: 0 auto; }
.frm { display: grid; gap: 14px; }
.picture-read { background: var(--p100); border: 1px solid var(--p400); border-radius: 6px; padding: 14px 16px; margin: 0 0 18px; }
.picture-read .acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.frm .f { display: grid; gap: 4px; font: 700 12px/16px var(--sans); color: var(--p900); min-width: 0; }
.frm .f input, .frm .f select, .frm .f textarea { width: 100%; border: 1px solid var(--input-border); border-radius: 4px; padding: 8px 12px; font: 400 14px/20px var(--sans); background: #fff; min-height: 40px; }
.frm .f select { padding-right: 32px; appearance: none; -webkit-appearance: none; background: #fff 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>") no-repeat right 12px center; }
.frm .f input[type=file] { padding: 7px 12px; }
.frm .f.chk { grid-template-columns: auto 1fr; align-items: center; gap: 10px; font-weight: 500; font-size: 13px; cursor: pointer; }
.frm .f.chk input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--p600); }
.frm .f .hint { font: 400 12px/16px var(--sans); color: var(--g700); }
.frm .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frm .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.frm h3 { font: 700 16px/24px var(--serif); color: var(--p900); margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--table-border); }
.frm .acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.frm .acts a { font: 500 13px/18px var(--sans); color: var(--g700); }
.frm .err { color: #a33; font: 500 13px/18px var(--sans); }
.frm .photo-up { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; }
.msg { padding: 12px 16px; border-radius: 6px; border: 1px solid var(--p400); background: var(--p200); font: 400 14px/22px var(--sans); color: var(--p900); }
.msg.ok { border-color: #b8d8b8; background: #eef7ee; }
.tabs { display: flex; border-bottom: 1px solid var(--input-border); margin-bottom: 20px; }
.tabs a { padding: 10px 16px; font: 600 14px/18px var(--sans); color: var(--g700); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--p900); border-color: var(--p500); }
.sections > section { padding: 24px 0; border-top: 1px solid var(--table-border); }
.sections > section:first-child { border-top: 0; padding-top: 0; }
.sections h2 { font: 700 20px/28px var(--serif); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sections h2 .btn { font-weight: 600; }
.tiles.flat { border: 0; padding: 0; background: none; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0 28px; }
.stat { padding: 14px 16px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--p100); }
.stat b { display: block; font: 700 26px/32px var(--serif); color: var(--p900); }
.stat span { font: 500 12px/16px var(--sans); color: var(--g700); }
.phead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; }
.phead h1 { font: 700 24px/30px var(--serif); }
.phead .who { font: 400 13px/18px var(--sans); color: var(--g700); }
.phead .acts { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.rail .cta-item { grid-template-columns: 44px 1fr auto; gap: 8px; padding: 8px; min-height: 60px; }
.rail .cta-item .ph { width: 42px; height: 42px; } .rail .cta-item .ph svg { width: 26px; height: 32px; } .rail .cta-item .ph.auto svg { width: 22px; height: 22px; }
.hero { display: grid; grid-template-columns: 1fr 304px; gap: 24px; align-items: center; margin-bottom: 40px; }
.hero h1 { font: 700 32px/40px var(--serif); color: var(--p900); margin-bottom: 12px; }
.hero p { font: 400 16px/26px var(--sans); color: var(--ink); margin-bottom: 20px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.step { position: relative; padding: 20px 20px 20px 64px; border: 1px solid var(--input-border); border-radius: 8px; background: #fff; }
.step i { position: absolute; left: 16px; top: 18px; width: 36px; height: 36px; border-radius: 50%; background: var(--grad-gold); font: 700 16px/36px var(--serif); color: var(--p900); text-align: center; font-style: normal; }
.step b { display: block; font: 700 15px/22px var(--sans); color: var(--p900); margin-bottom: 4px; }
.step p { font: 400 13px/20px var(--sans); color: var(--g700); }
.faq dt { font: 700 14px/22px var(--sans); color: var(--p900); margin-top: 14px; }
.faq dd { margin: 2px 0 0; font: 400 14px/22px var(--sans); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chips a { padding: 6px 12px; border: 1px solid var(--input-border); border-radius: 16px; background: #fff; font: 500 12px/16px var(--sans); color: var(--p900); text-decoration: none; }
.chips a.on { background: var(--grad-gold); border-color: var(--p500); }
.fam-head .kind { font: 500 12px/16px var(--sans); text-transform: uppercase; letter-spacing: .4px; color: var(--p600); }
.fam-head h1 { font: 700 24px/30px var(--serif); color: var(--ink); margin: 4px 0; }
.fam-head .sub { font: 500 14px/20px var(--sans); color: var(--p700); }
.event { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 12px 16px; border: 1px solid var(--p400); border-radius: 6px; background: var(--p200); }
.event .lb { font: 700 12px/16px var(--sans); color: var(--p600); } .event .vl { font: 400 14px/20px var(--sans); color: var(--p900); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.inline-link { font: 500 13px/18px var(--sans); color: var(--p700); }

@media (max-width: 1240px) {
  .cta-scroll { height: 560px; }
  .grey { flex-direction: column; justify-content: flex-start; align-items: center; min-height: 132px; padding: 20px 20px 12px; text-align: center; margin-bottom: 16px; }
  .grey .ln.tl, .grey .ln.bl { width: calc(100% - 29px); } .grey .ln.rl, .grey .ln.ll { height: calc(100% - 29px); }
  .grey .txt { padding: 0 0 12px; }
  .grey .txt h2 { font-size: 20px; }
  .grey .btn { height: 32px; padding: 6px 15.5px; }
  .home-body .cities-sec { order: 1; } .home-body .fam-sec { order: 2; } .home-body .grey { order: 3; }
  .fam-grid { grid-template-columns: 1fr; }
  .city-grid { grid-template-columns: 1fr; }
  .fdband { padding: 32px 0; }
  .fdband h3 { font-size: 22px; line-height: 30px; }
  .benefits { grid-template-columns: 1fr; gap: 12px; }
  .fdband .ctas .note { margin-left: 0; width: 100%; }
  .dn-main.pic { grid-template-columns: 1fr; gap: 16px; }
  .frame { margin: 0 auto; }
  .fd.verified { grid-template-columns: 1fr; }
  .fd .seal { grid-column: 1; justify-self: start; margin-top: 8px; }
  .sympathy { margin-top: 24px; }
  .dn .sympathy { margin-top: -6px; }
  .sympathy .ttl span { width: 100%; font-size: 28px; line-height: 34px; }
  .sympathy .ttl i { display: none; }
  .sympathy .row { flex-direction: column; gap: 16px; }
  .rail .banner { display: grid; grid-template-columns: 100px 1fr; gap: 8px; }
  .rail .tree { height: 100%; margin: 0; border-radius: 6px; clip-path: none; }
  .rail .tree svg { width: 90px; height: 90px; top: 6px; }
  .rail .inner { border: 0; }
  .page { padding: 24px 0; }
  .page .card { padding: 16px; }
  .frm .row, .frm .row3 { grid-template-columns: 1fr; }
  .frm .photo-up { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .event { grid-template-columns: 1fr; }
}

/* site-only additions (not in the prototype) */
.toast.error { background: #7a1f1f; }
.toast.success { background: var(--g900); }

/* consent / terms line under forms that collect personal data */
.legal-note { font-size: 12px; color: #6b6455; 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 16px; padding: 12px 14px; border: 1px dashed var(--p400); border-radius: 6px; background: var(--p100); font: 400 14px/21px var(--sans); color: var(--p900); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.home-claim p { margin: 0; flex: 1 1 320px; }