/**
 * HumanKind Funerals — single tribute page.
 *
 * Fresh template informed by the FCRM enhanced-classic look: banner
 * with overlapping portrait, calm typography, sections that simply
 * don't render when a tribute lacks their data. Fonts inherit from
 * the theme. Same custom-property seam as the grid.
 */

.hk-tribute-single {
	--hk-accent: #3b82f6;
	--hk-text: #111827;
	--hk-muted: #6b7280;
	--hk-card-bg: #fff;
	--hk-card-radius: 16px;
	--hk-button-radius: 8px;
	--hk-border: #e5e7eb;

	max-width: var(--hk-max-width, 1140px);
	margin: 0 auto;

	/* Padding, not margin: the last section's margin can collapse out
	   of the article, leaving the gallery hard against the footer.
	   Top padding for the same reason at the other end: themes end
	   their header with a rule, and the banner sat hard against it. */
	padding-top: 2rem;
	padding-bottom: 3.5rem;
}

/* Icons sit with their label, sized to the text rather than fixed, so
   they hold at any theme's body size. */
.hk-tribute-single .hk-icon {
	width: 1.05em;
	height: 1.05em;
	margin: 0 0.6em 0 0;
	flex-shrink: 0;
	color: currentcolor;
}

.hk-tribute-single .hk-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Themes size <button> on its own (Hope & Sons: 20px on a 30px line),
   so Write a message and Show more stood taller than the link buttons
   beside them, which take the page's text size. Match them. */
.hk-tribute-single button.hk-button {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
}

/* Service sheets and slideshows: reference material. Rows with a
   hairline between them, left-aligned on the panel's own rhythm, so
   the column reads as one quiet index rather than a stack of boxes. */
.hk-resource-list {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hk-border);
}

/* No panel: the actions read as one row of things you can do, the way
   a visitor scans them, rather than a narrow stack beside empty space.
   The panel's stacked version is restored further down. */
.hk-tribute-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0;
}

.hk-tribute-links .hk-resource-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	border-top: none;
}

.hk-tribute-links .hk-resource-list li {
	border-bottom: none;
}

.hk-tribute-links .hk-resource-list a {
	padding: 0.65rem 1.1rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-button-radius);
}

.hk-tribute-links .hk-resource-list a:hover,
.hk-tribute-links .hk-resource-list a:focus-visible {
	border-color: var(--hk-accent);
}

.hk-tribute-links .hk-give {
	margin: 0;
}

/* Inside the service section the row follows the details or the
   player, and the gap does the spacing a lone button's margin used to. */
.hk-service-actions {
	margin: 1rem 0 0;
}

.hk-service-actions .hk-button {
	margin: 0;

	/* Same height as the outlined sheet and slideshow buttons beside it. */
	border: 1px solid transparent;
}

/* Phones: one full-width button per line. Thumb-sized, and a wrapped
   row of three mismatched pill widths reads as clutter. */
@media (max-width: 640px) {

	.hk-service-actions,
	.hk-service-actions .hk-resource-list {
		flex-direction: column;
		align-items: stretch;
	}

	.hk-service-actions .hk-resource-list a,
	.hk-service-actions .hk-give {
		justify-content: center;
	}
}

.hk-resource-list li {
	border-bottom: 1px solid var(--hk-border);
}

.hk-resource-list a {
	display: flex;
	align-items: center;
	padding: 0.7rem 0;
	color: var(--hk-text);
	text-decoration: none;
	font-weight: 500;
}

.hk-resource-list a:hover,
.hk-resource-list a:focus-visible {
	color: var(--hk-accent);
}

.hk-resource-list .hk-icon {
	color: var(--hk-muted);
}

.hk-resource-list a:hover .hk-icon,
.hk-resource-list a:focus-visible .hk-icon {
	color: inherit;
}

/* The donation is the one accent wherever it lands. It fills the panel
   column, but sizes to its own label in the layouts that have no panel:
   a donate button stretched across 1140px is a banner, not a button. */
.hk-give {
	display: inline-flex;
	justify-content: flex-start;
	background: var(--hk-accent);
	color: var(--hk-accent-ink, #fff);
	border: none;
}

.hk-tribute-aside .hk-tribute-links {
	display: block;
	margin: 0;
}

.hk-tribute-aside .hk-resource-list {
	display: block;
	border-top: 1px solid var(--hk-border);
	margin-bottom: 1.25rem;
}

.hk-tribute-aside .hk-resource-list li {
	border-bottom: 1px solid var(--hk-border);
}

.hk-tribute-aside .hk-resource-list a {
	padding: 0.7rem 0;
	border: none;
	border-radius: 0;
}

.hk-tribute-aside .hk-give {
	display: flex;
	width: 100%;
}

/* No hover of its own: .hk-button already handles it, and a second
   rule here only made the effect weaker than the default. */

/* Banner + header */
.hk-tribute-banner {
	border-radius: var(--hk-card-radius);
	overflow: hidden;
	aspect-ratio: 3 / 1;
	background: #f3f4f6;
}

.hk-tribute-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-tribute-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 1.5rem 0 2rem;
}

.hk-tribute-header.has-banner {
	margin-top: -3.5rem;
	padding-left: 1.5rem;
	align-items: flex-start;
}

/* The photo overlaps the banner by 3.5rem; the heading must not —
   start its text just below the banner edge. */
.hk-tribute-header.has-banner .hk-tribute-heading {
	padding-top: 4.25rem;
}

.hk-tribute-photo {
	width: 10rem;
	height: 10rem;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: var(--hk-card-radius);
	border: 4px solid var(--hk-card-bg);
	background: #f9fafb;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
	flex-shrink: 0;
}

/* Classic: the portrait was a 10rem square overlapping by 3.5rem,
   which read as a thumbnail under the 3:1 banner beside FireHawk's
   (Hope & Sons comparison, 30 Sep 2026). Same portrait box as the
   sidebar layout, and a deeper overlap so it sits on the banner. */
.hk-layout-single .hk-tribute-photo {
	width: 12.5rem;
	height: 15rem;
}

.hk-layout-single .hk-tribute-header.has-banner {
	margin-top: -6rem;
}

.hk-layout-single .hk-tribute-header.has-banner .hk-tribute-heading {
	padding-top: 6.75rem;
}

.hk-tribute-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hk-tribute-placeholder span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--hk-border);
	color: var(--hk-muted);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.hk-tribute-eyebrow {
	margin: 0 0 0.375rem;
	color: var(--hk-muted);
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
}

.hk-tribute-heading h1 {
	margin: 0 0 0.25rem;
	line-height: 1.15;
	color: var(--hk-text);
}

.hk-tribute-lifespan {
	margin: 0;
	color: var(--hk-muted);
	font-size: 1.125rem;
	font-weight: 500;
}

.hk-tribute-share {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.875rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-button-radius);
	background: var(--hk-card-bg);
	color: var(--hk-muted);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.hk-tribute-share:hover {
	color: var(--hk-accent);
	border-color: var(--hk-accent);
}

/* Sections */
.hk-tribute-single section {
	margin-bottom: 2.5rem;
}

.hk-tribute-single section h2 {

	/* Styling → Section heading size. Display fonts set in capitals run
	   small at 1.25rem (Hope & Sons). */
	font-size: var(--hk-section-heading-size, 1.25rem);
	margin: 0 0 1rem;
	color: var(--hk-text);
}

/* The notice from the family, set as the page's primary text.
   It was previously identical to a message from the public: same size,
   same colour, same measure, and no heading of its own, so it read as a
   message whose author label had gone missing. Slightly larger, on a
   measure rather than the full column, and the messages sit a notch
   quieter beneath it. */
.hk-tribute-obituary {
	color: var(--hk-text);
	font-size: 1.0625em;
	line-height: 1.7;
}

/* Where the family's notice ends and the public's messages begin. The
   one structural rule on this page that encodes a change of author
   rather than just a gap. */
.hk-tribute-messages {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hk-border);
}

.hk-tribute-messages .hk-message-card {
	font-size: 0.9375em;
}

/* Events */
.hk-tribute-events ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.hk-events-held,
.hk-events-pending {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: calc(var(--hk-card-radius) / 2);
	background: var(--hk-card-bg);
	color: var(--hk-muted);
}

.hk-tribute-event {
	display: grid;
	gap: 0.125rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: calc(var(--hk-card-radius) / 2);
	background: var(--hk-card-bg);
}

.hk-event-name {
	font-weight: 700;
	color: var(--hk-text);
}

.hk-event-when {
	color: var(--hk-accent);
	font-weight: 500;
}

.hk-event-venue {
	color: var(--hk-text);
}

.hk-event-address {
	color: var(--hk-muted);
	font-size: 0.9375rem;
}

/* Add to calendar: a quiet outlined control under each upcoming
   event, opening a small menu. Native <details>; tribute.js only
   closes it on an outside click or Escape. */
.hk-calendar {
	position: relative;
	margin-top: 0.75rem;
}

.hk-calendar-toggle {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid var(--hk-border);
	border-radius: var(--hk-button-radius);
	background: var(--hk-card-bg);
	color: var(--hk-text);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.hk-calendar-toggle::-webkit-details-marker {
	display: none;
}

.hk-calendar-toggle:hover,
.hk-calendar[open] .hk-calendar-toggle {
	border-color: var(--hk-accent);
}

.hk-calendar-menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 0.35rem);
	left: 0;
	min-width: 15rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: var(--hk-card-bg);
	border: 1px solid var(--hk-border);
	border-radius: calc(var(--hk-card-radius) / 2);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

.hk-calendar-menu li {
	margin: 0;
}

.hk-calendar-menu a {
	display: flex;
	align-items: center;
	padding: 0.55rem 1rem;

	/* Themes set a loose body line height; the rows would run ~60px. */
	line-height: 1.4;
	color: var(--hk-text);
	text-decoration: none;
}

/* Quiet marks: muted until the row is pointed at, like the resource list. */
.hk-calendar-menu .hk-icon {
	color: var(--hk-muted);
}

.hk-calendar-menu a:hover .hk-icon,
.hk-calendar-menu a:focus-visible .hk-icon {
	color: inherit;
}

.hk-calendar-menu a:hover,
.hk-calendar-menu a:focus-visible {
	background: color-mix(in srgb, var(--hk-accent) 8%, transparent);
	color: var(--hk-accent);
}

/* Buttons. Labels can be long staff-entered text (donation causes,
   graphic link names) — keep wrapped lines centred and balanced. */
.hk-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.5rem;
	background: var(--hk-accent);
	color: var(--hk-accent-ink, #fff);
	border-radius: var(--hk-button-radius);
	font-weight: 500;
	text-decoration: none;
	transition: filter 0.2s ease;
	margin: 0 0.5rem 0.5rem 0;
	text-align: center;
	text-wrap: balance;
}

/* brightness() only reads on a mid-toned accent: darkening an already
   dark button is invisible, which is how a default hover looked like no
   hover at all. Mixing toward the ink colour is direction-correct by
   construction, because the ink is always the accent's high-contrast
   opposite: a dark accent lightens, a light one darkens. brightness()
   stays as the fallback. */
.hk-button:hover,
.hk-button:focus-visible {
	filter: brightness(0.9);
	color: var(--hk-accent-ink, #fff);
}

@supports (background: color-mix(in srgb, red 50%, blue)) {

	.hk-button:hover,
	.hk-button:focus-visible {
		filter: none;
		background: color-mix(in srgb, var(--hk-accent) 84%, var(--hk-accent-ink, #fff));
	}
}

.hk-button-outline {
	background: transparent;
	border: 2px solid var(--hk-accent);
	color: var(--hk-accent);
}

.hk-button-outline:hover {
	background: var(--hk-accent);
	color: var(--hk-accent-ink, #fff);
	filter: none;
}

/* Live stream: framed players, and the link that always sits under
   one. Most providers are 16:9. OneRoom is not — its frame carries the
   home's own branding and a register-to-watch card above the player
   (ASSUMPTIONS #13), so aspect-ratio sizing cuts it off and it takes
   fixed heights that grow with the viewport. */
.hk-livestream-note {
	color: var(--hk-muted);
	margin: 0 0 1rem;
}

.hk-livestream-embed {
	margin: 0 0 0.75rem;
	background: #000;
	border-radius: var(--hk-radius);
	overflow: hidden;
}

.hk-livestream-embed iframe {
	display: block;
	width: 100%;
	border: 0;
	aspect-ratio: 16 / 9;
}

.hk-livestream-embed--oneroom iframe {
	aspect-ratio: auto;

	/* Tall enough for OneRoom's register card + player, never taller
	   than the viewport allows: a fixed 1000px overflows a 768px-tall
	   laptop and the narrow sidebar aside. */
	height: min(1000px, 85vh);
}

/* Recordings load behind a tap: the play panel is a real button, so
   the player bundle never contends with the LCP portrait. */
.hk-stream-facade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	color: var(--hk-accent-ink, #fff);
	border: 0;
	cursor: pointer;
	font: inherit;
}

.hk-stream-facade:hover .hk-stream-facade-play,
.hk-stream-facade:focus-visible .hk-stream-facade-play {
	background: var(--hk-accent, #fff);
}

.hk-stream-facade-play {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	position: relative;
}

.hk-stream-facade-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.7rem 0 0.7rem 1.15rem;
	border-color: transparent transparent transparent #000;
}

.hk-stream-facade-label {
	font-size: 0.9375rem;
}

.hk-livestream-fallback {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
}

/* Gallery: wrapping thumbnail grid + native dialog lightbox.
   Thumbs crop square; the lightbox shows each image uncropped. */
.hk-gallery-strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 0.75rem;
}

.hk-gallery-thumb {
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
	border-radius: calc(var(--hk-card-radius) / 2);
	overflow: hidden;
	aspect-ratio: 1;
}

.hk-gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-gallery-lightbox {
	border: none;
	border-radius: var(--hk-card-radius);
	padding: 0;
	background: transparent;
	max-width: min(92vw, 1100px);
}

.hk-gallery-lightbox::backdrop {
	background: rgb(0 0 0 / 0.8);
}

.hk-gallery-lightbox img {
	display: block;
	max-width: 100%;
	max-height: 85vh;
	border-radius: var(--hk-card-radius);
}

.hk-gallery-lightbox button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: rgb(255 255 255 / 0.9);
	color: #111827;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	font-size: 1.25rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hk-gallery-lightbox .hk-gallery-prev {
	left: 0.75rem;
}

.hk-gallery-lightbox .hk-gallery-next {
	right: 0.75rem;
}

.hk-gallery-lightbox .hk-gallery-close {
	top: 0.75rem;
	right: 0.75rem;
	transform: none;
}

/* Messages */
.hk-messages-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.hk-messages-header h2 {
	margin: 0;
}

/* Full-width rows separated by dividers (wireframe decision, 13 Jul
   2026) — not cards. The heart sits left, the candle sits right; the
   edit affordance joins the right side when the edit flow lands. */
.hk-messages-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: 1.25rem;
}

.hk-message-card {
	border-top: 1px solid var(--hk-border);
	padding: 1.1rem 0;
}

.hk-message-card:last-child {
	border-bottom: 1px solid var(--hk-border);
}

.hk-message-card header {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.375rem;
}

.hk-message-name {
	font-weight: 700;
	color: var(--hk-text);
}

.hk-message-date {
	margin-left: auto;
	color: var(--hk-muted);
	font-size: 0.8125rem;
	white-space: nowrap;
}

/* Visitors' line breaks, whether the card came from PHP or messages.js. */
.hk-message-card p {
	margin: 0 0 0.5rem;
	color: var(--hk-text);
	line-height: 1.6;
	white-space: pre-line;
}

.hk-message-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* A small candle in the author's chosen colour (inline SVG uses
   currentColor; the span's color carries the choice). */
.hk-message-candle {
	display: inline-flex;
	color: var(--hk-accent);
	flex-shrink: 0;
}

.hk-message-candle svg {
	filter: drop-shadow(0 0 2.5px currentcolor);
}

.hk-message-like {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border: none;
	background: none;
	padding: 0.25rem 0;
	color: var(--hk-muted);
	cursor: pointer;
	font-size: 0.875rem;
}

.hk-message-like[aria-pressed="true"] {
	color: #c0392b;
}

.hk-message-like[aria-pressed="true"] svg path {
	fill: currentcolor;
}

.hk-messages-empty {
	color: var(--hk-muted);
	margin-top: 1rem;
}

.hk-messages-more-wrap {
	text-align: center;
	margin-top: 1.5rem;
}

/* Message form */
.hk-message-form-wrap {
	margin-top: 1.25rem;
	border: 1px solid var(--hk-border);
	border-radius: calc(var(--hk-card-radius) / 2);
	padding: 1.5rem;
	background: var(--hk-card-bg);
}

.hk-form-note {
	margin-top: 0;
	color: var(--hk-muted);
	font-size: 0.9375rem;
}

.hk-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

@media (max-width: 640px) {

	.hk-form-row {
		grid-template-columns: 1fr;
	}
}

.hk-message-form label {
	display: block;
	font-weight: 600;
	color: var(--hk-text);
	font-size: 0.9375rem;
}

.hk-message-form input[type="text"],
.hk-message-form input[type="email"],
.hk-message-form input[type="tel"],
.hk-message-form textarea,
.hk-message-verify input {
	display: block;
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--hk-border);
	border-radius: 8px;
	font: inherit;
	color: var(--hk-text);
	background: #fff;
}

.hk-form-message {
	margin-bottom: 1rem;
}

.hk-form-candle {
	border: none;
	padding: 0;
	margin: 0 0 1rem;
}

.hk-candle-toggle {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.hk-candle-colors {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.hk-candle-color input {
	position: absolute;
	opacity: 0;
}

.hk-candle-color span {
	display: block;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	cursor: pointer;
	border: 3px solid transparent;
}

.hk-candle-color input:checked + span {
	border-color: var(--hk-text);
}

/* Honeypot — visually removed, present for bots. */
.hk-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hk-form-error,
.hk-verify-error {
	color: #b32d2e;
	font-size: 0.9375rem;
}

.hk-verify-restart {
	background: none;
	border: none;
	padding: 0;
	margin-top: 0.5rem;
	color: var(--hk-accent);
	font: inherit;
	font-size: 0.9375rem;
	text-decoration: underline;
	cursor: pointer;
	text-align: left;
}

.hk-message-verify .hk-form-row {
	grid-template-columns: 1fr auto;

	/* Stretch, not center: the input and button have different natural
	   heights, so centring leaves the shorter one floating off-line.
	   The button is inline-flex, so its label stays centred when tall. */
	align-items: stretch;
}

.hk-message-verify .hk-form-row input {

	/* The shared input rule adds margin-top to sit below a label; there is
	   no label here, so it just knocks the input out of line with the button. */
	margin-top: 0;
}

.hk-message-success {
	color: #1a7f37;
	font-weight: 600;
}

/* Not found */
.hk-tribute-not-found {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 3rem 1rem;
}

/* Responsive */
@media (max-width: 640px) {

	/* Some themes run this page edge-to-edge on phones; give the
	   content its own breathing room either way. */
	.hk-tribute-single {
		padding-inline: 1rem;
	}

	.hk-tribute-single .hk-tribute-banner {
		aspect-ratio: 2 / 1;
	}

	.hk-tribute-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		margin: 1.25rem 0 1.75rem;
	}

	.hk-tribute-header.has-banner {
		margin-top: -2.5rem;
		padding-left: 0.75rem;
	}

	/* Stacked on mobile: the photo does the overlapping, the heading
	   flows normally below it. */
	.hk-tribute-header.has-banner .hk-tribute-heading {
		padding-top: 0;
	}

	.hk-tribute-photo {
		width: 7rem;
		height: 7rem;
	}

	.hk-layout-single .hk-tribute-photo {
		width: 9.5rem;
		height: 11.5rem;
	}

	.hk-layout-single .hk-tribute-header.has-banner {
		margin-top: -4rem;
	}

	.hk-layout-single .hk-tribute-header.has-banner .hk-tribute-heading {
		padding-top: 0;
	}

	.hk-tribute-single section {
		margin-bottom: 2rem;
	}

	.hk-tribute-single section h2 {
		margin-bottom: 0.75rem;
	}
}

/* ------------------------------------------------------------------ */

/* Layout variants — wireframe decisions, 13 Jul 2026                  */

/* (docs/design-brief-refs/wireframes-single-layouts/DECISIONS.md)     */

/* ------------------------------------------------------------------ */

/* Quick-answer strip: one line under the identity answering "when is
   the service", with jump links to the details and livestream. */
.hk-tribute-quick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 1.25rem;
	margin: 0 0 2.5rem;
	padding: 0.875rem 0;
	border-top: 1px solid var(--hk-border);
	border-bottom: 1px solid var(--hk-border);
	color: var(--hk-text);
}

.hk-quick-label {
	color: var(--hk-muted);
}

.hk-tribute-quick a {
	color: var(--hk-accent);
	font-weight: 500;
}

/* Jump targets must not land under sticky theme headers. */
.hk-tribute-single section[id] {
	scroll-margin-top: 6rem;
}

/* The wireframe layouts treat the banner as a quiet 4:1 strip — the
   portrait is the subject, the banner is scenery. Applies at every
   width (overrides the classic 2:1 mobile rule by order). */
.hk-layout-centred .hk-tribute-banner,
.hk-layout-sidebar .hk-tribute-banner {

	/* Explicit width stops the max-height transferring into the width
	   via the aspect ratio — the cap must only clamp the height. */
	width: 100%;
	aspect-ratio: 4 / 1;
	max-height: 260px;
}

/* Centred layout: the hero stacks and centres; the portrait is the
   focus, so it runs larger than the classic square. */
.hk-layout-centred .hk-tribute-header {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}

/* Centred is the portrait-forward layout, so the portrait has to hold
   the page. It was 13rem against a 900px measure (23% of the width);
   widening the page to 1140px and the banner to 260px left it at 18%
   without anyone touching it, and the banner started winning. These
   numbers restore the share it was designed with. */
.hk-layout-centred .hk-tribute-photo {
	width: 17.5rem;
	height: 21.5rem;
}

.hk-layout-centred .hk-tribute-header.has-banner {
	margin-top: -5rem;
	padding-left: 0;
}

.hk-layout-centred .hk-tribute-header.has-banner .hk-tribute-heading {
	padding-top: 0;
}

.hk-layout-centred .hk-tribute-quick {
	justify-content: center;
}

/* Sidebar layout: practical details in a panel beside the obituary on
   wide containers, ahead of it (DOM order) when the columns collapse.
   Container queries measure the theme's content area, not the
   viewport; without support the layout stays single-column. */
.hk-tribute-single.hk-layout-sidebar {
	max-width: 1100px;
	container-type: inline-size;
}

.hk-layout-sidebar .hk-tribute-photo {
	width: 12.5rem;
	height: 15rem;
}

.hk-tribute-columns {
	display: grid;
	gap: 2.5rem;
}

/* Not a card. A bordered box beside bare content forces a choice
   between aligning the boxes and aligning the headings, and whichever
   you pick the other one is visibly out. Stripped of the frame the
   panel starts exactly where the main column starts, and it stays
   legible as its own column through the quiet label and the narrower
   measure. */
.hk-tribute-aside {
	align-self: start;
	padding: 0;
}

.hk-tribute-aside section {
	margin-bottom: 1.75rem;
}

.hk-tribute-aside section:last-child {
	margin-bottom: 0;
}

/* Panel headings read as quiet labels, not shrunken headings. Nothing
   set a weight here, so a 1.05rem h2 took the theme's heading weight and
   sat directly above a 700-weight event name: the section heading was
   out-shouted by its own content. Same treatment as .hk-tribute-branch,
   so the panel matches a pattern the design already uses. */
.hk-tribute-aside section h2 {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hk-muted);
	margin-bottom: 0.75rem;
}

/* Everything inside the panel is a plain stacked list: no frames, so
   nothing nests a box inside a box. */
.hk-tribute-aside .hk-events-held,
.hk-tribute-aside .hk-events-pending {
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
}

.hk-tribute-aside .hk-tribute-event {
	padding: 0 0 1rem;

	/* The card in the main column is bordered and padded, so 0.125rem
	   between its lines reads fine. Stripped of that frame the same gap
	   runs the lines together, so the panel gets a little more air. */
	gap: 0.3rem;
	border: none;
	border-bottom: 1px solid var(--hk-border);
	border-radius: 0;
	background: transparent;
}

.hk-tribute-aside .hk-tribute-event:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.hk-tribute-aside .hk-button {
	display: flex;
	justify-content: center;
	margin-right: 0;
}

/* A stream button stacked above the service sheet list. */
.hk-tribute-aside .hk-service-actions > .hk-button {
	margin-bottom: 1rem;
}

.hk-tribute-aside .hk-service-actions {
	margin-top: 1rem;
}

@container (min-width: 56rem) {

	.hk-tribute-columns.hk-has-aside {
		grid-template-columns: minmax(0, 1fr) 21rem;
		align-items: start;
	}

	/* DOM keeps the aside first (details-first when stacked); on wide
	   containers it moves to the right column and follows the scroll. */
	.hk-tribute-columns.hk-has-aside > .hk-tribute-aside {
		order: 2;
		position: sticky;
		top: 1.5rem;
	}
}

@media (max-width: 640px) {

	/* On phones the banner turns into a cover photo: taller, holding
	   more of the portrait, instead of the desktop's quiet strip. */
	.hk-layout-centred .hk-tribute-banner,
	.hk-layout-sidebar .hk-tribute-banner {
		aspect-ratio: 2 / 1;
		max-height: none;
	}

	/* Once the columns collapse the sidebar hero centres too — one
	   cover treatment across both new layouts on phones. */
	.hk-layout-centred .hk-tribute-photo,
	.hk-layout-sidebar .hk-tribute-photo {
		width: 9.5rem;
		height: 11.75rem;
	}

	.hk-layout-sidebar .hk-tribute-header {
		align-items: center;
		text-align: center;
		gap: 1rem;
	}

	.hk-layout-centred .hk-tribute-header.has-banner,
	.hk-layout-sidebar .hk-tribute-header.has-banner {
		margin-top: -5.5rem;
		padding-left: 0;
	}

	.hk-tribute-aside {
		padding: 1.25rem;
	}

	.hk-tribute-quick {
		margin-bottom: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hk-button {
		transition: none;
	}
}

/* Focus was invisible on every control: hover states existed, focus
   states did not, so a keyboard user had no idea where they were. */
.hk-tribute-single a:focus-visible,
.hk-tribute-single button:focus-visible {
	outline: 2px solid var(--hk-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------ */

/* Banner style: full-width fade (Styling → Banner style, any layout)  */

/* ------------------------------------------------------------------ */

/* The banner runs the full screen width and fades into the page, so it
   frames the page instead of sitting as a box above it (Hope & Sons,
   30 Sep 2026). It fades to transparent, not white, so a cream or grey
   theme background shows through. It stays an <img> with fetchpriority
   high: at this size it is the page's largest element, so loading it
   late would slow the page, not speed it up. */
.hk-banner-fade .hk-tribute-banner {
	width: 100vw;
	max-width: none;
	max-height: none;
	height: clamp(260px, 30vw, 460px);
	aspect-ratio: auto;
	margin-left: calc(50% - 50vw);
	border-radius: 0;
	background: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

/* The page's 2rem top padding keeps a contained banner off the theme
   header's bottom rule. A full-width banner should meet the menu
   directly (Hope & Sons, 30 Sep 2026); a theme that pads its own
   content still leaves its gap, which site CSS can close. */
.hk-tribute-single.hk-banner-fade {
	padding-top: 0;
}

/* 100vw counts the scrollbar where scrollbars take space (Windows), so
   the banner would overhang by its width and add a sideways scroll.
   clip, not hidden: hidden would break theme sticky headers. */
body:has(.hk-banner-fade) {
	overflow-x: clip;
}

/* The portrait sits on the faded part; the name starts below it, on
   plain page background, never over the photo. */
.hk-banner-fade .hk-tribute-header.has-banner {
	margin-top: -8rem;
}

.hk-banner-fade .hk-tribute-header.has-banner .hk-tribute-heading {
	padding-top: 8.75rem;
}

/* Centred stacks portrait over name, so the name needs no push. */
.hk-banner-fade.hk-layout-centred .hk-tribute-header.has-banner {
	margin-top: -10rem;
}

.hk-banner-fade.hk-layout-centred .hk-tribute-header.has-banner .hk-tribute-heading {
	padding-top: 0;
}

@media (max-width: 640px) {

	.hk-banner-fade .hk-tribute-banner {
		height: 240px;
	}

	/* Every layout stacks on phones: the portrait overlaps the fade and
	   the name follows straight after it, with no gap. */
	.hk-banner-fade .hk-tribute-header.has-banner,
	.hk-banner-fade.hk-layout-centred .hk-tribute-header.has-banner {
		margin-top: -6rem;
	}

	.hk-banner-fade .hk-tribute-header.has-banner .hk-tribute-heading {
		padding-top: 0;
	}
}