@charset "utf-8";
/* ------------------------------------------------------------------
   PEGS1979 — Product Engineering Golf Society
   Shared design system. Loaded by every page in the site.

   Palette and forms are drawn from the two things the society is:
   Ford tractor engineering (blueprint paper, badge blue, flat plates,
   structural rules) and a golf club with 45 years of honours boards
   (brass, fairway green, scorecard boxes).
   ------------------------------------------------------------------ */

:root {
	--paper:      #e7ebf3;   /* cool blueprint paper — the page ground   */
	--paper-deep: #dae0ed;
	--plate:      #ffffff;   /* white plate the content sits on          */
	--blue:       #12269c;   /* Ford badge blue, sampled from the logo   */
	--blue-deep:  #0a1240;   /* masthead ground                          */
	--blue-tint:  #eef1fb;
	--fairway:    #3d6b33;
	--brass:      #92742f;   /* honours only — never decoration          */
	--ink:        #171a21;
	--muted:      #58617a;
	--rule:       #c9d1e4;
	--rule-soft:  #e3e8f2;

	--sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--serif: "Newsreader", Georgia, "Times New Roman", serif;

	--measure: 68ch;
	--page: 1160px;
	--gutter: max(1rem, calc((100% - var(--page)) / 2));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	background-image:
		linear-gradient(var(--paper-deep) 1px, transparent 1px),
		linear-gradient(90deg, var(--paper-deep) 1px, transparent 1px);
	background-size: 28px 28px;
	color: var(--ink);
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-synthesis-weight: none;
	/* keep the footer on the floor of short pages */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#container { flex: 1 0 auto; }
#footer { flex: none; }

/* ==================================================================
   1. Masthead — #banner carries the brand plate and the nav
   ================================================================== */

#container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	overflow: visible;
}

#banner {
	/* the old rules set a fixed 558x25 box with a background image;
	   everything here is a deliberate override of that. */
	background: var(--blue-deep);
	background-image:
		radial-gradient(circle at 18% 120%, #16309d 0%, transparent 60%),
		linear-gradient(180deg, #0c1650 0%, var(--blue-deep) 100%);
	height: auto;
	width: 100%;
	padding: 0 var(--gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	border-bottom: 3px solid var(--blue);
}

/* --- brand plate --------------------------------------------------- */

.pegs-brand {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 0;
	margin-right: auto;
	text-decoration: none;
	color: #fff;
}

.pegs-brand__mark {
	/* the tractor art is a JPEG on white, so it gets a real white plate
	   rather than being floated on the dark ground */
	background: #fff;
	border-radius: 3px;
	padding: 6px 8px;
	flex: none;
	line-height: 0;
	box-shadow: inset 0 0 0 1px rgba(18, 38, 156, 0.25);
}

.pegs-brand__mark img {
	display: block;
	width: 74px;
	height: auto;
}

.pegs-brand__type { display: block; }

.pegs-brand__name {
	display: block;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.02em;
	line-height: 1.05;
	color: #fff;
}

.pegs-brand__name b {
	font-weight: 700;
	color: #9db4ff;
	font-variant-numeric: lining-nums;
}

.pegs-brand__line {
	display: block;
	font-family: var(--sans);
	font-weight: 500;
	font-size: 0.78rem;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: #aeb9dd;
	margin-top: 0.28rem;
}

.pegs-brand:hover .pegs-brand__name,
.pegs-brand:focus-visible .pegs-brand__name { color: #cfd9ff; }

/* ==================================================================
   2. Content shell — #main_image is the band, #main_text the plate
   ================================================================== */

#main_image {
	background-image: none;
	background-color: transparent;
	height: auto;
	width: auto;
	padding: 2.25rem var(--gutter) 3rem;
}

#main_text {
	background-color: var(--plate);
	width: auto;
	max-width: var(--page);
	margin: 0 auto;
	padding: clamp(1.4rem, 4vw, 3rem);
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.65;
	border: 1px solid var(--rule);
	border-top: 3px solid var(--blue);
	border-radius: 2px;
}

#main_text > *:first-child { margin-top: 0; }
#main_text > *:last-child  { margin-bottom: 0; }

/* --- page header: trophy image, title, previous-winners badge ------ */

#main_text > h3:first-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem 1.5rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--rule);
	font-family: var(--sans);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--blue-deep);
	text-align: left;
}

/* the title is a bare text node / <strong><em> between the two images */
#main_text > h3:first-child strong,
#main_text > h3:first-child em {
	font-style: normal;
	font-weight: 600;
	flex: 1 1 12ch;
}

#main_text > h3:first-child img {
	flex: none;
	width: auto;
	height: 96px;
	border-radius: 2px;
}

/* the trophy photo (first image) gets a plate; the "previous winners"
   golf ball is round art, so it stays round */
#main_text > h3:first-child img:first-of-type {
	background: var(--blue-tint);
	padding: 4px;
	box-shadow: inset 0 0 0 1px var(--rule);
}

#main_text > h3:first-child > a { margin-left: auto; }

/* a cyan-backed placeholder square from the old layout */
#main_text img[src$="blank_ball.jpg"] { display: none; }

#main_text > h3:first-child a img {
	border-radius: 50%;
	background: none;
	padding: 0;
	box-shadow: 0 0 0 1px var(--rule);
	transition: box-shadow 0.15s ease;
}

#main_text > h3:first-child a:hover img,
#main_text > h3:first-child a:focus-visible img {
	box-shadow: 0 0 0 3px var(--blue);
}

/* --- body typography ---------------------------------------------- */

#main_text h3,
#main_text h4,
#main_text h5 {
	font-family: var(--sans);
	color: var(--blue-deep);
	line-height: 1.25;
}

#main_text > h4 {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--ink);
	max-width: var(--measure);
	margin: 0 0 0.85rem;
}

/* most pages use <h4><em> for the descriptive standfirst */
#main_text > h4 em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1.14rem;
	line-height: 1.6;
	color: var(--muted);
}

#main_text > h3:not(:first-child) {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 2rem 0 0.5rem;
	color: var(--blue);
}
#main_text > h3:not(:first-child) em { font-style: normal; }

#main_text p {
	font-size: 1rem;
	max-width: var(--measure);
	margin: 0 0 0.9rem;
	color: var(--ink);
}

#main_text strong { font-weight: 600; }

/* --- links --------------------------------------------------------- */

#main_text a {
	color: var(--blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	text-decoration-color: rgba(18, 38, 156, 0.35);
}

#main_text a:hover,
#main_text a:focus-visible {
	color: #fff;
	background: var(--blue);
	text-decoration-color: transparent;
}

/* tiles, cards and nav items are targets, not running text */
#main_text .pegs-years a,
#main_text .shelf a,
#main_text .aside ul a { text-decoration: none; }

:focus-visible {
	outline: 3px solid var(--fairway);
	outline-offset: 2px;
}

/* ==================================================================
   3. Year tiles — the society's document index
   Generated from the old "2012, click here, 2013, click here" runs.
   Flat scorecard boxes, not cards: no shadow, no gradient.
   ================================================================== */

.pegs-years {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
	gap: 6px;
	max-width: 100%;
}

.pegs-years li { margin: 0; }

.pegs-years a,
.pegs-years span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 52px;
	padding: 0.4rem 0.3rem;
	font-family: var(--sans);
	font-variant-numeric: lining-nums tabular-nums;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid var(--rule);
	border-radius: 2px;
	background: var(--plate);
	color: var(--blue);
	text-decoration: none;
}

#main_text .pegs-years a:hover,
#main_text .pegs-years a:focus-visible {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

/* years with no sheet — kept visible so the record stays complete */
.pegs-years span {
	color: var(--muted);
	background: repeating-linear-gradient(
		-45deg, transparent 0 5px, var(--rule-soft) 5px 6px);
	border-style: dashed;
	font-weight: 500;
}

.pegs-years span::after {
	content: attr(data-note);
	display: block;
	font-family: var(--sans);
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--muted);
	margin-top: 0.1rem;
	text-align: center;
}

.pegs-years__label {
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--blue-deep);
	margin: 1.75rem 0 0.6rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--rule-soft);
	max-width: none;
}

/* ------------------------------------------------------------------
   Counting competitions — the scoring schedule on the Order of Merit,
   Golfer of the Year and Jim Hamilton pages. These were eight stacked
   <h3> headings, which rendered as a wall of blue.
   ------------------------------------------------------------------ */

.pegs-counts {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	max-width: var(--measure);
	border-top: 1px solid var(--rule-soft);
}

.pegs-counts li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.2rem 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--rule-soft);
}

.pegs-counts__name {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--blue-deep);
}

.pegs-counts__note {
	font-family: var(--sans);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--muted);
}

/* a competition that has dropped out of the calculation */
.pegs-counts__note--flag {
	color: var(--blue);
	border: 1px solid var(--rule);
	border-radius: 2px;
	padding: 0.1rem 0.45rem;
}

.pegs-counts__detail {
	flex-basis: 100%;
	font-family: var(--serif);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--muted);
}

/* ------------------------------------------------------------------
   Photo albums — the gallery index, grouped by year.
   The year sits in the margin, as the season log does on the home page.
   ------------------------------------------------------------------ */

.pegs-albums {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pegs-albums > li {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 0 1.25rem;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--rule-soft);
}

.pegs-albums > li:last-child { border-bottom: none; }

.pegs-albums__yr {
	font-family: var(--sans);
	font-variant-numeric: lining-nums tabular-nums;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--blue);
	padding-top: 0.4rem;
}

.pegs-albums__set {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
	gap: 6px;
}

.pegs-albums__set a {
	display: block;
	padding: 0.5rem 0.7rem 0.55rem;
	background: var(--plate);
	border: 1px solid var(--rule);
	border-radius: 2px;
}

#main_text .pegs-albums__set a { text-decoration: none; }

#main_text .pegs-albums__set a:hover,
#main_text .pegs-albums__set a:focus-visible {
	background: var(--blue-tint);
	border-color: var(--blue);
	color: inherit;
}

.pegs-albums__place {
	display: block;
	font-family: var(--sans);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--blue);
}

.pegs-albums__comp {
	display: block;
	font-family: var(--serif);
	font-size: 0.88rem;
	line-height: 1.35;
	color: var(--muted);
}

#main_text .pegs-albums__set a:hover .pegs-albums__comp,
#main_text .pegs-albums__set a:focus-visible .pegs-albums__comp { color: var(--ink); }

/* a record that needs more than a venue and a competition */
.pegs-albums__note {
	grid-column: 1 / -1;
	font-family: var(--serif);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--muted);
	margin-top: 0.35rem;
	max-width: 68ch;
}

@media (max-width: 560px) {
	.pegs-albums > li {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.4rem 0;
	}
	.pegs-albums__yr { padding-top: 0; }
}

/* ==================================================================
   4. Honours boards

   Every one of these was a single chronological list hand-flowed into
   a fixed-width table of paired columns, which left wide gaps, made
   rows jump whenever a name wrapped, and hovered three unrelated years
   at once. It is now one list that CSS flows into balanced columns,
   so the reading order still runs down each column as it always did.
   ================================================================== */

.pegs-honours {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	column-width: 17rem;
	column-gap: 2.75rem;
}

.pegs-honours li {
	break-inside: avoid;
	display: grid;
	grid-template-columns: 3.75rem minmax(0, 1fr);
	gap: 0 0.75rem;
	padding: 0.42rem 0;
	border-bottom: 1px solid var(--rule-soft);
}

.pegs-honours li:hover { background: var(--blue-tint); }

.pegs-honours__yr {
	font-family: var(--sans);
	font-variant-numeric: lining-nums tabular-nums;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--blue);
}

.pegs-honours__who {
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ink);
}

/* any table still left in the site keeps a sane baseline */
#main_text table {
	width: 100%;
	max-width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-family: var(--sans);
	font-size: 0.95rem;
}

#main_text td,
#main_text th {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--rule-soft);
	vertical-align: top;
	text-align: left;
}

#main_text td:empty { padding: 0; border-bottom: none; }

#main_text td.yr {
	font-family: var(--sans);
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 600;
	color: var(--blue);
	white-space: nowrap;
}

/* ==================================================================
   5. Footer
   ================================================================== */

#footer {
	font-family: var(--sans);
	font-size: 0.82rem;
	line-height: 1.6;
	color: #aeb9dd;
	background: var(--blue-deep);
	border-top: 3px solid var(--blue);
	padding: 1.6rem var(--gutter);
}

#footer a { color: #cfd9ff; }

/* ==================================================================
   6. Narrow screens
   ================================================================== */

@media (max-width: 640px) {
	body { font-size: 1rem; }

	.pegs-brand__mark img { width: 56px; }
	.pegs-brand__name { font-size: 1.1rem; }
	.pegs-brand__line { font-size: 0.7rem; }

	#main_text { padding: 1.25rem 1rem; }

	#main_text > h3:first-child img { height: 72px; }

	.pegs-years {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	}

	.pegs-honours { column-width: 13rem; column-gap: 1.5rem; }
	#main_text table { font-size: 0.88rem; }
	#main_text td, #main_text th { padding: 0.45rem 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	#banner, #footer { display: none; }
	body { background: #fff; }
	#main_text { border: none; padding: 0; }
}