/* ==========================================================================
   TGHS — Alumni & 150th Jubilee
   custom.css · Tier 3 client layer

   Hand-owned, deliberately THIN. Only genuinely site-specific things live
   here. Classes are namespaced `tghs-` so they can never be mistaken for
   foundation roles; one-off colours are `--client-*` so they never pollute
   the `--cc-*` schema.

   If something in here turns up on a second client site, it stops being a
   Tier-3 one-off and becomes a FINDING for the foundation.
   ========================================================================== */

:root {
	/* The jubilee mark reads against the crest gold; no separate colour needed
	   yet. Declare --client-* tokens here if the jubilee branding arrives with
	   its own palette. */
	--client-jubilee-spine: 2px;
}


/* --------------------------------------------------------------------------
   Jubilee band
   A full-bleed frame-coloured band for the anniversary message. One per page
   at most — its job is to be the loudest thing above the fold, so nothing
   else on the page competes with it.
   -------------------------------------------------------------------------- */
.tghs-band {
	padding: var(--cc-space-6) var(--cc-space-4);
	background: var(--cc-frame);
	color: var(--cc-on-frame);
	text-align: center;
}

.tghs-band :is(h1, h2, h3) {
	margin: 0 0 var(--cc-space-3);
	color: var(--cc-on-frame);
}

.tghs-band :is(h1, h2, h3)::after {
	display: none;   /* the band carries its own emphasis; no gold hairline */
}

.tghs-band p {
	margin-inline: auto;
	max-width: 52ch;
}

/* The dates, set as the band's one typographic moment. */
.tghs-band__span {
	display: block;
	margin-bottom: var(--cc-space-2);
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--cc-accent-2);
}

.tghs-band__motto {
	font-style: italic;
	opacity: 0.85;
}


/* --------------------------------------------------------------------------
   Decade timeline
   A real sequence — 1880 onward — so the numbered/dated markers earn their
   place. Single column on a phone, spine to the left throughout.
   -------------------------------------------------------------------------- */
.tghs-timeline {
	margin: var(--cc-space-5) 0;
	padding: 0 0 0 var(--cc-space-5);
	list-style: none;
	border-left: var(--client-jubilee-spine) solid var(--cc-rule);
}

.tghs-timeline > li {
	position: relative;
	max-width: var(--cc-measure);
	padding-bottom: var(--cc-space-5);
}

.tghs-timeline > li:last-child {
	padding-bottom: 0;
}

.tghs-timeline > li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: calc(-1 * var(--cc-space-5) - var(--client-jubilee-spine) / 2 - 5px);
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--cc-accent-2);
}

.tghs-timeline__year {
	display: block;
	font-weight: 700;
	color: var(--cc-frame);
}

.tghs-timeline__year + p {
	margin-top: var(--cc-space-1);
}


/* --------------------------------------------------------------------------
   Crest
   -------------------------------------------------------------------------- */
.tghs-crest {
	display: block;
	width: clamp(90px, 12vw, 140px);
	height: auto;
	margin: 0 auto var(--cc-space-4);
}