/*
Theme Name: Glasgow Style
Theme URI: https://glasgowtourism.org/
Author: Glasgow Tourism
Author URI: https://glasgowtourism.org/
Description: A rectilinear editorial theme for glasgowtourism.org, drawn from Charles Rennie Mackintosh and the Glasgow School — strict grids, elongated letterspaced type, cream and ink, and a single muted-rose accent. Built for a tourism authority site: featured guides, field notes, category trails and a long-form article measure.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glasgow-style
Tags: blog, news, one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, editor-style, full-width-template
*/

/* =============================================================
   Glasgow Style
   -------------------------------------------------------------
   1.  Fonts
   2.  Tokens
   3.  Reset & base
   4.  Accessibility
   5.  Motifs (grid mark, dot ornament, framed circle)
   6.  Header / navigation
   7.  Hero
   8.  Trail strip
   9.  Section heading rows
   10. Guide cards
   11. Post rows (field notes / archive)
   12. Article
   13. Blocks & editor content
   14. Archive header & chips
   15. Pagination
   16. Newsletter band
   17. Comments
   18. Search / 404
   19. Footer
   20. Responsive
   21. Print & reduced motion
   ============================================================= */


/* -------------------------------------------------------------
   1. Fonts
   ------------------------------------------------------------- */

/* latin-ext */
@font-face {
	font-family: "Josefin Sans";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url("assets/fonts/josefin-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: "Josefin Sans";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url("assets/fonts/josefin-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* -------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------- */

:root {
	/* Palette — mirrored in theme.json and overridable from the Customizer. */
	--gs-ink: #1c1a17;
	--gs-cream: #f5f1e6;
	--gs-rose: #b06378;
	--gs-body: #33302a;
	--gs-muted-body: #4a453c;
	--gs-hairline: #c9c0aa;
	--gs-footer-links: #d8d2c2;
	--gs-footer-rule: #3a352c;
	--gs-placeholder: #eae4d4;

	/* Text variants.
	   The mock's rose (#b06378) and faint (#8a8271) are used at 8.5–10px, where
	   they land at 3.80:1 and 3.38:1 on cream — under WCAG AA for small text.
	   The identity colours are kept exactly as designed for everything that is
	   a shape rather than a word (squares, circles, rules, arrows, hover fills,
	   the wordmark). Words get these slightly deeper variants instead, which
	   read as the same colour at these sizes. See README to revert. */
	--gs-rose-text: #96455c;   /* 5.63:1 on cream */
	--gs-faint: #736c5c;       /* 4.62:1 on cream */

	/* Buttons and chips invert to a rose fill on hover; cream on the display
	   rose is only 3.80:1, so filled states take the deeper rose too. */
	--gs-rose-fill: var(--gs-rose-text); /* cream on it: 5.63:1 */

	/* On the ink footer the arithmetic reverses: the mock's faint is fine
	   there, and the rose needs lightening rather than darkening. */
	--gs-faint-on-ink: #8a8271; /* 4.56:1 on ink */
	--gs-rose-on-ink: #c47f92;  /* 5.62:1 on ink */

	/* Type */
	--gs-font-display: "Josefin Sans", "Century Gothic", "Futura", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--gs-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* Structure */
	--gs-max: 1160px;
	--gs-measure: 640px;
	--gs-measure-wide: 760px;
	--gs-gutter: 48px;
	--gs-rule: 1px solid var(--gs-ink);
	--gs-hairrule: 1px solid var(--gs-hairline);

	/* Placeholder hatching, used wherever an image is missing. */
	--gs-hatch: repeating-linear-gradient(45deg, var(--gs-placeholder) 0 10px, var(--gs-cream) 10px 20px);
}


/* -------------------------------------------------------------
   3. Reset & base
   ------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--gs-cream);
	color: var(--gs-body);
	font-family: var(--gs-font-display);
	font-size: 15px;
	line-height: 2;
	letter-spacing: .03em;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Nothing in this theme has a radius. Circles are the sole exception and opt in. */
img,
input,
select,
textarea,
button,
figure,
blockquote,
table {
	border-radius: 0;
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0;
}

a {
	color: var(--gs-ink);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

a:hover,
a:focus {
	color: var(--gs-rose-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gs-font-display);
	font-weight: 300;
	color: var(--gs-ink);
	text-transform: uppercase;
	margin: 0;
	text-wrap: pretty;
	/* Uppercase and letterspaced, a single long word ("Neighbourhoods",
	   "Sauchiehall") is wide enough to push a narrow viewport sideways.
	   Break it rather than let the page scroll. */
	overflow-wrap: break-word;
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* The site canvas. Each template renders inside it. */
.gs-shell {
	max-width: var(--gs-max);
	margin: 0 auto;
	background: var(--gs-cream);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

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

/* Shared monospace data voice. */
.gs-mono {
	font-family: var(--gs-font-mono);
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--gs-faint);
	text-transform: uppercase;
}


/* -------------------------------------------------------------
   4. Accessibility
   ------------------------------------------------------------- */

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--gs-ink);
	color: var(--gs-cream);
	padding: 12px 20px;
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
}

/* The link also carries .screen-reader-text so it stays out of the layout, so
   focus has to undo that rule's clipping as well as move the link on screen. */
.skip-link:focus {
	left: 8px;
	top: 8px;
	color: var(--gs-cream);
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	z-index: 100000;
}

/* A square focus ring, in keeping with the grid. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--gs-rose);
	outline-offset: 3px;
}

/* Elements that carry their own border take the ring tight. */
.gs-chip:focus-visible,
.gs-newsletter__submit:focus-visible {
	outline-offset: 2px;
}


/* -------------------------------------------------------------
   5. Motifs
   ------------------------------------------------------------- */

/* 5.1 Grid mark — 3x3 of squares, centre cell a rose circle. */
.gs-mark {
	display: grid;
	grid-template-columns: repeat(3, var(--gs-mark-cell, 8px));
	grid-template-rows: repeat(3, var(--gs-mark-cell, 8px));
	gap: var(--gs-mark-gap, 3px);
	flex: none;
}

.gs-mark span {
	background: var(--gs-mark-color, var(--gs-ink));
	display: block;
}

.gs-mark span:nth-child(5) {
	background: var(--gs-rose);
	border-radius: 50%;
}

.gs-mark--footer {
	--gs-mark-cell: 7px;
	--gs-mark-gap: 2.5px;
	--gs-mark-color: var(--gs-cream);
}

.gs-mark--small {
	--gs-mark-cell: 6px;
	--gs-mark-gap: 2px;
}

/* 5.2 Dot ornament — a run of squares with one rose circle. */
.gs-ornament {
	display: inline-flex;
	gap: 5px;
	line-height: 0;
}

.gs-ornament span {
	width: var(--gs-orn-size, 7px);
	height: var(--gs-orn-size, 7px);
	background: var(--gs-ink);
	display: block;
}

.gs-ornament--3 span:nth-child(2),
.gs-ornament--4 span:nth-child(3) {
	background: var(--gs-rose);
	border-radius: 50%;
}

.gs-ornament--small {
	--gs-orn-size: 6px;
}

/* 5.3 Framed circle — hero image corner badge. */
.gs-framed-circle {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border: var(--gs-rule);
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	pointer-events: none;
}

.gs-framed-circle::after {
	content: "";
	width: 20px;
	height: 20px;
	border: 1px solid var(--gs-rose);
	border-radius: 50%;
	display: block;
}

/* 5.4 Image frames. Every photo sits in a hatched, hairlined box so a
       missing featured image still reads as intentional. */
.gs-frame {
	position: relative;
	background: var(--gs-hatch);
	border: var(--gs-hairrule);
	overflow: hidden;
}

.gs-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gs-frame--plain {
	border: 0;
}

.gs-frame__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--gs-font-mono);
	font-size: 10px;
	color: var(--gs-faint);
	text-align: center;
	padding: 12px;
}

.gs-frame__label span {
	background: var(--gs-cream);
	border: var(--gs-hairrule);
	padding: 4px 8px;
}

/* Arrow glyph, shared by rows, cards and CTAs. */
.gs-arrow {
	color: var(--gs-rose);
	flex: none;
	display: inline-block;
	transition: transform .2s ease;
}


/* -------------------------------------------------------------
   6. Header / navigation
   ------------------------------------------------------------- */

.gs-header {
	background: var(--gs-cream);
	border-bottom: var(--gs-rule);
}

.gs-header--sticky {
	position: sticky;
	top: 0;
	z-index: 50;
}

.gs-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px var(--gs-gutter);
}

.gs-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.gs-brand:hover .gs-wordmark,
.gs-brand:focus .gs-wordmark {
	color: var(--gs-ink);
}

.gs-wordmark {
	font-weight: 400;
	font-size: 15px;
	letter-spacing: .42em;
	color: var(--gs-ink);
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
}

.gs-wordmark__accent {
	color: var(--gs-rose-text);
}

.gs-brand__custom-logo img {
	max-height: 44px;
	width: auto;
}

.gs-tagline {
	display: block;
	font-family: var(--gs-font-mono);
	font-size: 8.5px;
	letter-spacing: .16em;
	color: var(--gs-faint);
	text-transform: uppercase;
	margin-top: 5px;
}

/* Primary menu */
.gs-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gs-nav__list li {
	position: relative;
}

.gs-nav__list a {
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--gs-ink);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
}

.gs-nav__list a:hover,
.gs-nav__list a:focus {
	color: var(--gs-rose-text);
}

/* Current section: rose with a rose underline. */
.gs-nav__list .current-menu-item > a,
.gs-nav__list .current-menu-ancestor > a,
.gs-nav__list .current_page_item > a,
.gs-nav__list .current-menu-parent > a,
.gs-nav__list .gs-nav-current > a {
	color: var(--gs-rose-text);
	border-bottom-color: var(--gs-rose);
}

/* The last item reads as the CTA. */
.gs-nav__list > li:last-child > a {
	color: var(--gs-rose-text);
}

/* Sub-menus: a plain ink panel, square, no shadow. */
.gs-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: -16px;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: var(--gs-cream);
	border: var(--gs-rule);
	display: none;
	z-index: 40;
}

.gs-nav__list li:hover > .sub-menu,
.gs-nav__list li:focus-within > .sub-menu {
	display: block;
}

.gs-nav__list .sub-menu a {
	display: block;
	padding: 8px 16px;
	letter-spacing: .2em;
	font-size: 10px;
	border-bottom: 0;
	white-space: normal;
}

/* Mobile toggle. Hidden until the script confirms JavaScript is available —
   without it the menu stays open rather than becoming unreachable. */
.gs-nav-toggle {
	display: none;
	background: none;
	border: var(--gs-rule);
	padding: 8px 14px;
	font-family: var(--gs-font-mono);
	font-size: 9.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gs-ink);
}

.gs-nav-toggle[aria-expanded="true"] {
	background: var(--gs-ink);
	color: var(--gs-cream);
}


/* -------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------- */

.gs-hero {
	display: flex;
	border-bottom: var(--gs-rule);
}

.gs-hero__text {
	flex: 1;
	padding: 72px 56px 60px var(--gs-gutter);
	border-right: var(--gs-rule);
	min-width: 0;
}

.gs-hero__ornament {
	margin-bottom: 30px;
}

.gs-hero__title {
	font-weight: 300;
	font-size: 50px;
	line-height: 1.26;
	letter-spacing: .16em;
	color: var(--gs-ink);
	text-transform: uppercase;
}

.gs-hero__title a {
	color: inherit;
}

.gs-hero__title a:hover,
.gs-hero__title a:focus {
	color: var(--gs-rose-text);
}

.gs-hero__rule {
	width: 120px;
	height: 1px;
	background: var(--gs-ink);
	margin: 32px 0;
	border: 0;
}

.gs-hero__intro {
	font-size: 14.5px;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--gs-muted-body);
	max-width: 430px;
}

.gs-hero__cta {
	margin-top: 36px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--gs-ink);
	border-bottom: 1px solid var(--gs-rose);
	padding-bottom: 6px;
}

.gs-hero__cta:hover .gs-arrow,
.gs-hero__cta:focus .gs-arrow {
	transform: translateX(4px);
}

.gs-hero__media {
	width: 420px;
	flex: none;
	position: relative;
	min-height: 420px;
	border: 0;
}

.gs-hero__media .gs-frame__label {
	padding: 24px;
}


/* -------------------------------------------------------------
   8. Trail strip
   ------------------------------------------------------------- */

.gs-trail {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: var(--gs-rule);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The strip takes however many items the menu holds, up to three. Column
   counts are classes rather than an inline style so the stacked layout in the
   media query can still win. */
.gs-trail--cols-1 {
	grid-template-columns: 1fr;
}

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

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

.gs-trail__item {
	border-right: var(--gs-rule);
}

.gs-trail__item:last-child {
	border-right: 0;
}

.gs-trail__link {
	display: block;
	padding: 24px 32px;
	height: 100%;
}

.gs-trail__num {
	display: block;
	font-family: var(--gs-font-mono);
	font-size: 10px;
	color: var(--gs-rose-text);
	margin-bottom: 8px;
	letter-spacing: .1em;
}

.gs-trail__title {
	display: block;
	font-size: 13px;
	letter-spacing: .22em;
	color: var(--gs-ink);
	text-transform: uppercase;
	line-height: 1.5;
	transition: color .15s ease;
}

.gs-trail__link:hover .gs-trail__title,
.gs-trail__link:focus .gs-trail__title {
	color: var(--gs-rose-text);
}


/* -------------------------------------------------------------
   9. Section heading rows
   ------------------------------------------------------------- */

.gs-section {
	padding: 56px var(--gs-gutter);
}

.gs-section--tight {
	padding-top: 0;
}

.gs-section__head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 36px;
}

.gs-section__label {
	font-family: var(--gs-font-mono);
	font-size: 10px;
	letter-spacing: .24em;
	color: var(--gs-rose-text);
	text-transform: uppercase;
	font-weight: 400;
	flex: none;
}

.gs-section__rule {
	flex: 1;
	height: 1px;
	background: var(--gs-ink);
	border: 0;
	margin: 0;
	min-width: 20px;
}

.gs-section__more {
	font-size: 10px;
	letter-spacing: .26em;
	color: var(--gs-ink);
	text-transform: uppercase;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.gs-section__more:hover .gs-arrow,
.gs-section__more:focus .gs-arrow {
	transform: translateX(4px);
}

.gs-section__head--flush {
	margin-bottom: 8px;
}


/* -------------------------------------------------------------
   10. Guide cards
   ------------------------------------------------------------- */

.gs-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.gs-cards--three {
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.gs-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.gs-card__media {
	height: 280px;
	display: block;
}

.gs-cards--three .gs-card__media {
	height: 200px;
}

.gs-card__kicker {
	font-family: var(--gs-font-mono);
	font-size: 9.5px;
	letter-spacing: .2em;
	color: var(--gs-rose-text);
	text-transform: uppercase;
}

.gs-card__kicker a {
	color: inherit;
}

.gs-card__kicker a:hover,
.gs-card__kicker a:focus {
	color: var(--gs-ink);
}

.gs-card__title {
	font-weight: 400;
	font-size: 21px;
	letter-spacing: .14em;
	line-height: 1.5;
	color: var(--gs-ink);
	text-transform: uppercase;
}

.gs-card__title a {
	color: inherit;
}

.gs-card__excerpt {
	font-size: 13.5px;
	line-height: 1.8;
	letter-spacing: .03em;
	color: var(--gs-muted-body);
}

/* Whole card is clickable via the stretched title link. */
.gs-card--linked {
	position: relative;
}

.gs-card--linked .gs-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.gs-card--linked:hover .gs-card__title,
.gs-card--linked:focus-within .gs-card__title {
	color: var(--gs-rose-text);
}

/* Keep the category link clickable above the stretched overlay. */
.gs-card__kicker a {
	position: relative;
	z-index: 2;
}

/* Related posts ("Keep walking") — a lighter card. */
.gs-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.gs-related__item {
	position: relative;
	min-width: 0;
}

.gs-related__cat {
	font-family: var(--gs-font-mono);
	font-size: 9px;
	letter-spacing: .18em;
	color: var(--gs-rose-text);
	margin-bottom: 10px;
	text-transform: uppercase;
}

.gs-related__title {
	font-size: 14px;
	letter-spacing: .16em;
	line-height: 1.6;
	color: var(--gs-ink);
	text-transform: uppercase;
	font-weight: 400;
}

.gs-related__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gs-related__item:hover .gs-related__title,
.gs-related__item:focus-within .gs-related__title {
	color: var(--gs-rose-text);
}


/* -------------------------------------------------------------
   11. Post rows
   ------------------------------------------------------------- */

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

/* 11.1 Field-note row — baseline aligned, no thumbnail. */
.gs-row {
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 22px 0;
	border-bottom: var(--gs-hairrule);
	position: relative;
}

.gs-row__index {
	font-family: var(--gs-font-mono);
	font-size: 10px;
	color: var(--gs-rose-text);
	width: 28px;
	flex: none;
	letter-spacing: .1em;
}

.gs-row__title {
	font-size: 15px;
	letter-spacing: .16em;
	color: var(--gs-ink);
	flex: 1;
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1.6;
	min-width: 0;
}

.gs-row__title a {
	color: inherit;
}

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

.gs-row__date {
	font-family: var(--gs-font-mono);
	font-size: 9.5px;
	color: var(--gs-faint);
	flex: none;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.gs-row:hover .gs-row__title,
.gs-row:focus-within .gs-row__title {
	color: var(--gs-rose-text);
}

.gs-row:hover .gs-arrow,
.gs-row:focus-within .gs-arrow {
	transform: translateX(4px);
}

/* 11.2 Archive row — centre aligned, with a thumbnail and excerpt. */
.gs-arow {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 28px 0;
	border-bottom: var(--gs-hairrule);
	position: relative;
}

.gs-arow__index {
	font-family: var(--gs-font-mono);
	font-size: 10px;
	color: var(--gs-rose-text);
	width: 28px;
	flex: none;
	letter-spacing: .1em;
}

.gs-arow__media {
	width: 150px;
	height: 96px;
	flex: none;
}

.gs-arow__body {
	flex: 1;
	min-width: 0;
}

.gs-arow__title {
	font-size: 16px;
	letter-spacing: .16em;
	color: var(--gs-ink);
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1.5;
}

.gs-arow__title a {
	color: inherit;
}

.gs-arow__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gs-arow__excerpt {
	font-size: 12.5px;
	line-height: 1.7;
	letter-spacing: .03em;
	color: var(--gs-muted-body);
	margin-top: 8px;
}

.gs-arow__date {
	font-family: var(--gs-font-mono);
	font-size: 9.5px;
	color: var(--gs-faint);
	flex: none;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.gs-arow:hover .gs-arow__title,
.gs-arow:focus-within .gs-arow__title {
	color: var(--gs-rose-text);
}

.gs-arow:hover .gs-arrow,
.gs-arow:focus-within .gs-arrow {
	transform: translateX(4px);
}

.gs-rows--archive {
	padding: 0 var(--gs-gutter);
}


/* -------------------------------------------------------------
   12. Article
   ------------------------------------------------------------- */

.gs-article__header {
	max-width: var(--gs-measure-wide);
	margin: 0 auto;
	padding: 64px 40px 0;
	text-align: center;
}

.gs-breadcrumb {
	font-family: var(--gs-font-mono);
	font-size: 10px;
	letter-spacing: .24em;
	color: var(--gs-rose-text);
	text-transform: uppercase;
}

.gs-breadcrumb a {
	color: inherit;
}

.gs-breadcrumb a:hover,
.gs-breadcrumb a:focus {
	color: var(--gs-ink);
}

.gs-breadcrumb__sep {
	color: var(--gs-faint);
	margin: 0 6px;
}

.gs-breadcrumb__current {
	color: var(--gs-faint);
}

.gs-article__title {
	font-weight: 300;
	font-size: 38px;
	line-height: 1.35;
	letter-spacing: .14em;
	color: var(--gs-ink);
	text-transform: uppercase;
	margin-top: 26px;
}

.gs-article__ornament {
	margin: 30px 0 22px;
}

.gs-article__meta {
	font-family: var(--gs-font-mono);
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--gs-faint);
	text-transform: uppercase;
}

.gs-article__meta a {
	color: inherit;
}

.gs-article__meta a:hover,
.gs-article__meta a:focus {
	color: var(--gs-rose-text);
}

.gs-article__meta-sep {
	margin: 0 4px;
}

/* Featured image with the overlapping caption tab. */
.gs-article__figure {
	margin: 44px var(--gs-gutter) 0;
	position: relative;
}

.gs-article__figure .gs-frame {
	height: 380px;
}

.gs-article__caption {
	position: absolute;
	bottom: -1px;
	right: -1px;
	background: var(--gs-cream);
	border: var(--gs-hairrule);
	padding: 6px 12px;
	font-family: var(--gs-font-mono);
	font-size: 8.5px;
	letter-spacing: .12em;
	color: var(--gs-faint);
	text-transform: uppercase;
	max-width: calc(100% - 40px);
}

.gs-article__body {
	max-width: var(--gs-measure);
	margin: 0 auto;
	padding: 52px 40px 60px;
}

.gs-article__footer {
	max-width: var(--gs-measure);
	margin: 0 auto;
	padding: 0 40px 56px;
}

/* Tag list under the article. */
.gs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding-top: 28px;
	border-top: var(--gs-hairrule);
}

.gs-tags__label {
	font-family: var(--gs-font-mono);
	font-size: 9px;
	letter-spacing: .24em;
	color: var(--gs-rose-text);
	text-transform: uppercase;
	margin-right: 6px;
}

.gs-tags a {
	font-family: var(--gs-font-mono);
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	border: var(--gs-hairrule);
	padding: 6px 12px;
	color: var(--gs-ink);
}

.gs-tags a:hover,
.gs-tags a:focus {
	border-color: var(--gs-rose);
	color: var(--gs-rose-text);
}

/* Prev / next */
.gs-postnav {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	border-top: var(--gs-rule);
	padding: 32px var(--gs-gutter) 0;
	max-width: var(--gs-max);
	margin: 0 auto;
}

.gs-postnav__item {
	max-width: 46%;
}

.gs-postnav__item--next {
	text-align: right;
	margin-left: auto;
}

.gs-postnav__label {
	font-family: var(--gs-font-mono);
	font-size: 9px;
	letter-spacing: .24em;
	color: var(--gs-rose-text);
	text-transform: uppercase;
	margin-bottom: 10px;
	display: block;
}

.gs-postnav__title {
	font-size: 13px;
	letter-spacing: .16em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--gs-ink);
}

.gs-related {
	border-top: var(--gs-rule);
	padding: 44px var(--gs-gutter) 56px;
}


/* -------------------------------------------------------------
   13. Blocks & editor content
   ------------------------------------------------------------- */

.gs-content > * {
	margin-top: 22px;
}

.gs-content > *:first-child {
	margin-top: 0;
}

.gs-content p {
	font-size: 15px;
	line-height: 2;
	letter-spacing: .03em;
	color: var(--gs-body);
}

.gs-content a:where(:not(.wp-block-button__link)) {
	color: var(--gs-ink);
	border-bottom: 1px solid var(--gs-rose);
	padding-bottom: 1px;
}

.gs-content a:where(:not(.wp-block-button__link)):hover,
.gs-content a:where(:not(.wp-block-button__link)):focus {
	color: var(--gs-rose-text);
}

.gs-content h2 {
	font-weight: 400;
	font-size: 17px;
	letter-spacing: .22em;
	color: var(--gs-ink);
	text-transform: uppercase;
	margin-top: 44px;
	padding-bottom: 12px;
	border-bottom: var(--gs-rule);
	line-height: 1.6;
}

.gs-content h3 {
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .2em;
	color: var(--gs-ink);
	text-transform: uppercase;
	margin-top: 36px;
	line-height: 1.7;
}

.gs-content h4,
.gs-content h5,
.gs-content h6 {
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: .18em;
	color: var(--gs-faint);
	text-transform: uppercase;
	margin-top: 30px;
}

.gs-content ul,
.gs-content ol {
	padding-left: 22px;
	font-size: 15px;
	line-height: 2;
	letter-spacing: .03em;
	color: var(--gs-body);
}

.gs-content li + li {
	margin-top: 8px;
}

.gs-content ul {
	list-style: none;
	padding-left: 0;
}

.gs-content ul li {
	position: relative;
	padding-left: 24px;
}

/* Square bullets, to match the grid. */
.gs-content ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 13px;
	width: 6px;
	height: 6px;
	background: var(--gs-rose);
}

.gs-content ol {
	list-style: none;
	counter-reset: gs-ol;
	padding-left: 0;
}

.gs-content ol > li {
	position: relative;
	padding-left: 34px;
	counter-increment: gs-ol;
}

.gs-content ol > li::before {
	content: counter(gs-ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--gs-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--gs-rose-text);
	line-height: 3;
}

/* Blockquote — centred, ornamented. Explicitly not a left-border accent. */
.gs-content blockquote,
.gs-content .wp-block-quote {
	text-align: center;
	padding: 44px 20px;
	margin: 0;
	border: 0;
	border-left: 0;
}

/* The three-mark ornament, drawn in a single pseudo-element so it cannot
   drift away from the top of the quote. */
.gs-content blockquote::before {
	content: "";
	display: block;
	width: 28px;
	height: 6px;
	margin: 0 auto 18px;
	background:
		linear-gradient(var(--gs-ink) 0 0) 0 0 / 6px 6px no-repeat,
		radial-gradient(circle at 50% 50%, var(--gs-rose) 3px, transparent 3px) 50% 0 / 6px 6px no-repeat,
		linear-gradient(var(--gs-ink) 0 0) 100% 0 / 6px 6px no-repeat;
}

.gs-content blockquote p {
	font-weight: 300;
	font-size: 24px;
	line-height: 1.7;
	letter-spacing: .1em;
	color: var(--gs-ink);
	text-transform: uppercase;
	text-wrap: pretty;
}

.gs-content blockquote p:not(:first-of-type) {
	margin-top: 18px;
}

.gs-content blockquote cite,
.gs-content blockquote .wp-block-quote__citation,
.gs-content blockquote footer {
	display: block;
	font-family: var(--gs-font-mono);
	font-size: 9.5px;
	letter-spacing: .2em;
	color: var(--gs-faint);
	margin-top: 16px;
	font-style: normal;
	text-transform: uppercase;
}

/* Pull quote — same grammar, ruled top and bottom. */
.gs-content .wp-block-pullquote {
	border-top: var(--gs-rule);
	border-bottom: var(--gs-rule);
	padding: 40px 20px;
	text-align: center;
	color: var(--gs-ink);
	background: transparent;
}

.gs-content .wp-block-pullquote p {
	font-weight: 300;
	font-size: 22px;
	line-height: 1.7;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Images and captions */
.gs-content figure,
.gs-content .wp-block-image {
	margin: 36px 0;
}

.gs-content img {
	border: var(--gs-hairrule);
}

.gs-content figcaption,
.gs-content .wp-element-caption {
	font-family: var(--gs-font-mono);
	font-size: 8.5px;
	letter-spacing: .12em;
	color: var(--gs-faint);
	margin-top: 10px;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.8;
}

/* Wide / full alignment inside the 640px measure. */
.gs-content .alignwide {
	width: 100vw;
	max-width: var(--gs-measure-wide);
	margin-left: 50%;
	transform: translateX(-50%);
}

.gs-content .alignfull {
	width: calc(var(--gs-max) - 2px);
	max-width: calc(100vw - 2px);
	margin-left: 50%;
	transform: translateX(-50%);
}

.gs-content .alignleft {
	float: left;
	margin: 8px 28px 20px 0;
	max-width: 45%;
}

.gs-content .alignright {
	float: right;
	margin: 8px 0 20px 28px;
	max-width: 45%;
}

.gs-content .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.gs-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Separator — an ornament, not a line. */
.gs-content hr,
.gs-content .wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--gs-hairline);
	margin: 44px 0;
}

.gs-content .wp-block-separator.is-style-gs-ornament {
	height: 7px;
	background:
		linear-gradient(var(--gs-ink) 0 0) calc(50% - 12px) 0 / 7px 7px no-repeat,
		radial-gradient(circle, var(--gs-rose) 3.5px, transparent 3.5px) 50% 0 / 7px 7px no-repeat,
		linear-gradient(var(--gs-ink) 0 0) calc(50% + 12px) 0 / 7px 7px no-repeat;
	margin: 52px 0;
}

/* Tables */
.gs-content table,
.gs-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: .03em;
}

.gs-content th {
	font-family: var(--gs-font-mono);
	font-size: 9.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gs-rose-text);
	text-align: left;
	font-weight: 400;
	padding: 12px 14px 12px 0;
	border-bottom: var(--gs-rule);
}

.gs-content td {
	padding: 12px 14px 12px 0;
	border-bottom: var(--gs-hairrule);
	color: var(--gs-body);
	vertical-align: top;
}

.gs-content .wp-block-table figcaption {
	text-align: left;
}

/* Code */
.gs-content code,
.gs-content kbd,
.gs-content samp {
	font-family: var(--gs-font-mono);
	font-size: .86em;
	background: var(--gs-placeholder);
	padding: 2px 6px;
	letter-spacing: 0;
}

.gs-content pre {
	font-family: var(--gs-font-mono);
	font-size: 12.5px;
	line-height: 1.7;
	letter-spacing: 0;
	background: var(--gs-placeholder);
	border: var(--gs-hairrule);
	padding: 20px;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

.gs-content pre code {
	background: none;
	padding: 0;
}

/* Buttons */
.gs-content .wp-block-button__link,
.gs-button {
	display: inline-block;
	background: var(--gs-ink);
	color: var(--gs-cream);
	border: 1px solid var(--gs-ink);
	padding: 12px 24px;
	font-family: var(--gs-font-display);
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	border-radius: 0;
}

.gs-content .wp-block-button__link:hover,
.gs-content .wp-block-button__link:focus,
.gs-button:hover,
.gs-button:focus {
	background: var(--gs-rose-fill);
	border-color: var(--gs-rose-fill);
	color: var(--gs-cream);
}

.gs-content .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--gs-ink);
}

/* Embeds */
.gs-content .wp-block-embed__wrapper {
	position: relative;
}

.gs-content iframe {
	max-width: 100%;
	border: var(--gs-hairrule);
}

/* Cover / media-text keep the square language. */
.gs-content .wp-block-cover,
.gs-content .wp-block-media-text__media img {
	border-radius: 0;
}

/* Drop cap, if the editor turns it on. */
.gs-content .has-drop-cap:not(:focus)::first-letter {
	font-weight: 300;
	font-size: 3.4em;
	line-height: .78;
	margin: .06em .12em 0 0;
	color: var(--gs-rose-text);
}

/* Block style: bordered group panel. */
.wp-block-group.is-style-gs-panel {
	border: var(--gs-rule);
	padding: 28px;
}

/* Block style: mono note. */
.is-style-gs-note {
	font-family: var(--gs-font-mono);
	font-size: 11.5px;
	line-height: 1.9;
	letter-spacing: .06em;
	color: var(--gs-faint);
	text-transform: none;
	border-left: 0;
	border-top: var(--gs-hairrule);
	border-bottom: var(--gs-hairrule);
	padding: 18px 0;
}


/* -------------------------------------------------------------
   14. Archive header & chips
   ------------------------------------------------------------- */

.gs-archive-head {
	padding: 60px var(--gs-gutter) 40px;
	border-bottom: var(--gs-rule);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
}

/* Flex children default to min-width:auto, which lets a long title win over
   the container. */
.gs-archive-head__main {
	min-width: 0;
}

.gs-archive-head__kicker {
	font-family: var(--gs-font-mono);
	font-size: 10px;
	letter-spacing: .24em;
	color: var(--gs-rose-text);
	text-transform: uppercase;
}

.gs-archive-head__title {
	font-weight: 300;
	font-size: 46px;
	letter-spacing: .18em;
	color: var(--gs-ink);
	text-transform: uppercase;
	margin-top: 16px;
	line-height: 1.2;
}

.gs-archive-head__desc {
	font-size: 13.5px;
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--gs-muted-body);
	max-width: 480px;
	margin-top: 16px;
}

.gs-archive-head__desc p {
	margin: 0;
}

.gs-archive-head__desc p + p {
	margin-top: 12px;
}

.gs-archive-head__count {
	font-family: var(--gs-font-mono);
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--gs-faint);
	padding-bottom: 6px;
	flex: none;
	text-transform: uppercase;
}

.gs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px var(--gs-gutter);
	border-bottom: var(--gs-rule);
	list-style: none;
	margin: 0;
}

.gs-chip {
	display: inline-block;
	font-family: var(--gs-font-mono);
	font-size: 9.5px;
	letter-spacing: .16em;
	color: var(--gs-ink);
	border: var(--gs-hairrule);
	padding: 7px 14px;
	text-transform: uppercase;
	background: transparent;
}

.gs-chip:hover,
.gs-chip:focus {
	border-color: var(--gs-rose);
	color: var(--gs-rose-text);
}

.gs-chip--active,
.gs-chip[aria-current="page"] {
	background: var(--gs-ink);
	border-color: var(--gs-ink);
	color: var(--gs-cream);
}

.gs-chip--active:hover,
.gs-chip--active:focus,
.gs-chip[aria-current="page"]:hover,
.gs-chip[aria-current="page"]:focus {
	background: var(--gs-rose-fill);
	border-color: var(--gs-rose-fill);
	color: var(--gs-cream);
}


/* -------------------------------------------------------------
   15. Pagination
   ------------------------------------------------------------- */

.gs-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding: 36px 0 52px;
	font-family: var(--gs-font-mono);
	font-size: 10px;
	letter-spacing: .14em;
}

.gs-pagination .page-numbers {
	color: var(--gs-faint);
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	text-transform: uppercase;
}

.gs-pagination a.page-numbers:hover,
.gs-pagination a.page-numbers:focus {
	color: var(--gs-rose-text);
}

.gs-pagination .page-numbers.current {
	color: var(--gs-ink);
	border-bottom-color: var(--gs-rose);
}

.gs-pagination .next,
.gs-pagination .prev {
	color: var(--gs-rose-text);
}

.gs-pagination .dots {
	border-bottom-color: transparent;
}


/* -------------------------------------------------------------
   16. Newsletter band
   ------------------------------------------------------------- */

.gs-newsletter {
	border-top: var(--gs-rule);
	padding: 52px var(--gs-gutter);
	text-align: center;
}

.gs-newsletter__ornament {
	margin-bottom: 22px;
}

.gs-newsletter__title {
	font-weight: 300;
	font-size: 26px;
	letter-spacing: .2em;
	color: var(--gs-ink);
	text-transform: uppercase;
	line-height: 1.4;
}

.gs-newsletter__sub {
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--gs-muted-body);
	margin-top: 12px;
}

.gs-newsletter__form {
	display: inline-flex;
	margin-top: 26px;
	max-width: 100%;
}

.gs-newsletter__input {
	border: var(--gs-rule);
	border-right: 0;
	padding: 12px 20px;
	font-family: var(--gs-font-mono);
	font-size: 11px;
	color: var(--gs-ink);
	width: 280px;
	max-width: 100%;
	background: var(--gs-cream);
	letter-spacing: .06em;
	appearance: none;
}

.gs-newsletter__input::placeholder {
	color: var(--gs-faint);
	opacity: 1;
}

.gs-newsletter__submit {
	background: var(--gs-ink);
	color: var(--gs-cream);
	border: 1px solid var(--gs-ink);
	padding: 12px 24px;
	font-family: var(--gs-font-display);
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.gs-newsletter__submit:hover,
.gs-newsletter__submit:focus {
	background: var(--gs-rose-fill);
	border-color: var(--gs-rose-fill);
}


/* -------------------------------------------------------------
   17. Comments
   ------------------------------------------------------------- */

.gs-comments {
	max-width: var(--gs-measure);
	margin: 0 auto;
	padding: 0 40px 60px;
}

.gs-comments__title {
	font-weight: 400;
	font-size: 15px;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding-bottom: 12px;
	border-bottom: var(--gs-rule);
	margin-bottom: 28px;
}

.gs-comments .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gs-comments .comment-list .children {
	list-style: none;
	margin: 0 0 0 28px;
	padding: 0;
	border-left: var(--gs-hairrule);
	padding-left: 24px;
}

.gs-comments .comment-body {
	padding: 22px 0;
	border-bottom: var(--gs-hairrule);
}

.gs-comments .comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.gs-comments .comment-author {
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gs-ink);
}

.gs-comments .comment-author img {
	display: none;
}

.gs-comments .comment-metadata {
	font-family: var(--gs-font-mono);
	font-size: 9px;
	letter-spacing: .14em;
	color: var(--gs-faint);
	text-transform: uppercase;
}

.gs-comments .comment-content p {
	font-size: 14px;
	line-height: 1.9;
	color: var(--gs-body);
}

.gs-comments .comment-content p + p {
	margin-top: 14px;
}

.gs-comments .reply {
	margin-top: 12px;
}

.gs-comments .comment-reply-link {
	font-family: var(--gs-font-mono);
	font-size: 9px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gs-rose-text);
}

.gs-comments .comment-respond {
	margin-top: 36px;
}

.gs-comments .comment-reply-title {
	font-weight: 400;
	font-size: 15px;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding-bottom: 12px;
	border-bottom: var(--gs-rule);
	margin-bottom: 24px;
}

.gs-comments .comment-form label {
	display: block;
	font-family: var(--gs-font-mono);
	font-size: 9px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gs-faint);
	margin-bottom: 8px;
}

.gs-comments .comment-form input[type="text"],
.gs-comments .comment-form input[type="email"],
.gs-comments .comment-form input[type="url"],
.gs-comments .comment-form textarea {
	width: 100%;
	border: var(--gs-hairrule);
	background: var(--gs-cream);
	padding: 12px 14px;
	font-family: var(--gs-font-mono);
	font-size: 12px;
	color: var(--gs-body);
	letter-spacing: .04em;
	appearance: none;
}

.gs-comments .comment-form input:focus,
.gs-comments .comment-form textarea:focus {
	border-color: var(--gs-ink);
}

.gs-comments .comment-form p {
	margin-bottom: 18px;
}

.gs-comments .comment-form .form-submit input[type="submit"] {
	background: var(--gs-ink);
	color: var(--gs-cream);
	border: 1px solid var(--gs-ink);
	padding: 12px 24px;
	font-family: var(--gs-font-display);
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	cursor: pointer;
}

.gs-comments .comment-form .form-submit input[type="submit"]:hover {
	background: var(--gs-rose-fill);
	border-color: var(--gs-rose-fill);
}

.gs-comments .comment-notes,
.gs-comments .logged-in-as {
	font-family: var(--gs-font-mono);
	font-size: 9.5px;
	line-height: 1.8;
	letter-spacing: .1em;
	color: var(--gs-faint);
	text-transform: uppercase;
}

.gs-comments .no-comments {
	font-family: var(--gs-font-mono);
	font-size: 10px;
	letter-spacing: .16em;
	color: var(--gs-faint);
	text-transform: uppercase;
}


/* -------------------------------------------------------------
   18. Search / 404 / empty states
   ------------------------------------------------------------- */

.gs-searchform {
	display: inline-flex;
	max-width: 100%;
}

.gs-searchform__input {
	border: var(--gs-rule);
	border-right: 0;
	padding: 12px 20px;
	font-family: var(--gs-font-mono);
	font-size: 11px;
	color: var(--gs-ink);
	width: 300px;
	max-width: 100%;
	background: var(--gs-cream);
	letter-spacing: .06em;
	appearance: none;
}

.gs-searchform__input::placeholder {
	color: var(--gs-faint);
	opacity: 1;
}

.gs-searchform__submit {
	background: var(--gs-ink);
	color: var(--gs-cream);
	border: 1px solid var(--gs-ink);
	padding: 12px 22px;
	font-family: var(--gs-font-display);
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
}

.gs-searchform__submit:hover,
.gs-searchform__submit:focus {
	background: var(--gs-rose-fill);
	border-color: var(--gs-rose-fill);
}

.gs-empty {
	padding: 80px var(--gs-gutter);
	text-align: center;
}

.gs-empty__code {
	font-family: var(--gs-font-mono);
	font-size: 10px;
	letter-spacing: .24em;
	color: var(--gs-rose-text);
	text-transform: uppercase;
}

.gs-empty__title {
	font-weight: 300;
	font-size: 34px;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-top: 20px;
	line-height: 1.3;
}

.gs-empty__ornament {
	margin: 26px 0 22px;
}

.gs-empty__text {
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--gs-muted-body);
	max-width: 460px;
	margin: 0 auto 30px;
}

.gs-empty__links {
	margin-top: 44px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* Page template: the article layout without the article furniture. */
.gs-page__header {
	max-width: var(--gs-measure-wide);
	margin: 0 auto;
	padding: 64px 40px 0;
	text-align: center;
}


/* -------------------------------------------------------------
   19. Footer
   ------------------------------------------------------------- */

.gs-footer {
	background: var(--gs-ink);
	flex: none;
}

.gs-footer__cols {
	padding: 48px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

.gs-footer__brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gs-footer__wordmark {
	font-size: 13px;
	letter-spacing: .4em;
	color: var(--gs-cream);
	text-transform: uppercase;
	line-height: 1.2;
}

.gs-footer__wordmark .gs-wordmark__accent {
	color: var(--gs-rose-on-ink);
}

.gs-footer__brand:hover .gs-footer__wordmark {
	color: var(--gs-cream);
}

.gs-footer__tagline {
	font-size: 12px;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--gs-faint-on-ink);
	margin-top: 18px;
	max-width: 260px;
}

.gs-footer__heading {
	font-family: var(--gs-font-mono);
	font-size: 9px;
	letter-spacing: .24em;
	color: var(--gs-rose-on-ink);
	margin-bottom: 16px;
	text-transform: uppercase;
	font-weight: 400;
}

.gs-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 11px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gs-footer__menu a {
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--gs-footer-links);
	text-transform: uppercase;
	line-height: 1.5;
}

.gs-footer__menu a:hover,
.gs-footer__menu a:focus {
	color: var(--gs-rose-on-ink);
}

.gs-footer__menu .sub-menu {
	display: none;
}

.gs-footer__legal {
	background: var(--gs-ink);
	border-top: 1px solid var(--gs-footer-rule);
	padding: 18px var(--gs-gutter);
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-family: var(--gs-font-mono);
	font-size: 9px;
	letter-spacing: .16em;
	color: var(--gs-faint-on-ink);
	text-transform: uppercase;
}

.gs-footer__legal a {
	color: var(--gs-faint-on-ink);
}

.gs-footer__legal a:hover,
.gs-footer__legal a:focus {
	color: var(--gs-rose-on-ink);
}

.gs-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

/* Article footer widgets */
.gs-article__widgets {
	padding-top: 28px;
}

.gs-widget + .gs-widget {
	margin-top: 28px;
}

.gs-widget__title {
	margin-bottom: 14px;
}

.gs-widget ul {
	list-style: none;
	padding: 0;
}

.gs-widget li {
	padding: 10px 0;
	border-bottom: var(--gs-hairrule);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.6;
}

/* wp_link_pages, rendered inside the measure. */
.gs-pagination--inline {
	padding: 32px 0 0;
	justify-content: flex-start;
}


/* -------------------------------------------------------------
   20. Responsive
   ------------------------------------------------------------- */

@media (max-width: 1100px) {
	:root {
		--gs-gutter: 36px;
	}

	.gs-hero__title {
		font-size: 42px;
	}

	.gs-hero__media {
		width: 340px;
		min-height: 360px;
	}

	.gs-nav__list {
		gap: 20px;
	}

	.gs-nav__list a {
		font-size: 10px;
		letter-spacing: .2em;
	}
}

@media (max-width: 900px) {
	.gs-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
		padding: 40px var(--gs-gutter);
	}

	.gs-cards--three,
	.gs-related__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Nav collapse and the stacked layouts. */
@media (max-width: 800px) {
	:root {
		--gs-gutter: 24px;
	}

	.gs-js .gs-nav-toggle {
		display: block;
	}

	.gs-nav {
		width: 100%;
		order: 3;
	}

	/* Collapsed only when the toggle exists to reopen it. */
	.gs-js .gs-nav {
		display: none;
	}

	.gs-js .gs-nav.is-open {
		display: block;
	}

	.gs-header__bar {
		flex-wrap: wrap;
		row-gap: 16px;
		padding: 16px var(--gs-gutter);
	}

	.gs-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		border-top: var(--gs-hairrule);
	}

	.gs-nav__list > li {
		border-bottom: var(--gs-hairrule);
	}

	.gs-nav__list a {
		padding: 14px 0;
		display: block;
		border-bottom: 0;
	}

	.gs-nav__list .current-menu-item > a,
	.gs-nav__list .current-menu-ancestor > a,
	.gs-nav__list .current_page_item > a {
		border-bottom: 0;
	}

	.gs-nav__list .sub-menu {
		position: static;
		display: block;
		border: 0;
		padding: 0 0 10px 18px;
		min-width: 0;
	}

	.gs-nav__list .sub-menu a {
		padding: 7px 0;
		color: var(--gs-faint);
	}

	/* Hero stacks; image below the text. */
	.gs-hero {
		flex-direction: column;
	}

	.gs-hero__text {
		border-right: 0;
		padding: 48px var(--gs-gutter) 40px;
	}

	.gs-hero__title {
		font-size: 34px;
		letter-spacing: .12em;
	}

	.gs-hero__media {
		width: 100%;
		min-height: 300px;
		border-top: var(--gs-rule);
	}

	/* Trail strip stacks into rows. Doubled class beats the column modifier. */
	.gs-trail.gs-trail {
		grid-template-columns: 1fr;
	}

	.gs-trail__item {
		border-right: 0;
		border-bottom: var(--gs-hairrule);
	}

	.gs-trail__item:last-child {
		border-bottom: 0;
	}

	.gs-trail__link {
		padding: 20px var(--gs-gutter);
	}

	/* One column everywhere. */
	.gs-cards,
	.gs-cards--three,
	.gs-related__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.gs-section {
		padding: 44px var(--gs-gutter);
	}

	/* Article */
	.gs-article__header,
	.gs-page__header {
		padding: 44px var(--gs-gutter) 0;
	}

	.gs-article__title {
		font-size: 28px;
		letter-spacing: .1em;
	}

	.gs-article__figure {
		margin: 32px var(--gs-gutter) 0;
	}

	.gs-article__figure .gs-frame {
		height: 240px;
	}

	.gs-article__body,
	.gs-article__footer,
	.gs-comments {
		padding-left: var(--gs-gutter);
		padding-right: var(--gs-gutter);
	}

	.gs-content blockquote p {
		font-size: 19px;
	}

	.gs-content .alignleft,
	.gs-content .alignright {
		float: none;
		margin: 28px 0;
		max-width: 100%;
	}

	.gs-content .alignwide,
	.gs-content .alignfull {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		transform: none;
	}

	/* Archive */
	.gs-archive-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 40px var(--gs-gutter) 28px;
	}

	.gs-archive-head__title {
		font-size: 32px;
		letter-spacing: .14em;
	}

	.gs-chips {
		padding: 16px var(--gs-gutter);
	}

	/* Archive rows go two-line with the thumbnail kept small. */
	.gs-arow {
		flex-wrap: wrap;
		gap: 16px;
		align-items: flex-start;
	}

	.gs-arow__media {
		width: 96px;
		height: 64px;
	}

	.gs-arow__body {
		flex: 1 1 200px;
	}

	.gs-arow__date {
		width: 100%;
		order: 4;
	}

	.gs-arow .gs-arrow {
		display: none;
	}

	.gs-row {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 12px 20px;
	}

	.gs-row__title {
		flex: 1 1 100%;
		order: 2;
	}

	.gs-row__date {
		order: 3;
	}

	.gs-row .gs-arrow {
		display: none;
	}

	/* Newsletter form stacks. */
	.gs-newsletter__form {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}

	.gs-newsletter__input {
		width: 100%;
		border-right: var(--gs-rule);
		border-bottom: 0;
	}

	.gs-newsletter__submit {
		justify-content: center;
	}

	.gs-newsletter__title {
		font-size: 21px;
	}

	/* Footer */
	.gs-footer__cols {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.gs-footer__legal {
		flex-direction: column;
		gap: 10px;
		text-align: center;
		align-items: center;
	}

	.gs-postnav {
		flex-direction: column;
		gap: 24px;
		padding: 28px var(--gs-gutter) 0;
	}

	.gs-postnav__item,
	.gs-postnav__item--next {
		max-width: 100%;
		text-align: left;
		margin-left: 0;
	}

	.gs-searchform {
		display: flex;
		width: 100%;
	}

	.gs-searchform__input {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.gs-hero__title {
		font-size: 27px;
	}

	.gs-wordmark {
		font-size: 12px;
		letter-spacing: .3em;
	}

	.gs-mark {
		--gs-mark-cell: 6px;
		--gs-mark-gap: 2.5px;
	}

	.gs-card__title {
		font-size: 18px;
	}

	.gs-empty__title {
		font-size: 25px;
	}

	/* Tighten the tracking on the biggest headings so long place names still
	   fit a phone without breaking mid-word. */
	.gs-archive-head__title {
		font-size: 26px;
		letter-spacing: .1em;
	}

	.gs-article__title {
		font-size: 24px;
		letter-spacing: .08em;
	}

	.gs-newsletter__title {
		font-size: 19px;
		letter-spacing: .14em;
	}
}


/* -------------------------------------------------------------
   21. Print & reduced motion
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.gs-header,
	.gs-footer,
	.gs-newsletter,
	.gs-related,
	.gs-postnav,
	.gs-chips,
	.gs-pagination,
	.gs-comments {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.gs-article__body,
	.gs-article__header {
		max-width: none;
		padding: 0;
	}
}