/*
 * Hamnus design layer.
 * One loud element: the yellow pad subject index on the home page. Everything else stays quiet:
 * white paper, navy ink, Archivo for labels and headings, Literata for reading.
 */
:root {
	--hamnus-ink: #1b3550;
	--hamnus-graphite: #4b5d70;
	--hamnus-pencil: #a9520a;
	--hamnus-pad: #faf1be;
	--hamnus-pad-edge: #e6d68a;
	--hamnus-rule: #9db8d3;
	--hamnus-margin: #d2483f;
	--hamnus-hairline: #e3e8ee;
	--hamnus-row: 2rem; /* one ruled line on the pad */
}

/* Headings and UI text run slightly condensed, like engineering lettering. */
:where(h1, h2, h3, h4, h5, h6),
.wp-block-site-title, .wp-block-navigation, .wp-block-post-terms, .wp-block-post-date,
.wp-block-query-pagination, .hamnus-pad { font-stretch: 92%; }

:where(a, button, summary, input):focus-visible { outline: 2px solid var(--hamnus-margin); outline-offset: 3px; }

/* ---------- Header and footer ---------- */
.hamnus-header-brand { flex-shrink: 0; }
.hamnus-header-brand .wp-block-site-logo { line-height: 0; }
.hamnus-header-brand .wp-block-site-logo img { width: 40px; height: auto; }
.hamnus-header-brand .wp-block-site-title { white-space: nowrap; font-size: 1.3rem; letter-spacing: -.01em; }
.hamnus-header-brand .wp-block-site-title a { color: var(--hamnus-ink); text-decoration: none; }
header .wp-block-navigation a { text-decoration: none; }
header .wp-block-navigation a:hover { color: var(--hamnus-pencil); }
header .wp-block-navigation__container { column-gap: 1.25rem; }

.wp-site-blocks > footer { background: #f3f5f8; margin-top: var(--wp--preset--spacing--60); }
.wp-site-blocks > footer .wp-block-navigation { font-size: .95rem; }
.wp-site-blocks > footer .wp-block-site-tagline { color: var(--hamnus-graphite); }
.hamnus-footer-legal { color: var(--hamnus-graphite); font-family: var(--wp--preset--font-family--archivo); }

body.home main { margin-top: var(--wp--preset--spacing--40) !important; }

/* ---------- The yellow pad ---------- */
/* Every line of text sits on a multiple of --hamnus-row so it rests on a ruled line. */
.hamnus-pad {
	--pad-margin: 4.5rem;
	/* Rules start below the title band, nudged up so text rests on each line. */
	--pad-rules-top: calc(var(--hamnus-row) * 3 - .45rem);
	position: relative;
	margin-block: 0 calc(var(--hamnus-row) * 2);
	padding: var(--hamnus-row) clamp(1.25rem, 4vw, 3rem) calc(var(--hamnus-row) * 2) var(--pad-margin);
	color: var(--hamnus-ink);
	font-family: var(--wp--preset--font-family--archivo);
	line-height: var(--hamnus-row);
	background:
		linear-gradient(to right, transparent calc(var(--pad-margin) - 1.25rem), var(--hamnus-margin) 0 calc(var(--pad-margin) - 1.25rem + 1px), transparent 0 calc(var(--pad-margin) - 1.25rem + 4px), var(--hamnus-margin) 0 calc(var(--pad-margin) - 1.25rem + 5px), transparent 0),
		repeating-linear-gradient(to bottom, transparent 0 calc(var(--hamnus-row) - 1px), var(--hamnus-rule) calc(var(--hamnus-row) - 1px) var(--hamnus-row)) 0 var(--pad-rules-top) / 100% calc(100% - var(--pad-rules-top) - var(--hamnus-row)) no-repeat,
		var(--hamnus-pad);
	border: 1px solid var(--hamnus-pad-edge);
	border-radius: 2px;
}
.hamnus-pad a { color: inherit; text-decoration: none; }
.hamnus-pad a:hover { color: var(--hamnus-pencil); text-decoration: underline; text-underline-offset: .2em; }
.hamnus-pad__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: calc(var(--hamnus-row) * 2);
	font-weight: 700;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.hamnus-pad__lede {
	margin: 0 0 var(--hamnus-row);
	max-width: 36rem;
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.0625rem;
	color: var(--hamnus-graphite);
}
.hamnus-pad__groups { columns: 3 17rem; column-gap: 3rem; }
.hamnus-pad__group { margin-bottom: var(--hamnus-row); }
.hamnus-pad__program {
	margin: 0;
	font-size: 1.0625rem;
	line-height: var(--hamnus-row);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--hamnus-margin);
	break-after: avoid;
}
.hamnus-pad__program a:hover { color: var(--hamnus-margin); }
.hamnus-pad__subjects { margin: 0; padding: 0; list-style: none; }
.hamnus-pad__subjects li { break-inside: avoid; }
.hamnus-pad__subjects a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1rem; font-weight: 500; }
.hamnus-pad__count { flex: none; color: var(--hamnus-graphite); font-weight: 400; font-variant-numeric: tabular-nums; }

.hamnus-latest { margin-block: 0 var(--wp--preset--spacing--40); font-size: clamp(1.5rem, 2.4vw, 1.875rem); }

@media (max-width: 600px) {
	.hamnus-pad { --pad-margin: 2.75rem; --pad-rules-top: calc(var(--hamnus-row) * 2 - .45rem); padding-right: 1rem; }
	.hamnus-pad__title { font-size: 1.6rem; line-height: var(--hamnus-row); }
	.hamnus-pad__lede { font-size: 1rem; }
}

/* ---------- Post lists (home, archives, search) ---------- */
.wp-site-blocks main > :is(h1, .wp-block-query-title, .wp-block-term-description) { max-width: var(--wp--style--global--wide-size); }

.wp-block-post-template.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; row-gap: 3rem; align-items: start; }
.wp-block-post-template > li { min-width: 0; }

.hamnus-card { display: flex; flex-direction: column; gap: .5rem; }
.hamnus-card > * { margin: 0 !important; }

.hamnus-card > .wp-block-post-featured-image { width: 100%; aspect-ratio: 3 / 2; margin-bottom: .5rem !important; background: #f3f5f8; border-radius: 3px; overflow: hidden; }
.hamnus-card > .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.hamnus-card > .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: contain !important; }
.hamnus-card > .wp-block-post-featured-image .hamnus-cover { display: block; width: 100%; height: 100%; }

.hamnus-card .wp-block-post-terms { font-size: .875rem; font-weight: 600; line-height: 1.4; }
.hamnus-card .wp-block-post-terms a { color: var(--hamnus-pencil); text-decoration: none; }
.hamnus-card .wp-block-post-terms a:hover { text-decoration: underline; }
.hamnus-card .wp-block-post-terms__separator { color: var(--hamnus-graphite); }

.hamnus-card .wp-block-post-title { font-size: 1.3rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; }
.hamnus-card .wp-block-post-title a { color: var(--hamnus-ink); text-decoration: none; }
.hamnus-card .wp-block-post-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }

.hamnus-card .wp-block-post-excerpt { font-size: .95rem; line-height: 1.65; color: var(--hamnus-graphite); }
.hamnus-card .wp-block-post-excerpt__excerpt { margin: 0; }
.hamnus-card .wp-block-post-date { font-size: .8125rem; color: var(--hamnus-graphite); }
.hamnus-card .wp-block-post-date a { color: inherit; text-decoration: none; }

/* Home: the newest post leads across the full width. */
@media (min-width: 782px) {
	body.home:not(.paged) .wp-block-post-template > li:first-child { grid-column: 1 / -1; }
	body.home:not(.paged) .wp-block-post-template > li:first-child .hamnus-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 2.5rem; row-gap: .75rem; align-content: start; }
	body.home:not(.paged) .wp-block-post-template > li:first-child .hamnus-card > * { grid-column: 2; }
	body.home:not(.paged) .wp-block-post-template > li:first-child .hamnus-card > .wp-block-post-featured-image { grid-column: 1; grid-row: 1 / span 5; margin: 0 !important; }
	/* Text-only lead: headline on the left, excerpt and date beside it. */
	body.home:not(.paged) .wp-block-post-template > li:first-child .hamnus-card:not(:has(.wp-block-post-featured-image)) > :is(.wp-block-post-terms, .wp-block-post-title) { grid-column: 1; }
	body.home:not(.paged) .wp-block-post-template > li:first-child .hamnus-card:not(:has(.wp-block-post-featured-image)) > .wp-block-post-title { grid-row: 2 / span 2; }
	body.home:not(.paged) .wp-block-post-template > li:first-child .hamnus-card:not(:has(.wp-block-post-featured-image)) > .wp-block-post-excerpt { grid-row: 2; padding-top: .4rem; }
	body.home:not(.paged) .wp-block-post-template > li:first-child .hamnus-card:not(:has(.wp-block-post-featured-image)) > .wp-block-post-date { grid-row: 3; }
	body.home:not(.paged) .wp-block-post-template > li:first-child .wp-block-post-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12; max-width: 24ch; }
	body.home:not(.paged) .wp-block-post-template > li:first-child .wp-block-post-excerpt { font-size: 1.0625rem; max-width: 60ch; }
}

.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--50); font-weight: 500; }
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination-numbers { display: flex; align-items: center; gap: .25rem; }
.wp-block-query-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; border-radius: 3px; }
.wp-block-query-pagination .page-numbers.current { background: var(--hamnus-ink); color: #fff; }

@media (max-width: 1000px) { .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
	.hamnus-card .wp-block-post-title { font-size: 1.25rem; }
}

/* ---------- Single posts ---------- */
.single .wp-block-post-title { text-wrap: balance; }
.single .wp-block-post-content { font-size: 1.0625rem; line-height: 1.75; }
.single .wp-block-post-content :is(h2, h3) { margin-top: 2.25em; }
.single .wp-block-post-content :is(ul, ol) { padding-left: 1.4em; }
.single .wp-block-post-content blockquote { margin-inline: 0; padding-left: 1.25rem; font-style: italic; }
.single .wp-block-post-content :is(table) { font-family: var(--wp--preset--font-family--archivo); font-size: .95rem; }
.single .wp-block-post-content :not(pre) > code { padding: .1em .3em; background: #f3f5f8; border-radius: 3px; font-size: .9em; }