/*
 * Galley Proof: the stylesheet.
 *
 * Every page is a printer's galley proof lying on a desk. This file is a port of the approved mockups' inline
 * styles (Q1 home, T1 to T9 inner pages); the values are theirs. No build step: plain CSS.
 *
 * CLASS CONTRACT (one line per component; templates and the renderer rely on these names)
 *
 * Shell
 *   body.gp                    The desk. Also carries gp-marks--off | --light | --standard | --heavy.
 *   .gp-skip                   Skip link to #gp-main.
 *   .gp-desk                   Strip above the sheet: .gp-swatches (13 spans) and .gp-slug (the slug line).
 *   .gp-sheet-wrap > .gp-sheet The paper sheet. .gp-marks holds crop marks, registration targets, the bleed label.
 *   .gp-top > .gp-band         The band. Modifiers .gp-band--home (tall, video) and .gp-band--inner (short).
 *   .gp-head                   Running head inside the band: .gp-brand, .gp-nav (links, .is-current, .gp-cta).
 *   .gp-band__label, .gp-band__tc, .gp-band__title (.gp-band__first: the dotted first word), .gp-safe, .gp-slip.
 *   .gp-section                A padded block of the sheet. Modifiers: --home, --entry, --list, --tight, --end,
 *                              and --rule (3px ink rule above, as between galleys).
 *   .gp-foot, .gp-colophon     Subscribe footer inside the sheet; colophon strip below it (.gp-social).
 *
 * The grid
 *   .gp-row                    Three columns: .gp-gut (44px line number), .gp-tx (text), .gp-mg (328px margin).
 *                              Type modifiers set the measure variables: --lede, --body, --stand (standfirst).
 *                              .gp-row--p marks a text row whose margin notes align to its lines.
 *   .gp-span                   A cell that spans gutter and text (used by the record and wide list rows).
 *   .gp-tx--rule               Text cell with a hairline above and no padding (list rows).
 *   .gp-galley                 Wrapper the renderer prints. Modifiers --post, --page, --lede, --body.
 *
 * Marks (all drawn in CSS; the hand drawn shapes are SVG data urls)
 *   .gp-note                   A margin note: p.gp-note__ed (blue pencil) and p.gp-note__au (oxblood reply).
 *                              .gp-tilt-1 to -8 vary the slant; --plain drops the tick.
 *   .gp-grp, .gp-sp            Note groups and proportional spacers inside a margin cell (renderer only).
 *   .gp-ring                   Hand drawn ring. --small for one character; --stat on a big numeral; .gp-nw keeps
 *                              the ringed thing with the word before it.
 *   .gp-query                  Dotted pencil underline.
 *   del, s                     Pencil strike with the delete loop.
 *   ins.gp-ins                 Caret and handwriting.
 *   .gp-tick                   Hand drawn check mark (30 by 26).
 *   p.is-style-gp-glass        The whisky glass ring at the right of a paragraph.
 *   .is-style-gp-ringed        A ringed print (image block style). .gp-ringed is the same ring on any box.
 *
 * Pieces of the galley
 *   .gp-seg                    Segment head with a statement: .gp-seg__k, .gp-seg__stat (__n, __u, __c).
 *   .gp-hd                     Segment head from a content heading: 2px ink rule and the heading.
 *   .gp-display                "Set as display" quote. --long for a long quotation.
 *   .gp-figure > .gp-print     A print: white border, keyline, shadow, tilt (--b tilts the other way). figcaption.
 *   .gp-strip > .gp-strip__item A proof strip: prints side by side.
 *   .gp-open                   Page opening: .gp-open__pic beside .gp-open__tx (.gp-kicker--page, first paragraph).
 *   .gp-plate, .gp-figlabel    The frame round an embed or form, and the mono "Fig. n" line above it.
 *   .gp-cards > .gp-card       T8 certificate cards (a Columns block with these classes): ruled box, pencil tick.
 *   .gp-keep                   Put on any wrapper to keep it whole in one plain row (the renderer will not open it).
 *   .gp-btn (--ghost)          Button. .gp-acts lays buttons out in a row. .gp-more: small caps link with arrow
 *                              (--back: arrow first). .gp-end: closing buttons under the heavy rule (T3).
 *   .gp-biglink                Underlined text link, 18px ("All writing: 289 entries"). .gp-endlinks: a row of them.
 *   .gp-kicker                 Small caps label (footer kicker). .gp-kicker--page: a heading set as a kicker.
 *   .gp-quiet, .gp-continues   A quiet sentence (18px, soft ink); a mono aside line. .gp-aside-mono, .gp-monoline.
 *   .gp-cmd                    A mono command line ("$ git log ...").
 *   .gp-label, .gp-field       Form label and field (inputs inside .gp-sheet are styled without classes too).
 *   .gp-stamp-row > .gp-stamp  The stamp (__in, __top, __main, __bot) and .gp-stamp__aside. --404 for T9.
 *   .gp-log                    The record: __head, __body (.gp-log__rail--1 to --4), __list of li.gp-row with
 *                              .gp-cr (__dot, __date, __br, __msg), __legend. .gp-b1 to .gp-b4 are branch colours.
 *
 * Lists and end matter (T1, T2, T4, T5, T9)
 *   .gp-meta                   Mono row of "Filed under" chips and reading time. .gp-chip (--soft): a boxed tag.
 *   .gp-chips                  ul of chips.
 *   .gp-latest                 T1 latest entry: .gp-dg (date in the gutter), __title, __lede, __foot.
 *   .gp-er                     T1 recent entry row: time, h3 > a, .gp-chips. Add --ruled for the hairline above.
 *   .gp-entry                  T5 list row inside .gp-tx--rule: __date, __title, __cats.
 *   .gp-thumb                  A list row's picture, a small print (add --pic to .gp-er, .gp-entry or .gp-yr); --lead under
 *                              .gp-latest__lede, --record in a row of the record.
 *   .gp-list                   A bare list (ol or ul) of rows: no bullets, no indent.
 *   .gp-mini                   T2 "more filed under" list: li.gp-mini__row with time and a link.
 *   .gp-endnav                 T2 older and newer: .gp-endnav__older, __newer, __k (kicker), __t (title), __d.
 *   .gp-pager                  Pagination line (mono count at the left, links at the right). .gp-morenav for T1.
 *   .gp-search                 Search form: label, .gp-search__row (input and button).
 *   .gp-empty                  Dashed "nothing filed" box: h3, p, .gp-empty__acts.
 *   .gp-fig                    Figure with a mono figcaption (Fig. 1 and so on).
 *   .gp-bars                   Fig. "Filed under": li > a with __l (label), __b (bar, width in %), __n (count).
 *   .gp-cols                   Fig. "Entries by year": .gp-cols__plot of .gp-cols__c (span.__v value, span.__b bar
 *                              with a height), then .gp-cols__x labels. --links: T4 variant where each column
 *                              is a link with its own label (.gp-cols__y).
 *   .gp-year                   T4 year block (details): summary.gp-year__head (h2, .gp-year__n), then
 *                              .gp-yr rows (time, .gp-yr__t title, .gp-yr__k categories).
 *   .gp-ways                   T9 "ways back" list: li > a with .gp-chip, .gp-ways__t and an arrow.
 *   .gp-comments               Comments: .gp-comment (__meta, __body), the comment form.
 *
 * Breakpoints, as the mockups: 1340 (marks beyond the sheet, the bleed overhang), 1100, 900 (the margin stacks
 * under its text, gutter numbers hide), 700 and 600.
 */

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

:root {
	/* Paper and ink. */
	--gp-desk: #e8e0d1;
	--gp-paper: #fbf8f2;
	--gp-white: #ffffff;
	--gp-cream: #f4efe6;
	--gp-ink: #16130f;
	--gp-ink-2: #4a4137;
	--gp-ink-3: #6e6459;
	--gp-stone: #8c8275;
	--gp-pale: #b5ab9c;
	/* The editor's blue pencil and the author's oxblood. */
	--gp-pencil: #2e4a63;
	--gp-pencil-dark: #1c2e3e;
	--gp-pencil-line: #43678a;
	--gp-pencil-light: #a8c1d4;
	--gp-oxblood: #7b2230;
	/* The rest of the colour bar. */
	--gp-navy: #101a24;
	--gp-steel: #6e8fa8;
	--gp-amber: #b36a1e;
	--gp-gold: #d9a254;
	--gp-moss: #4a5b41;
	--gp-plum: #6b5c7b;
	/* Rules. */
	--gp-hair: rgba(22, 19, 15, .14);
	--gp-line-mid: rgba(22, 19, 15, .4);
	--gp-line: rgba(22, 19, 15, .6);
	/* Type. */
	--gp-serif: 'Spectral', Georgia, 'Times New Roman', serif;
	--gp-display: 'Cormorant Garamond', Georgia, serif;
	--gp-ui: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
	--gp-mono: 'IBM Plex Mono', Menlo, monospace;
	--gp-fs-lede: clamp(19px, 1.8vw, 23px);
	--gp-fs-body: clamp(18px, 1.5vw, 20px);
	--gp-fs-stand: clamp(24px, 2.3vw, 30px);
	/* The side padding of the sheet. */
	--gp-pad: clamp(20px, 4.5vw, 56px);

	/*
	 * The hand drawn shapes. Path data is the mockups'. Each view box is a little larger than the mockup's so the
	 * round stroke ends are not clipped (a CSS background cannot overflow); the rules that use them widen the box
	 * by the same amount, so the drawing lands exactly where the mockup put it.
	 */
	--gp-svg-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -6 116 52' preserveAspectRatio='none' fill='none' stroke='%2343678a' stroke-width='2' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M10 12C24 2 72 -1 91 8C104 15 101 31 85 36C60 43 20 41 6 30C-4 22 4 8 24 4C38 1 56 2 66 5'/%3E%3C/svg%3E");
	--gp-svg-ring-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -6 116 52' preserveAspectRatio='none' fill='none' stroke='%2343678a' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M10 12C24 2 72 -1 91 8C104 15 101 31 85 36C60 43 20 41 6 30C-4 22 4 8 24 4C38 1 56 2 66 5'/%3E%3C/svg%3E");
	--gp-svg-ring-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 48 48' preserveAspectRatio='none' fill='none' stroke='%2343678a' stroke-width='2' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M14 5C26 0 39 9 38 21C37 34 23 41 11 36C0 31 -1 15 8 7C13 2 22 3 27 9'/%3E%3C/svg%3E");
	--gp-svg-ring-wide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -6 116 52' preserveAspectRatio='none' fill='none' stroke='%2343678a' stroke-width='2' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M7 9C20 1 74 0 92 6C102 10 101 31 93 35C78 42 19 42 5 35C-2 31 -1 10 10 5C20 2 38 1 56 3'/%3E%3C/svg%3E");
	--gp-svg-loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='27' viewBox='-1 1 38 27' fill='none' stroke='%2343678a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 21C8 21 16 20 21 13C25 7 23 1.5 17.5 2C12 2.5 10.5 10 15 15C19.5 20 29 19 34 11'/%3E%3C/svg%3E");
	--gp-svg-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 18 14' fill='none' stroke='%2343678a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 11C4 8 6 4.5 8 1.5C10 4.5 12 8 14.5 11'/%3E%3C/svg%3E");
	--gp-svg-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 32 28' fill='none' stroke='%2343678a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 14.5C5.5 16 8 19.5 10.5 23C14.5 14 19.5 7 27.5 2.5'/%3E%3C/svg%3E");
	--gp-svg-glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none'%3E%3Cg transform='rotate(-28 75 75)'%3E%3Ccircle cx='75' cy='75' r='69' stroke='%23b36a1e' stroke-opacity='.26' stroke-width='5' stroke-linecap='round' stroke-dasharray='372 61.5'/%3E%3Ccircle cx='75.8' cy='74.4' r='65' stroke='%23b36a1e' stroke-opacity='.1' stroke-width='2'/%3E%3Ccircle cx='75' cy='75' r='71.2' stroke='%23b36a1e' stroke-opacity='.3' stroke-width='1' stroke-linecap='round' stroke-dasharray='380 67.4' stroke-dashoffset='-2'/%3E%3Ccircle cx='75' cy='75' r='73' stroke='%23b36a1e' stroke-opacity='.08' stroke-width='1'/%3E%3Ccircle cx='75' cy='75' r='69' stroke='%23b36a1e' stroke-opacity='.16' stroke-width='7' stroke-linecap='round' stroke-dasharray='104 329.5' stroke-dashoffset='-128'/%3E%3Ccircle cx='134' cy='36' r='2.2' fill='%23b36a1e' fill-opacity='.24'/%3E%3Ccircle cx='140' cy='50' r='1.3' fill='%23b36a1e' fill-opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
	--gp-svg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316130f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

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

body.gp {
	margin: 0;
	background: var(--gp-desk);
	color: var(--gp-ink);
	font-family: var(--gp-serif);
	font-size: 17px;
	line-height: 1.72;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.gp a {
	color: var(--gp-pencil);
}

.gp a:hover {
	color: var(--gp-pencil-dark);
}

.gp :focus-visible {
	outline: 2px solid var(--gp-pencil);
	outline-offset: 2px;
}

.gp-band :focus-visible {
	outline-color: var(--gp-pencil-light);
}

.gp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 14px 18px;
	background: var(--gp-paper);
	color: var(--gp-ink);
	border: 1px solid var(--gp-ink);
	border-radius: 2px;
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}

.gp-skip:focus {
	left: 12px;
	top: 12px;
}

.gp .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ------------------------------------------------------------------------- */
/* 3. Shell: desk strip, sheet, crop marks                                   */
/* ------------------------------------------------------------------------- */

.gp-desk {
	max-width: 1240px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 26px clamp(20px, 3.4vw, 44px) 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
}

.gp-swatches {
	flex: 0 0 auto;
	display: flex;
}

.gp-swatches span {
	width: 20px;
	height: 20px;
}

.gp-swatches span:nth-child(1) { background: #16130f; }
.gp-swatches span:nth-child(2) { background: #4a4137; }
.gp-swatches span:nth-child(3) { background: #8c8275; }
.gp-swatches span:nth-child(4) { background: #e8e0d1; box-shadow: inset 0 0 0 1px rgba(22, 19, 15, .25); }
.gp-swatches span:nth-child(5) { background: #fbf8f2; box-shadow: inset 0 0 0 1px rgba(22, 19, 15, .25); }
.gp-swatches span:nth-child(6) { background: #101a24; }
.gp-swatches span:nth-child(7) { background: #2e4a63; }
.gp-swatches span:nth-child(8) { background: #6e8fa8; }
.gp-swatches span:nth-child(9) { background: #b36a1e; }
.gp-swatches span:nth-child(10) { background: #d9a254; }
.gp-swatches span:nth-child(11) { background: #7b2230; }
.gp-swatches span:nth-child(12) { background: #4a5b41; }
.gp-swatches span:nth-child(13) { background: #6b5c7b; }

.gp-slug {
	min-width: 0;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 1.6;
	color: var(--gp-ink-2);
}

/* The side padding only appears when the window is narrower than the sheet plus its marks. */
.gp-sheet-wrap {
	padding: 0 clamp(0px, (1280px - 100vw) * 999, 10px);
}

.gp-sheet {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	background: var(--gp-paper);
	box-shadow: 0 2px 4px rgba(22, 19, 15, .08), 0 22px 44px -22px rgba(22, 19, 15, .35);
}

/* Crop marks and registration targets sit outside the sheet. */
.gp-crop {
	position: absolute;
	background: var(--gp-ink);
}

.gp-crop--h { width: 26px; height: 1px; }
.gp-crop--v { width: 1px; height: 26px; }
.gp-crop--tl.gp-crop--h { left: -36px; top: 0; }
.gp-crop--tl.gp-crop--v { left: 0; top: -36px; }
.gp-crop--tr.gp-crop--h { right: -36px; top: 0; }
.gp-crop--tr.gp-crop--v { right: 0; top: -36px; }
.gp-crop--bl.gp-crop--h { left: -36px; bottom: 0; }
.gp-crop--bl.gp-crop--v { left: 0; bottom: -36px; }
.gp-crop--br.gp-crop--h { right: -36px; bottom: 0; }
.gp-crop--br.gp-crop--v { right: 0; bottom: -36px; }

.gp-reg {
	position: absolute;
	top: calc(50% - 13px);
}

.gp-reg--l { left: -44px; }
.gp-reg--r { right: -44px; }

.gp-bleed {
	position: absolute;
	right: calc(100% + 10px);
	top: 24px;
	width: 44px;
	text-align: right;
	font-family: var(--gp-display);
	font-style: italic;
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	color: var(--gp-pencil);
	transform: rotate(-4deg);
	transform-origin: 100% 50%;
}

.gp-bleed svg {
	display: block;
	margin: 1px 0 0 auto;
	overflow: visible;
}

@media (max-width: 1339px) {
	.gp-marks {
		display: none;
	}
}

/* ------------------------------------------------------------------------- */
/* 4. The band and the running head                                          */
/* ------------------------------------------------------------------------- */

.gp-top {
	position: relative;
	display: flow-root;
}

.gp-band {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	min-height: clamp(250px, 23vw, 310px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--gp-ink);
	color: var(--gp-paper);
}

.gp-band--home {
	min-height: clamp(520px, 46vw, 640px);
}

/* The 9px bleed: the picture runs past the trim on three sides once the marks are showing. */
@media (min-width: 1340px) {
	.gp-band {
		margin: -9px -9px 0;
		padding: 9px 9px 0;
	}
}

.gp-band__still,
.gp-band__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
	filter: saturate(.9) brightness(1.5);
}

.gp-band__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(15, 12, 9, .62) 0%, rgba(15, 12, 9, 0) 30%), linear-gradient(to bottom, rgba(15, 12, 9, 0) 40%, rgba(15, 12, 9, .82) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.gp-band__video {
		display: none;
	}
}

.gp-head {
	position: relative;
	padding: 20px var(--gp-pad);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 32px;
}

.gp .gp-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	text-decoration: none;
	color: var(--gp-paper);
}

.gp-brand img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.gp-brand__name {
	font-family: var(--gp-display);
	font-weight: 600;
	font-size: 26px;
	letter-spacing: -0.01em;
	line-height: 1;
}

.gp-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 32px;
	font-family: var(--gp-ui);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gp .gp-nav a {
	color: var(--gp-paper);
	text-decoration: none;
	padding: 12px 0;
}

/* The pencil underline under the section the reader is in. */
.gp .gp-nav a.is-current {
	border-bottom: 2px solid var(--gp-pencil-light);
	padding-bottom: 6px;
}

.gp .gp-nav a.gp-cta {
	color: var(--gp-ink);
	background: var(--gp-paper);
	border: 1px solid var(--gp-paper);
	border-radius: 2px;
	padding: 12px 18px;
	font-weight: 600;
}

.gp-band__body {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.gp-band__in {
	position: relative;
	padding: 24px var(--gp-pad) 34px;
}

.gp-band--home .gp-band__in {
	padding: 64px var(--gp-pad) 48px;
}

.gp-band__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 24px;
}

.gp-band__label {
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: rgba(244, 239, 230, .82);
}

.gp-band__tc {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 1.5;
	color: rgba(244, 239, 230, .8);
}

.gp-band__tc svg {
	flex: none;
	opacity: .75;
	overflow: visible;
}

/* Pause and play for the forest: a word in the slug line, with a full size place to tap. */
.gp-band__pause {
	appearance: none;
	margin: -14px -6px -14px 2px;
	padding: 14px 6px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.gp-band__pause[hidden] {
	display: none;
}

.gp-band__pause:focus-visible {
	outline: 2px solid var(--gp-pencil-light, #a8c1d4);
	outline-offset: -8px;
}

.gp-band__title {
	margin: 12px 0 0;
	max-width: 20em;
	color: var(--gp-paper);
	font-family: var(--gp-display);
	font-weight: 600;
	font-size: clamp(34px, 4.6vw, 62px);
	line-height: 1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.gp-band--home .gp-band__title {
	margin: 16px 0 0;
	max-width: 13em;
	font-size: clamp(44px, 6.4vw, 92px);
	line-height: 0.96;
	letter-spacing: -0.02em;
}

.gp-band__first {
	display: inline-block;
	line-height: 0.86;
	border-bottom: 3px dotted var(--gp-pencil-light);
}

/* The "title safe" brackets, in pencil, at the corners of the band's body. */
.gp-safe svg {
	position: absolute;
	width: clamp(22px, 2.4vw, 34px);
	height: clamp(22px, 2.4vw, 34px);
	overflow: visible;
	opacity: .75;
}

.gp-safe svg:nth-of-type(1) { left: clamp(8px, 1vw, 14px); top: 4px; }
.gp-safe svg:nth-of-type(2) { right: clamp(8px, 1vw, 14px); top: 4px; }
.gp-safe svg:nth-of-type(3) { left: clamp(8px, 1vw, 14px); bottom: clamp(12px, 1.6vw, 22px); }
.gp-safe svg:nth-of-type(4) { right: clamp(8px, 1vw, 14px); bottom: clamp(12px, 1.6vw, 22px); }

.gp-safe__label {
	position: absolute;
	left: calc(clamp(8px, 1vw, 14px) + 10px);
	top: 11px;
	font-family: var(--gp-display);
	font-style: italic;
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	color: var(--gp-pencil-light);
	opacity: .75;
	transform: rotate(-2deg);
	transform-origin: 0 50%;
}

/* The paper slip that overlaps the bottom edge of the home band. */
.gp-slip {
	position: absolute;
	right: var(--gp-pad);
	bottom: -76px;
	z-index: 3;
	width: 300px;
	transform: rotate(1.6deg);
	box-sizing: border-box;
	background: var(--gp-paper);
	border: 1px solid var(--gp-hair);
	border-radius: 2px;
	box-shadow: 0 2px 4px rgba(22, 19, 15, .12), 0 16px 28px -14px rgba(22, 19, 15, .5);
	padding: 16px 20px;
}

.gp-slip .gp-note::before {
	display: none;
}

.gp-slip .gp-note + .gp-note {
	margin-top: 14px;
}

@media (max-width: 899px) {
	.gp-slip {
		position: static;
		width: auto;
		margin: 20px var(--gp-pad) 0;
		transform: rotate(.6deg);
	}
}

@media (max-width: 599px) {
	.gp-band__tc {
		flex-basis: 100%;
	}
}

/* ------------------------------------------------------------------------- */
/* 5. Sections and the grid                                                  */
/* ------------------------------------------------------------------------- */

.gp-section {
	padding: 56px var(--gp-pad) 56px;
}

.gp-section--home { padding-top: 64px; }
.gp-section--entry { padding-top: 26px; }
.gp-section--list { padding: 44px var(--gp-pad) 40px; }
.gp-section--tight { padding: 34px var(--gp-pad) 30px; }

/* A new galley on the same sheet: the heavy rule. */
.gp-section--rule {
	border-top: 3px solid var(--gp-ink);
	padding: 36px var(--gp-pad) 56px;
}

.gp-section--rule.gp-section--entry { padding-top: 32px; }
.gp-section--rule.gp-section--acts { padding-bottom: 48px; }
.gp-section--rule.gp-section--end { padding: 22px var(--gp-pad) 40px; }

.gp-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 328px;
	/* The measure of the row's text. The margin cell uses these to line its notes up with the lines of type. */
	--gp-fs: var(--gp-fs-body);
	--gp-lh: 1.7;
	--gp-a: 1.148; /* Where the first line's middle falls, as a multiple of the font size. */
	--gp-pb: 30px; /* Padding under the text. */
	--gp-xh: 0px;  /* Extra height under the text that is not lines of type (a proof strip). */
}

/* Below 900px the three columns become one: the margin stacks under its text. (The margin's own narrow rules
   are at the end of the file; this one must come before the measures below so they can still differ.) */
@media (max-width: 899px) {
	.gp-row {
		grid-template-columns: minmax(0, 1fr);
		--gp-pb: 10px;
	}
}

.gp-row--lede {
	--gp-fs: var(--gp-fs-lede);
	--gp-lh: 1.75;
	--gp-a: 1.173;
}

.gp-row--stand {
	--gp-fs: var(--gp-fs-stand);
	--gp-lh: 1.3;
	--gp-a: .9685;
	--gp-pb: 24px;
}

.gp-galley--post .gp-row--body {
	--gp-pb: calc(1.1 * var(--gp-fs));
}

.gp-gut {
	font-size: var(--gp-fs);
	line-height: var(--gp-lh);
}

.gp-gut span {
	font-family: var(--gp-mono);
	font-size: 11px;
	color: var(--gp-ink-3);
}

.gp-row--stand > .gp-gut {
	font-family: var(--gp-display);
}

.gp-tx {
	min-width: 0;
	margin: 0;
	padding: 0 28px 30px 0;
}

.gp-mg {
	min-width: 0;
	border-left: 1px solid var(--gp-hair);
	padding: 0 0 0 28px;
}

@media (max-width: 899px) {
	.gp-gut,
	.gp-mg:empty {
		display: none;
	}

	.gp-tx {
		padding: 0 0 10px;
	}
}

.gp-tx--rule {
	padding: 0;
	border-top: 1px solid var(--gp-hair);
}

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

@media (min-width: 900px) {
	.gp-span {
		grid-column: 1 / span 2;
	}
}

/* Text rows. */
.gp-row--p > .gp-tx {
	padding-bottom: var(--gp-pb);
}

.gp-row--p > .gp-tx,
.gp-row--p > .gp-tx > p {
	font-size: var(--gp-fs);
	line-height: var(--gp-lh);
}

.gp-row--p > .gp-tx > p {
	margin: 0;
}

.gp-row--body > .gp-tx,
.gp-row--body > .gp-tx > p {
	text-wrap: pretty;
}

.gp-row--stand > .gp-tx {
	max-width: 17em;
	font-family: var(--gp-display);
	font-style: italic;
	font-weight: 500;
	text-wrap: pretty;
}

/* A galley is set flush left at one size: alignment, size and colour classes from the old layout are overruled. */
.gp-row--p > .gp-tx,
.gp-row--p > .gp-tx > p,
.gp-hd > h2,
.gp-hd > h3,
.gp-hd > h4,
.gp-hd > h5,
.gp-hd > h6 {
	text-align: left;
}

.gp-row--p > .gp-tx[class*="-font-size"],
.gp-row--p > .gp-tx > p[class*="-font-size"] {
	font-size: var(--gp-fs) !important;
}

.gp-row--p > p.gp-tx.has-background {
	padding: 0 28px var(--gp-pb) 0;
	background: none !important;
}

.gp-row--p > .gp-tx.has-text-color,
.gp-row--p > .gp-tx > p.has-text-color {
	color: inherit !important;
}

/* Sizes and faces typed into the text by an old editor: the galley's own measure wins. */
.gp-row--p > .gp-tx span[style*="font-size"],
.gp-row--p > .gp-tx font,
.gp-hd span[style*="font-size"] {
	font-size: inherit !important;
}

.gp-row--p > .gp-tx span[style*="font-family"],
.gp-row--p > .gp-tx font,
.gp-hd span[style*="font-family"] {
	font-family: inherit !important;
}

.gp-hd strong,
.gp-hd b,
.gp-hd span[style*="font-weight"] {
	font-weight: inherit !important;
}

/* Links in running text. */
.gp-tx a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* A row that only continues the one before (a note with nothing to hang on). */
.gp-row--blank > .gp-tx {
	padding-bottom: 0;
}

/* ------------------------------------------------------------------------- */
/* 6. Margin notes                                                           */
/* ------------------------------------------------------------------------- */

.gp-note {
	position: relative;
	font-family: var(--gp-display);
	font-style: italic;
	font-weight: 500;
	font-size: 21px;
	line-height: 1.2;
	color: var(--gp-pencil);
	transform: rotate(-1deg);
	transform-origin: 0 50%;
}

/* The pencil tick that ties a note to its line. */
.gp-note::before {
	content: "";
	position: absolute;
	left: -37px;
	top: 13px;
	width: 16px;
	height: 2px;
	border-radius: 1px;
	background: var(--gp-pencil-line);
}

.gp-note--plain::before {
	display: none;
}

.gp-note--plain {
	margin-left: 12px;
}

.gp-note p {
	margin: 0;
}

.gp-note__au {
	padding-left: 16px;
	color: var(--gp-oxblood);
	transform: rotate(0.9deg);
	transform-origin: 0 50%;
}

.gp-tilt-1 { transform: rotate(-0.8deg); }
.gp-tilt-2 { transform: rotate(-1.4deg); }
.gp-tilt-3 { transform: rotate(-0.6deg); }
.gp-tilt-4 { transform: rotate(-1deg); }
.gp-tilt-5 { transform: rotate(-1.6deg); }
.gp-tilt-6 { transform: rotate(-1.2deg); }
.gp-tilt-7 { transform: rotate(-1.5deg); }
.gp-tilt-8 { transform: rotate(-1.1deg); }

/*
 * A text row's margin. The first note lines up with the first line of type; a note that answers a mark further
 * down is pushed down by a spacer whose share of the free height is the mark's place in the paragraph. Groups that
 * are not last have no height, so the last group alone decides how the free height is shared; the padding below
 * is set so that a two line note pushed all the way down sits beside the last line.
 */
.gp-row--p > .gp-mg {
	display: flex;
	flex-direction: column;
	padding-top: calc(var(--gp-a) * var(--gp-fs) - 19.4px);
	padding-bottom: max(0px, calc(var(--gp-pb) + var(--gp-xh) + (var(--gp-lh) - var(--gp-a)) * var(--gp-fs) - 31px));
}

.gp-sp {
	display: block;
	flex: var(--gp-g, 0) 1 0px;
	min-height: 0;
}

.gp-grp {
	flex: none;
}

.gp-grp--hang {
	height: 0;
}

/* A lone one line note stands in for the two lines the sums above assume. */
.gp-grp--short {
	padding-bottom: 25.2px;
}

/* Beside a proof strip there is room below the lines: the last group takes the assumed two lines and hangs. */
.gp-grp--fixed {
	height: 50.4px;
}

.gp-grp > .gp-note + .gp-note,
.gp-mg > .gp-note + .gp-note {
	margin-top: 38px;
}

.gp-mg__more {
	margin: 4px 0 0;
	font-size: 17px;
	line-height: 1.72;
}

.gp-note--solo + .gp-mg__more {
	margin-top: -6px;
}

.gp-mg__more--hang {
	height: 0;
}

/* Margins of rows that are not lines of type start at a fixed drop. */
.gp-row--seg > .gp-mg { padding-top: 28px; }
.gp-row--hd > .gp-mg { padding-top: 34px; }
.gp-row--display > .gp-mg { padding-top: 34px; }
.gp-galley--lede .gp-row--display > .gp-mg { padding-top: 24px; }
.gp-row--print > .gp-mg { padding-top: 72px; }
.gp-row--plate > .gp-mg { padding-top: 34px; }
.gp-row--plain > .gp-mg { padding-top: 10px; }
.gp-row--stamp > .gp-mg { padding-top: 30px; }

/* ------------------------------------------------------------------------- */
/* 7. Inline marks                                                           */
/* ------------------------------------------------------------------------- */

.gp-nw {
	white-space: nowrap;
}

/* The hand drawn ring. --gp-rx and --gp-rh are how far it reaches past the text, as in the mockups. */
.gp-ring {
	display: inline-block;
	position: relative;
	line-height: 1.15;
	--gp-rx: .4em;
	--gp-ry: .02em;
	--gp-rh: .14em;
}

.gp-ring::after {
	content: "";
	position: absolute;
	left: calc(-8% - 1.16 * var(--gp-rx));
	top: calc(-15% - var(--gp-ry) - .15 * var(--gp-rh));
	width: calc(116% + 2.32 * var(--gp-rx));
	height: calc(130% + 1.3 * var(--gp-rh));
	background: var(--gp-svg-ring) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

/* One character (an ellipsis, a comma): the rounder ring, a little askew. */
.gp-ring--small {
	line-height: 1;
}

.gp-ring--small::after {
	left: calc(-10% - .53em);
	top: 0;
	width: calc(120% + 1.08em);
	height: 1.44em;
	background-image: var(--gp-svg-ring-small);
	transform: rotate(-7deg);
}

/* Round a big numeral (the segment statement). */
.gp-ring--stat {
	margin-right: 8px;
	--gp-rx: .24em;
	--gp-ry: .1em;
	--gp-rh: .2em;
}

/* Rings in list titles sit a little closer. */
.gp-cr__msg .gp-ring { --gp-rx: .36em; }
.gp-entry__title .gp-ring { --gp-rx: .26em; }
.gp-yr__t .gp-ring { --gp-rx: .3em; }

.gp-latest__title .gp-ring {
	line-height: 1;
	--gp-rx: .2em;
	--gp-ry: -.06em;
	--gp-rh: .06em;
}

/* The same ring round any box (a print, a calendar day). */
.gp-ringed,
.is-style-gp-ringed {
	position: relative;
}

.gp-ringed::after,
.gp-print.is-style-gp-ringed::after,
.gp-strip__item.is-style-gp-ringed::after {
	content: "";
	position: absolute;
	left: -18.44%;
	top: -31.9%;
	width: 136.88%;
	height: 163.8%;
	background: var(--gp-svg-ring-bold) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

/* The query: a dotted pencil underline. */
.gp-query {
	display: inline-block;
	line-height: 1.2;
	border-bottom: 3px dotted var(--gp-pencil-line);
}

.gp-er .gp-query {
	line-height: 1.05;
}

/* The strike: pencil through the words, then the delete loop. The word joiner keeps the loop on the same line. */
.gp-sheet del,
.gp-sheet s {
	color: var(--gp-ink-3);
	text-decoration: line-through;
	text-decoration-color: var(--gp-pencil-line);
	text-decoration-thickness: 2px;
}

.gp-sheet del::after,
.gp-sheet s::after {
	content: "\2060" var(--gp-svg-loop);
	margin-left: -3px;
	white-space: nowrap;
}

/* The insert: a caret, and the new words in the editor's hand. */
.gp-sheet ins {
	text-decoration: none;
}

ins.gp-ins {
	display: inline-block;
	position: relative;
	margin-left: 10px;
	font-family: var(--gp-display);
	font-style: italic;
	font-weight: 500;
	font-size: 1.14em;
	line-height: 1;
	color: var(--gp-pencil);
	white-space: nowrap;
	transform: rotate(-1.6deg);
	transform-origin: 0 100%;
}

ins.gp-ins::before {
	content: "";
	position: absolute;
	left: -14px;
	bottom: -9px;
	width: 18px;
	height: 14px;
	background: var(--gp-svg-caret) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

.gp-tick {
	display: block;
	width: 32px;
	height: 28px;
	margin: -1px;
	background: var(--gp-svg-tick) no-repeat 0 0 / 100% 100%;
}

/* The whisky glass ring, set down at the right of the paragraph. */
p.is-style-gp-glass {
	position: relative;
}

p.is-style-gp-glass::after {
	content: "";
	position: absolute;
	top: 44px;
	right: clamp(-25px, (899px - 100vw) * 999, -12px);
	z-index: 1;
	width: 150px;
	height: 150px;
	background: var(--gp-svg-glass) no-repeat 0 0 / 100% 100%;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Marks level "off": nothing editorial. The text is simply well set. The level is on the body (the view) and on
   each galley (which may be set to a different level than the page round it). */
:is(.gp-marks--off, .gp-galley--marks-off) .gp-ring::after,
:is(.gp-marks--off, .gp-galley--marks-off) .gp-ringed::after,
:is(.gp-marks--off, .gp-galley--marks-off) .is-style-gp-ringed::after,
:is(.gp-marks--off, .gp-galley--marks-off) p.is-style-gp-glass::after,
:is(.gp-marks--off, .gp-galley--marks-off) ins.gp-ins::before,
.gp-marks--off .gp-slip {
	display: none;
}

:is(.gp-marks--off, .gp-galley--marks-off) .gp-ring,
:is(.gp-marks--off, .gp-galley--marks-off) .gp-query {
	display: inline;
	line-height: inherit;
	border-bottom: 0;
	margin-right: 0;
}

.gp-marks--off .gp-sheet del,
.gp-marks--off .gp-sheet s,
.gp-sheet .gp-galley--marks-off del,
.gp-sheet .gp-galley--marks-off s {
	color: inherit;
	text-decoration-color: currentColor;
	text-decoration-thickness: auto;
}

.gp-marks--off .gp-sheet del::after,
.gp-marks--off .gp-sheet s::after,
.gp-sheet .gp-galley--marks-off del::after,
.gp-sheet .gp-galley--marks-off s::after {
	content: none;
}

:is(.gp-marks--off, .gp-galley--marks-off) ins.gp-ins {
	display: inline;
	margin-left: 0;
	font: inherit;
	color: inherit;
	transform: none;
	white-space: normal;
}

/* ------------------------------------------------------------------------- */
/* 8. Segment heads, display quotes                                          */
/* ------------------------------------------------------------------------- */

.gp-seg {
	margin-top: 4px;
	border-top: 2px solid var(--gp-ink);
	padding-top: 14px;
	padding-bottom: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 24px;
}

.gp-galley--body .gp-row--seg:not(:first-child) > .gp-seg {
	margin-top: 14px;
}

.gp-seg__k {
	margin: 0;
	font-family: var(--gp-mono);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-seg__stat {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
}

.gp-seg__n {
	font-family: var(--gp-display);
	font-weight: 600;
	font-variant-numeric: lining-nums;
	font-size: 44px;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--gp-ink);
}

.gp-seg__n.gp-ring {
	line-height: 0.9;
}

.gp-seg__u {
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gp-ink-3);
}

.gp-seg__c {
	font-size: 15px;
	line-height: 1.4;
	color: var(--gp-ink-2);
}

@media (max-width: 599px) {
	.gp-seg {
		display: block;
	}

	.gp-seg > div {
		margin-top: 8px;
	}
}

/* A heading from the content: the 2px ink rule and the heading in Cormorant. */
.gp-hd {
	margin-top: 18px;
	border-top: 2px solid var(--gp-ink);
	padding-top: 16px;
	padding-bottom: 18px;
}

.gp-galley > .gp-row--hd:first-child > .gp-hd {
	margin-top: 0;
}

.gp-hd > h2,
.gp-hd > h3,
.gp-hd > h4,
.gp-hd > h5,
.gp-hd > h6 {
	margin: 0;
	font-family: var(--gp-display);
	font-weight: 600;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.gp-hd > h3 {
	font-size: clamp(23px, 2.1vw, 28px);
}

.gp-hd > h4,
.gp-hd > h5,
.gp-hd > h6 {
	font-size: clamp(20px, 1.8vw, 23px);
	line-height: 1.15;
}

.gp-hd--minor {
	border-top-width: 1px;
	border-top-color: var(--gp-hair);
}

.gp .gp-hd a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* A heading used as the kicker of a page opening. */
.gp-kicker--page {
	margin: 0 0 14px;
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gp-ink-3);
}

/* Set as display. */
.gp-row--display > .gp-tx {
	padding-top: 20px;
	padding-bottom: 46px;
}

.gp-row--display > .gp-gut {
	padding-top: 20px;
	font-family: var(--gp-display);
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.06;
}

.gp-display {
	margin: 0;
	padding: 0;
	border: 0;
}

.gp-display p {
	position: relative;
	margin: 0;
	padding-left: 22px;
	font-family: var(--gp-display);
	font-weight: 600;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.06;
	letter-spacing: -0.015em;
}

.gp-galley--post .gp-display p {
	text-wrap: balance;
}

.gp-display p + p {
	margin-top: .5em;
}

/* The blue rule, drawn by hand: not quite upright. */
.gp-display p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 1px;
	width: 3px;
	border-radius: 2px;
	background: var(--gp-pencil-line);
	transform: rotate(0.4deg);
}

.gp-display cite,
.gp-display footer {
	display: block;
	margin: 12px 0 0;
	padding-left: 22px;
	font-family: var(--gp-mono);
	font-style: normal;
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

/* On a page set at the larger size (the home galley), the display line is larger too. */
.gp-galley--lede .gp-row--display > .gp-tx {
	padding-top: 6px;
	padding-bottom: 38px;
}

.gp-galley--lede .gp-row--display > .gp-gut {
	padding-top: 6px;
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.04;
}

.gp-galley--lede .gp-display p {
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.04;
}

/* A long quotation is not shouted: body size, italic, the same blue rule. */
.gp-row--display.gp-row--long > .gp-tx {
	padding-top: 4px;
	padding-bottom: 30px;
}

.gp-display--long p {
	font-family: var(--gp-serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--gp-fs-body);
	line-height: 1.7;
	letter-spacing: 0;
	text-wrap: pretty;
}

.gp-display--long p::before {
	top: 6px;
	bottom: 6px;
	transform: none;
}

.gp-display--long p + p {
	margin-top: 0;
	padding-top: 1.1em;
}

.gp-display--long p + p::before {
	top: 0;
}

/* ------------------------------------------------------------------------- */
/* 9. Prints, proof strips, page opening                                     */
/* ------------------------------------------------------------------------- */

.gp-row--print > .gp-tx {
	padding-top: 14px;
	padding-bottom: 36px;
}

.gp-figure {
	margin: 0;
}

.gp-print {
	position: relative;
	width: min(420px, 100%);
	box-sizing: border-box;
	background: var(--gp-white);
	border: 1px solid var(--gp-hair);
	padding: 8px;
	box-shadow: 0 1px 2px rgba(22, 19, 15, .14), 0 12px 22px -14px rgba(22, 19, 15, .4);
	transform: rotate(-1deg);
}

.gp-print--b {
	transform: rotate(0.8deg);
}

.gp-print--wide {
	width: min(620px, 100%);
}

.gp-print img,
.gp-print video {
	display: block;
	width: 100%;
	height: auto;
	filter: saturate(.88);
}

.gp-print a {
	display: block;
}

.gp-figure figcaption,
.gp-cap {
	margin-top: 16px;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

/* A proof strip: prints side by side at their own proportions, all one height. */
.gp-strip {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(10px, 2vw, 24px);
}

.gp-row--strip > .gp-tx > .gp-strip {
	margin-top: 0;
}

.gp-strip--row {
	flex-wrap: nowrap;
}

.gp-strip__item {
	position: relative;
	flex: 0 1 180px;
	min-width: 0;
	margin: 0;
	transform: rotate(-1.4deg);
}

.gp-strip__item:nth-child(3n+2) { transform: rotate(0.8deg); }
.gp-strip__item:nth-child(3n) { transform: rotate(-0.6deg); }

.gp-strip__item img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	box-sizing: border-box;
	border: 6px solid var(--gp-white);
	box-shadow: 0 1px 2px rgba(22, 19, 15, .14), 0 10px 18px -12px rgba(22, 19, 15, .4);
	filter: saturate(.88);
}

.gp-strip__item.is-style-gp-ringed::after {
	left: -18.44%;
	top: -31.9%;
}

.gp-strip__item figcaption {
	margin-top: 8px;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

/* Images that sit in running text (classic posts): small prints, floated by their alignment. */
.gp-tx p img:not(.emoji):not(.wp-smiley),
p.gp-tx img:not(.emoji):not(.wp-smiley) {
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	border: 6px solid var(--gp-white);
	box-shadow: 0 1px 2px rgba(22, 19, 15, .14), 0 10px 18px -12px rgba(22, 19, 15, .4);
	filter: saturate(.88);
}

.gp-tx img.alignleft,
.gp-tx .alignleft > img,
.gp-tx a.alignleft {
	float: left;
	max-width: min(260px, 46%);
	margin: 8px 28px 14px 0;
	transform: rotate(-1.2deg);
}

.gp-tx img.alignright,
.gp-tx .alignright > img,
.gp-tx a.alignright {
	float: right;
	max-width: min(260px, 46%);
	margin: 8px 0 14px 32px;
	transform: rotate(1.2deg);
}

.gp-tx img.aligncenter {
	display: block;
	margin: 12px auto;
}

.gp-row--p > .gp-tx--flow {
	display: flow-root;
}

/* A print floated at the right of a paragraph (T3). */
.gp-print-r {
	float: right;
	width: 200px;
	margin: 8px 0 14px 32px;
	transform: rotate(1.2deg);
}

.gp-print-l {
	float: left;
	width: 200px;
	margin: 8px 32px 14px 0;
	transform: rotate(-1.2deg);
}

.gp-print-r img,
.gp-print-l img,
.gp-open__pic img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	box-sizing: border-box;
	border: 8px solid var(--gp-white);
	box-shadow: 0 0 0 1px rgba(22, 19, 15, .16), 0 2px 4px rgba(22, 19, 15, .1), 0 16px 26px -16px rgba(22, 19, 15, .45);
	filter: saturate(.88);
}

/* The opening portrait is cropped to four by five, favouring the face, as the mockup has it. */
.gp-open__pic img {
	aspect-ratio: 4 / 5;
	object-position: 50% 28%;
}

/* The page opening: a portrait print beside the kicker and the first paragraph, feet level. */
.gp-open {
	display: flex;
	align-items: flex-end;
	gap: 0 36px;
}

.gp-open__pic {
	flex: 0 0 220px;
	margin: 0;
	transform: rotate(-1.5deg);
}

.gp-open__tx {
	flex: 1 1 0;
	min-width: 0;
}

.gp-open__tx > p {
	position: relative;
	margin: 0;
	font-size: var(--gp-fs);
	line-height: var(--gp-lh);
	text-wrap: balance;
}

/* The line number of the opening paragraph, moved back out to the gutter. */
.gp-open__n {
	position: absolute;
	left: -300px;
	top: 0;
}

.gp-row--open > .gp-mg {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: 0;
	padding-bottom: calc(0.577 * var(--gp-fs) - 1px);
}

@media (max-width: 1099px) {
	.gp-open {
		display: block;
	}

	.gp-open__pic {
		width: 220px;
		margin: 0 0 28px;
	}

	.gp-open__n {
		left: -44px;
	}

	.gp-print-r,
	.gp-print-l {
		float: none;
		width: 220px;
		margin: 6px 0 24px;
	}
}

@media (max-width: 899px) {
	.gp-open__pic,
	.gp-print-r,
	.gp-print-l {
		margin-left: auto;
		margin-right: auto;
	}

	.gp-open__n {
		display: none;
	}
}

/* ------------------------------------------------------------------------- */
/* 10. Ordinary content: lists, tables, code, embeds                         */
/* ------------------------------------------------------------------------- */

.gp-row--plain > .gp-tx {
	padding-bottom: 22px;
	font-size: var(--gp-fs);
	line-height: var(--gp-lh);
}

/* Lists hang, with a dash. */
.gp-tx ul:not([class]),
.gp-tx ul.wp-block-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-tx ul:not([class]) > li,
.gp-tx ul.wp-block-list > li {
	position: relative;
	padding-left: 28px;
}

.gp-tx ul:not([class]) > li + li,
.gp-tx ul.wp-block-list > li + li {
	margin-top: 4px;
}

.gp-tx ul:not([class]) > li::before,
.gp-tx ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.8em;
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background: var(--gp-ink);
}

.gp-tx ol:not([class]),
.gp-tx ol.wp-block-list {
	margin: 0;
	padding: 0 0 0 28px;
}

.gp-tx ol:not([class]) > li + li,
.gp-tx ol.wp-block-list > li + li {
	margin-top: 4px;
}

.gp-tx ol:not([class]) > li::marker,
.gp-tx ol.wp-block-list > li::marker {
	font-family: var(--gp-mono);
	font-size: .62em;
	color: var(--gp-ink-3);
}

.gp-tx li > ul,
.gp-tx li > ol {
	margin-top: 4px !important;
}

/* A list that finishes a sentence ("...on my main websites:"): ruled, with a small square. */
.gp-tx ul.gp-ruled {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--gp-hair);
	font-size: var(--gp-fs);
	line-height: var(--gp-lh);
	text-wrap: pretty;
}

.gp-tx ul.gp-ruled > li {
	position: relative;
	margin: 0;
	padding: 5px 0 5px 30px;
	border-top: 1px solid var(--gp-hair);
}

.gp-tx ul.gp-ruled > li::before {
	content: "";
	position: absolute;
	left: 8px;
	top: calc(5px + 0.85em - 3px);
	width: 6px;
	height: 6px;
	border-radius: 0;
	background: var(--gp-stone);
}

.gp-tx table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.5;
}

.gp-tx th,
.gp-tx td {
	padding: 9px 14px 9px 0;
	border-top: 1px solid var(--gp-hair);
	text-align: left;
	vertical-align: top;
}

.gp-tx th {
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gp-ink-2);
}

.gp-tx table tr:last-child td {
	border-bottom: 1px solid var(--gp-hair);
}

.gp-tx .wp-block-table,
.gp-tx .gp-scroll {
	margin: 0;
	overflow-x: auto;
}

.gp-tx pre {
	margin: 0;
	padding: 16px 18px;
	overflow-x: auto;
	background: rgba(22, 19, 15, .04);
	border: 1px solid var(--gp-hair);
	border-radius: 2px;
	font-family: var(--gp-mono);
	font-size: 13px;
	line-height: 1.6;
	white-space: pre-wrap;
}

.gp-tx code,
.gp-tx kbd {
	font-family: var(--gp-mono);
	font-size: .82em;
}

.gp-tx hr,
.gp-rule {
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--gp-hair);
}

.gp-tx iframe,
.gp-tx video,
.gp-tx embed,
.gp-tx object {
	max-width: 100%;
}

.gp-tx .wp-block-embed {
	margin: 0;
}

/* Cards (T8): a Columns block with the class gp-cards; each column a ruled box with a pencil tick. */
.gp-tx .gp-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
}

.gp-tx .gp-card {
	flex: 1 1 260px;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	background: var(--gp-paper);
	border: 1px solid var(--gp-line);
	border-radius: 2px;
	padding: 24px;
}

.gp-card::before {
	content: "";
	display: block;
	width: 32px;
	height: 28px;
	margin: -1px;
	background: var(--gp-svg-tick) no-repeat 0 0 / 100% 100%;
}

.gp-card h2,
.gp-card h3,
.gp-card h4 {
	margin: 14px 0 0;
	font-family: var(--gp-display);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--gp-ink);
}

.gp-card p {
	margin: 10px 0 0;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp .gp-card p > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: -2px 0 -10px;
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gp-pencil);
}

.gp-row--plain > .gp-tx:has(> .gp-cards) {
	padding-bottom: 38px;
}

/* The plate: the frame round a widget that comes from somewhere else (a calendar, a form, a badge wall). */
.gp-row--plate > .gp-tx {
	padding-bottom: 38px;
}

.gp-figlabel {
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-plate {
	box-sizing: border-box;
	background: var(--gp-paper);
	border: 1px solid var(--gp-line);
	border-radius: 2px;
	padding: 28px;
}

.gp-figlabel + .gp-plate {
	margin-top: 10px;
}

.gp-plate--dashed {
	border: 1px dashed rgba(22, 19, 15, .35);
}

.gp-plate > :first-child {
	margin-top: 0;
}

.gp-plate > :last-child {
	margin-bottom: 0;
}

.gp-plate iframe {
	display: block;
	width: 100%;
	border: 0;
}

@media (max-width: 699px) {
	.gp-plate {
		padding: 14px;
	}
}

/* ------------------------------------------------------------------------- */
/* 11. Buttons, links with arrows, forms                                     */
/* ------------------------------------------------------------------------- */

.gp .gp-btn,
.gp-sheet .wp-block-button__link,
.gp-sheet .wp-element-button,
.gp-sheet a.elementor-button,
.gp-sheet button[type="submit"],
.gp-sheet input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 12px 22px;
	background: var(--gp-ink);
	color: var(--gp-cream);
	border: 1px solid var(--gp-ink);
	border-radius: 2px;
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* After a Jetpack form is sent: its thank you, set as a small head, and the way back. */
.gp-sheet .contact-form-submission h4 {
	margin: 10px 0 14px;
	font-family: var(--gp-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.gp-sheet .contact-form-submission .go-back-message {
	margin: 0;
	font-family: var(--gp-mono);
	font-size: 12px;
}

/* Jetpack sizes its form button from variables it measures in the page; here the button is the theme's. */
.gp-sheet .wp-block-jetpack-contact-form :is(.wp-block-button, .wp-block-jetpack-button) .wp-block-button__link,
.gp-sheet .jetpack-contact-form-container button[type="submit"],
.gp-sheet .contact-form button[type="submit"] {
	height: auto;
	min-height: 48px;
	padding: 12px 22px;
	line-height: 1.2;
}

.gp .gp-btn--ghost,
.gp-sheet .wp-block-button.is-style-outline .wp-block-button__link,
.gp-sheet .wp-block-buttons > .wp-block-button + .wp-block-button .wp-block-button__link,
.gp-acts > .gp-btn + .gp-btn {
	background: transparent;
	color: var(--gp-ink);
}

/* Buttons that close a page stand in a section of their own, under the heavy rule (T3). */
.gp-galley > .gp-end {
	margin: 56px calc(-1 * var(--gp-pad)) -8px;
	border-top: 3px solid var(--gp-ink);
	padding: 36px var(--gp-pad) 0;
}

.gp-row--acts > .gp-tx {
	padding-bottom: 0;
}

.gp-row--acts > .gp-mg {
	border-left: 0;
}

/* A row of actions (T3: "Schedule a call", "Follow me on LinkedIn"). */
.gp-acts,
.gp-sheet .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px 16px;
}

.gp .gp-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gp-pencil);
}

.gp .gp-more--back {
	flex-direction: row-reverse;
}

.gp .gp-biglink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 18px;
	color: var(--gp-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.gp-kicker {
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gp-ink-3);
}

/* Forms inside the sheet: labels in small caps, fields on the paper with an ink keyline. */
.gp-label,
.gp-sheet .gp-tx form label,
.gp-sheet .gp-plate label,
.gp-comments label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gp-ink-2);
}

.gp-field,
.gp-sheet .gp-tx input[type="text"],
.gp-sheet .gp-tx input[type="email"],
.gp-sheet .gp-tx input[type="url"],
.gp-sheet .gp-tx input[type="tel"],
.gp-sheet .gp-tx input[type="number"],
.gp-sheet .gp-tx input[type="date"],
.gp-sheet .gp-tx input[type="password"],
.gp-sheet .gp-tx input[type="search"],
.gp-sheet .gp-tx select,
.gp-sheet .gp-tx textarea {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	box-sizing: border-box;
	padding: 0 14px;
	background: var(--gp-paper);
	color: var(--gp-ink);
	border: 1px solid var(--gp-line);
	border-radius: 2px;
	font-family: var(--gp-serif);
	font-size: 17px;
	line-height: 1.4;
}

.gp-sheet .gp-tx textarea,
textarea.gp-field {
	height: 180px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

.gp-sheet .gp-tx select,
select.gp-field {
	padding-right: 44px;
	-webkit-appearance: none;
	appearance: none;
	background-image: var(--gp-svg-chevron);
	background-repeat: no-repeat;
	background-position: right 14px top 15px;
}

.gp-sheet .gp-tx input[type="checkbox"],
.gp-sheet .gp-tx input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	accent-color: var(--gp-ink);
	vertical-align: -3px;
}

.gp-sheet ::placeholder {
	color: var(--gp-ink-3);
	opacity: 1;
}

/* The mono aside next to a button ("I read everything. I answer most of it."). */
.gp-aside-mono {
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

/* Search (T5, T9): one field and its button, a mono label above. */
.gp-search {
	margin: 0;
	max-width: 580px;
}

.gp-sheet .gp-search label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--gp-mono);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gp-ink-3);
}

.gp-search__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gp-sheet .gp-search input[type="search"] {
	flex: 1 1 240px;
	width: auto;
	min-width: 0;
	height: 48px;
	padding: 12px 14px;
	font-family: var(--gp-ui);
	font-size: 16px;
}

@media (max-width: 599px) {
	.gp-sheet .gp-search input[type="search"],
	.gp-search button {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------------------------- */
/* 12. The stamp                                                             */
/* ------------------------------------------------------------------------- */

.gp-stamp-row {
	padding-top: 14px;
	padding-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
}

.gp-stamp {
	flex: 0 0 auto;
	transform: rotate(-5deg);
	opacity: .88;
	border: 2px solid var(--gp-oxblood);
	border-radius: 3px;
	padding: 4px;
	color: var(--gp-oxblood);
	font-family: var(--gp-ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	line-height: 1.15;
}

.gp-stamp__in {
	border: 1px solid var(--gp-oxblood);
	border-radius: 2px;
	padding: 12px 20px 10px;
}

.gp-stamp__top {
	margin-right: -0.2em;
	font-size: 13px;
}

.gp-stamp__main {
	margin: 3px -0.2em 0 0;
	font-size: 26px;
}

.gp-stamp__bot {
	margin-top: 7px;
	font-family: var(--gp-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: none;
}

.gp-stamp__aside {
	flex: 1 1 260px;
	min-width: 0;
	max-width: 34ch;
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--gp-ink-2);
}

/* T9: "Pulled / 404". */
.gp-stamp-row--404 {
	padding-top: 4px;
	padding-bottom: 14px;
}

.gp-stamp--404 {
	transform: rotate(-4deg);
}

.gp-stamp--404 .gp-stamp__in { padding: 10px 20px 9px; }
.gp-stamp--404 .gp-stamp__main { margin-top: 2px; font-size: 40px; line-height: 1.05; }
.gp-stamp--404 .gp-stamp__bot { margin-top: 6px; }

.gp-stamp-row--404 .gp-stamp__aside {
	flex-basis: 280px;
	max-width: 40ch;
}

/* ------------------------------------------------------------------------- */
/* 13. The record (commit history)                                           */
/* ------------------------------------------------------------------------- */

/* Inside a galley the record is a galley of its own: the heavy rule runs the width of the sheet. */
.gp-galley > .gp-log {
	margin: 56px calc(-1 * var(--gp-pad)) 0;
	border-top: 3px solid var(--gp-ink);
	padding: 36px var(--gp-pad) 0;
}

.gp-galley > .gp-log:first-child {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}

.gp-log__head {
	padding-top: 6px;
	padding-bottom: 26px;
}

.gp-log__label {
	margin: 0;
	font-family: var(--gp-mono);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-cmd {
	font-family: var(--gp-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--gp-ink);
}

.gp-log__label + .gp-cmd {
	margin-top: 8px;
}

.gp-log__body {
	position: relative;
}

.gp-log__rail {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
}

.gp-log__rail--1 { left: 5px; background: rgba(46, 74, 99, .45); }
.gp-log__rail--2 { left: 29px; background: rgba(140, 130, 117, .45); }
.gp-log__rail--3 { left: 53px; background: rgba(22, 19, 15, .45); }
.gp-log__rail--4 { left: 77px; background: rgba(179, 106, 30, .45); }

.gp-log__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-cr {
	position: relative;
	display: grid;
	grid-template-columns: 96px 88px 122px minmax(0, 1fr);
	align-items: stretch;
	column-gap: 16px;
	min-height: 46px;
}

.gp-cr::before,
.gp-log__list > li:last-child .gp-cr::after {
	content: "";
	position: absolute;
	left: 112px;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--gp-hair);
}

.gp-log__list > li:last-child .gp-cr::after {
	top: auto;
	bottom: 0;
}

.gp-cr__dot {
	position: relative;
}

.gp-cr__dot i {
	position: absolute;
	top: 50%;
	margin-top: -9px;
	width: 12px;
	height: 12px;
	border: 3px solid var(--gp-paper);
	border-radius: 50%;
}

/* The four branch colours: rail position, dot, chip border, legend swatch. */
.gp-b1 { --gp-b: #2e4a63; --gp-bx: -3px; }
.gp-b2 { --gp-b: #8c8275; --gp-bx: 21px; }
.gp-b3 { --gp-b: #16130f; --gp-bx: 45px; }
.gp-b4 { --gp-b: #b36a1e; --gp-bx: 69px; }

.gp-cr__dot i {
	left: var(--gp-bx, -3px);
	background: var(--gp-b, #16130f);
}

.gp-cr__date {
	align-self: center;
	font-family: var(--gp-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-cr__br {
	align-self: center;
	width: fit-content;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gp-ink);
	border: 1px solid var(--gp-b, #16130f);
	border-radius: 2px;
	padding: 2px 8px;
}

.gp-cr__msg {
	align-self: center;
	padding: 9px 28px 9px 0;
	font-size: 18px;
	line-height: 1.3;
	color: var(--gp-ink);
}

.gp-log__list > li > .gp-mg {
	padding-top: 9px;
}

/* A row's note hangs past the row, so a two line exchange does not push the rows apart. */
.gp-log__list .gp-note {
	margin-bottom: -34px;
}

.gp-log__legend {
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-log__legend span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.gp-log__legend i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gp-b, #16130f);
}

.gp-log__more {
	padding-top: 14px;
}

@media (max-width: 1099px) {
	.gp-cr {
		grid-template-columns: 96px auto minmax(0, 1fr);
	}

	.gp-cr__dot {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.gp-cr__date,
	.gp-cr__br {
		margin: 13px 0 5px;
	}

	.gp-cr__msg {
		grid-column: 2 / -1;
		align-self: start;
		padding: 0 0 13px;
	}
}

/* ------------------------------------------------------------------------- */
/* 14. Lists and end matter (T1, T2, T4, T5, T9)                             */
/* ------------------------------------------------------------------------- */

/* A boxed mono tag. */
.gp-chip {
	display: inline-block;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gp-ink);
	border: 1px solid var(--gp-ink);
	border-radius: 2px;
	padding: 2px 8px;
}

.gp-chip--soft {
	border-color: var(--gp-line-mid);
}

.gp-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.gp-chips li {
	display: flex;
}

.gp .gp-chips a {
	text-decoration: none;
}

/* T2: "Filed under [KCS] [Work] · 8 minute read". */
.gp-meta {
	padding-bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp .gp-meta a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

/* "Tagged": the post's tags in one quiet mono line under the text. */
.gp-row--tags > .gp-tx {
	padding-top: 6px;
	padding-bottom: 26px;
}

.gp-row--tags > .gp-mg {
	padding-bottom: 0;
}

.gp-tags {
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 2.1;
	color: var(--gp-ink-3);
}

.gp-tags__k {
	margin-right: 8px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
}

.gp .gp-tags a {
	color: var(--gp-ink-2);
	text-decoration: none;
	border-bottom: 1px solid var(--gp-hair);
	padding: 4px 0;
}

.gp .gp-tags a:hover,
.gp .gp-tags a:focus-visible {
	color: var(--gp-pencil);
	border-bottom-color: var(--gp-pencil);
}

/* The print viewer (assets/js/lightbox.js): a picture opened over the page, as a print laid on a dark desk. */
.gp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(4px, 1.5vw, 20px);
	padding: clamp(52px, 6vh, 72px) clamp(8px, 2vw, 28px) clamp(20px, 4vh, 40px);
	background: rgba(15, 12, 9, .96);
	color: var(--gp-cream, #f4efe6);
	cursor: zoom-out;
}

.gp-lightbox[hidden] {
	display: none;
}

.gp-lightbox-open {
	overflow: hidden;
}

.gp-lightbox__fig {
	margin: 0;
	min-width: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gp-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 170px);
	width: auto;
	height: auto;
	box-sizing: border-box;
	border: 8px solid var(--gp-white);
	background: var(--gp-white);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -18px rgba(0, 0, 0, .7);
	cursor: default;
}

.gp-lightbox__foot {
	margin-top: 14px;
	max-width: 70ch;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 18px;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: rgba(244, 239, 230, .82);
	text-align: center;
	cursor: default;
}

.gp-lightbox__count:empty,
.gp-lightbox__cap:empty {
	display: none;
}

.gp-lightbox button {
	appearance: none;
	flex: none;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid rgba(244, 239, 230, .45);
	border-radius: 2px;
	background: transparent;
	color: inherit;
	font-family: var(--gp-mono);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.gp-lightbox button[hidden] {
	display: none;
}

.gp-lightbox button:hover,
.gp-lightbox button:focus-visible {
	border-color: var(--gp-cream, #f4efe6);
	outline: 2px solid var(--gp-pencil-light);
	outline-offset: 2px;
}

.gp-lightbox__close {
	position: absolute;
	top: clamp(8px, 1.4vh, 16px);
	right: clamp(8px, 2vw, 28px);
	padding: 0 14px;
}

.gp-lightbox__nav {
	font-size: 18px;
}

/* A picture that opens in the viewer says so. */
.gp-main a[href$=".jpg"] > img,
.gp-main a[href$=".jpeg"] > img,
.gp-main a[href$=".png"] > img,
.gp-main a[href$=".gif"] > img,
.gp-main a[href$=".webp"] > img {
	cursor: zoom-in;
}

@media (max-width: 599px) {
	.gp-lightbox {
		flex-wrap: wrap;
		align-content: center;
	}

	.gp-lightbox__fig {
		order: 1;
		flex: 1 0 100%;
	}

	.gp-lightbox__nav {
		order: 2;
	}

	.gp-lightbox__img {
		max-height: calc(100vh - 230px);
	}
}

/* T2: older and newer. */
.gp-endnav {
	padding-bottom: 44px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px 40px;
}

.gp .gp-endnav__older,
.gp .gp-endnav__newer {
	display: block;
	min-width: 0;
	padding: 4px 0;
	text-decoration: none;
	color: var(--gp-ink);
}

.gp-endnav__older {
	flex: 0 1 430px;
}

.gp-endnav__newer {
	flex: 0 1 430px;
	text-align: right;
}

div.gp-endnav__newer,
div.gp-endnav__older {
	flex: 0 0 auto;
}

.gp-endnav__k {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gp-pencil);
}

.gp-endnav__newer .gp-endnav__k {
	justify-content: flex-end;
}

div.gp-endnav__newer .gp-endnav__k,
div.gp-endnav__older .gp-endnav__k {
	color: var(--gp-ink-3);
}

div.gp-endnav__newer svg,
div.gp-endnav__older svg {
	stroke: var(--gp-pale);
}

.gp-endnav__t {
	display: block;
	margin-top: 8px;
	font-size: 20px;
	line-height: 1.35;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	text-decoration-color: rgba(22, 19, 15, .4);
}

.gp-endnav__d {
	display: block;
	margin-top: 8px;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

/* T2: "More filed under". */
.gp-mini {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--gp-hair);
}

.gp-mini__row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	border-top: 1px solid var(--gp-hair);
}

.gp-mini__row time {
	font-family: var(--gp-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp .gp-mini__row a {
	display: flex;
	align-items: center;
	min-height: 46px;
	box-sizing: border-box;
	padding: 9px 28px 9px 0;
	font-size: 18px;
	line-height: 1.3;
	color: var(--gp-ink);
	text-decoration: none;
}

.gp .gp-mini__row a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.gp-seg--flush {
	margin-top: 0;
}

.gp-morefiled {
	padding-right: 0;
	padding-bottom: 44px;
}

.gp-morefiled__all {
	margin-top: 6px;
}

@media (max-width: 599px) {
	.gp-endnav {
		display: block;
		padding-bottom: 36px;
	}

	.gp-endnav__newer {
		margin-top: 18px;
		text-align: left;
	}

	.gp-endnav__newer .gp-endnav__k {
		justify-content: flex-start;
	}

	.gp-mini__row {
		display: block;
		padding-top: 11px;
	}

	.gp .gp-mini__row a {
		min-height: 44px;
		align-items: flex-start;
		padding: 1px 0 10px;
	}
}

/* T1: the latest entry, large. The date sits in the gutter. */
.gp-dg {
	padding-top: calc(0.527 * clamp(30px, 3.4vw, 44px) - 16px);
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 1.45;
	color: var(--gp-ink-3);
}

.gp-dg span {
	display: block;
}

.gp-dg .gp-dg__dash {
	display: none;
}

.gp-latest__title {
	margin: 0;
	font-family: var(--gp-display);
	font-weight: 600;
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

.gp .gp-latest__title a {
	display: inline-block;
	min-height: 44px;
	color: var(--gp-ink);
	text-decoration: none;
}

.gp-latest__lede {
	margin: 12px 0 0;
	font-size: var(--gp-fs-lede);
	line-height: 1.75;
}

.gp-latest__foot {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2px 24px;
}

.gp-row--latest > .gp-tx {
	padding-bottom: 0;
}

.gp-row--latest > .gp-mg {
	padding-top: calc(0.643 * clamp(30px, 3.4vw, 44px) - 14px);
}

/* T1: a recent entry. Date, then title and chips. */
.gp-er {
	position: relative;
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	align-items: baseline;
	padding: 4px 28px 16px 0;
}

.gp-er--ruled::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--gp-hair);
}

.gp-er > time {
	font-family: var(--gp-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-er h3 {
	margin: 0;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
}

.gp .gp-er h3 a {
	display: block;
	padding: 9px 0;
	color: var(--gp-ink);
	text-decoration: none;
}

.gp .gp-er h3 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.gp-row--er > .gp-mg {
	padding-top: 14px;
}

/* T1: "page 1 of 29 · Older entries". */
.gp-morenav {
	border-top: 1px solid var(--gp-hair);
	padding-top: 8px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 0 24px;
}

.gp-morenav__n {
	flex: 0 0 112px;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

/* T5: a filed entry. Date, then title with its other subjects beneath. */
.gp-entry {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	column-gap: 16px;
	align-items: baseline;
	padding: 14px 28px 15px 0;
}

.gp-entry__date {
	font-family: var(--gp-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp .gp-entry__title {
	font-size: 20px;
	line-height: 1.35;
	color: var(--gp-ink);
	text-decoration: none;
}

.gp .gp-entry__title:hover {
	text-decoration: underline;
}

.gp-entry__cats {
	margin-top: 3px;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp .gp-entry__cats a {
	color: inherit;
	text-decoration: none;
}

.gp .gp-entry__cats a:hover {
	text-decoration: underline;
}

.gp-row--entry > .gp-mg {
	padding-top: 14px;
}

/* A list row's picture: a small print at the end of the row; a larger one under the latest entry's words. */
.gp-er--pic,
.gp-entry--pic {
	grid-template-columns: 112px minmax(0, 1fr) auto;
	column-gap: 16px;
}

.gp-er--pic {
	column-gap: 0;
}

.gp-thumb {
	display: block;
	align-self: center;
	box-sizing: border-box;
	width: 112px;
	aspect-ratio: 7 / 4;
	margin-left: 20px;
	padding: 4px;
	background: var(--gp-white);
	border: 1px solid var(--gp-hair);
	box-shadow: 0 1px 2px rgba(22, 19, 15, .14), 0 8px 14px -10px rgba(22, 19, 15, .4);
	transform: rotate(-1deg);
}

li:nth-child(even) > .gp-er .gp-thumb,
li:nth-child(even) .gp-entry .gp-thumb {
	transform: rotate(0.8deg);
}

.gp-entry--pic .gp-thumb {
	margin-left: 4px;
}

.gp-thumb__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.88);
}

.gp-thumb--lead {
	width: min(360px, 100%);
	aspect-ratio: auto;
	margin: 20px 0 8px;
	padding: 8px;
}

.gp-thumb--lead .gp-thumb__img {
	height: auto;
	max-height: 300px;
}

/* The record's rows are one line deep: a smaller print, so a row with a picture is hardly taller than one without.
   Doubled class: the .gp-yr rule itself comes later in this file. */
.gp-yr.gp-yr--pic {
	grid-template-columns: 58px minmax(0, 1fr) auto;
	align-items: center;
}

.gp-yr--pic > time {
	align-self: start;
	padding-top: 12px;
}

.gp-thumb--record {
	width: 70px;
	margin: 4px 0 4px 16px;
	padding: 3px;
}

li:nth-child(even) > .gp-yr .gp-thumb {
	transform: rotate(0.8deg);
}

@media (max-width: 599px) {
	/* Doubled classes: the single column rule for narrow screens comes later in this file. */
	.gp-er.gp-er--pic,
	.gp-entry.gp-entry--pic {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 0;
	}

	.gp-er--pic > .gp-thumb,
	.gp-entry--pic > .gp-thumb {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 98px;
		margin-left: 16px;
	}

	.gp-yr.gp-yr--pic {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.gp-yr--pic > .gp-thumb {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* T5: the pagination line. */
.gp-pager {
	padding: 12px 28px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 24px;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-pager__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}

/* T5: nothing filed. */
.gp-empty {
	box-sizing: border-box;
	max-width: 620px;
	border: 1px dashed rgba(22, 19, 15, .35);
	border-radius: 2px;
	padding: clamp(20px, 5.5vw, 28px);
}

.gp-empty h2,
.gp-empty h3 {
	margin: 0;
	font-family: var(--gp-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--gp-ink);
}

.gp-empty p {
	margin: 12px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--gp-ink-2);
}

.gp-empty__acts {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
}

.gp-row--empty > .gp-mg {
	padding-top: 30px;
}

/* Figures: a mono caption above (Fig. 1 · Filed under). */
.gp-fig {
	margin: 0;
}

.gp-fig > figcaption {
	font-family: var(--gp-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--gp-ink);
}

.gp-fig--quiet > figcaption {
	font-size: 12px;
	color: var(--gp-ink-3);
}

/* Fig. "Filed under": one bar per subject. */
.gp-bars {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.gp .gp-bars a {
	display: grid;
	grid-template-columns: 136px minmax(0, 1fr) 34px;
	align-items: center;
	column-gap: 14px;
	min-height: 44px;
	color: var(--gp-ink);
	text-decoration: none;
}

.gp-bars__l {
	font-size: 17px;
	line-height: 1.3;
}

.gp .gp-bars a:hover .gp-bars__l {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.gp-bars__b {
	display: block;
	min-width: 2px;
	height: 8px;
	background: var(--gp-ink);
}

.gp-bars__n {
	text-align: right;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-2);
}

/* Fig. "Entries by year": a column chart. Set --gp-n to the number of years. */
.gp-cols-scroll {
	margin-top: 6px;
	overflow-x: auto;
	overflow-y: hidden;
}

.gp-cols {
	position: relative;
	min-width: 462px;
	padding: 8px 0 16px;
}

.gp-cols__plot {
	display: grid;
	grid-template-columns: repeat(var(--gp-n, 21), minmax(0, 1fr));
	height: 178px;
	border-bottom: 1px solid var(--gp-ink);
}

.gp-cols__c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

.gp-cols__v {
	margin-bottom: 2px;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 16px;
	color: var(--gp-ink-2);
}

.gp-cols__b {
	display: block;
	width: 62%;
	background: var(--gp-ink);
}

.gp-cols__x {
	display: grid;
	grid-template-columns: repeat(var(--gp-n, 21), minmax(0, 1fr));
	padding-top: 5px;
	text-align: center;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 17px;
	color: var(--gp-ink-3);
}

/* The editor's ring round a stretch of the chart: set left and width on the element. */
.gp-cols__ring {
	position: absolute;
	bottom: 3px;
	height: 82px;
	pointer-events: none;
}

.gp-cols__ring::after {
	content: "";
	position: absolute;
	left: -8%;
	top: -15%;
	width: 116%;
	height: 130%;
	background: var(--gp-svg-ring-wide) no-repeat 0 0 / 100% 100%;
}

/* T4 variant: every column is a link to its year, with the label under the baseline. */
.gp-cols--links {
	min-width: 470px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--gp-n, 21), minmax(0, 1fr));
	column-gap: clamp(4px, 0.6vw, 8px);
	align-items: end;
}

.gp-cols--links::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 23px;
	height: 1px;
	background: var(--gp-ink);
}

.gp .gp-cols--links > a,
.gp-cols--links > div {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	text-decoration: none;
	color: var(--gp-ink);
}

.gp-cols--links .gp-cols__v {
	margin: 0;
	line-height: 1.5;
	text-align: center;
	color: inherit;
}

.gp-cols--links .gp-cols__b {
	width: auto;
	margin-top: 3px;
}

.gp-cols__y {
	display: block;
	height: 24px;
	box-sizing: border-box;
	padding-top: 6px;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
	color: var(--gp-ink-3);
}

/* T4: a year. The summary is the ruled head; the rows are its entries. */
.gp-year {
	margin: 0;
}

.gp-year > summary {
	list-style: none;
	cursor: pointer;
}

.gp-year > summary::-webkit-details-marker {
	display: none;
}

.gp-year__head {
	min-width: 0;
	margin-top: 44px;
	border-top: 2px solid var(--gp-ink);
	padding: 14px 28px 16px 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 24px;
}

.gp-year:first-of-type .gp-year__head {
	margin-top: 48px;
}

.gp-year__head h2 {
	margin: 0;
	font-family: var(--gp-display);
	font-weight: 600;
	font-variant-numeric: lining-nums;
	font-size: 44px;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--gp-ink);
}

.gp-year__n {
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gp-ink-3);
	white-space: nowrap;
}

.gp-year__n b {
	font-weight: 600;
	color: var(--gp-ink);
}

/* Closed years say so: a small "+" after the count. */
.gp-year:not([open]) .gp-year__n::after {
	content: " +";
	color: var(--gp-ink);
}

.gp-year__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-yr {
	min-width: 0;
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	align-items: baseline;
	border-top: 1px solid var(--gp-hair);
	padding-right: 28px;
}

.gp-yr > time {
	font-family: var(--gp-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-yr__in {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 20px;
}

.gp .gp-yr__t {
	display: block;
	min-width: 0;
	padding: 10px 0;
	font-size: 18px;
	line-height: 24px;
	color: var(--gp-ink);
	text-decoration: none;
}

.gp .gp-yr__t:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.gp-yr__k {
	margin-top: -8px;
	padding-bottom: 10px;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-row--yr > .gp-mg {
	padding-top: 10px;
}

.gp-row--yr .gp-note,
.gp-row--yearhead .gp-note {
	margin-bottom: -34px;
}

.gp-row--yearhead > .gp-mg {
	padding-top: 64px;
}

/* T4: the links under the record. */
.gp-endlinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 40px;
}

/* T9: ways back. */
.gp-ways {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--gp-hair);
}

.gp-ways > li {
	border-top: 1px solid var(--gp-hair);
}

.gp .gp-ways a {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 14px;
	align-items: center;
	column-gap: 16px;
	min-height: 46px;
	padding: 0 2px;
	color: var(--gp-ink);
	text-decoration: none;
}

.gp-ways .gp-chip {
	width: fit-content;
}

.gp-ways__t {
	padding: 9px 0;
	font-size: 18px;
	line-height: 1.3;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

/* A mono line with a link in it ("Latest entry: 2026-09-09 · ..."). */
.gp-monoline {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp .gp-monoline a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gp-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* A quiet sentence ("No replies yet. The editor has checked."). */
.gp-quiet {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--gp-ink-2);
}

.gp-continues {
	margin: 0;
	padding-top: 4px;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

/* ------------------------------------------------------------------------- */
/* 15. Comments (T2 end matter)                                              */
/* ------------------------------------------------------------------------- */

.gp-comments .gp-seg {
	margin-top: 0;
	padding-bottom: 18px;
}

.gp-comments__none {
	padding-bottom: 22px;
}

.gp-comments__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--gp-hair);
}

.gp-comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0 0 0 28px;
}

.gp-comment {
	border-top: 1px solid var(--gp-hair);
	padding: 14px 0 16px;
}

.gp-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-comment__meta b {
	font-weight: 500;
	color: var(--gp-ink);
}

.gp .gp-comment__meta a {
	color: inherit;
	text-decoration: none;
}

.gp .gp-comment__meta a:hover {
	text-decoration: underline;
}

.gp-comment__body {
	margin-top: 6px;
	font-size: 18px;
	line-height: 1.6;
}

.gp-comment__body p {
	margin: 0 0 .7em;
}

.gp-comment__body p:last-child {
	margin-bottom: 0;
}

.gp-comment__hold {
	margin: 6px 0 0;
	font-family: var(--gp-mono);
	font-size: 12px;
	color: var(--gp-oxblood);
}

.gp-comments__pager {
	padding-top: 8px;
	display: flex;
	justify-content: space-between;
	gap: 0 24px;
}

.gp-comments .comment-respond {
	margin: 0;
}

/* The form has no title of its own; the line only shows "Cancel reply" while answering a reply. */
.gp-comments .comment-reply-title {
	margin: 0;
	font-size: 0;
	line-height: 0;
}

.gp-comments .comment-reply-title small a {
	display: inline-block;
	margin: 0 0 14px;
	font-family: var(--gp-mono);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
}

.gp-comments .comment-form {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 20px;
}

.gp-comments .comment-form > p {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
}

.gp-comments .comment-form > .comment-form-author,
.gp-comments .comment-form > .comment-form-email {
	flex: 1 1 240px;
}

.gp-comments .comment-form label {
	margin-bottom: 0;
	line-height: 1.5;
	letter-spacing: 0.16em;
}

.gp-sheet .gp-comments .comment-form input[type="text"],
.gp-sheet .gp-comments .comment-form input[type="email"],
.gp-sheet .gp-comments .comment-form input[type="url"] {
	margin: 6px 0 0;
	padding: 12px 14px;
	font-family: var(--gp-ui);
	font-size: 16px;
}

.gp-sheet .gp-comments .comment-form textarea {
	height: auto;
	min-height: 170px;
	margin: 6px 0 0;
	font-size: 17px;
	line-height: 1.6;
}

.gp-comments .comment-form .comment-notes,
.gp-comments .comment-form .logged-in-as,
.gp-comments .comment-form .comment-form-cookies-consent,
.gp-comments .comment-form .must-log-in {
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp-comments .comment-form .comment-form-cookies-consent label {
	display: inline;
	font-family: var(--gp-mono);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gp-ink-3);
}

.gp-comments .comment-form .form-submit {
	margin-top: 2px;
}

.gp-comments .required {
	color: var(--gp-oxblood);
}

.gp-row--respond > .gp-tx {
	padding-bottom: 0;
}

.gp-row--respond > .gp-mg {
	padding-top: 30px;
}

/* ------------------------------------------------------------------------- */
/* 16. Footer and colophon                                                   */
/* ------------------------------------------------------------------------- */

.gp-foot {
	border-top: 1px solid var(--gp-ink);
	padding: 36px var(--gp-pad) 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 32px 56px;
}

.gp-foot__sub {
	flex: 1 1 380px;
	min-width: 0;
	margin: 0;
}

.gp-foot__line {
	display: block;
	margin: 10px 0 0;
	font-size: 18px;
	line-height: 1.5;
}

/* The subscription form (Jetpack's markup): one field, one button, as the mockup. */
.gp-foot__form {
	margin-top: 14px;
	max-width: 500px;
}

.gp-foot__form form,
.gp-foot__form .wp-block-jetpack-subscriptions__form-elements {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gp-foot__form p {
	margin: 0;
}

.gp-foot__form p#subscribe-email,
.gp-foot__form .gp-foot__field {
	flex: 1 1 220px;
	min-width: 0;
}

.gp-foot__form input[type="email"],
.gp-foot__form input[type="text"] {
	display: block;
	width: 100%;
	min-width: 0;
	height: 48px;
	margin: 0;
	box-sizing: border-box;
	padding: 12px 14px !important;
	background: var(--gp-white) !important;
	color: var(--gp-ink) !important;
	border: 1px solid var(--gp-ink-3) !important;
	border-radius: 2px !important;
	font-family: var(--gp-ui) !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
}

.gp-foot__form button,
.gp-foot__form input[type="submit"] {
	box-sizing: border-box;
	min-height: 48px;
	margin: 0 !important;
	padding: 12px 22px !important;
	background: var(--gp-ink) !important;
	color: var(--gp-cream) !important;
	border: 1px solid var(--gp-ink) !important;
	border-radius: 2px !important;
	font-family: var(--gp-ui) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.gp-foot__form .wp-block-jetpack-subscriptions__subscount,
.gp-foot__form .jetpack-subscribe-count {
	flex: 1 1 100%;
	order: -1;
	font-size: 18px;
	line-height: 1.5;
}

.gp-foot__side {
	flex: 0 1 auto;
	min-width: 0;
}

.gp-foot__note {
	font-family: var(--gp-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-ink-3);
}

.gp .gp-foot__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	font-family: var(--gp-ui);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gp-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.gp-colophon {
	max-width: 1240px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 16px clamp(20px, 3.4vw, 44px) 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 32px;
	font-family: var(--gp-mono);
	font-size: 11px;
	line-height: 1.6;
	color: var(--gp-ink-2);
}

.gp-colophon__text {
	flex: 1 1 420px;
	min-width: 0;
	max-width: 620px;
}

.gp-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0 22px;
}

.gp .gp-social a {
	color: var(--gp-ink);
	padding: 14px 0;
}

/* ------------------------------------------------------------------------- */
/* 17. Narrow screens: the margin stacks under its text                      */
/* ------------------------------------------------------------------------- */

@media (max-width: 899px) {
	/* The margin, now under its text: a short hairline at the left, notes one after another. */
	.gp-row > .gp-mg:not(:empty) {
		display: block;
		margin: 0 0 20px 10px;
		padding-top: 0 !important;
		padding-bottom: 6px !important;
	}

	.gp-row > .gp-mg:empty {
		display: none;
	}

	.gp-row > .gp-mg > * {
		margin-top: 0 !important;
	}

	.gp-sp {
		display: none;
	}

	.gp-grp,
	.gp-grp--hang,
	.gp-grp--short,
	.gp-grp--fixed,
	.gp-mg__more--hang {
		height: auto;
		padding-bottom: 0;
	}

	.gp-grp > .gp-note + .gp-note,
	.gp-mg > .gp-note + .gp-note,
	.gp-note--solo + .gp-mg__more,
	.gp-mg__more {
		margin-top: 0;
	}

	.gp-note--plain {
		margin-left: 0;
	}

	.gp-galley--post .gp-row--display > .gp-tx,
	.gp-row--print > .gp-tx,
	.gp-row--respond > .gp-tx {
		padding-bottom: 18px;
	}

	.gp-row--acts > .gp-mg {
		display: none;
	}

	/* The record: notes tuck under their message, without the hairline. */
	.gp-log__list > li > .gp-mg:not(:empty) {
		margin: 0 0 14px 96px;
		border-left: 0;
	}

	.gp-log .gp-note,
	.gp-row--yr .gp-note,
	.gp-row--yearhead .gp-note {
		margin-bottom: 0;
	}

	.gp-er,
	.gp-entry,
	.gp-yr,
	.gp-year__head,
	.gp-pager {
		padding-right: 0;
	}

	.gp-dg {
		padding: 0 0 6px;
	}

	.gp-dg span,
	.gp-dg .gp-dg__dash {
		display: inline;
	}

	.gp-fig--chart {
		padding-bottom: 16px;
	}
}

@media (max-width: 599px) {
	.gp-er,
	.gp-entry {
		grid-template-columns: minmax(0, 1fr);
	}

	.gp-er > time {
		padding-top: 12px;
	}

	.gp-entry {
		row-gap: 2px;
	}

	.gp-yr {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 10px;
	}

	.gp .gp-yr__t {
		margin-top: -6px;
	}

	.gp-yr__k {
		flex-basis: 100%;
	}

	.gp-acts > .gp-btn {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------------------------- */
/* 18. Print (on real paper)                                                 */
/* ------------------------------------------------------------------------- */

@media print {
	body.gp {
		background: #fff;
	}

	.gp-desk,
	.gp-marks,
	.gp-band__video,
	.gp-foot,
	.gp-colophon,
	.gp-skip {
		display: none;
	}

	.gp-sheet {
		box-shadow: none;
	}
}