/**
 * Partitur — theme styles.
 *
 * Structure: frame → engraving marks → chrome → components → templates →
 * editor blocks → responsive → print.
 *
 * Two conventions worth knowing before editing:
 *
 * 1. The stave is drawn with a repeating gradient, not five elements. Five
 *    1px rules at 5px gaps is a 6px period over 25px; three rules at 4px gaps
 *    is a 5px period over 11px. One element, no DOM cost, and it scales.
 *
 * 2. Borders are `box-shadow: inset 0 0 0 1px` wherever the box is measured
 *    or sits in a grid, so a border never changes a layout size. Real
 *    `border` is used only where the rule is a divider between two things.
 */

/* -------------------------------------------------------------------------
   1. Frame
   ---------------------------------------------------------------------- */

.pt-wrap {
	max-width: var(--pt-max);
	margin-inline: auto;
	padding-inline: var(--pt-gutter);
}

.pt-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.pt-main {
	flex: 1 0 auto;
}

/* -------------------------------------------------------------------------
   2. Engraving marks — stave, notehead, rehearsal mark, tempo, dynamic
   ---------------------------------------------------------------------- */

.pt-stave {
	height: 25px;
	background-image: repeating-linear-gradient(to bottom, var(--pt-rule) 0 1px, transparent 1px 6px);
	flex: 1;
}

.pt-stave--half {
	height: 11px;
	background-image: repeating-linear-gradient(to bottom, var(--pt-rule) 0 1px, transparent 1px 5px);
}

.pt-stave--ink {
	background-image: repeating-linear-gradient(to bottom, var(--pt-ink) 0 1px, transparent 1px 6px);
}

.pt-stave--onink {
	background-image: repeating-linear-gradient(to bottom, var(--pt-ink-line) 0 1px, transparent 1px 6px);
}

.pt-notehead {
	width: 9px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: var(--pt-ink);
	transform: rotate(-20deg);
}

.pt-notehead--lead {
	background: var(--pt-wine);
}

.pt-notehead--sm {
	width: 8px;
	height: 6px;
}

/* Rehearsal mark — the numbered box. 1.5px inset keeps the weight the comps
   have without the box growing by 3px in a grid. */
.pt-rehearsal {
	width: 26px;
	height: 26px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1.5px var(--pt-ink);
	font-family: var(--pt-mono);
	font-size: 12px;
	line-height: 1;
	color: var(--pt-ink);
}

.pt-rehearsal--active {
	box-shadow: inset 0 0 0 1.5px var(--pt-wine);
	color: var(--pt-wine);
}

.pt-tempo {
	font-style: italic;
	font-size: 17px;
	color: var(--pt-dim-text);
}

.pt-dynamic {
	font-style: italic;
	color: var(--pt-wine);
}

/* -------------------------------------------------------------------------
   3. Type roles
   ---------------------------------------------------------------------- */

.pt-label {
	font-family: var(--pt-serif);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--pt-ink);
	margin: 0;
}

.pt-label--wine {
	color: var(--pt-wine);
}

.pt-label--quiet {
	color: var(--pt-dim-text);
	font-size: 11px;
	letter-spacing: 0.28em;
}

.pt-cat {
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--pt-wine);
}

.pt-meta {
	font-family: var(--pt-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--pt-dim-text);
}

.pt-meta--12 {
	font-size: 12px;
	letter-spacing: 0;
}

.pt-dek {
	font-size: 22px;
	font-style: italic;
	line-height: 1.55;
	color: var(--pt-quiet);
}

/* -------------------------------------------------------------------------
   4. Section header — [label] [stave] [meta]
   ---------------------------------------------------------------------- */

.pt-sechead {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 26px;
}

.pt-sechead > .pt-label,
.pt-sechead > .pt-meta {
	white-space: nowrap;
}

/* A six-word movement heading is wider than a phone. Below 640 the row wraps
   and the stave takes the full width beneath it, which is still the divider
   the design asks for. */
@media (max-width: 640px) {
	.pt-sechead {
		flex-wrap: wrap;
		gap: 12px;
		margin-bottom: 20px;
	}

	.pt-sechead > .pt-label,
	.pt-sechead > .pt-meta {
		white-space: normal;
	}

	.pt-sechead > .pt-stave {
		flex: 1 0 100%;
		order: 3;
	}
}

/* -------------------------------------------------------------------------
   5. Buttons and links
   ---------------------------------------------------------------------- */

.pt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	font-family: var(--pt-serif);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-align: center;
	background: var(--pt-ink);
	color: var(--pt-paper);
	border: 0;
	cursor: pointer;
	transition: background var(--pt-mid) var(--pt-ease), color var(--pt-mid) var(--pt-ease), box-shadow var(--pt-mid) var(--pt-ease);
}

.pt-btn:hover,
.pt-btn:focus-visible {
	background: var(--pt-wine);
	color: var(--pt-paper);
}

.pt-btn--secondary {
	background: transparent;
	color: var(--pt-ink);
	box-shadow: inset 0 0 0 1px var(--pt-secondary-border);
}

.pt-btn--secondary:hover,
.pt-btn--secondary:focus-visible {
	background: var(--pt-leaf);
	color: var(--pt-ink);
	box-shadow: inset 0 0 0 1px var(--pt-ink);
}

.pt-btn--onink {
	background: var(--pt-paper);
	color: var(--pt-ink);
}

.pt-btn--onink:hover,
.pt-btn--onink:focus-visible {
	background: var(--pt-rose);
	color: var(--pt-ink);
}

.pt-btn--outline {
	background: transparent;
	color: var(--pt-ink);
	box-shadow: inset 0 0 0 1px var(--pt-rule);
	padding: 8px 14px;
	font-size: 12px;
	letter-spacing: 0.2em;
}

.pt-btn--outline:hover,
.pt-btn--outline:focus-visible {
	background: var(--pt-leaf);
	color: var(--pt-ink);
	box-shadow: inset 0 0 0 1px var(--pt-ink);
}

.pt-textlink {
	color: var(--pt-wine);
	border-bottom: 1px solid var(--pt-wine);
	padding-bottom: 2px;
	transition: color var(--pt-fast) var(--pt-ease), border-color var(--pt-fast) var(--pt-ease);
}

.pt-textlink:hover {
	color: var(--pt-ink);
	border-bottom-color: var(--pt-ink);
}

/* -------------------------------------------------------------------------
   6. Masthead
   ---------------------------------------------------------------------- */

.pt-masthead {
	background: var(--pt-paper);
}

.pt-masthead__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 22px;
}

.pt-masthead--slim {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--pt-rule);
}

.pt-masthead--slim .pt-masthead__bar {
	padding-block: 16px;
}

.admin-bar .pt-masthead--slim {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .pt-masthead--slim {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .pt-masthead--slim {
		top: 0;
	}
}

.pt-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	flex: none;
	color: var(--pt-ink);
	min-width: 0;
}

.pt-brand__name {
	font-size: 22px;
	line-height: 1.1;
	white-space: nowrap;
}

.pt-masthead--slim .pt-brand__name {
	font-size: 18px;
}

.pt-brand__logo img {
	max-height: 46px;
	width: auto;
}

.pt-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex: 0 1 auto;
	overflow: hidden;
	font-family: var(--pt-mono);
	font-size: 11px;
	white-space: nowrap;
	color: var(--pt-dim-text);
	margin-left: 6px;
}

.pt-crumbs > :last-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

.pt-crumbs a {
	color: var(--pt-dim-text);
}

.pt-crumbs a:hover {
	color: var(--pt-wine);
}

.pt-crumbs [aria-current] {
	color: var(--pt-ink);
}

.pt-masthead__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: none;
}

/* Primary nav */
.pt-nav {
	display: flex;
	align-items: center;
	gap: 26px;
}

.pt-nav ul {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pt-nav li {
	margin: 0;
}

.pt-nav a {
	white-space: nowrap;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pt-nav);
	transition: color var(--pt-fast) var(--pt-ease);
}

.pt-masthead--slim .pt-nav a {
	font-size: 12px;
	letter-spacing: 0.2em;
}

.pt-masthead--slim .pt-nav ul {
	gap: 18px;
}

.pt-nav a:hover {
	color: var(--pt-wine);
}

.pt-nav .current-menu-item > a,
.pt-nav .current-menu-ancestor > a,
.pt-nav .current-menu-parent > a,
.pt-nav .pt-nav__current > a {
	color: var(--pt-wine);
}

/* Search pill */
.pt-searchpill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	font-family: var(--pt-mono);
	font-size: 12px;
	color: var(--pt-dim-text);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--pt-rule);
	cursor: pointer;
	transition: box-shadow var(--pt-fast) var(--pt-ease), color var(--pt-fast) var(--pt-ease);
}

.pt-searchpill:hover {
	color: var(--pt-ink);
	box-shadow: inset 0 0 0 1px var(--pt-ink);
}

.pt-searchpill__key {
	font-size: 11px;
}

/* Hamburger — a half stave, three 1px rules at 4px gaps. */
.pt-masthead--collapsed .pt-nav {
	display: none;
}

.pt-masthead--collapsed .pt-burger {
	display: flex;
}

.pt-burger {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: flex-end;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.pt-burger__rules {
	width: 22px;
	height: 11px;
	background-image: repeating-linear-gradient(to bottom, var(--pt-ink) 0 1px, transparent 1px 5px);
}

/* -------------------------------------------------------------------------
   7. Mobile menu — full-screen ink panel
   ---------------------------------------------------------------------- */

.pt-mobilemenu {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--pt-ink);
	color: var(--pt-paper);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 26px;
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(8px);
	visibility: hidden;
	transition: opacity var(--pt-slow) var(--pt-ease), transform var(--pt-slow) var(--pt-ease), visibility 0s linear var(--pt-slow);
}

.pt-mobilemenu[data-open="true"] {
	opacity: 1;
	transform: none;
	visibility: visible;
	transition-delay: 0s;
}

.pt-mobilemenu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pt-mobilemenu__close {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	background: none;
	border: 0;
	color: var(--pt-paper);
	cursor: pointer;
}

.pt-mobilemenu .pt-brand__name {
	color: var(--pt-paper);
	font-size: 16px;
}

.pt-mobilemenu__search input[type="search"] {
	width: 100%;
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--pt-ink-line);
	padding: 13px 14px;
	font-family: var(--pt-mono);
	font-size: 12px;
	color: var(--pt-paper);
}

.pt-mobilemenu__search input::placeholder {
	color: #8e877a;
	opacity: 1;
}

.pt-mobilemenu__nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pt-mobilemenu__nav a {
	display: block;
	font-size: 32px;
	line-height: 1.15;
	padding: 9px 0;
	color: var(--pt-paper);
	min-height: 44px;
}

.pt-mobilemenu__nav .current-menu-item > a,
.pt-mobilemenu__nav .current-menu-ancestor > a {
	color: var(--pt-rose);
}

.pt-mobilemenu__tempi {
	display: flex;
	gap: 10px;
}

.pt-mobilemenu__tempi a {
	flex: 1;
	text-align: center;
	padding: 12px 0;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-style: italic;
	color: var(--pt-paper);
	box-shadow: inset 0 0 0 1px var(--pt-ink-line);
}

.pt-mobilemenu__tempi a:hover {
	box-shadow: inset 0 0 0 1px var(--pt-rose);
	color: var(--pt-rose);
}

.pt-mobilemenu__foot {
	margin-top: auto;
	font-family: var(--pt-mono);
	font-size: 11px;
	line-height: 1.7;
	color: #8e877a;
}

body.pt-menu-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   8. Hero
   ---------------------------------------------------------------------- */

.pt-hero {
	padding: 62px 0 44px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.pt-hero__eyebrow {
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--pt-wine);
}

.pt-hero__title {
	font-size: 68px;
	line-height: 1.08;
	max-width: 780px;
}

.pt-hero__title em,
.pt-hero__title i {
	font-style: italic;
}

.pt-hero__dek {
	font-size: 19px;
	line-height: 1.7;
	color: var(--pt-quiet);
	max-width: 600px;
}

.pt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 6px;
}

.pt-hero__image {
	height: 300px;
	overflow: hidden;
	background: var(--pt-leaf);
}

.pt-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   9. Tempo filter — the signature control
   ---------------------------------------------------------------------- */

.pt-tempirow {
	display: flex;
	align-items: center;
	gap: 30px;
	padding-block: var(--pt-s5);
}

.pt-tempirow > .pt-label {
	white-space: nowrap;
	letter-spacing: 0.3em;
}

.pt-tempi {
	flex: 1;
	display: flex;
	box-shadow: inset 0 0 0 1px var(--pt-rule);
}

.pt-tempi__item {
	flex: 1;
	padding: 14px 10px;
	text-align: center;
	color: var(--pt-ink);
	transition: background var(--pt-fast) var(--pt-ease), color var(--pt-fast) var(--pt-ease);
}

.pt-tempi__item + .pt-tempi__item {
	border-left: 1px solid var(--pt-rule);
}

.pt-tempi__item:hover {
	background: var(--pt-leaf);
}

.pt-tempi__item[aria-current="page"],
.pt-tempi__item--active {
	background: var(--pt-ink);
	color: var(--pt-paper);
}

.pt-tempi__item[aria-current="page"]:hover,
.pt-tempi__item--active:hover {
	background: var(--pt-ink);
}

.pt-tempi__name {
	font-size: 18px;
	font-style: italic;
}

.pt-tempi__sub {
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-dim-text);
}

.pt-tempi__item[aria-current="page"] .pt-tempi__sub,
.pt-tempi__item--active .pt-tempi__sub {
	color: var(--pt-paper);
	opacity: 0.7;
}

/* Compact variant used in the archive head, where the row also carries a sort
   control and the terms sit tighter. */
.pt-tempi--compact {
	flex: 0 0 auto;
}

.pt-tempi--compact .pt-tempi__item {
	flex: 0 0 auto;
	padding: 11px 20px;
}

.pt-tempi--compact .pt-tempi__name {
	font-size: 17px;
}

.pt-tempi--compact .pt-tempi__all {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-style: normal;
}

/* -------------------------------------------------------------------------
   10. Guide card
   ---------------------------------------------------------------------- */

.pt-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px;
}

.pt-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

.pt-card__media {
	height: 170px;
	overflow: hidden;
	background: var(--pt-leaf);
}

.pt-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 160ms var(--pt-ease);
}

.pt-card__catrow {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pt-card__catrow .pt-tempo {
	margin-left: auto;
	font-size: 15px;
}

.pt-card__title {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--pt-ink);
}

.pt-card__title a {
	color: inherit;
	transition: color 160ms var(--pt-ease);
}

/* The whole card is the link: the anchor covers the card, and everything that
   sits above it (the category link) is lifted back over. */
.pt-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pt-card:hover .pt-card__title a {
	color: var(--pt-wine);
}

.pt-card:hover .pt-card__media img {
	opacity: 0.92;
}

.pt-card__excerpt {
	font-size: 16px;
	line-height: 1.65;
	color: var(--pt-quieter);
}

.pt-card__catrow a,
.pt-card__meta a {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   11. District index
   ---------------------------------------------------------------------- */

/* 1px gaps over a rule-coloured ground, plus a 1px ring, gives the engraved
   grid without 23 borders that each add a pixel to the layout. */
.pt-districts {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	background: var(--pt-rule);
	box-shadow: 0 0 0 1px var(--pt-rule);
}

.pt-district {
	background: var(--pt-paper);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--pt-ink);
	transition: background var(--pt-fast) var(--pt-ease);
}

.pt-district:hover {
	background: var(--pt-leaf);
}

.pt-district:hover .pt-rehearsal {
	box-shadow: inset 0 0 0 1.5px var(--pt-wine);
	color: var(--pt-wine);
}

.pt-district:hover .pt-district__name {
	color: var(--pt-wine);
}

.pt-district__name {
	font-size: 17px;
	line-height: 1.3;
}

.pt-district--more {
	align-items: center;
	justify-content: center;
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-dim-text);
	text-align: center;
}

/* -------------------------------------------------------------------------
   12. Coda — newsletter band
   ---------------------------------------------------------------------- */

.pt-coda {
	background: var(--pt-ink);
	color: var(--pt-paper);
	padding: 40px 44px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
	margin-bottom: var(--pt-s5);
}

.pt-coda__eyebrow {
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--pt-rose);
}

.pt-coda__title {
	font-size: 34px;
	line-height: 1.2;
	color: var(--pt-paper);
	margin-top: 10px;
}

.pt-coda__sub {
	font-size: 17px;
	line-height: 1.6;
	color: var(--pt-on-ink-quiet);
	margin-top: 8px;
}

/* Newsletter form */
.pt-signup {
	display: flex;
	flex-wrap: wrap;
}

.pt-signup__field {
	flex: 1 1 240px;
	min-width: 0;
	padding: 14px;
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--pt-rule);
	font-family: var(--pt-mono);
	font-size: 12px;
	color: var(--pt-ink);
	transition: box-shadow var(--pt-fast) var(--pt-ease);
}

.pt-signup__field::placeholder {
	color: var(--pt-dim-text);
	opacity: 1;
}

.pt-signup__field:focus {
	box-shadow: inset 0 0 0 1px var(--pt-ink);
	outline: 2px solid var(--pt-ink);
	outline-offset: 2px;
}

.pt-signup__btn {
	padding: 14px 24px;
	font-size: 12px;
	letter-spacing: 0.2em;
}

.pt-signup__msg {
	flex-basis: 100%;
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-wine);
	margin-top: 8px;
}

.pt-signup[data-state="error"] .pt-signup__field {
	box-shadow: inset 0 0 0 1px var(--pt-wine);
	color: var(--pt-wine);
}

.pt-signup[data-state="error"] .pt-signup__btn {
	background: var(--pt-wine);
	color: var(--pt-paper);
}

/* On the ink band the field rule is ink-line and the button is paper. */
.pt-coda .pt-signup__field {
	width: 260px;
	flex: 0 1 260px;
	box-shadow: inset 0 0 0 1px var(--pt-ink-line);
	color: var(--pt-paper);
}

.pt-coda .pt-signup__field::placeholder {
	color: #8e877a;
}

.pt-coda .pt-signup__field:focus {
	box-shadow: inset 0 0 0 1px var(--pt-paper);
	outline-color: var(--pt-paper);
}

.pt-coda .pt-signup__msg {
	color: var(--pt-rose);
}

.pt-coda .pt-signup[data-state="error"] .pt-signup__field {
	box-shadow: inset 0 0 0 1px var(--pt-rose);
	color: var(--pt-rose);
}

.pt-coda .pt-signup[data-state="error"] .pt-signup__btn {
	background: var(--pt-rose);
	color: var(--pt-ink);
}

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

.pt-footer {
	border-top: 1px solid var(--pt-rule);
}

.pt-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 34px;
	padding-block: 36px;
}

.pt-footer__about {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pt-footer__line {
	font-size: 16px;
	line-height: 1.6;
	color: var(--pt-quieter);
	max-width: 280px;
}

.pt-footer__col {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.pt-footer__col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.pt-footer__col a {
	font-size: 16px;
	color: var(--pt-quiet);
	transition: color var(--pt-fast) var(--pt-ease);
}

.pt-footer__col a:hover {
	color: var(--pt-wine);
}

.pt-subfooter {
	border-top: 1px solid var(--pt-rule);
	padding-block: 18px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-dim-text);
}

/* "Fine" — the mark that ends a score. Keep it. */
.pt-fine {
	font-family: var(--pt-serif);
	font-style: italic;
	font-size: 13px;
	letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
   14. Single guide
   ---------------------------------------------------------------------- */

.pt-progress {
	height: 2px;
	background: var(--pt-rule);
}

.pt-progress__fill {
	height: 100%;
	width: 0;
	background: var(--pt-wine);
	transform-origin: left center;
}

.pt-guide {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr) 280px;
	/* The columns span the whole 1160 frame, as the comps do — the gutter is
	   supplied by each column's own padding, not by the wrapper. Without this
	   the body column loses 88px and the 52px title breaks over two lines. */
	margin-inline: calc(var(--pt-gutter) * -1);
}

/* Either rail can be absent: a short guide has no h2s to list, and a new site
   has no related guides yet. Dropping the track is better than an empty
   column with a hairline down one side. */
.pt-guide--nocontents {
	grid-template-columns: minmax(0, 1fr) 280px;
}

.pt-guide--norail {
	grid-template-columns: 230px minmax(0, 1fr);
}

.pt-guide--nocontents.pt-guide--norail {
	grid-template-columns: minmax(0, 1fr);
}

.pt-guide--norail .pt-guide__body,
.pt-guide--nocontents .pt-guide__body {
	padding-inline: 48px 0;
}

.pt-guide--nocontents .pt-guide__body {
	padding-left: 0;
	padding-right: 48px;
}

.pt-guide--nocontents.pt-guide--norail .pt-guide__body {
	padding-inline: 0;
}

.pt-guide__contents {
	padding: 44px 28px;
	border-right: 1px solid var(--pt-rule-dim);
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: start;
	position: sticky;
	top: 90px;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
}

.pt-toc {
	display: flex;
	flex-direction: column;
	gap: 11px;
	list-style: none;
	font-size: 16px;
	line-height: 1.4;
}

.pt-toc a {
	display: block;
	color: var(--pt-quiet);
	padding-left: 14px;
	transition: color var(--pt-fast) var(--pt-ease);
}

.pt-toc a:hover {
	color: var(--pt-wine);
}

.pt-toc a[aria-current="true"] {
	color: var(--pt-wine);
	border-left: 2px solid var(--pt-wine);
	padding-left: 12px;
}

.pt-guide__stamp {
	font-family: var(--pt-mono);
	font-size: 11px;
	line-height: 1.7;
	color: var(--pt-dim-text);
}

.pt-guide__body {
	padding: 44px 48px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.pt-guide__catrow {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pt-guide__catrow .pt-cat {
	font-size: 11px;
	letter-spacing: 0.28em;
}

.pt-guide__catrow .pt-tempo {
	font-size: 16px;
}

.pt-guide__title {
	font-size: 52px;
	line-height: 1.1;
}

.pt-byline {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-dim-text);
}

.pt-byline__avatar {
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--pt-leaf);
	box-shadow: inset 0 0 0 1px var(--pt-rule);
}

.pt-byline__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.pt-byline a {
	color: var(--pt-dim-text);
}

.pt-byline a:hover {
	color: var(--pt-wine);
}

.pt-guide__hero {
	height: 320px;
	overflow: hidden;
	background: var(--pt-leaf);
}

.pt-guide__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pt-guide__caption {
	font-family: var(--pt-mono);
	font-size: 11px;
	line-height: 1.6;
	color: var(--pt-dim-text);
	border-bottom: 1px solid var(--pt-rule);
	padding-bottom: 14px;
}

.pt-guide__rail {
	padding: 44px 28px;
	border-left: 1px solid var(--pt-rule-dim);
	display: flex;
	flex-direction: column;
	gap: 26px;
	align-self: start;
	min-width: 0;
}

.pt-railblock {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pt-tonight {
	list-style: none;
	display: flex;
	flex-direction: column;
}

.pt-tonight li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 16px;
	padding-block: 5px;
}

.pt-tonight li + li {
	border-top: 1px solid var(--pt-rule-dim);
}

.pt-tonight__time {
	font-family: var(--pt-mono);
	font-size: 12px;
	color: var(--pt-dim-text);
	white-space: nowrap;
}

.pt-nearby {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pt-nearby li {
	display: flex;
	gap: 12px;
}

.pt-nearby__thumb {
	width: 60px;
	height: 60px;
	flex: none;
	overflow: hidden;
	background: var(--pt-leaf);
}

.pt-nearby__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pt-nearby a {
	font-size: 17px;
	line-height: 1.3;
	color: var(--pt-ink);
}

.pt-nearby a:hover {
	color: var(--pt-wine);
}

.pt-railcard {
	background: var(--pt-ink);
	color: var(--pt-paper);
	padding: 22px;
}

.pt-railcard__title {
	font-size: 20px;
	line-height: 1.3;
	color: var(--pt-paper);
}

.pt-railcard__sub {
	font-size: 15px;
	line-height: 1.55;
	color: var(--pt-on-ink-quiet);
	margin-top: 8px;
}

.pt-railcard .pt-signup {
	margin-top: 14px;
	flex-direction: column;
	gap: 8px;
}

.pt-railcard .pt-signup__field {
	flex: 1 1 auto;
	width: 100%;
	box-shadow: inset 0 0 0 1px var(--pt-ink-line);
	color: var(--pt-paper);
	padding: 11px 12px;
}

.pt-railcard .pt-signup__field::placeholder {
	color: #8e877a;
}

.pt-railcard .pt-signup__btn {
	width: 100%;
	padding: 11px;
	font-size: 11px;
}

.pt-railcard .pt-signup__msg {
	color: var(--pt-rose);
}

/* Prev / next */
.pt-adjacent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}

.pt-adjacent__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pt-adjacent__item--next {
	text-align: right;
	grid-column: 2;
}

.pt-adjacent__kicker {
	font-family: var(--pt-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--pt-dim-text);
}

.pt-adjacent__title {
	font-size: 20px;
	line-height: 1.3;
	color: var(--pt-ink);
}

.pt-adjacent a:hover .pt-adjacent__title,
.pt-adjacent__item:hover .pt-adjacent__title {
	color: var(--pt-wine);
}

/* Mobile contents sheet */
.pt-toc-sheet {
	display: none;
}

.pt-toc-sheet__toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	min-height: 44px;
	background: none;
	border-top: 1px solid var(--pt-rule);
	border-bottom: 1px solid var(--pt-rule);
	border-left: 0;
	border-right: 0;
	cursor: pointer;
	text-align: left;
}

.pt-toc-sheet__count {
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-dim-text);
}

.pt-toc-sheet__panel {
	padding: 16px 0 4px;
}

.pt-toc-sheet__toggle[aria-expanded="false"] + .pt-toc-sheet__panel {
	display: none;
}

/* -------------------------------------------------------------------------
   15. Article typography (the_content)
   ---------------------------------------------------------------------- */

.pt-prose {
	display: flow-root;
	max-width: var(--pt-measure);
	font-size: 18px;
	line-height: 1.78;
	color: var(--pt-body);
}

.pt-prose > * {
	margin-block: 0 22px;
}

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

.pt-prose h2 {
	font-size: 34px;
	line-height: 1.2;
	margin-top: 44px;
	scroll-margin-top: 110px;
}

.pt-prose h3 {
	font-size: 26px;
	line-height: 1.25;
	font-weight: 500;
	margin-top: 30px;
	scroll-margin-top: 110px;
}

.pt-prose h4 {
	font-size: 20px;
	font-weight: 500;
	margin-top: 30px;
}

.pt-prose a:not(.pt-btn) {
	color: var(--pt-wine);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--pt-fast) var(--pt-ease);
}

.pt-prose a:not(.pt-btn):hover {
	color: var(--pt-ink);
}

.pt-prose strong {
	font-weight: 600;
}

/* Bulleted lists take the notehead. */
.pt-prose ul:not(.pt-plain) {
	list-style: none;
	padding-left: 0;
}

.pt-prose ul:not(.pt-plain) > li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 10px;
}

.pt-prose ul:not(.pt-plain) > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.72em;
	width: 8px;
	height: 6px;
	border-radius: 50%;
	background: var(--pt-ink);
	transform: rotate(-20deg);
}

.pt-prose ol {
	padding-left: 24px;
}

.pt-prose ol > li {
	margin-bottom: 10px;
	padding-left: 4px;
}

.pt-prose li::marker {
	color: var(--pt-dim-text);
}

.pt-prose blockquote {
	border-left: 2px solid var(--pt-wine);
	padding: 8px 0 8px 22px;
	margin-left: 0;
	margin-right: 0;
	font-size: 24px;
	font-style: italic;
	line-height: 1.5;
	color: var(--pt-ink);
}

.pt-prose blockquote p {
	margin: 0 0 10px;
}

.pt-prose blockquote p:last-child,
.pt-prose blockquote cite {
	margin-bottom: 0;
}

.pt-prose blockquote cite {
	display: block;
	font-family: var(--pt-mono);
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--pt-dim-text);
	margin-top: 10px;
}

.pt-prose figure {
	margin: 30px 0;
}

.pt-prose figcaption {
	font-family: var(--pt-mono);
	font-size: 11px;
	line-height: 1.6;
	color: var(--pt-dim-text);
	border-bottom: 1px solid var(--pt-rule);
	padding-bottom: 14px;
	margin-top: 12px;
	text-align: left;
}

.pt-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.pt-prose th,
.pt-prose td {
	text-align: left;
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--pt-rule-dim);
	vertical-align: top;
}

.pt-prose th {
	font-family: var(--pt-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pt-dim-text);
}

.pt-prose code,
.pt-prose kbd {
	font-family: var(--pt-mono);
	font-size: 0.86em;
	background: var(--pt-leaf);
	padding: 2px 5px;
}

.pt-prose pre {
	background: var(--pt-leaf);
	padding: 20px;
	overflow-x: auto;
	font-family: var(--pt-mono);
	font-size: 14px;
	line-height: 1.6;
}

.pt-prose pre code {
	background: none;
	padding: 0;
}

/* Wide and full alignment inside the measure-constrained column. */
.pt-prose .alignwide,
.pt-prose .alignfull {
	max-width: none;
	width: 100%;
}

.pt-prose .alignleft {
	float: left;
	margin: 6px 26px 20px 0;
	max-width: 45%;
}

.pt-prose .alignright {
	float: right;
	margin: 6px 0 20px 26px;
	max-width: 45%;
}

.pt-prose .aligncenter {
	margin-inline: auto;
}

/* Drop cap — first paragraph of a guide only, applied by the theme, never by
   the editor's own toggle. */
.pt-prose--dropcap > p:first-of-type::first-letter {
	float: left;
	font-size: 64px;
	line-height: 0.78;
	padding: 6px 10px 0 0;
	color: var(--pt-wine);
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   16. Editor block styles
   ---------------------------------------------------------------------- */

/* Practical box */
.pt-practical {
	background: var(--pt-leaf);
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pt-practical__label {
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--pt-wine);
}

.pt-practical__grid {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 9px 20px;
	font-size: 17px;
	line-height: 1.5;
}

.pt-practical__key {
	font-family: var(--pt-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pt-dim-text);
	padding-top: 3px;
}

.pt-practical__val {
	color: var(--pt-body);
	min-width: 0;
}

.pt-practical__val a {
	color: var(--pt-wine);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The same look, applied to a core group an editor builds by hand. */
.wp-block-group.is-style-pt-practical {
	background: var(--pt-leaf);
	padding: 24px 26px;
}

.wp-block-group.is-style-pt-practical > *:last-child {
	margin-bottom: 0;
}

/* Pull quote */
.wp-block-quote.is-style-pt-pull,
.wp-block-pullquote.is-style-pt-pull {
	border-left: 2px solid var(--pt-wine);
	border-top: 0;
	border-bottom: 0;
	padding: 8px 0 8px 22px;
	margin-left: 0;
	font-size: 24px;
	font-style: italic;
	line-height: 1.5;
	color: var(--pt-ink);
	text-align: left;
	background: none;
}

.wp-block-pullquote.is-style-pt-pull blockquote {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: inherit;
}

/* Stave separator */
.wp-block-separator.is-style-pt-stave {
	border: 0;
	height: 25px;
	width: 100%;
	max-width: none;
	background-image: repeating-linear-gradient(to bottom, var(--pt-rule) 0 1px, transparent 1px 6px);
	margin-block: 30px;
	opacity: 1;
}

.wp-block-separator.is-style-pt-stave-half {
	border: 0;
	height: 11px;
	width: 100%;
	max-width: none;
	background-image: repeating-linear-gradient(to bottom, var(--pt-rule) 0 1px, transparent 1px 5px);
	margin-block: 26px;
	opacity: 1;
}

/* Rehearsal list — an ordered list whose markers are rehearsal boxes.
   Deliberately not a grid: an editor's list item is a text node plus inline
   elements, and a bare text node in a grid container becomes its own grid
   item, which throws the numeral column out. Absolute positioning cannot be
   fooled that way. */
.wp-block-list.is-style-pt-rehearsal,
ol.is-style-pt-rehearsal {
	list-style: none;
	padding-left: 0;
	counter-reset: pt-rehearsal;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.wp-block-list.is-style-pt-rehearsal > li,
ol.is-style-pt-rehearsal > li {
	position: relative;
	padding-left: 44px;
	margin: 0;
	min-height: 26px;
	counter-increment: pt-rehearsal;
}

.wp-block-list.is-style-pt-rehearsal > li::before,
ol.is-style-pt-rehearsal > li::before {
	content: counter(pt-rehearsal, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.18em;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1.5px var(--pt-ink);
	font-family: var(--pt-mono);
	font-size: 12px;
	line-height: 1;
	color: var(--pt-ink);
	background: none;
}

.wp-block-list.is-style-pt-rehearsal > li::marker,
ol.is-style-pt-rehearsal > li::marker {
	content: "";
}

/* Figure + caption style, for images an editor wants the engraved rule under. */
.wp-block-image.is-style-pt-plate figcaption {
	font-family: var(--pt-mono);
	font-size: 11px;
	line-height: 1.6;
	color: var(--pt-dim-text);
	border-bottom: 1px solid var(--pt-rule);
	padding-bottom: 14px;
	margin-top: 12px;
	text-align: left;
}

/* -------------------------------------------------------------------------
   17. Archive
   ---------------------------------------------------------------------- */

.pt-archhead {
	padding: 56px 0 34px;
	border-bottom: 1px solid var(--pt-rule);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pt-archhead__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.pt-archhead__title {
	font-size: 56px;
	line-height: 1.1;
}

.pt-archhead__desc {
	font-size: 19px;
	line-height: 1.7;
	color: var(--pt-quiet);
	max-width: 620px;
}

.pt-archhead__controls {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.pt-sort {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-dim-text);
}

.pt-sort select {
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--pt-rule);
	padding: 6px 2px;
	min-height: 32px;
	cursor: pointer;
	transition: border-color var(--pt-fast) var(--pt-ease);
}

.pt-sort select:hover {
	border-bottom-color: var(--pt-ink);
}

.pt-rows {
	list-style: none;
}

.pt-row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 190px;
	gap: 30px;
	padding: 30px var(--pt-gutter);
	margin-inline: calc(var(--pt-gutter) * -1);
	border-bottom: 1px solid var(--pt-rule-dim);
	align-items: start;
	position: relative;
	transition: background var(--pt-fast) var(--pt-ease);
}

.pt-row:last-child {
	border-bottom: 0;
}

.pt-row:hover {
	background: var(--pt-leaf);
}

.pt-row__media {
	height: 100px;
	overflow: hidden;
	background: var(--pt-leaf);
}

.pt-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pt-row__main {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}

.pt-row__catrow {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pt-row__title {
	font-size: 28px;
	line-height: 1.2;
	color: var(--pt-ink);
}

.pt-row__title a {
	color: inherit;
	transition: color var(--pt-fast) var(--pt-ease);
}

.pt-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pt-row:hover .pt-row__title a {
	color: var(--pt-wine);
}

.pt-row__excerpt {
	font-size: 17px;
	line-height: 1.65;
	color: var(--pt-quieter);
	max-width: 520px;
}

.pt-row__side {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: right;
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-dim-text);
}

.pt-row__side .pt-tempo {
	font-family: var(--pt-serif);
	font-size: 17px;
	color: var(--pt-ink);
}

.pt-row__catrow a,
.pt-row__side a {
	position: relative;
	z-index: 1;
}

/* Pagination */
.pt-pagination {
	padding: 34px 0 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.pt-pagination .page-numbers {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pt-mono);
	font-size: 12px;
	color: var(--pt-ink);
	box-shadow: inset 0 0 0 1px var(--pt-rule);
	transition: background var(--pt-fast) var(--pt-ease), color var(--pt-fast) var(--pt-ease), box-shadow var(--pt-fast) var(--pt-ease);
}

.pt-pagination a.page-numbers:hover {
	background: var(--pt-leaf);
	box-shadow: inset 0 0 0 1px var(--pt-ink);
}

.pt-pagination .page-numbers.current {
	background: var(--pt-ink);
	color: var(--pt-paper);
	box-shadow: none;
}

.pt-pagination .page-numbers.dots {
	box-shadow: none;
	color: var(--pt-dim-text);
	width: auto;
	padding: 0 6px;
}

.pt-pagination .next,
.pt-pagination .prev {
	width: auto;
	padding: 0 14px;
	font-family: var(--pt-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   18. Search, 404, page
   ---------------------------------------------------------------------- */

.pt-searchhead {
	padding: 56px 0 30px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pt-searchhead__query {
	display: flex;
	align-items: baseline;
	border-bottom: 2px solid var(--pt-ink);
	padding-bottom: 10px;
	font-size: 30px;
	line-height: 1.2;
	color: var(--pt-ink);
	word-break: break-word;
}

.pt-searchhead__caret {
	color: var(--pt-wine);
}

.pt-results {
	list-style: none;
	display: flex;
	flex-direction: column;
	padding-bottom: 20px;
}

.pt-result {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: 14px;
}

.pt-result + .pt-result {
	border-top: 1px solid var(--pt-rule-dim);
}

.pt-result__title {
	font-size: 20px;
	line-height: 1.3;
	color: var(--pt-ink);
}

.pt-result__title a {
	color: inherit;
}

.pt-result__title a:hover {
	color: var(--pt-wine);
}

/* Search overlay (⌘K) */
.pt-overlay {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: rgba(25, 23, 19, 0.5);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 12vh 20px 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pt-slow) var(--pt-ease), visibility 0s linear var(--pt-slow);
}

.pt-overlay[data-open="true"] {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.pt-overlay__panel {
	background: var(--pt-paper);
	width: min(640px, 100%);
	padding: 30px;
	box-shadow: inset 0 0 0 1px var(--pt-rule);
	transform: translateY(8px);
	transition: transform var(--pt-slow) var(--pt-ease);
}

.pt-overlay[data-open="true"] .pt-overlay__panel {
	transform: none;
}

.pt-overlay__field {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--pt-ink);
	padding: 0 0 10px;
	font-family: var(--pt-serif);
	font-size: 30px;
	color: var(--pt-ink);
}

.pt-overlay__field::placeholder {
	color: var(--pt-dim-text);
	opacity: 1;
}

.pt-overlay__hint {
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-dim-text);
	margin-top: 16px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.pt-404 {
	padding: 90px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
}

.pt-404 .pt-stave {
	width: 120px;
	flex: none;
}

.pt-404__tacet {
	font-size: 64px;
	font-style: italic;
	line-height: 1;
	color: var(--pt-wine);
}

.pt-404__title {
	font-size: 26px;
	line-height: 1.25;
}

.pt-404__text {
	font-size: 17px;
	line-height: 1.65;
	color: var(--pt-quieter);
	max-width: 260px;
}

/* Static page */
.pt-page {
	padding: 56px 0 62px;
	max-width: var(--pt-measure);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pt-page__eyebrow {
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--pt-wine);
}

.pt-page__title {
	font-size: 38px;
	line-height: 1.12;
}

.pt-page .pt-prose {
	font-size: 17px;
	line-height: 1.75;
}

.pt-nothing {
	padding: 62px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 520px;
}

/* -------------------------------------------------------------------------
   19. Comments
   ---------------------------------------------------------------------- */

.pt-comments {
	padding-block: 44px;
	max-width: var(--pt-measure);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pt-comments ol {
	list-style: none;
}

.pt-comments .children {
	padding-left: 26px;
	border-left: 1px solid var(--pt-rule-dim);
	margin-top: 20px;
}

.pt-comments .comment-body {
	padding-block: 18px;
	border-bottom: 1px solid var(--pt-rule-dim);
}

.pt-comments .comment-meta,
.pt-comments .comment-metadata,
.pt-comments .reply {
	font-family: var(--pt-mono);
	font-size: 11px;
	color: var(--pt-dim-text);
}

.pt-comments .comment-author .fn {
	font-family: var(--pt-serif);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	color: var(--pt-ink);
}

.pt-comments input[type="text"],
.pt-comments input[type="email"],
.pt-comments input[type="url"],
.pt-comments textarea {
	width: 100%;
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--pt-rule);
	padding: 12px 14px;
	font-family: var(--pt-mono);
	font-size: 13px;
}

.pt-comments .form-submit input {
	all: unset;
}

.pt-comments .comment-form p {
	margin-bottom: 16px;
}

.pt-comments .comment-form label {
	display: block;
	font-family: var(--pt-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pt-dim-text);
	margin-bottom: 6px;
}

/* -------------------------------------------------------------------------
   20. Utilities
   ---------------------------------------------------------------------- */

.pt-media-empty {
	background-color: var(--pt-leaf);
	background-image: repeating-linear-gradient(135deg, rgba(25, 23, 19, 0.06) 0 7px, rgba(25, 23, 19, 0) 7px 14px);
}

.pt-flush {
	margin-inline: calc(var(--pt-gutter) * -1);
}

.pt-pb {
	padding-bottom: var(--pt-s5);
}

.pt-mt {
	margin-top: var(--pt-s5);
}

/* -------------------------------------------------------------------------
   21. Responsive — 1200 / 900 / 640
   ---------------------------------------------------------------------- */

@media (max-width: 1199px) {
	/* Right rail moves below the body as a two-column block; the contents rail
	   stays where it is. */
	.pt-guide,
	.pt-guide--norail {
		grid-template-columns: 230px minmax(0, 1fr);
	}

	.pt-guide--nocontents,
	.pt-guide--nocontents.pt-guide--norail {
		grid-template-columns: minmax(0, 1fr);
	}

	.pt-guide__rail {
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 1px solid var(--pt-rule-dim);
		padding: 34px 28px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px;
		align-items: start;
	}

	.pt-hero__title {
		font-size: 56px;
	}
}

/* The nav is the widest thing in the bar, and it is the first to go. The
   measured collapse in partitur.js handles menus of any length; this is the
   floor for a reader with JavaScript off. */
@media (max-width: 1080px) {
	.pt-nav {
		display: none;
	}

	.pt-burger {
		display: flex;
	}

	/* Below the burger threshold the device is plausibly touched, so the
	   footer stack becomes a column of 45px rows rather than 21px ones. */
	.pt-footer__col ul {
		gap: 0;
	}

	.pt-footer__col a {
		display: block;
		padding-block: 12px;
	}
}

@media (max-width: 1100px) {
	.pt-crumbs {
		display: none;
	}
}

@media (max-width: 899px) {
	.pt-guide,
	.pt-guide--norail,
	.pt-guide--nocontents {
		grid-template-columns: minmax(0, 1fr);
	}

	.pt-guide__contents {
		display: none;
	}

	.pt-toc-sheet {
		display: block;
	}

	.pt-guide__body,
	.pt-guide--norail .pt-guide__body,
	.pt-guide--nocontents .pt-guide__body {
		padding: 30px 0;
	}

	.pt-guide {
		margin-inline: 0;
	}

	.pt-guide__rail {
		padding-inline: 0;
		margin-inline: 0;
	}

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

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


	.pt-crumbs {
		display: none;
	}

	.pt-guide__title {
		font-size: 40px;
	}

	.pt-archhead__title {
		font-size: 44px;
	}

	.pt-footer__cols {
		grid-template-columns: 1fr 1fr;
	}


	.pt-coda {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.pt-row {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 20px 24px;
	}

	.pt-row__side {
		grid-column: 2;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 14px;
		text-align: left;
	}
}

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

	.pt-hero {
		padding: 34px 0 26px;
		gap: 16px;
	}

	.pt-hero__title {
		font-size: 38px;
		line-height: 1.12;
	}

	.pt-hero__eyebrow {
		font-size: 10px;
		letter-spacing: 0.34em;
	}

	.pt-hero__dek {
		font-size: 17px;
	}

	.pt-hero__actions {
		flex-direction: column;
		align-self: stretch;
	}

	.pt-hero__actions .pt-btn {
		width: 100%;
		padding: 15px 30px;
	}

	.pt-hero__image {
		height: 200px;
	}

	.pt-tempirow {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding-block: 26px;
	}

	/* The archive controls become two full-width rows: the filter, then the
	   sort. Side by side, the filter is squeezed to about a third of a phone. */
	.pt-archhead__controls {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.pt-sort {
		margin-left: 0;
	}

	/* Search moves into the menu panel, which has a full-width field. Two
	   search affordances in a 390px header is one too many. */
	.pt-searchpill {
		display: none;
	}

	.pt-tempi {
		flex-direction: column;
	}

	.pt-tempi__item + .pt-tempi__item {
		border-left: 0;
		border-top: 1px solid var(--pt-rule);
	}

	.pt-tempi__item {
		padding: 15px;
		min-height: 44px;
	}

	/* The compact control stacks like the full one below 640: four cells with
	   their durations need about 500px and cannot shrink, so keeping them in a
	   row is what pushed the archive sideways on a phone. */
	.pt-tempi--compact {
		flex: 1 1 auto;
	}

	.pt-tempi--compact .pt-tempi__item {
		flex: 1 1 auto;
		padding: 15px;
	}

	.pt-cards {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.pt-card__media {
		height: 160px;
	}

	.pt-card__title {
		font-size: 23px;
	}

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

	.pt-guide__title {
		font-size: 36px;
	}

	.pt-guide__hero {
		height: 200px;
	}

	.pt-dek {
		font-size: 19px;
	}

	.pt-guide__rail {
		grid-template-columns: minmax(0, 1fr);
	}

	.pt-prose {
		font-size: 17px;
	}

	.pt-prose h2 {
		font-size: 27px;
	}

	.pt-prose h3 {
		font-size: 22px;
	}

	.pt-prose blockquote,
	.wp-block-quote.is-style-pt-pull,
	.wp-block-pullquote.is-style-pt-pull {
		font-size: 21px;
		padding-left: 18px;
	}

	.pt-prose--dropcap > p:first-of-type::first-letter {
		font-size: 56px;
		padding: 5px 9px 0 0;
	}

	.pt-practical {
		padding: 20px;
	}

	.pt-practical__grid {
		font-size: 16px;
		gap: 8px 16px;
	}

	.pt-practical__key {
		font-size: 11px;
	}

	.pt-archhead {
		padding-top: 34px;
	}

	.pt-archhead__title {
		font-size: 36px;
	}

	.pt-archhead__desc {
		font-size: 17px;
	}

	.pt-row {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 24px;
	}

	.pt-row__media {
		height: 170px;
	}

	.pt-row__side {
		grid-column: 1;
	}

	.pt-row__title {
		font-size: 24px;
	}

	.pt-coda {
		padding: 30px 24px;
		margin-inline: 0;
	}

	.pt-coda__title {
		font-size: 27px;
	}

	.pt-coda .pt-signup__field {
		width: auto;
		flex: 1 1 160px;
	}

	.pt-signup__btn {
		padding: 14px 18px;
	}

	.pt-footer__cols {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.pt-subfooter {
		flex-direction: column;
		gap: 8px;
	}

	.pt-adjacent {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.pt-adjacent__item--next {
		grid-column: 1;
		text-align: left;
	}

	.pt-page__title {
		font-size: 32px;
	}

	.pt-404 {
		padding: 62px 0;
	}

	.pt-404__tacet {
		font-size: 52px;
	}

	.pt-btn {
		min-height: 44px;
	}

	.pt-searchhead__query {
		font-size: 24px;
	}
}

/* The masthead has to survive a 320px viewport. Below 420px the wordmark
   drops to the mark alone, which is still a link to home and still carries
   the accessible name. */
@media (max-width: 420px) {
	.pt-brand__name {
		font-size: 15px;
	}

	.pt-masthead__bar {
		padding-block: 14px;
	}
}

@media (max-width: 360px) {
	.pt-brand__name {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   22. Print — the score, on paper
   ---------------------------------------------------------------------- */

@media print {
	.pt-masthead__actions,
	.pt-nav,
	.pt-burger,
	.pt-guide__contents,
	.pt-guide__rail,
	.pt-toc-sheet,
	.pt-progress,
	.pt-coda,
	.pt-adjacent,
	.pt-comments,
	.pt-searchpill,
	.pt-overlay,
	.pt-mobilemenu {
		display: none !important;
	}

	.pt-guide {
		display: block;
	}

	.pt-guide__body {
		padding: 0;
	}

	body {
		font-size: 11pt;
	}

	.pt-prose a::after {
		content: " (" attr(href) ")";
		font-family: var(--pt-mono);
		font-size: 8pt;
		color: #666;
	}
}