/**
 * 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: #ffffff;
	--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;
}

/* 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;
}

.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, #ffffff);
	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;
}

.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 {
	font-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;
}

/* 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, #ffffff);
	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, #ffffff);
}

@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, #ffffff));
	}
}

.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, #ffffff);
	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: #000000;
	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: #000000;
	color: var(--hk-accent-ink, #ffffff);
	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, #ffffff );
}

.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 #000000;
}

.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;
}

.hk-message-card p {
	margin: 0 0 0.5rem;
	color: var(--hk-text);
	line-height: 1.6;
}

.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: #ffffff;
}

.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-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;
}

@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;
}