/*
 * Constructivo — the whole front end.
 *
 * Contents
 *   1  Tokens
 *   2  Base
 *   3  Shell, skip link, utilities
 *   4  Header, navigation, search drawer
 *   5  Hero composition
 *   6  Section heading rows
 *   7  Tiles and grids
 *   8  Latest: feature cell and table rows
 *   9  Archive composition and pagination
 *  10  Guide: header, figure, prose
 *  11  Guide: post navigation, related, comments
 *  12  Search, 404, empty states
 *  13  Footer
 *  14  Block styles for editor-composed pages
 *  15  Responsive: 1024–1279, 768–1023, below 768
 *
 * Rules never double up: a cell carries border-right and/or border-bottom
 * only, and the composition around it supplies the outer edge.
 */

/* ------------------------------------------------------------------ 1 Tokens */

:root {
	--utg-canvas: #EDE4D0;
	--utg-paper: #F6F0E2;
	--utg-ink: #1E1A16;
	--utg-ochre: #C8922A;
	--utg-vermilion: #A93B27;
	--utg-grey-blue: #6E8A99;
	--utg-grey-blue-text: #4A6472;

	--utg-ink-72: rgba(30, 26, 22, .72);
	--utg-ink-70: rgba(30, 26, 22, .7);
	--utg-canvas-70: rgba(237, 228, 208, .78);

	/*
	 * The comp specifies ink 42% for placeholders (2.5:1). Held at 58% it is
	 * 3.9:1, which clears AA for the 24px type it is set in at every
	 * breakpoint, and still reads as a hint rather than as a filled field.
	 */
	--utg-placeholder: rgba(30, 26, 22, .58);
	--utg-placeholder-small: rgba(30, 26, 22, .64);

	--utg-rule-w: 3px;
	--utg-rule: var(--utg-rule-w) solid var(--utg-ink);
	--utg-row: 200px;
	--utg-measure: 640px;
	--utg-breakout: 0px;

	--utg-f-display: "Young Serif", Georgia, "Times New Roman", serif;
	--utg-f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--utg-f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* -------------------------------------------------------------------- 2 Base */

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

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

body.utg {
	margin: 0;
	background: #D8CDB4;
	color: var(--utg-ink);
	font-family: var(--utg-f-body);
	font-size: 16px;
	line-height: 1.65;
}

body.utg img {
	max-width: 100%;
	height: auto;
}

body.utg h1,
body.utg h2,
body.utg h3,
body.utg h4 {
	font-family: var(--utg-f-display);
	font-weight: 400;
	letter-spacing: -.01em;
	margin: 0;
}

/*
 * Cells control their own spacing, so paragraphs carry none by default. This
 * is (0,1,1), which outranks a bare `.utg-prose > *`, so every rule that puts
 * the flow spacing back inside prose is written with the body class too.
 */
body.utg p {
	margin: 0;
}

/* Nothing in this design is round, soft or raised. */
body.utg :where(a, button, input, img, figure, blockquote, table, details, summary, .wp-block-group, .wp-block-column) {
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
}

/* --------------------------------------------- 3 Shell, skip link, utilities */

.utg-shell {
	max-width: 1280px;
	margin: 0 auto;
	background: var(--utg-canvas);
}

@media (min-width: 1300px) {
	.utg-shell {
		max-width: 1286px;
		border-left: var(--utg-rule);
		border-right: var(--utg-rule);
	}
}

.utg-main {
	display: block;
}

.utg-skip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background: var(--utg-ink);
	color: var(--utg-canvas);
	font-family: var(--utg-f-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 22px;
	clip-path: inset(50%);
}

.utg-skip:focus {
	clip-path: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.utg-label {
	font-family: var(--utg-f-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.utg-label--tight {
	font-size: 10.5px;
	letter-spacing: .1em;
}

.utg-label--corner {
	position: absolute;
	left: 14px;
	bottom: 10px;
	font-size: 10px;
	letter-spacing: .12em;
}

.utg-numeral {
	font-family: var(--utg-f-display);
	font-size: 96px;
	line-height: .85;
	letter-spacing: -.02em;
}

.utg-swatch {
	display: block;
	width: 10px;
	height: 10px;
	flex: 0 0 10px;
}

.utg-cell {
	position: relative;
	padding: 22px 28px;
}

/*
 * Photos sit inside the palette, and come alive on hover.
 *
 * Written with the body class because `body.utg img { height: auto }` above is
 * (0,1,1) and would otherwise win, leaving every cover image short of the
 * bottom of its cell.
 */
body.utg .utg-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: sepia(.2) saturate(.9);
	transition: filter 150ms ease;
}

.utg-photo--empty {
	background: #DBD0B7;
}

a:hover .utg-photo,
a:focus-visible .utg-photo {
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.utg-photo {
		transition: none;
	}
}

/* Focus rings sit inside the cell so the rules are never disturbed. */
body.utg :where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--utg-vermilion);
	outline-offset: -3px;
}

/* ------------------------------- 4 Header, navigation, search drawer */

.utg-header {
	display: grid;
	grid-template-columns: 88px 1fr auto auto;
	border-bottom: var(--utg-rule);
}

.utg-header > * {
	min-width: 0;
}

.utg-header__mark {
	display: grid;
	place-items: center;
	padding: 14px;
	border-right: var(--utg-rule);
	color: var(--utg-ink);
}

.utg-mark {
	display: block;
}

.utg-mark--custom {
	width: 54px;
	height: auto;
}

.utg-header__wordmark {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 16px 28px;
	border-right: var(--utg-rule);
}

.utg-brand__name {
	font-family: var(--utg-f-mono);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.utg-brand__motto {
	font-family: var(--utg-f-display);
	font-size: 13px;
	line-height: 1.2;
	color: var(--utg-vermilion);
}

.utg-header__nav {
	display: flex;
	align-items: center;
	padding: 0 28px;
	border-right: var(--utg-rule);
}

.utg-nav__list {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.utg-nav__list li {
	margin: 0;
}

body.utg .utg-nav__list a {
	display: block;
	padding: 8px 0;
	font-family: var(--utg-f-mono);
	font-size: 11.5px;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--utg-ink);
	white-space: nowrap;
}

body.utg .utg-nav__list a:hover,
body.utg .utg-nav__list .current-menu-item > a,
body.utg .utg-nav__list .current-menu-ancestor > a {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

body.utg .utg-header__search {
	display: flex;
	align-items: center;
	padding: 0 28px;
	background: var(--utg-ink);
	color: var(--utg-canvas);
	font-family: var(--utg-f-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

body.utg .utg-header__search:hover {
	background: var(--utg-vermilion);
	color: var(--utg-canvas);
}

.utg-header__menu {
	display: none;
}

/* The drawer opens with :target when there is no JS, and by class when there is. */
.utg-searchrow {
	display: none;
	border-bottom: var(--utg-rule);
	padding: 22px 32px;
}

html:not(.utg-js) .utg-searchrow:target,
.utg-searchrow.is-open {
	display: block;
}

.utg-search {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.utg-search__label {
	font-family: var(--utg-f-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.utg-search__input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: var(--utg-rule);
	padding: 0 0 10px;
	color: var(--utg-ink);
	font-family: var(--utg-f-display);
	font-size: 24px;
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
}

.utg-search__input::placeholder {
	color: var(--utg-placeholder);
	opacity: 1;
}

.utg-search--row .utg-search__input {
	font-size: 24px;
}

/* -------------------------------------------------------- 5 Hero composition */

.utg-hero {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(3, minmax(var(--utg-row), auto));
	border-bottom: var(--utg-rule);
}

.utg-hero > * {
	min-width: 0;
}

.utg-hero__media {
	grid-column: 1 / 8;
	grid-row: 1 / 4;
	position: relative;
	border-right: var(--utg-rule);
	overflow: hidden;
	min-height: 0;
}

/*
 * The image spans three rows, so left in flow its intrinsic height would set
 * them all and the 200px grid would become a 330px one. Taking it out of flow
 * lets the text cells size the composition, which is what the comp does.
 */
.utg-hero__media .utg-photo,
.utg-arc__media .utg-photo {
	position: absolute;
	inset: 0;
}

.utg-hero__title {
	grid-column: 8 / 13;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* space-between does the spacing; the gap is only a collision guard, so it
	   must stay small enough that a two-line H1 still fits the 200px row. */
	gap: 12px;
	padding: 26px 32px;
	border-bottom: var(--utg-rule);
}

.utg-hero__h1 {
	font-size: 60px;
	line-height: .98;
	text-wrap: balance;
}

.utg-hero__sun {
	grid-column: 8 / 10;
	grid-row: 2;
	display: grid;
	place-items: center;
	background: var(--utg-ochre);
	border-right: var(--utg-rule);
	border-bottom: var(--utg-rule);
}

.utg-sun {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--utg-ink);
}

body.utg .utg-hero__count {
	grid-column: 10 / 13;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	background: var(--utg-vermilion);
	color: var(--utg-canvas);
	border-bottom: var(--utg-rule);
	text-decoration: none;
}

body.utg .utg-hero__count:hover {
	background: var(--utg-ink);
	color: var(--utg-canvas);
}

.utg-hero__search {
	grid-column: 8 / 11;
	grid-row: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	border-right: var(--utg-rule);
}

.utg-hero__search .utg-search,
.utg-404__search .utg-search {
	flex: 1;
	justify-content: space-between;
	gap: 18px;
}

/* The field is 24px display type; keep it from clipping in a narrow cell. */
.utg-hero__search .utg-search__input,
.utg-404__search .utg-search__input {
	font-size: clamp(18px, 2.1vw, 24px);
}

body.utg .utg-hero__compass,
body.utg .utg-404__compass {
	grid-column: 11 / 13;
	grid-row: 3;
	display: grid;
	place-items: center;
	background: var(--utg-grey-blue);
	color: var(--utg-ink);
	text-decoration: none;
	padding: 0;
}

body.utg .utg-hero__compass:hover,
body.utg .utg-404__compass:hover {
	background: var(--utg-ochre);
}

.utg-compass {
	display: block;
	text-align: center;
	font-family: var(--utg-f-display);
	font-size: 30px;
	line-height: 1;
}

.utg-compass__bar {
	display: block;
	width: 3px;
	height: 40px;
	margin: 6px auto;
	background: var(--utg-ink);
}

/* ---------------------------------------------------- 6 Section heading rows */

.utg-section {
	border-bottom: var(--utg-rule);
}

/* The section grid's own last row supplies the bottom rule. */
.utg-section--explore {
	border-bottom: 0;
}

.utg-headrow {
	display: grid;
	grid-template-columns: 1fr auto;
	border-bottom: var(--utg-rule);
}

.utg-headrow > * {
	min-width: 0;
}

.utg-headrow__title {
	font-size: 40px;
	line-height: 1.05;
	padding: 22px 32px;
	text-wrap: balance;
}

.utg-headrow__meta {
	display: grid;
	place-items: center;
	padding: 0 32px;
	border-left: var(--utg-rule);
}

.utg-headrow__meta .utg-label {
	font-size: 11.5px;
	letter-spacing: .12em;
	text-align: center;
}

/* ------------------------------------------------------- 7 Tiles and grids */

.utg-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}

.utg-grid > * {
	min-width: 0;
}

body.utg .utg-tile {
	display: flex;
	flex-direction: column;
	color: var(--utg-ink);
	text-decoration: none;
	border-right: var(--utg-rule);
	border-bottom: var(--utg-rule);
}

.utg-grid > .utg-tile:nth-child(6n) {
	border-right: 0;
}

.utg-tile--filler {
	display: none;
}

.utg-tile__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-bottom: var(--utg-rule);
}

.utg-tile__media .utg-photo {
	filter: sepia(.22) saturate(.85);
}

.utg-tile__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 18px;
	flex: 1;
}

.utg-tile__meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.utg-tile__meta--split {
	justify-content: space-between;
}

.utg-tile__name {
	font-family: var(--utg-f-display);
	font-size: 19px;
	line-height: 1.1;
	text-wrap: pretty;
}

.utg-tile__excerpt {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--utg-ink-72);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.utg .utg-tile:hover .utg-tile__name {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.utg-grid--related {
	grid-template-columns: repeat(3, 1fr);
}

.utg-grid--related > .utg-tile:nth-child(6n) {
	border-right: var(--utg-rule);
}

.utg-grid--related > .utg-tile:nth-child(3n) {
	border-right: 0;
}

/* -------------------------------- 8 Latest: feature cell and table rows */

.utg-latest {
	display: grid;
	grid-template-columns: 5fr 7fr;
}

.utg-latest > * {
	min-width: 0;
}

body.utg .utg-feature {
	display: flex;
	flex-direction: column;
	color: var(--utg-ink);
	text-decoration: none;
	border-right: var(--utg-rule);
}

.utg-feature__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-bottom: var(--utg-rule);
}

.utg-feature__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 28px 26px;
	flex: 1;
}

.utg-feature__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.utg-feature__meta .utg-label {
	letter-spacing: .12em;
}

.utg-feature__title {
	font-family: var(--utg-f-display);
	font-size: 30px;
	line-height: 1.08;
	letter-spacing: 0;
	text-wrap: pretty;
}

.utg-feature__excerpt {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--utg-ink-72);
}

body.utg .utg-feature:hover .utg-feature__title {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.utg-latest__rows {
	display: grid;
	grid-template-rows: repeat(5, minmax(0, 1fr));
}

.utg-rows {
	display: block;
	border-bottom: 0;
}

body.utg .utg-row {
	display: grid;
	grid-template-columns: 64px 150px 1fr 118px;
	color: var(--utg-ink);
	text-decoration: none;
	border-bottom: var(--utg-rule);
	transition: background-color 150ms ease;
	min-height: 64px;
}

.utg-latest__rows > .utg-row:last-child {
	border-bottom: 0;
}

body.utg .utg-row:hover {
	background: var(--utg-paper);
}

@media (prefers-reduced-motion: reduce) {
	body.utg .utg-row {
		transition: none;
	}
}

.utg-row > * {
	min-width: 0;
}

.utg-row__index {
	display: grid;
	place-items: center;
	border-right: var(--utg-rule);
	font-family: var(--utg-f-mono);
	font-size: 12px;
}

.utg-row__cat {
	display: flex;
	align-items: center;
	padding: 0 16px;
	border-right: var(--utg-rule);
}

.utg-row__cat .utg-label {
	overflow-wrap: anywhere;
}

.utg-row__title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 16px 20px;
}

.utg-row__cat-inline {
	display: none;
}

.utg-row__heading {
	font-family: var(--utg-f-display);
	font-size: 19px;
	line-height: 1.15;
	text-wrap: pretty;
}

body.utg .utg-row:hover .utg-row__heading {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.utg-row__date {
	display: grid;
	place-items: center;
	border-left: var(--utg-rule);
	font-family: var(--utg-f-mono);
	font-size: 11px;
}

/* ------------------------------- 9 Archive composition and pagination */

.utg-arc {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(2, minmax(var(--utg-row), auto));
	border-bottom: var(--utg-rule);
}

.utg-arc > * {
	min-width: 0;
}

.utg-arc__media {
	grid-column: 1 / 6;
	grid-row: 1 / 3;
	position: relative;
	border-right: var(--utg-rule);
	overflow: hidden;
	min-height: 0;
}

.utg-arc__title {
	grid-column: 6 / 13;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding: 26px 32px;
	border-bottom: var(--utg-rule);
}

.utg-arc__h1 {
	font-size: 60px;
	line-height: .98;
	text-wrap: balance;
}

.utg-arc__desc {
	grid-column: 6 / 11;
	grid-row: 2;
	padding: 22px 28px;
	border-right: var(--utg-rule);
	font-size: 16px;
	line-height: 1.55;
	display: flex;
	align-items: center;
}

.utg-arc__count {
	grid-column: 11 / 13;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 28px;
}

.utg-arc--noimage .utg-arc__title {
	grid-column: 1 / 13;
}

.utg-arc--noimage .utg-arc__desc {
	grid-column: 1 / 11;
}

.utg-grid--posts > .utg-tile:nth-child(6n) {
	border-right: 0;
}

.utg-pager {
	display: grid;
	grid-template-columns: auto 1fr auto;
	border-bottom: var(--utg-rule);
}

.utg-pager > * {
	min-width: 0;
}

.utg-pager__side {
	display: flex;
	align-items: center;
	padding: 22px 28px;
}

.utg-pager__side--prev {
	border-right: var(--utg-rule);
}

.utg-pager__side--next {
	border-left: var(--utg-rule);
}

body.utg .utg-pager a,
.utg-pager__disabled {
	display: inline-block;
	padding: 4px 0;
	font-family: var(--utg-f-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--utg-ink);
	white-space: nowrap;
}

.utg-pager__disabled {
	color: rgba(30, 26, 22, .64);
}

.utg-pager__numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 28px;
	padding: 22px 16px;
}

body.utg .utg-pager__numbers .page-numbers {
	font-family: var(--utg-f-mono);
	font-size: 12px;
	letter-spacing: .06em;
	text-decoration: none;
	color: var(--utg-ink);
	display: grid;
	place-items: center;
	min-width: 32px;
	min-height: 32px;
}

body.utg .utg-pager__numbers .page-numbers:hover {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}

body.utg .utg-pager__numbers .page-numbers.current {
	background: var(--utg-ink);
	color: var(--utg-canvas);
}

/* --------------------------------------- 10 Guide: header, figure, prose */

.utg-guide__head {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	border-bottom: var(--utg-rule);
}

.utg-guide__head > * {
	min-width: 0;
}

.utg-guide__title {
	grid-column: 1 / 9;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border-right: var(--utg-rule);
	min-height: var(--utg-row);
}

.utg-guide__head--full .utg-guide__title {
	grid-column: 1 / 13;
	border-right: 0;
}

.utg-guide__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

body.utg .utg-guide__cat {
	display: inline-block;
	/* A 24px hit area without changing where the row sits. */
	padding: 5px 0;
	margin: -5px 0;
	text-decoration: none;
}

body.utg .utg-guide__cat:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.utg-guide__sep {
	color: var(--utg-ink-72);
}

body.utg .utg-guide__h1 {
	font-size: 52px;
	line-height: 1;
	/* Sits at the foot of the cell, as the hero H1 does, so a tall contents
	   cell beside it reads as a composition rather than as a void. */
	margin-top: auto;
	text-wrap: balance;
}

.utg-guide__crumbs,
.utg-crumbs {
	font-family: var(--utg-f-mono);
	font-size: 10.5px;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--utg-ink-72);
}

body.utg .utg-crumbs a {
	color: var(--utg-ink-72);
	text-decoration: none;
}

body.utg .utg-crumbs a:hover {
	color: var(--utg-vermilion);
	text-decoration: underline;
}

.utg-cell--toc {
	grid-column: 9 / 13;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 22px 28px;
}

.utg-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.utg-cell--toc-wide .utg-toc__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 20px;
}

body.utg .utg-toc__list a {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 8px;
	color: var(--utg-ink);
	text-decoration: none;
	padding: 3px 0;
	min-height: 24px;
}

body.utg .utg-toc__list a:hover .utg-toc__title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.utg-toc__index {
	font-family: var(--utg-f-mono);
	font-size: 12px;
	line-height: 1.5;
}

.utg-toc__title {
	font-size: 14px;
	line-height: 1.35;
	text-wrap: pretty;
}

.utg-byline {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.utg-byline__name {
	font-size: 14px;
	line-height: 1.4;
}

.utg-guide__figure {
	margin: 0;
	border-bottom: var(--utg-rule);
}

.utg-guide__figure .utg-photo {
	height: 520px;
	filter: sepia(.15) saturate(.92);
}

.utg-guide__caption {
	border-top: var(--utg-rule);
	padding: 12px 32px;
}

.utg-body {
	padding: 0 32px;
	border-bottom: var(--utg-rule);
}

.utg-prose {
	max-width: var(--utg-measure);
	margin: 0 auto;
	padding: 56px 0 72px;
	font-size: 18px;
	line-height: 1.65;
}

body.utg .utg-prose > * {
	margin: 0 0 22px;
}

body.utg .utg-prose > *:last-child {
	margin-bottom: 0;
}

.utg-prose h2 {
	position: relative;
	font-size: 32px;
	line-height: 1.05;
	border-top: var(--utg-rule);
	margin: 56px 0 0;
	padding-top: 34px;
	text-wrap: pretty;
}

.utg-prose h2::before {
	content: attr(data-index);
	position: absolute;
	top: 12px;
	left: 0;
	font-family: var(--utg-f-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .14em;
}

body.utg .utg-prose h2 + * {
	margin-top: 22px;
}

.utg-prose h3 {
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: 0;
	margin: 36px 0 0;
	text-wrap: pretty;
}

body.utg .utg-prose h3 + * {
	margin-top: 16px;
}

.utg-prose h4 {
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: 0;
	margin: 28px 0 0;
}

body.utg .utg-prose a {
	color: var(--utg-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

body.utg .utg-prose a:hover {
	color: var(--utg-vermilion);
}

.utg-prose ul,
.utg-prose ol {
	padding-left: 26px;
}

.utg-prose li {
	margin-bottom: 10px;
}

.utg-prose ul {
	list-style: none;
	padding-left: 22px;
}

.utg-prose ul > li {
	position: relative;
}

.utg-prose ul > li::before {
	content: "";
	position: absolute;
	left: -22px;
	top: .62em;
	width: 6px;
	height: 6px;
	background: var(--utg-ink);
}

.utg-prose ol {
	list-style: none;
	counter-reset: utg-ol;
	padding-left: 34px;
}

.utg-prose ol > li {
	position: relative;
	counter-increment: utg-ol;
}

.utg-prose ol > li::before {
	content: counter(utg-ol, decimal-leading-zero);
	position: absolute;
	left: -34px;
	top: .18em;
	font-family: var(--utg-f-mono);
	font-size: 12px;
	letter-spacing: .06em;
}

.utg-prose blockquote {
	margin: 32px 0;
	border: var(--utg-rule);
	padding: 28px 32px;
	font-family: var(--utg-f-display);
	font-size: 24px;
	line-height: 1.3;
}

.utg-prose blockquote p {
	margin: 0 0 12px;
}

.utg-prose blockquote p:last-child {
	margin-bottom: 0;
}

.utg-prose blockquote cite {
	display: block;
	font-family: var(--utg-f-mono);
	font-size: 11px;
	font-style: normal;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.utg-prose figure,
.utg-prose .wp-block-image {
	margin: 32px 0;
	border: var(--utg-rule);
}

.utg-prose figure img,
.utg-prose .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	filter: sepia(.2) saturate(.9);
}

.utg-prose figcaption {
	border-top: var(--utg-rule);
	padding: 10px 14px;
	margin: 0;
	font-family: var(--utg-f-mono);
	font-size: 10.5px;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--utg-ink);
}

.utg-prose > img {
	border: var(--utg-rule);
	filter: sepia(.2) saturate(.9);
}

/* Tables are the densest thing in these guides; give them room and a rail. */
.utg-table-panel {
	overflow-x: auto;
	margin: 32px calc(-1 * var(--utg-breakout));
	border: var(--utg-rule);
}

.utg-prose table {
	border-collapse: collapse;
	width: 100%;
	min-width: 460px;
	font-size: 15px;
	line-height: 1.5;
}

.utg-prose th,
.utg-prose td {
	border: 0;
	border-bottom: var(--utg-rule);
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
}

.utg-prose thead th {
	font-family: var(--utg-f-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.utg-prose tbody tr:last-child td,
.utg-prose tbody tr:last-child th {
	border-bottom: 0;
}

.utg-prose code,
.utg-prose kbd {
	font-family: var(--utg-f-mono);
	font-size: .86em;
	background: var(--utg-paper);
	padding: 2px 5px;
}

.utg-prose pre {
	border: var(--utg-rule);
	padding: 22px;
	overflow-x: auto;
	font-family: var(--utg-f-mono);
	font-size: 14px;
}

.utg-prose hr {
	border: 0;
	height: 3px;
	background: var(--utg-ink);
	margin: 40px 0;
}

/* The credits tail, folded into one cell. */
.utg-apparatus {
	border: var(--utg-rule);
	margin-top: 56px;
}

.utg-apparatus__summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 22px;
	font-family: var(--utg-f-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
}

.utg-apparatus__summary::-webkit-details-marker {
	display: none;
}

.utg-apparatus__summary::after {
	content: "+";
	font-size: 16px;
	line-height: 1;
}

.utg-apparatus[open] .utg-apparatus__summary {
	border-bottom: var(--utg-rule);
}

.utg-apparatus[open] .utg-apparatus__summary::after {
	content: "–";
}

.utg-apparatus__body {
	padding: 22px;
	font-size: 15px;
	line-height: 1.6;
}

body.utg .utg-apparatus__body > * {
	margin: 0 0 16px;
}

body.utg .utg-apparatus__body > *:last-child {
	margin-bottom: 0;
}

.utg-apparatus__body h2,
.utg-apparatus__body h3 {
	border-top: 0;
	padding-top: 0;
	margin: 24px 0 0;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: 0;
}

.utg-apparatus__body h2::before {
	content: none;
}

.utg-apparatus__body h2:first-child {
	margin-top: 0;
}

.utg-pagelinks {
	margin-top: 40px;
	font-family: var(--utg-f-mono);
	font-size: 12px;
	letter-spacing: .06em;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ------------------------- 11 Guide: post navigation, related, comments */

.utg-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: var(--utg-rule);
}

.utg-postnav > * {
	min-width: 0;
}

.utg-postnav__cell {
	padding: 28px 32px;
	border-right: var(--utg-rule);
	min-height: 120px;
}

.utg-postnav--single {
	grid-template-columns: 1fr;
}

.utg-postnav--single .utg-postnav__cell {
	border-right: 0;
}

.utg-postnav__cell--next {
	border-right: 0;
	text-align: right;
}

.utg-postnav--single .utg-postnav__cell--next {
	text-align: left;
}

body.utg .utg-postnav a {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--utg-ink);
	text-decoration: none;
}

.utg-postnav__title {
	font-family: var(--utg-f-display);
	font-size: 22px;
	line-height: 1.15;
	text-wrap: pretty;
}

body.utg .utg-postnav a:hover .utg-postnav__title {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.utg-comments {
	border-bottom: var(--utg-rule);
	padding: 40px 32px;
}

.utg-comments__inner {
	max-width: var(--utg-measure);
	margin: 0 auto;
}

body.utg .utg-comments__title {
	font-size: 30px;
	margin-bottom: 24px;
}

.utg-comments__list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.utg-comments__list .comment-body {
	border: var(--utg-rule);
	padding: 22px 28px;
	margin-bottom: 22px;
}

.utg-comments input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.utg-comments textarea {
	width: 100%;
	border: var(--utg-rule);
	background: var(--utg-paper);
	padding: 12px 14px;
	font-family: var(--utg-f-body);
	font-size: 16px;
	color: var(--utg-ink);
}

.utg-comments input[type="submit"] {
	background: var(--utg-ink);
	color: var(--utg-canvas);
	border: 0;
	padding: 14px 28px;
	font-family: var(--utg-f-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}

/* -------------------------------------- 12 Search, 404, empty states */

.utg-searchhead {
	display: grid;
	grid-template-columns: 2fr 1fr;
	border-bottom: var(--utg-rule);
}

.utg-searchhead > * {
	min-width: 0;
}

.utg-searchhead__title {
	font-size: 40px;
	line-height: 1.05;
	padding: 22px 32px;
	overflow-wrap: anywhere;
}

.utg-searchhead__count {
	display: grid;
	place-items: center;
	padding: 0 32px;
	border-left: var(--utg-rule);
}

.utg-empty {
	padding: 56px 32px 64px;
	border-bottom: var(--utg-rule);
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 760px;
}

.utg-empty__title {
	font-family: var(--utg-f-display);
	font-size: 30px;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.utg-404 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(2, minmax(var(--utg-row), auto));
	border-bottom: var(--utg-rule);
}

.utg-404 > * {
	min-width: 0;
}

.utg-404__numeral {
	grid-column: 1 / 7;
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	background: var(--utg-vermilion);
	color: var(--utg-canvas);
	border-right: var(--utg-rule);
	font-family: var(--utg-f-display);
	font-size: 160px;
	line-height: 1;
	letter-spacing: -.02em;
}

.utg-404__title {
	grid-column: 7 / 13;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 26px 32px;
	border-bottom: var(--utg-rule);
}

.utg-404__h1 {
	font-size: 40px;
	line-height: 1.05;
}

.utg-404__copy {
	font-size: 16px;
	line-height: 1.55;
	color: var(--utg-ink-72);
	max-width: 42ch;
}

.utg-404__search {
	grid-column: 7 / 10;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	border-right: var(--utg-rule);
}

/* -------------------------------------------------------------- 13 Footer */

.utg-foot {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
	font-size: 13.5px;
}

.utg-foot > * {
	min-width: 0;
}

.utg-foot__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 32px;
	border-right: var(--utg-rule);
}

.utg-foot__col:last-child {
	border-right: 0;
}

.utg-foot__col--brand {
	justify-content: space-between;
	gap: 24px;
}

.utg-foot__wordmark {
	font-family: var(--utg-f-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1.3;
}

.utg-foot__blurb {
	line-height: 1.5;
	color: var(--utg-ink-70);
	max-width: 280px;
}

.utg-foot__nav {
	display: block;
}

.utg-foot__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* 1px gap + 4px of link padding each side keeps the comp's 9px rhythm
	   while giving every link a 24px hit area. */
	gap: 1px;
}

body.utg .utg-foot__list a {
	display: block;
	padding: 4px 0;
	color: inherit;
	text-decoration: none;
	font-size: 13.5px;
	line-height: 1.5;
}

body.utg .utg-foot__list a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.utg-foot__col--info {
	background: var(--utg-vermilion);
	color: var(--utg-canvas);
	justify-content: space-between;
	gap: 16px;
}

.utg-foot__motto {
	font-family: var(--utg-f-display);
	font-size: 22px;
	line-height: 1.1;
}

/* ------------------------- 14 Block styles for editor-composed pages */

.utg-prose .is-style-utg-cell {
	border: var(--utg-rule);
	padding: 22px 28px;
}

.utg-prose .is-style-utg-cell-ochre {
	background: var(--utg-ochre);
	color: var(--utg-ink);
	padding: 22px 28px;
}

.utg-prose .is-style-utg-cell-paper {
	background: var(--utg-paper);
	border: var(--utg-rule);
	padding: 22px 28px;
}

.utg-prose .is-style-utg-cell-ink {
	background: var(--utg-ink);
	color: var(--utg-canvas);
	padding: 22px 28px;
}

body.utg .utg-prose .is-style-utg-cell-ink a {
	color: var(--utg-canvas);
}

.utg-prose .is-style-utg-label {
	font-family: var(--utg-f-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.3;
}

.utg-prose .is-style-utg-mono {
	font-family: var(--utg-f-mono);
	font-size: 15px;
}

.utg-prose .wp-block-columns {
	display: flex;
	gap: 0;
	flex-wrap: wrap;
}

.utg-prose .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

.utg-prose .wp-block-buttons {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.utg-prose .wp-block-button__link {
	display: inline-block;
	background: var(--utg-ink);
	color: var(--utg-canvas);
	text-decoration: none;
	padding: 14px 28px;
	font-family: var(--utg-f-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.utg-prose .wp-block-button__link:hover {
	background: var(--utg-vermilion);
	color: var(--utg-canvas);
}

/* --------------------------------------------------------- 15 Responsive */

@media (min-width: 1024px) {
	:root {
		--utg-breakout: 110px;
	}
}

@media (max-width: 1279.98px) {
	:root {
		--utg-row: 180px;
	}

	.utg-hero__h1,
	.utg-arc__h1 {
		font-size: 48px;
	}

	.utg-numeral {
		font-size: 80px;
	}

	.utg-guide__h1 {
		font-size: 44px;
	}

	.utg-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.utg-grid > .utg-tile:nth-child(6n) {
		border-right: var(--utg-rule);
	}

	.utg-grid > .utg-tile:nth-child(4n) {
		border-right: 0;
	}

	.utg-grid--related {
		grid-template-columns: repeat(3, 1fr);
	}

	.utg-grid--related > .utg-tile:nth-child(4n) {
		border-right: var(--utg-rule);
	}

	.utg-grid--related > .utg-tile:nth-child(3n) {
		border-right: 0;
	}

	.utg-row {
		grid-template-columns: 56px 130px 1fr 104px;
	}

	.utg-404__numeral {
		font-size: 120px;
	}
}

@media (max-width: 1023.98px) {
	.utg-header {
		grid-template-columns: 88px 1fr auto;
	}

	.utg-header__nav {
		grid-column: 1 / -1;
		grid-row: 2;
		border-right: 0;
		border-top: var(--utg-rule);
		padding: 0 28px;
		overflow-x: auto;
	}

	.utg-nav__list {
		padding: 14px 0;
	}

	.utg-hero {
		grid-template-rows: 320px repeat(3, minmax(180px, auto));
	}

	.utg-hero__media {
		grid-column: 1 / 13;
		grid-row: 1;
		border-right: 0;
		border-bottom: var(--utg-rule);
	}

	.utg-hero__title {
		grid-column: 1 / 13;
		grid-row: 2;
	}

	.utg-hero__sun {
		grid-column: 1 / 7;
		grid-row: 3;
	}

	body.utg .utg-hero__count {
		grid-column: 7 / 13;
		grid-row: 3;
	}

	.utg-hero__search {
		grid-column: 1 / 7;
		grid-row: 4;
	}

	body.utg .utg-hero__compass {
		grid-column: 7 / 13;
		grid-row: 4;
	}

	.utg-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.utg-grid > .utg-tile:nth-child(4n) {
		border-right: var(--utg-rule);
	}

	.utg-grid > .utg-tile:nth-child(3n) {
		border-right: 0;
	}

	.utg-latest {
		grid-template-columns: 1fr;
	}

	body.utg .utg-feature {
		border-right: 0;
		border-bottom: var(--utg-rule);
	}

	.utg-latest__rows {
		grid-template-rows: none;
	}

	.utg-row {
		grid-template-columns: 56px 1fr 104px;
	}

	.utg-row__cat {
		display: none;
	}

	.utg-row__cat-inline {
		display: block;
	}

	.utg-arc {
		grid-template-rows: 260px repeat(2, minmax(160px, auto));
	}

	.utg-arc__media {
		grid-column: 1 / 13;
		grid-row: 1;
		border-right: 0;
		border-bottom: var(--utg-rule);
	}

	.utg-arc__title {
		grid-column: 1 / 13;
		grid-row: 2;
	}

	.utg-arc__desc {
		grid-column: 1 / 9;
		grid-row: 3;
	}

	.utg-arc__count {
		grid-column: 9 / 13;
		grid-row: 3;
	}

	.utg-arc--noimage {
		grid-template-rows: repeat(2, minmax(160px, auto));
	}

	.utg-arc--noimage .utg-arc__title {
		grid-row: 1;
	}

	.utg-arc--noimage .utg-arc__desc {
		grid-column: 1 / 9;
		grid-row: 2;
	}

	.utg-arc--noimage .utg-arc__count {
		grid-row: 2;
	}

	.utg-guide__title {
		grid-column: 1 / 13;
		border-right: 0;
		border-bottom: var(--utg-rule);
	}

	.utg-cell--toc {
		grid-column: 1 / 13;
	}

	.utg-guide__figure .utg-photo {
		height: 380px;
	}

	.utg-404__numeral {
		grid-column: 1 / 13;
		grid-row: 1;
		border-right: 0;
		border-bottom: var(--utg-rule);
		min-height: 220px;
	}

	.utg-404__title {
		grid-column: 1 / 13;
		grid-row: 2;
	}

	.utg-404__search {
		grid-column: 1 / 7;
		grid-row: 3;
	}

	body.utg .utg-404__compass {
		grid-column: 7 / 13;
		grid-row: 3;
	}

	.utg-foot {
		grid-template-columns: 1fr 1fr;
	}

	.utg-foot__col:nth-child(1),
	.utg-foot__col:nth-child(2) {
		border-bottom: var(--utg-rule);
	}

	.utg-foot__col:nth-child(2n) {
		border-right: 0;
	}
}

@media (max-width: 767.98px) {
	.utg-header {
		grid-template-columns: 64px 1fr auto;
	}

	.utg-header__mark {
		padding: 10px;
	}

	.utg-header__mark .utg-mark {
		width: 44px;
		height: 44px;
	}

	.utg-header__wordmark {
		padding: 14px 16px;
	}

	.utg-brand__name {
		font-size: 11.5px;
		letter-spacing: .16em;
	}

	.utg-brand__motto {
		display: none;
	}

	body.utg .utg-header__search {
		display: none;
	}

	body.utg .utg-header__menu {
		display: flex;
		align-items: center;
		padding: 0 20px;
		background: var(--utg-ink);
		color: var(--utg-canvas);
		font-family: var(--utg-f-mono);
		font-size: 11.5px;
		letter-spacing: .1em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.utg-header__nav {
		display: none;
		grid-column: 1 / -1;
		grid-row: 2;
		border-top: var(--utg-rule);
		padding: 0;
		overflow: visible;
	}

	html:not(.utg-js) .utg-header__nav:target,
	.utg-header__nav.is-open {
		display: block;
	}

	.utg-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}

	.utg-nav__list li + li {
		border-top: var(--utg-rule);
	}

	body.utg .utg-nav__list a {
		display: block;
		padding: 18px 20px;
		font-family: var(--utg-f-display);
		font-size: 22px;
		letter-spacing: 0;
		text-transform: none;
		white-space: normal;
	}

	.utg-hero {
		grid-template-rows: 240px minmax(160px, auto) minmax(150px, auto) minmax(150px, auto) minmax(120px, auto);
	}

	.utg-hero__title {
		grid-row: 2;
		padding: 22px 20px;
	}

	.utg-hero__h1 {
		font-size: 38px;
	}

	.utg-hero__sun {
		grid-column: 1 / 7;
		grid-row: 3;
	}

	body.utg .utg-hero__count {
		grid-column: 7 / 13;
		grid-row: 3;
	}

	.utg-hero__search {
		grid-column: 1 / 13;
		grid-row: 4;
		border-right: 0;
		border-bottom: var(--utg-rule);
	}

	body.utg .utg-hero__compass {
		grid-column: 1 / 13;
		grid-row: 5;
	}

	.utg-sun {
		width: 56px;
		height: 56px;
	}

	.utg-numeral {
		font-size: 64px;
	}

	.utg-cell,
	.utg-hero__search,
	.utg-404__search {
		padding: 20px;
	}

	.utg-headrow {
		grid-template-columns: 1fr;
	}

	.utg-headrow__title {
		font-size: 30px;
		padding: 20px;
	}

	.utg-headrow__meta {
		border-left: 0;
		border-top: var(--utg-rule);
		padding: 14px 20px;
		place-items: start;
	}

	.utg-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.utg-grid > .utg-tile:nth-child(3n) {
		border-right: var(--utg-rule);
	}

	.utg-grid > .utg-tile:nth-child(2n) {
		border-right: 0;
	}

	.utg-grid--related {
		grid-template-columns: 1fr;
	}

	.utg-grid--related > .utg-tile {
		border-right: 0;
	}

	.utg-row {
		grid-template-columns: 48px 1fr;
	}

	.utg-row__date {
		display: none;
	}

	.utg-row__title {
		padding: 14px 16px;
	}

	.utg-arc {
		grid-template-rows: 200px repeat(2, minmax(140px, auto));
	}

	.utg-arc__title {
		padding: 22px 20px;
	}

	.utg-arc__h1 {
		font-size: 36px;
	}

	.utg-arc__desc {
		grid-column: 1 / 13;
		grid-row: 3;
		border-right: 0;
		border-bottom: var(--utg-rule);
		padding: 20px;
	}

	.utg-arc__count {
		grid-column: 1 / 13;
		grid-row: 4;
		padding: 20px;
	}

	.utg-arc {
		grid-template-rows: 200px minmax(140px, auto) minmax(0, auto) minmax(120px, auto);
	}

	.utg-arc--noimage {
		grid-template-rows: minmax(140px, auto) minmax(0, auto) minmax(120px, auto);
	}

	.utg-arc--noimage .utg-arc__desc {
		grid-row: 2;
	}

	.utg-arc--noimage .utg-arc__count {
		grid-row: 3;
	}

	.utg-guide__title {
		padding: 22px 20px;
	}

	.utg-guide__h1 {
		font-size: 32px;
		line-height: 1.05;
	}

	.utg-cell--toc {
		padding: 20px;
	}

	.utg-cell--toc-wide .utg-toc__list {
		grid-template-columns: 1fr;
	}

	.utg-guide__figure .utg-photo {
		height: 240px;
	}

	.utg-guide__caption {
		padding: 12px 20px;
	}

	.utg-body {
		padding: 0 20px;
	}

	.utg-prose {
		padding: 36px 0 48px;
		font-size: 17px;
		line-height: 1.6;
	}

	.utg-prose h2 {
		font-size: 26px;
		margin-top: 40px;
	}

	.utg-prose h3 {
		font-size: 21px;
	}

	.utg-prose blockquote {
		padding: 22px 20px;
		font-size: 20px;
	}

	.utg-postnav {
		grid-template-columns: 1fr;
	}

	.utg-postnav__cell {
		border-right: 0;
		border-bottom: var(--utg-rule);
		padding: 22px 20px;
		min-height: 0;
	}

	.utg-postnav__cell--next {
		border-bottom: 0;
		text-align: left;
	}

	.utg-postnav__cell:empty {
		display: none;
	}

	.utg-searchhead {
		grid-template-columns: 1fr;
	}

	.utg-searchhead__title {
		font-size: 30px;
		padding: 20px;
	}

	.utg-searchhead__count {
		border-left: 0;
		border-top: var(--utg-rule);
		padding: 14px 20px;
		place-items: start;
	}

	.utg-empty {
		padding: 36px 20px 44px;
	}

	.utg-404 {
		grid-template-rows: 180px minmax(160px, auto) minmax(150px, auto) minmax(120px, auto);
	}

	.utg-404__numeral {
		font-size: 88px;
		min-height: 0;
	}

	.utg-404__title {
		padding: 22px 20px;
	}

	.utg-404__h1 {
		font-size: 30px;
	}

	.utg-404__search {
		grid-column: 1 / 13;
		grid-row: 3;
		border-right: 0;
		border-bottom: var(--utg-rule);
	}

	body.utg .utg-404__compass {
		grid-column: 1 / 13;
		grid-row: 4;
	}

	.utg-foot {
		grid-template-columns: 1fr;
	}

	.utg-foot__col {
		border-right: 0;
		border-bottom: var(--utg-rule);
		padding: 24px 20px;
	}

	.utg-foot__col:last-child {
		border-bottom: 0;
	}

	.utg-comments {
		padding: 32px 20px;
	}

	.utg-pager {
		grid-template-columns: 1fr 1fr;
	}

	.utg-pager__numbers {
		grid-column: 1 / -1;
		grid-row: 1;
		border-bottom: var(--utg-rule);
	}

	.utg-pager__side {
		padding: 18px 20px;
	}

	.utg-pager__side--next {
		justify-content: flex-end;
	}
}