/* ==========================================================================
   WHNF 2026 — celebrations by city, centre and programme.

   TEXT-LED BY NECESSITY AND BY CHOICE. Only 43 of 458 reports carry a
   photograph, so a picture grid would be nine-tenths empty frames. The material
   that does exist is a devotee's own account: across all 458 the median is 167
   characters, a sentence or two naming the place, the hour and what happened.
   So the words are the design. They get measure, leading and room; the figures
   sit under them as data, not decoration.

   To the Ministry's rules: no gradients, no pill buttons, no emoji, no scroll
   animation, no invented figures. Every number is a sum of submitted reports.
   ========================================================================== */

/* --- Page frame ---------------------------------------------------------- */
.cel { padding: 48px 0; }
.cel--hero { background: #0b2a4d; color: #fff; padding: 58px 0 50px; }
.cel--hero-sm { padding: 42px 0 36px; }

.cel__kicker {
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #9ec3ea;
}
.cel__kicker a { color: #ffd79a !important; text-decoration: none; }
.cel__kicker a:hover { text-decoration: underline; }
.cel__sep { padding: 0 7px; opacity: .55; }

.cel__h1 {
	margin: 0 0 14px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: clamp(30px, 4.8vw, 46px);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -.015em;
}
.cel__lead { margin: 0; max-width: 60ch; font-size: 16.5px; line-height: 1.72; color: #d6e4f3; }

/* --- Figures. Flat panels, tabular numerals, nothing counting up. -------- */
.cel-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .18);
}
.cel-stats__i { background: #0b2a4d; padding: 17px 20px; }
.cel-stats__i b {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(23px, 3.5vw, 32px);
	font-weight: 700;
	line-height: 1.08;
	font-variant-numeric: tabular-nums;
}
.cel-stats__i span {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #9ec3ea;
}

/* --- Section heads ------------------------------------------------------- */
.cel__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #0b2a4d;
}
.cel__h2 { margin: 0; font-family: 'Poppins', sans-serif; font-size: clamp(21px, 2.8vw, 27px); font-weight: 700; color: #0b2a4d; }
.cel__count { margin: 0; font-size: 14px; font-weight: 600; color: #5A687C; font-variant-numeric: tabular-nums; }
.cel__more { margin: 20px 0 0; }
.cel__more a { color: #173B8C !important; font-weight: 600; text-decoration: none; }
.cel__more a:hover { text-decoration: underline; }

/* --- The line that says what is on this page ----------------------------- */
.cel-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid #DCE5F0;
	font-size: 14px;
	color: #5A687C;
}
.cel-bar p { margin: 0; }
.cel-bar__count { font-weight: 600; color: #3F4C5E; font-variant-numeric: tabular-nums; }

/* --- Tiles on the index -------------------------------------------------- */
.cel-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
	gap: 12px;
	margin: 0; padding: 0; list-style: none;
}
.cel-tiles__i a {
	display: block;
	height: 100%;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #DCE5F0;
	border-left: 3px solid #1E4DB7;
	border-radius: 3px;
	text-decoration: none !important;
}
.cel-tiles__i a:hover, .cel-tiles__i a:focus-visible { background: #F7FAFF; border-left-color: #F5A623; }
.cel-tiles__name { display: block; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.35; color: #0b2a4d; }
.cel-tiles__meta { display: block; margin-top: 7px; font-size: 13.5px; color: #5A687C; }
.cel-tiles__meta b { color: #0b2a4d; font-weight: 700; font-variant-numeric: tabular-nums; }
.cel-tiles__sep { padding: 0 5px; opacity: .55; }

/* --- The full list on an axis page -------------------------------------- */
.cel-table__wrap { overflow-x: auto; border: 1px solid #DCE5F0; border-radius: 3px; }
.cel-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cel-table__cap { padding: 13px 15px; text-align: left; font-size: 13.5px; color: #5A687C; background: #F8FAFC; border-bottom: 1px solid #DCE5F0; }
.cel-table th, .cel-table td { padding: 11px 15px; text-align: left; border-bottom: 1px solid #EDF2F9; }
.cel-table thead th { background: #F8FAFC; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: #5A687C; white-space: nowrap; }
.cel-table tbody th { font-weight: 600; }
.cel-table tbody th a { color: #173B8C !important; text-decoration: none; }
.cel-table tbody th a:hover { text-decoration: underline; }
.cel-table td { color: #3F4C5E; font-variant-numeric: tabular-nums; }
.cel-table tbody tr:hover { background: #F7FAFF; }

/* ==========================================================================
   The reports themselves.

   A list, not a card grid. With no photograph on nine reports in ten, equal
   boxes in a grid read as a failed gallery; a list reads as an account. Each
   entry is ruled off from the next and the devotee's words carry the weight.
   ========================================================================== */
.cel-list { display: grid; gap: 0; }

.cel-r {
	padding: 26px 0;
	border-top: 1px solid #DCE5F0;
}
.cel-r:first-child { border-top: 0; padding-top: 0; }

.cel-r__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 7px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.cel-r__prog { color: #8A5300; }                       /* 6.05:1 */
.cel-r__date { color: #5A687C; letter-spacing: .05em; }

.cel-r__title { margin: 0 0 4px; font-family: 'Poppins', sans-serif; font-size: 19px; line-height: 1.32; font-weight: 600; }
.cel-r__title a { color: #0b2a4d !important; text-decoration: none; }
.cel-r__title a:hover { text-decoration: underline; }
.cel-r__place { margin: 0 0 14px; font-size: 14px; color: #5A687C; }

/* The devotee's own words. Measure capped so the line length stays readable. */
.cel-r__story {
	margin: 0 0 16px;
	padding: 0 0 0 16px;
	border-left: 2px solid #F5A623;
	max-width: 68ch;
}
.cel-r__story p { margin: 0 0 8px; font-size: 16px; line-height: 1.72; color: #23324a; }
.cel-r__story p:last-child { margin-bottom: 0; }
.cel-r__rest a { font-size: 14px; font-weight: 600; color: #173B8C !important; text-decoration: none; }
.cel-r__rest a:hover { text-decoration: underline; }

/* A nineteen-character entry is a label. Set as one, so it does not sit in a
   large quote block looking like text that failed to arrive. */
.cel-r__brief {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: #3F4C5E;
	font-style: italic;
}

.cel-r__figs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 12px;
	border: 1px solid #EDF2F9;
	border-radius: 3px;
	overflow: hidden;
}
.cel-r__figs > div { padding: 9px 16px; border-right: 1px solid #EDF2F9; }
.cel-r__figs > div:last-child { border-right: 0; }
.cel-r__figs dt { margin: 0; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: #5A687C; }
.cel-r__figs dd { margin: 2px 0 0; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: #0b2a4d; font-variant-numeric: tabular-nums; }

.cel-r__by { margin: 0; font-size: 13.5px; color: #5A687C; }

/* Where a photograph exists it leads, at a size worth looking at. */
.cel-r--pic .cel-r__pic { display: block; margin: 0 0 16px; background: #EDF2F9; border-radius: 3px; overflow: hidden; }
.cel-r--pic .cel-r__pic img { display: block; width: 100%; height: auto; }

@media (min-width: 820px) {
	.cel-r--pic {
		display: grid;
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		gap: 26px;
		align-items: start;
	}
	.cel-r--pic .cel-r__pic { margin: 0; }
	.cel-r--pic .cel-r__pic img { height: 100%; min-height: 200px; object-fit: cover; }
}

/* --- Paging ------------------------------------------------------------- */
.cel-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 32px 0 0;
	padding-top: 22px;
	border-top: 1px solid #DCE5F0;
}
.cel-pager__go {
	display: inline-block;
	min-height: 44px;
	padding: 12px 22px;
	background: #0b2a4d;
	color: #fff !important;
	border: 1px solid #0b2a4d;
	border-radius: 3px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none !important;
}
.cel-pager__go:hover, .cel-pager__go:focus-visible { background: #123c69; }
.cel-pager__at { font-size: 14px; color: #5A687C; font-variant-numeric: tabular-nums; }

@media (min-width: 700px) { .cel-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	.cel { padding: 34px 0; }
	.cel-tiles { grid-template-columns: 1fr; }
	.cel-r__figs > div { flex: 1 1 auto; }
	.cel-r__story { padding-left: 13px; }
	.cel-r__story p { font-size: 15.5px; }
}

/* A plain line above the list saying how many reports are shown and how many
   carry a photograph, so a short page of pictures does not read as a failure. */
.cel__note {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5A687C;
	font-variant-numeric: tabular-nums;
}

/* The second column of a report that has a photograph; a plain block when it
   has none, so one rule covers both. */
.cel-r__body { min-width: 0; }

/* The index lists each axis in turn. Ruled off from the one above rather than
   boxed, to match the report list below it. */
.cel--axis { padding-top: 0; }
.cel--axis + .cel--axis .whnf26-wrap { border-top: 1px solid #DCE5F0; padding-top: 30px; }