/* Лиора / Liora: modern funeral home in Varna with private live streaming of the ceremony.
 * Dark midnight ink, soft silver, one warm light accent, glassy cards. Manrope (light) + Sofia Sans,
 * Cormorant Garamond italic for single accent words. */
:root {
	--d-bg: #0a1120;
	--d-surface: #111a2c;
	--d-alt: #0d1626;
	--d-soft: rgb(243 201 139 / 0.12);
	--d-dark: #070c17;
	--d-heading: #eef1f7;
	--d-text: #cdd4e0;
	--d-muted: #a2adc1;
	--d-line: rgb(207 214 226 / 0.14);
	--d-line-strong: rgb(207 214 226 / 0.3);
	--d-accent: #f3c98b;
	--d-accent-hover: #f8d9a8;
	--d-accent-ink: #18120a;
	--d-accent-text: #f3c98b;
	--d-silver: #cfd6e2;
	--d-glass: rgb(255 255 255 / 0.045);
	--d-glass-line: rgb(207 214 226 / 0.16);
	--d-font-head: "Manrope", system-ui, sans-serif;
	--d-font-body: "Sofia Sans", system-ui, sans-serif;
	--d-head-weight: 300;
	--d-head-tracking: -0.035em;
	--d-radius: 10px;
	--d-radius-lg: 20px;
	--d-radius-btn: 999px;
	--d-header-bg: rgb(10 17 32 / 0.82);
	--d-phone-bg: rgb(255 255 255 / 0.06);
	--d-phone-ink: #eef1f7;
	--d-footer: #060a14;
	--d-footer-text: #c3cbd8;
	color-scheme: dark;
}

body { background: var(--d-bg); }
h1 { font-size: clamp(2.375rem, 1.4rem + 3.4vw, 4.125rem); line-height: 1.05; }
h2 { line-height: 1.1; }
h3 { font-weight: 600; letter-spacing: -0.015em; }
h1 em, h2 em { color: var(--d-accent); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.1em; font-style: italic; font-weight: 500; letter-spacing: 0; }
::selection { background: rgb(243 201 139 / 0.35); color: #fff; }
:focus-visible { outline-color: var(--d-accent); }

/* Header */
.hdr { border-bottom-color: var(--d-glass-line); }
@supports (backdrop-filter: blur(1px)) { .hdr { backdrop-filter: blur(14px) saturate(1.3); } }
.logo__name { font-weight: 300; letter-spacing: 0.02em; }
.logo__name small { color: var(--d-muted); white-space: nowrap; }
.logo__mark { color: var(--d-accent); }
.nav a { color: var(--d-text); }
.nav a:hover { color: var(--d-heading); }
.hdr__phone { border: 1px solid var(--d-glass-line); }
.hdr__phone .icon { color: var(--d-accent); }
.hdr__phone small { color: var(--d-muted); opacity: 1; }
.hdr__menu { border-color: var(--d-glass-line); color: var(--d-heading); }
.lang { align-items: center; gap: 0; padding: 0.1875rem; border: 1px solid var(--d-glass-line); border-radius: 999px; letter-spacing: 0.06em; }
.lang a { display: grid; place-items: center; min-width: 2.25rem; min-height: 2rem; padding: 0.25rem 0.5rem; border-radius: 999px; color: var(--d-muted); }
.lang a:hover { color: var(--d-heading); }
.lang [aria-current] { background: var(--d-silver); color: #0a1120; }
@media (max-width: 60em) { .lang { display: flex; } .hdr__inner { gap: 0.75rem; } }
@media (max-width: 30em) { .logo__name small { display: none; } .logo__mark { width: 2.125rem; height: 2.125rem; } .lang a { min-width: 2rem; padding-inline: 0.25rem; } }

/* Buttons */
.btn { font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 8px 28px -12px rgb(243 201 139 / 0.6); }
.btn--ghost { border-color: var(--d-line-strong); background: var(--d-glass); box-shadow: none; }
.btn--ghost:hover { background: rgb(255 255 255 / 0.08); }

/* Glass surfaces */
.glass, .card, .form { border-color: var(--d-glass-line); background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 24px 60px -30px rgb(0 0 0 / 0.7); }
@supports (backdrop-filter: blur(1px)) { .glass { backdrop-filter: blur(18px); } }
.glass { border: 1px solid var(--d-glass-line); border-radius: var(--d-radius-lg); }
.card__icon { border: 1px solid rgb(243 201 139 / 0.25); border-radius: 50%; }
.field input, .field select, .field textarea { border-color: var(--d-line-strong); background: rgb(6 10 20 / 0.6); }
.field select option { background: #0a1120; }
.form small { color: var(--d-muted); }

/* Sections */
.sec--alt { background: linear-gradient(180deg, #0d1626, #0a1120); }
.sec--deep { position: relative; background: radial-gradient(60% 80% at 15% 0%, rgb(120 140 190 / 0.14), transparent 70%), var(--d-dark); }
.kicker { display: inline-flex; align-items: center; gap: 0.625rem; }
.kicker::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; opacity: 0.7; }
.sec__head--center .kicker::before { display: none; }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 4vw, 5.75rem) clamp(3.5rem, 2rem + 4vw, 6rem); background:
	radial-gradient(45% 60% at 82% 30%, rgb(243 201 139 / 0.16), transparent 70%),
	radial-gradient(55% 70% at 10% 0%, rgb(126 146 196 / 0.22), transparent 70%),
	radial-gradient(40% 50% at 50% 110%, rgb(126 146 196 / 0.14), transparent 70%),
	linear-gradient(180deg, #0c1527, #0a1120); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(207 214 226 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(207 214 226 / 0.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 70% at 60% 40%, #000, transparent 75%); pointer-events: none; }
.hero__inner { position: relative; display: grid; gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 62em) { .hero__inner { grid-template-columns: 1fr 1.08fr; } }
.hero__copy > * + * { margin-top: 1.375rem; }
.hero .lead { max-width: 33rem; color: var(--d-text); }
.hero .btn-row { margin-top: 2.125rem; }
.hero__facts { display: grid; gap: 0.75rem 1.75rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--d-glass-line); color: var(--d-text); font-size: 0.9375rem; }
@media (min-width: 40em) { .hero__facts { grid-template-columns: repeat(3, auto); justify-content: start; } }
.hero__facts li { display: flex; align-items: center; gap: 0.5rem; }
.hero__facts .icon { color: var(--d-accent); }

/* Stage: glass window around the player preview */
.stage { position: relative; padding: clamp(0.75rem, 0.5rem + 0.8vw, 1.125rem); }
.stage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.25rem 0.375rem 0.875rem; font-size: 0.8125rem; color: var(--d-muted); }
.stage__bar strong { color: var(--d-heading); font-weight: 600; }
.lock { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border: 1px solid var(--d-glass-line); border-radius: 999px; background: rgb(6 10 20 / 0.5); color: var(--d-silver); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
.lock .icon { width: 0.95rem; height: 0.95rem; color: var(--d-accent); }
.stage__tz { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.875rem; }
@media (min-width: 30em) { .stage__tz { grid-template-columns: repeat(4, 1fr); } }
.stage__tz li { display: grid; padding: 0.625rem 0.75rem; border: 1px solid var(--d-glass-line); border-radius: 12px; background: rgb(6 10 20 / 0.4); font-size: 0.75rem; color: var(--d-muted); line-height: 1.3; }
.stage__tz strong { color: var(--d-heading); font-family: var(--d-font-head); font-size: 1.25rem; font-weight: 400; letter-spacing: -0.02em; }
.stage__tz .here { border-color: rgb(243 201 139 / 0.45); }
.stage__tz .here strong { color: var(--d-accent); }
.stage__float { position: absolute; z-index: 2; right: -1.75rem; top: 4.5rem; display: none; gap: 0.25rem; padding: 0.875rem 1rem; max-width: 14rem; font-size: 0.8125rem; color: var(--d-text); background: rgb(13 21 38 / 0.9); }
.stage__float strong { color: var(--d-heading); }
@media (min-width: 75em) { .stage__float { display: grid; } }

/* Player preview (drawn in CSS, it does not play anything) */
.player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background:
	radial-gradient(30% 45% at 50% 46%, rgb(255 226 178 / 0.55), rgb(243 201 139 / 0.12) 55%, transparent 75%),
	linear-gradient(180deg, transparent 58%, rgb(6 10 20 / 0.55) 58.4%, rgb(6 10 20 / 0.9)),
	linear-gradient(180deg, #2a3754 0%, #1a2440 50%, #121a2e 100%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.player::before { content: ""; position: absolute; inset: 22% 18% 42%; border: 1px solid rgb(207 214 226 / 0.16); border-bottom: 0; border-radius: 50% 50% 0 0 / 70% 70% 0 0; }
.player::after { content: ""; position: absolute; left: 12%; right: 12%; top: 58%; height: 1px; background: linear-gradient(90deg, transparent, rgb(207 214 226 / 0.45), transparent); }
.player__tag { position: absolute; z-index: 1; top: 0.875rem; left: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.75rem; border-radius: 999px; background: rgb(6 10 20 / 0.75); color: var(--d-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.player__tag::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--d-silver); }
.player__state { position: absolute; z-index: 1; inset: auto 0 0; display: grid; gap: 0.125rem; background: linear-gradient(180deg, transparent, rgb(6 10 20 / 0.88) 45%); text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); padding: clamp(0.875rem, 0.5rem + 1vw, 1.375rem); }
.player__state strong { color: #fff; font-family: var(--d-font-head); font-size: clamp(1rem, 0.85rem + 0.6vw, 1.375rem); font-weight: 400; letter-spacing: -0.02em; }
.player__state span { color: #d5dbe6; font-size: 0.8125rem; }
.player__mark { position: absolute; z-index: 1; top: 38%; left: 50%; display: grid; place-items: center; width: clamp(3rem, 2rem + 3vw, 4.25rem); aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 0.4); border-radius: 50%; background: rgb(6 10 20 / 0.35); color: #fff; transform: translate(-50%, -50%); }
.player__mark .icon { width: 40%; height: 40%; }
.player--lg { border-radius: var(--d-radius-lg); }

/* Strip of three facts under the hero */
.trio { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--d-glass-line); border-radius: var(--d-radius-lg); background: var(--d-glass-line); }
@media (min-width: 52em) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio li { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; padding: 1.5rem; background: var(--d-bg); }
.trio .card__icon { grid-row: span 2; }
.trio strong { color: var(--d-heading); font-size: 1.0625rem; }
.trio span { color: var(--d-muted); font-size: 0.9375rem; }

/* Steps */
.steps li { border-top: 1px solid var(--d-glass-line); position: relative; }
.steps li::after { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 1px; background: var(--d-accent); }
.steps li::before { font-weight: 300; }
@media (min-width: 64em) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }

/* Two-column feature block */
.split { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
@media (min-width: 60em) { .split { grid-template-columns: 1fr 1.05fr; } .split--rev { grid-template-columns: 1.05fr 1fr; } }
.split__copy > * + * { margin-top: 1rem; }
.split__copy .ticks { margin-top: 1.5rem; }

/* Privacy panel: access mock */
.access { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.access > * + * { margin-top: 1rem; }
.access__url { display: flex; align-items: center; gap: 0.5rem; overflow: hidden; padding: 0.75rem 1rem; border: 1px solid var(--d-glass-line); border-radius: 12px; background: rgb(6 10 20 / 0.55); color: var(--d-text); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8125rem; white-space: nowrap; }
.access__url span { overflow: hidden; text-overflow: ellipsis; }
.access__url .icon { color: var(--d-accent); }
.pin { display: flex; gap: 0.5rem; }
.pin span { display: grid; place-items: center; width: 2.75rem; height: 3.25rem; border: 1px solid var(--d-line-strong); border-radius: 10px; background: rgb(6 10 20 / 0.55); color: var(--d-heading); font-family: var(--d-font-head); font-size: 1.375rem; }
.rules { display: grid; gap: 0; border-top: 1px solid var(--d-glass-line); }
.rules li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; border-bottom: 1px solid var(--d-glass-line); font-size: 0.9375rem; }
.rules span { color: var(--d-muted); }
.rules strong { color: var(--d-heading); font-weight: 600; text-align: right; }

/* Abroad explainer */
.abroad { display: grid; gap: 1rem; }
@media (min-width: 48em) { .abroad { grid-template-columns: repeat(2, 1fr); } }
.abroad .card h3 { display: flex; align-items: center; gap: 0.75rem; font-size: 1.125rem; }
.abroad .card h3 .icon { color: var(--d-accent); }
.note { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border: 1px solid rgb(243 201 139 / 0.3); border-radius: 14px; background: rgb(243 201 139 / 0.06); color: var(--d-text); font-size: 0.9375rem; }
.note .icon { margin-top: 0.15em; color: var(--d-accent); }

/* Contact */
.contact { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 60em) { .contact { grid-template-columns: 1fr 1.2fr; } }
.contact__copy > * + * { margin-top: 1rem; }
.contact__list { display: grid; gap: 0.875rem; margin-top: 1.75rem; }
.contact__list li { display: flex; align-items: center; gap: 0.875rem; }
.contact__list a { color: var(--d-heading); text-decoration: none; }
.contact__list a:hover { color: var(--d-accent); }

/* Ceremony page */
.chero { position: relative; overflow: hidden; padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(2.5rem, 2rem + 2vw, 3.5rem); border-bottom: 1px solid var(--d-glass-line); background: radial-gradient(50% 90% at 85% 0%, rgb(243 201 139 / 0.12), transparent 70%), radial-gradient(50% 90% at 0% 0%, rgb(126 146 196 / 0.18), transparent 70%), #0c1527; }
.chero__grid { display: grid; gap: 1.5rem 3rem; align-items: end; margin-top: 1.5rem; }
@media (min-width: 60em) { .chero__grid { grid-template-columns: 1fr auto; } }
.chero__grid > div > * + * { margin-top: 0.75rem; }
.chero .dates { color: var(--d-silver); font-family: var(--d-font-head); font-size: 1.25rem; font-weight: 300; letter-spacing: 0.02em; }
.chero .lead { max-width: 38rem; }
.monogram { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 1px solid rgb(243 201 139 / 0.4); border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgb(243 201 139 / 0.25), transparent 70%); color: var(--d-accent); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.75rem; font-style: italic; }
.crumbs a:hover { color: var(--d-heading); }

.cer { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 64em) { .cer { grid-template-columns: minmax(0, 1fr) 22rem; } .cer__side { position: sticky; top: 6.5rem; } }
.cer__main > section + section { margin-top: clamp(2.75rem, 2rem + 2.5vw, 4rem); }
.cer__main h2 { margin-bottom: 1rem; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.cer__main > section > p { color: var(--d-text); max-width: 46rem; }
.cer__main > section > p + p { margin-top: 0.75rem; }
.cer__side { display: grid; gap: 1rem; }
.cer__side .glass { padding: 1.5rem; }
.cer__side .glass > * + * { margin-top: 0.75rem; }
.cer__side h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
.cer__side p { color: var(--d-muted); font-size: 0.9375rem; }

.watch { padding: clamp(0.75rem, 0.5rem + 0.8vw, 1rem); }
.watch__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1rem 0.5rem 0.375rem; font-size: 0.9375rem; color: var(--d-muted); }
.watch__meta strong { color: var(--d-heading); }
.localtime { color: var(--d-accent); font-weight: 600; }

.tz { display: grid; border-top: 1px solid var(--d-glass-line); }
@media (min-width: 40em) { .tz { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.tz li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; border-bottom: 1px solid var(--d-glass-line); }
.tz span { color: var(--d-muted); }
.tz strong { color: var(--d-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.tz .here strong, .tz .here span { color: var(--d-accent); }

.prog { display: grid; gap: 0; }
.prog li { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.25rem; padding-bottom: 1.5rem; }
.prog li::before { content: ""; position: absolute; top: 0.6rem; bottom: -0.2rem; left: 5.375rem; width: 1px; background: var(--d-glass-line); }
.prog li:last-child::before { display: none; }
.prog time { color: var(--d-accent); font-family: var(--d-font-head); font-size: 1.125rem; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.5; }
.prog div { position: relative; padding-left: 1.5rem; }
.prog div::before { content: ""; position: absolute; top: 0.55rem; left: -0.375rem; width: 0.625rem; height: 0.625rem; border: 1px solid var(--d-accent); border-radius: 50%; background: var(--d-bg); }
.prog h3 { font-size: 1.0625rem; }
.prog p { color: var(--d-muted); font-size: 0.9375rem; }
.prog .off time { color: var(--d-muted); }
.prog .off div::before { border-color: var(--d-muted); }

.slides { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 42%); gap: 1rem; overflow-x: auto; padding-bottom: 0.75rem; scroll-snap-type: x mandatory; scrollbar-color: rgb(207 214 226 / 0.3) transparent; }
.slides:focus-visible { outline-offset: 4px; }
.slides figure { scroll-snap-align: start; }
.slides figcaption { margin-top: 0.5rem; color: var(--d-muted); font-size: 0.875rem; }
.frame { aspect-ratio: 4 / 3; border: 1px solid var(--d-glass-line); border-radius: 14px; background: var(--f, linear-gradient(160deg, #2b3a5a, #121a2e)); }
.frame--1 { --f: radial-gradient(40% 50% at 70% 30%, rgb(243 201 139 / 0.5), transparent 70%), linear-gradient(180deg, #34476b 0 55%, #1d2a44 55%); }
.frame--2 { --f: radial-gradient(60% 60% at 30% 70%, rgb(207 214 226 / 0.25), transparent 70%), linear-gradient(160deg, #3a3550, #151b2d); }
.frame--3 { --f: linear-gradient(180deg, transparent 62%, rgb(6 10 20 / 0.5) 62%), radial-gradient(35% 40% at 50% 40%, rgb(255 226 178 / 0.45), transparent 70%), linear-gradient(180deg, #2c4060, #182238); }
.frame--4 { --f: radial-gradient(50% 50% at 75% 75%, rgb(243 201 139 / 0.3), transparent 70%), linear-gradient(200deg, #263453, #10182a); }
.frame--5 { --f: radial-gradient(45% 55% at 25% 35%, rgb(207 214 226 / 0.3), transparent 70%), linear-gradient(170deg, #2e3d5e, #141c30); }
.ph-note { margin-top: 0.75rem; color: var(--d-muted); font-size: 0.875rem; }

.book { display: grid; gap: 1rem; }
@media (min-width: 48em) { .book { grid-template-columns: 1fr 1fr; } }
.msg { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; }
.msg blockquote p { color: var(--d-text); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25rem; font-style: italic; line-height: 1.45; }
.msg figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-top: auto; padding-top: 0.875rem; border-top: 1px solid var(--d-glass-line); font-size: 0.875rem; }
.msg figcaption strong { color: var(--d-heading); }
.msg figcaption span { color: var(--d-muted); }
.cer__main .form { margin-top: 1.25rem; }
.cer__main .note { margin-top: 1rem; }

/* Motion */
@media (prefers-reduced-motion: no-preference) {
	.player__mark { animation: breathe 5s ease-in-out infinite; }
	@keyframes breathe { 50% { box-shadow: 0 0 0 10px rgb(255 255 255 / 0.04); } }
	.btn, .chip, .nav a, .lang a { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
}

/* Spacing between home blocks */
.trio + .sec__head { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.abroad + .note { margin-top: 1.5rem; }
.split__copy .btn-row { margin-top: 1.75rem; }
.book__form-title { margin-top: 2.5rem; font-size: 1.375rem; font-weight: 500; }