/**
 * Patagonia Atlas — presentational stylesheet.
 *
 * Order: 1 tokens · 2 fonts · 3 base · 4 primitives · 5 header · 6 plates
 * 7 front page · 8 article · 9 archive · 10 search · 11 404 · 12 footer
 * 13 mobile navigation · 14 responsive · 15 print.
 */

/* ------------------------------------------------------------ 1 tokens */

:root {
	--paper: #f5ede1;
	--paper-2: #e9dcc8;
	--ink: #202015;
	--text-2: #3d3c29;
	--mute: #595643;
	--neatline: #312e1d;
	--lichen: #576c2f;
	--lichen-tint: #c5d5ab;
	--ochre: #c68128;
	--ochre-tint: #ebb16c;

	/*
	 * Three tiers per accent. The identity value is the one in the palette and
	 * is used for fills, rules, swatches and the mark. The text value is the
	 * same hue pushed dark enough to clear 4.5:1 on both paper grounds, for
	 * the caps labels — ochre at #c68128 is only 2.75:1 on paper and 2.36:1 on
	 * paper-2, so a label set in it would fail WCAG AA at any size. The deep
	 * value is for a numeral sitting on the tint fill.
	 */
	--ochre-text: #87581b;
	--lichen-text: #55692e;
	--lichen-deep: #4a5c27;
	--contour-a: rgba( 159, 128, 86, .38 );
	--contour-b: rgba( 159, 128, 86, .3 );

	--contour:
		repeating-radial-gradient( ellipse 60% 42% at 22% 35%, transparent 0 24px, var( --contour-a ) 24px 25px ),
		repeating-radial-gradient( ellipse 48% 66% at 82% 78%, transparent 0 32px, var( --contour-b ) 32px 33px );

	--font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
	--font-text: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--container: 1280px;
	--gutter: 32px;
	--plate-gap: 28px;
	--measure: 680px;
	--rule: 1px solid var( --neatline );
	--ease: 150ms ease-out;

	--body-size: 18px;
}

/* -------------------------------------------------------------- 2 fonts */

@font-face {
	font-family: 'Young Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/young-serif-400.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;
}

@font-face {
	font-family: 'Young Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/young-serif-400-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;
}

@font-face {
	font-family: 'Karla';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( '../fonts/karla-variable.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;
}

@font-face {
	font-family: 'Karla';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( '../fonts/karla-variable-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;
}

@font-face {
	font-family: 'Karla';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/karla-italic-400.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;
}

@font-face {
	font-family: 'Karla';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/karla-italic-400-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;
}

/* --------------------------------------------------------------- 3 base */

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

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

body {
	margin: 0;
	background: var( --paper );
	color: var( --text-2 );
	font: 400 var( --body-size ) / 1.65 var( --font-text );
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var( --font-display );
	font-weight: 400;
	color: var( --ink );
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var( --ease ), background-color var( --ease ), border-color var( --ease );
}

a:hover,
a:focus-visible {
	color: var( --lichen );
}

img,
svg {
	max-width: 100%;
}

img {
	height: auto;
}

:focus-visible {
	outline: 2px solid var( --ochre );
	outline-offset: 2px;
}

::selection {
	background: var( --lichen-tint );
	color: var( --ink );
}

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

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

.at-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 18px;
	background: var( --ink );
	color: var( --paper );
	font: 600 13px/1 var( --font-text );
	letter-spacing: .06em;
}

.at-skip:focus {
	left: 8px;
	top: 8px;
	color: var( --paper );
}

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

.at-container {
	max-width: var( --container );
	margin-inline: auto;
}

/* --------------------------------------------------------- 4 primitives */

.at-label {
	font: 600 11px/1 var( --font-text );
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-label--sm {
	font-size: 10.5px;
	letter-spacing: .14em;
}

.at-label--lead {
	font-size: 11px;
	letter-spacing: .2em;
}

/*
 * The category accent rule: Chile / trekking, Argentina / roads, ice. These
 * classes only ever colour text, so they take the text tier.
 */
.at-accent--lichen { color: var( --lichen-text ); }
.at-accent--ochre  { color: var( --ochre-text ); }
.at-accent--ink    { color: var( --ink ); }

.at-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 13px 18px;
	border: 1px solid var( --ink );
	background: var( --ink );
	color: var( --paper );
	font: 600 13px/1 var( --font-text );
	letter-spacing: .06em;
}

.at-btn:hover,
.at-btn:focus-visible {
	background: var( --lichen );
	border-color: var( --lichen );
	color: var( --paper );
}

.at-btn--secondary {
	background: transparent;
	color: var( --ink );
}

.at-btn--secondary:hover,
.at-btn--secondary:focus-visible {
	background: var( --paper-2 );
	border-color: var( --ink );
	color: var( --ink );
}

.at-ring {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1.5px solid var( --lichen );
	border-radius: 50%;
	font: 600 11px/1 var( --font-text );
	color: var( --lichen );
}

.at-chip {
	display: inline-block;
	padding: 6px 10px;
	border: var( --rule );
	font: 500 12px/1.2 var( --font-text );
	color: var( --text-2 );
}

a.at-chip:hover,
a.at-chip:focus-visible {
	background: var( --paper-2 );
	color: var( --ink );
}

/* Magnifier: a circle plus a 45 degree tick. */
.at-icon-search {
	position: relative;
	display: block;
	flex: none;
	width: 12px;
	height: 12px;
	color: inherit;
}

.at-icon-search::before {
	content: "";
	position: absolute;
	inset: 0 2px 2px 0;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.at-icon-search::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 5px;
	height: 1.5px;
	background: currentColor;
	transform: rotate( 45deg );
	transform-origin: right;
}

/* The summit-rings mark, drawn as inline SVG; sizing only lives here. */
.at-mark {
	display: block;
	flex: none;
	width: 40px;
	height: 40px;
}

.at-scalebar {
	display: flex;
	flex: none;
	border: 1px solid var( --ink );
}

.at-scalebar span {
	display: block;
	width: 18px;
	height: 6px;
}

.at-scalebar span:nth-child( odd ) {
	background: var( --ink );
}

/* ------------------------------------------------------------- 5 header */

.at-header {
	border-bottom: var( --rule );
	background: var( --paper );
}

.at-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var( --container );
	margin-inline: auto;
	padding: 16px var( --gutter );
}

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

.at-brand:hover,
.at-brand:focus-visible {
	color: inherit;
}

.at-brand__name {
	display: block;
	font: 400 24px/1 var( --font-display );
	color: var( --ink );
}

.at-brand:hover .at-brand__name {
	color: var( --lichen );
}

.at-brand__tag {
	display: block;
	margin-top: 5px;
	font: 600 10px/1 var( --font-text );
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-brand__logo {
	display: block;
	width: auto;
	max-height: 44px;
}

.at-nav {
	display: flex;
	flex: 0 1 auto;
	min-width: 0;
	gap: 22px;
	font: 500 14px/1 var( --font-text );
}

/*
 * The design assumes six short labels on one line. Longer ones wrap onto a
 * second line rather than running under the search field: the masthead grows
 * a few pixels, which is far better than two overlapping runs of text.
 */
.at-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-nav a {
	display: block;
	padding-bottom: 4px;
	border-bottom: 1.5px solid transparent;
	color: var( --ink );
	white-space: nowrap;
}

.at-nav a:hover,
.at-nav a:focus-visible {
	color: var( --lichen );
}

.at-nav .current-menu-item > a,
.at-nav .current-menu-ancestor > a,
.at-nav .current-menu-parent > a,
.at-nav .current_page_item > a {
	border-bottom-color: var( --lichen );
}

.at-header__tools {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
}

/*
 * The masthead field is a compact 190px, so its submit control is the icon
 * plus the placeholder; the word "Search" only appears on the large variant,
 * where there is room for it.
 */
.at-header__tools .at-searchform button {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.at-searchform {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 190px;
	height: 36px;
	padding: 0 12px;
	border: var( --rule );
	background: var( --paper );
	color: var( --mute );
}

.at-searchform:focus-within {
	outline: 2px solid var( --ochre );
	outline-offset: 2px;
}

/*
 * The field and its button stretch to the form's height so the actual hit
 * box is the 36px or 44px the design draws, not the 18px line box.
 */
.at-searchform input[ type="search" ] {
	width: 100%;
	min-width: 0;
	align-self: stretch;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --ink );
	font: 400 13px/1 var( --font-text );
	-webkit-appearance: none;
	appearance: none;
}

.at-searchform input[ type="search" ]:focus {
	outline: none;
}

.at-searchform input::placeholder {
	color: var( --mute );
	opacity: 1;
}

.at-searchform button {
	display: flex;
	align-items: center;
	align-self: stretch;
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	color: var( --mute );
	cursor: pointer;
	font: 600 11px/1 var( --font-text );
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.at-searchform--lg {
	width: 100%;
	max-width: 360px;
	height: 44px;
	padding: 0 14px;
	gap: 10px;
	color: var( --ink );
}

.at-searchform--lg input[ type="search" ] {
	font-size: 15px;
}

.at-searchform--lg button {
	margin-left: auto;
	flex: none;
}

.at-index-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border: var( --rule );
	font: 600 11px/1 var( --font-text );
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --ink );
}

.at-index-btn:hover,
.at-index-btn:focus-visible {
	background: var( --paper-2 );
	color: var( --ink );
}

.at-header__toggles {
	display: none;
	align-items: center;
	gap: 6px;
}

.at-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --ink );
	cursor: pointer;
}

.at-iconbtn .at-icon-search {
	width: 16px;
	height: 16px;
}

.at-icon-menu {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.at-icon-menu span {
	display: block;
	height: 1.5px;
	background: currentColor;
}

.at-icon-close {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
}

.at-icon-close::before,
.at-icon-close::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	height: 1.5px;
	background: currentColor;
}

.at-icon-close::before { transform: rotate( 45deg ); }
.at-icon-close::after  { transform: rotate( -45deg ); }

/* The search field revealed under the header on small screens. */
.at-header__search {
	display: none;
	padding: 0 var( --gutter ) 14px;
	max-width: var( --container );
	margin-inline: auto;
}

.at-header__search.is-open {
	display: block;
}

.at-header__search .at-searchform {
	width: 100%;
	max-width: none;
	height: 44px;
}

/* ------------------------------------------------------------- 6 plates */

.at-main {
	display: block;
}

.at-plate {
	max-width: var( --container );
	margin: var( --plate-gap ) auto 0;
	border: var( --rule );
	background: var( --paper );
}

/* Plates sit inside the page gutters. */
.at-plate {
	margin-inline: max( var( --gutter ), calc( ( 100% - var( --container ) ) / 2 + var( --gutter ) ) );
}

.at-plate:last-of-type {
	margin-bottom: var( --plate-gap );
}

.at-plate--clip {
	overflow: hidden;
}

.at-plate--contour {
	background-image: var( --contour );
}

.at-plate__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 10px 20px;
	border-bottom: var( --rule );
	font: 600 11px/1.4 var( --font-text );
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-plate__head > span:last-child {
	flex: none;
	text-align: right;
}

.at-plate__head a {
	color: inherit;
}

.at-plate__head a:hover,
.at-plate__head a:focus-visible {
	color: var( --lichen );
}

.at-plate__head .at-here {
	color: var( --ink );
}

/*
 * Neatline grids. Every cell carries a right and bottom border; the grid is
 * pulled 1px past the plate on those two edges so the plate's own border
 * absorbs the last column and row. Works for any number of cells, so an
 * incomplete final row never doubles a border. Requires .at-plate--clip.
 */
.at-grid {
	display: grid;
	margin: 0 -1px -1px 0;
}

.at-grid > * {
	border-right: var( --rule );
	border-bottom: var( --rule );
	min-width: 0;
}

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

.at-grid--contour {
	background-image: var( --contour );
}

.at-figure {
	display: block;
}

.at-figure img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.at-caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 4px 16px;
	padding: 12px 20px;
	border-top: var( --rule );
	font: 500 11px/1.4 var( --font-text );
	color: var( --mute );
}

.at-caption__scale {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
}

.at-caption__text {
	min-width: 0;
	text-align: right;
	overflow-wrap: anywhere;
}

.at-empty {
	padding: 40px var( --gutter );
	font: 400 17px/1.55 var( --font-text );
	color: var( --text-2 );
}

/* --------------------------------------------------------- 7 front page */

.at-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.at-hero__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 60px 48px 48px;
	background-image: var( --contour );
}

.at-hero__title {
	margin: 0;
	font: 400 66px/1.04 var( --font-display );
	letter-spacing: -.01em;
}

.at-hero__dek {
	margin: 0;
	max-width: 480px;
	font: 400 17px/1.55 var( --font-text );
	color: var( --text-2 );
	text-wrap: pretty;
}

.at-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.at-hero__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: auto;
	padding-top: 24px;
	font: 500 12px/1.3 var( --font-text );
	color: var( --text-2 );
}

.at-hero__legend span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.at-swatch {
	display: block;
	flex: none;
	width: 14px;
	height: 14px;
}

.at-swatch--lichen { background: var( --lichen ); }
.at-swatch--ochre  { background: var( --ochre ); }
.at-swatch--ink    { background: var( --ink ); }
.at-swatch--peak   { background: var( --ochre-tint ); }
.at-swatch--should { background: var( --lichen-tint ); }
.at-swatch--winter { background: var( --paper-2 ); border: var( --rule ); }

.at-hero__media {
	display: flex;
	flex-direction: column;
	border-left: var( --rule );
	min-width: 0;
}

.at-hero__media img {
	display: block;
	width: 100%;
	height: 520px;
	object-fit: cover;
}

.at-hero__media--fill img {
	flex: 1;
	height: 100%;
	min-height: 420px;
}

/*
 * Plate 02 — start here. Named areas so the same four children read as a
 * stacked card on wide screens and a single row on narrow ones.
 */
.at-startcell {
	display: grid;
	grid-template-columns: 28px 1fr;
	grid-template-areas:
		"ring  title"
		"dek   dek"
		"count count";
	align-items: center;
	column-gap: 12px;
	padding: 24px;
	color: inherit;
}

.at-startcell > .at-ring        { grid-area: ring; }
.at-startcell .at-startcell__title { grid-area: title; }
.at-startcell .at-startcell__dek   { grid-area: dek; }
.at-startcell .at-startcell__count { grid-area: count; }

.at-startcell__title {
	margin: 0;
	font: 400 21px/1.1 var( --font-display );
}

.at-startcell:hover .at-startcell__title,
.at-startcell:focus-visible .at-startcell__title {
	color: var( --lichen );
}

.at-startcell__dek {
	margin: 12px 0 10px;
	font: 400 14px/1.5 var( --font-text );
	color: var( --text-2 );
}

.at-startcell__count {
	font: 600 11px/1 var( --font-text );
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --mute );
}

/* Plate 03 — regions */
.at-region {
	display: block;
	padding: 26px 24px;
	color: inherit;
}

.at-region__name {
	margin: 12px 0 6px;
	font: 400 23px/1.1 var( --font-display );
}

.at-region:hover .at-region__name,
.at-region:focus-visible .at-region__name {
	color: var( --lichen );
}

.at-region__coords {
	font: 500 12px/1.3 var( --font-text );
	color: var( --mute );
}

/* Plate 04 — featured sheets */
.at-card {
	display: flex;
	flex-direction: column;
	color: inherit;
}

.at-card__media img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-bottom: var( --rule );
}

.at-card__body {
	padding: 20px 24px 24px;
}

.at-card__title {
	margin: 10px 0 8px;
	font: 400 23px/1.15 var( --font-display );
}

.at-card:hover .at-card__title,
.at-card:focus-visible .at-card__title {
	color: var( --lichen );
}

.at-card__dek {
	margin: 0;
	font: 400 14px/1.5 var( --font-text );
	color: var( --text-2 );
}

/* The narrower sheet card used on archives and the related plate. */
.at-sheet {
	display: flex;
	flex-direction: column;
	color: inherit;
}

.at-sheet__media img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: cover;
	border-bottom: var( --rule );
}

.at-sheet__body {
	padding: 16px 20px 20px;
}

.at-sheet__title {
	margin: 8px 0 0;
	font: 400 19px/1.25 var( --font-display );
	color: var( --ink );
}

.at-sheet:hover .at-sheet__title,
.at-sheet:focus-visible .at-sheet__title {
	color: var( --lichen );
}

.at-sheet__meta {
	margin-top: 8px;
	font: 500 12px/1.3 var( --font-text );
	color: var( --mute );
}

/* Plate 05 — when to go */
.at-months {
	display: grid;
	grid-template-columns: repeat( 12, 1fr );
	margin: 0 -1px 0 0;
}

.at-months > * {
	padding: 18px 0;
	border-right: var( --rule );
	text-align: center;
	font: 600 12px/1 var( --font-text );
	color: var( --ink );
}

.at-month--winter   { background: var( --paper-2 ); }
.at-month--shoulder { background: var( --lichen-tint ); }
.at-month--peak     { background: var( --ochre-tint ); color: var( --ink ); }

.at-months__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	padding: 16px 20px;
	border-top: var( --rule );
	font: 500 12px/1.4 var( --font-text );
	color: var( --text-2 );
}

.at-months__legend span {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ------------------------------------------------------------ 8 article */

.at-title-plate {
	display: grid;
	grid-template-columns: 7fr 5fr;
}

.at-title-plate__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 48px 48px 40px;
	background-image: var( --contour );
}

.at-title {
	margin: 0;
	font: 400 52px/1.08 var( --font-display );
	letter-spacing: -.01em;
}

.at-standfirst {
	margin: 0;
	max-width: 600px;
	font: 400 20px/1.5 var( --font-text );
	color: var( --text-2 );
	text-wrap: pretty;
}

.at-byline {
	font: 500 12px/1.6 var( --font-text );
	color: var( --mute );
}

.at-facts {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 16px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var( --ink );
}

.at-facts__label {
	font: 600 10.5px/1.3 var( --font-text );
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-facts__value {
	margin-top: 6px;
	font: 400 21px/1.1 var( --font-display );
	color: var( --ink );
}

.at-body-plate {
	display: grid;
	grid-template-columns: 300px 1fr;
}

.at-aside {
	border-right: var( --rule );
	padding: 24px;
	min-width: 0;
}

.at-aside__inner {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.at-aside__extra {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.at-aside__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0 0 10px;
	border: 0;
	border-bottom: var( --rule );
	background: none;
	color: var( --mute );
	font: 600 11px/1 var( --font-text );
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: left;
}

/*
 * The contents rail is a details element, so it collapses natively on small
 * screens with no script. On wide screens the chevron is hidden and the panel
 * is forced open, since there is room for it.
 */
summary.at-aside__head {
	list-style: none;
	cursor: pointer;
}

summary.at-aside__head::-webkit-details-marker {
	display: none;
}

.at-toc-count {
	color: var( --mute );
	font-weight: 500;
	letter-spacing: .08em;
}

.at-toc-block > .at-chevron,
.at-toc-block .at-chevron {
	display: none;
}

.at-toc {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font: 500 14px/1.35 var( --font-text );
}

.at-toc a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 7px 0;
	color: var( --text-2 );
}

.at-toc a:hover,
.at-toc a:focus-visible {
	color: var( --lichen );
}

.at-toc .at-ring {
	width: 24px;
	height: 24px;
	font-size: 10px;
}

.at-toc__text {
	padding-top: 3px;
}

.at-toc .is-current .at-ring {
	background: var( --lichen-tint );
	border-color: var( --lichen-deep );
	color: var( --lichen-deep );
}

/* Block, so the pillar link's hit area is the whole title, not one line box. */
.at-partof a {
	display: block;
	padding: 4px 0;
}

.at-partof__title {
	display: block;
	margin-top: 8px;
	font: 400 19px/1.25 var( --font-display );
	color: var( --ink );
}

.at-partof a:hover .at-partof__title,
.at-partof a:focus-visible .at-partof__title {
	color: var( --lichen );
}

.at-partof__meta {
	margin-top: 6px;
	font: 500 12px/1.5 var( --font-text );
	color: var( --mute );
}

.at-corrections {
	font: 400 12.5px/1.55 var( --font-text );
	color: var( --mute );
}

.at-corrections a {
	color: var( --ink );
	text-decoration: underline;
	text-decoration-color: var( --lichen );
	text-underline-offset: 3px;
}

.at-content-col {
	padding: 48px 56px 56px;
	min-width: 0;
}

/* --- the generated article body --------------------------------------- */

.at-entry {
	max-width: var( --measure );
	counter-reset: at-section;
}

.at-entry > *:first-child {
	margin-top: 0;
}

.at-entry > p:first-of-type {
	margin: 0 0 28px;
	font: 400 20px/1.6 var( --font-text );
	color: var( --ink );
}

.at-entry p {
	margin: 0 0 20px;
	font: 400 18px/1.65 var( --font-text );
	color: var( --text-2 );
}

.at-entry h2 {
	counter-increment: at-section;
	margin: 40px 0 16px;
	font: 400 32px/1.15 var( --font-display );
	color: var( --ink );
}

.at-entry h2::before {
	content: "§ " counter( at-section );
	display: block;
	margin-bottom: 10px;
	font: 600 11px/1 var( --font-text );
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --lichen );
}

.at-entry h3 {
	margin: 28px 0 12px;
	font: 400 23px/1.2 var( --font-display );
	color: var( --ink );
}

.at-entry h4 {
	margin: 24px 0 10px;
	font: 400 21px/1.2 var( --font-display );
	color: var( --ink );
}

.at-entry a {
	color: var( --ink );
	text-decoration: underline;
	text-decoration-color: var( --lichen );
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.at-entry a:hover,
.at-entry a:focus-visible {
	color: var( --lichen );
}

.at-entry ul,
.at-entry ol {
	margin: 0 0 28px;
	padding-left: 22px;
	font: 400 18px/1.65 var( --font-text );
	color: var( --text-2 );
}

.at-entry li {
	margin-bottom: 8px;
}

.at-entry li::marker {
	color: var( --lichen );
}

.at-entry strong,
.at-entry b {
	font-weight: 600;
	color: var( --ink );
}

.at-entry figure {
	margin: 0 0 32px;
}

.at-entry figure img {
	display: block;
	width: 100%;
	height: auto;
	border: var( --rule );
}

/*
 * Caption left, credit right. Flex items default to min-width:auto, so a
 * long unbroken credit would force the caption wider than the column and
 * push the whole page sideways; both halves must be allowed to shrink.
 */
.at-entry figcaption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	padding-top: 10px;
	font: 500 11px/1.4 var( --font-text );
	color: var( --mute );
}

.at-entry figcaption > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

.at-entry figcaption .at-figcredit {
	text-align: right;
}

.at-entry blockquote,
.at-entry .at-fieldnote {
	margin: 0 0 32px;
	padding: 20px 24px;
	border: var( --rule );
	background-image: var( --contour );
	background-color: var( --paper );
}

.at-entry blockquote::before,
.at-entry .at-fieldnote::before {
	content: attr( data-label );
	display: block;
	margin-bottom: 8px;
	font: 600 10.5px/1 var( --font-text );
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --ochre-text );
}

.at-entry blockquote > *:last-child,
.at-entry .at-fieldnote > *:last-child {
	margin-bottom: 0;
}

.at-entry blockquote p,
.at-entry .at-fieldnote p {
	font-size: 16px;
	line-height: 1.55;
}

.at-entry blockquote cite {
	display: block;
	margin-top: 10px;
	font: 500 12px/1.4 var( --font-text );
	font-style: normal;
	color: var( --mute );
}

.at-tablewrap {
	position: relative;
	margin: 0 0 12px;
	overflow-x: auto;
}

.at-entry table {
	width: 100%;
	border-collapse: collapse;
	border: var( --rule );
	font: 400 15px/1.45 var( --font-text );
	color: var( --text-2 );
}

.at-entry th,
.at-entry td {
	padding: 10px 12px;
	border: var( --rule );
	text-align: left;
	vertical-align: top;
}

.at-entry thead tr {
	background: var( --paper-2 );
}

.at-entry th {
	font: 600 11px/1.3 var( --font-text );
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --text-2 );
}

.at-entry tbody td:first-child {
	font-weight: 600;
	color: var( --ink );
}

.at-tablenote {
	margin: 0 0 28px;
	font: 500 11px/1.4 var( --font-text );
	color: var( --mute );
}

.at-entry table caption {
	caption-side: bottom;
	padding-top: 10px;
	font: 500 11px/1.4 var( --font-text );
	color: var( --mute );
	text-align: left;
}

/* FAQ rows, derived from the h3s under the questions heading. */
.at-entry .at-faq-head {
	margin-bottom: 8px;
}

.at-faq-item {
	border-top: var( --rule );
	padding: 18px 0;
}

.at-faq-item:last-of-type {
	border-bottom: var( --rule );
	margin-bottom: 36px;
}

.at-faq-item h3 {
	margin: 0 0 8px;
	font: 400 21px/1.25 var( --font-display );
}

.at-faq-item p {
	margin: 0 0 12px;
	font: 400 17px/1.6 var( --font-text );
}

.at-faq-item > *:last-child {
	margin-bottom: 0;
}

/* Source list and image credits, demoted to a footnote block. */
.at-credits {
	margin-top: 36px;
}

.at-credits__head {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: var( --rule );
	font: 600 11px/1 var( --font-text );
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-credits__head::before {
	content: none;
}

/* Credits headings are furniture; they must not consume a section number. */
.at-entry h2.at-credits__head {
	counter-increment: none;
}

/* A post with no featured image still needs the plate grid to hold. */
.at-noimage {
	min-height: 120px;
	background: var( --paper-2 );
	background-image: var( --contour );
}

.at-credits ol,
.at-credits ul {
	margin: 10px 0 0;
	padding-left: 18px;
	font: 400 12.5px/1.7 var( --font-text );
	color: var( --mute );
}

.at-credits li {
	margin-bottom: 2px;
}

.at-credits a {
	color: var( --mute );
	text-decoration-color: var( --contour-a );
}

.at-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 36px 0;
}

/* --- prev / up / next -------------------------------------------------- */

.at-pun {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	margin: 0 -1px 0 0;
}

.at-pun__cell {
	display: block;
	padding: 22px 24px;
	border-right: var( --rule );
	color: inherit;
}

.at-pun__cell--up {
	background: var( --paper-2 );
}

.at-pun__cell--next {
	text-align: right;
}

.at-pun__label {
	font: 600 10.5px/1.4 var( --font-text );
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-pun__cell--up .at-pun__label {
	color: var( --lichen-text );
}

.at-pun__title {
	margin-top: 10px;
	font: 400 19px/1.25 var( --font-display );
	color: var( --ink );
}

.at-pun__cell:hover .at-pun__title,
.at-pun__cell:focus-visible .at-pun__title {
	color: var( --lichen );
}

.at-pun__cell--empty {
	background: transparent;
}

/* ------------------------------------------------------------ 9 archive */

.at-archive-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.at-archive-hero__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 56px 48px 44px;
	background-image: var( --contour );
}

.at-archive-hero__title {
	margin: 0;
	font: 400 40px/1.1 var( --font-display );
	letter-spacing: -.01em;
}

.at-archive-hero__dek {
	margin: 0;
	max-width: 480px;
	font: 400 17px/1.55 var( --font-text );
	color: var( --text-2 );
	text-wrap: pretty;
}

.at-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var( --ink );
}

.at-stats__label {
	font: 600 10.5px/1.3 var( --font-text );
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-stats__value {
	margin-top: 6px;
	font: 400 21px/1.1 var( --font-display );
	color: var( --ink );
}

.at-pillarcard {
	display: flex;
	flex-direction: column;
	border-left: var( --rule );
	color: inherit;
	min-width: 0;
}

.at-pillarcard img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-bottom: var( --rule );
}

.at-pillarcard__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 22px 24px 24px;
}

.at-pillarcard__title {
	font: 400 26px/1.15 var( --font-display );
	color: var( --ink );
	text-wrap: pretty;
}

.at-pillarcard:hover .at-pillarcard__title,
.at-pillarcard:focus-visible .at-pillarcard__title {
	color: var( --lichen );
}

.at-pillarcard__dek {
	margin: 0;
	font: 400 14px/1.5 var( --font-text );
	color: var( --text-2 );
}

.at-pillarcard__meta {
	margin-top: auto;
	font: 500 12px/1.3 var( --font-text );
	color: var( --mute );
}

.at-pagebar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 12px 20px;
	border-top: var( --rule );
	font: 500 12px/1.4 var( --font-text );
	color: var( --mute );
}

.at-pager {
	display: inline-flex;
	flex-wrap: wrap;
	border: var( --rule );
	font: 600 12px/1 var( --font-text );
	color: var( --ink );
}

.at-pager > * {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 10px 12px;
	border-right: var( --rule );
}

.at-pager > *:last-child {
	border-right: 0;
}

.at-pager .current {
	background: var( --ink );
	color: var( --paper );
}

.at-pager a:hover,
.at-pager a:focus-visible {
	background: var( --paper-2 );
	color: var( --ink );
}

.at-pager .dots,
.at-pager .at-pager__off {
	color: var( --mute );
}

/* Índice — the 18-pillar index plate. */
.at-index-col {
	border-right: var( --rule );
	min-width: 0;
}

.at-index-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 12px 20px;
	border-bottom: var( --rule );
	font: 400 16px/1.2 var( --font-display );
	color: var( --ink );
}

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

.at-index-row:hover,
.at-index-row:focus-visible {
	color: var( --lichen );
}

.at-index-row.is-here {
	background: var( --paper-2 );
}

.at-index-row__num {
	margin-right: 10px;
	font: 600 11px/1 var( --font-text );
	color: var( --mute );
}

.at-index-row__count {
	flex: none;
	font: 500 11px/1.4 var( --font-text );
	color: var( --mute );
}

/* ------------------------------------------------------------- 10 search */

.at-search-hero {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: end;
	padding: 36px 48px;
	background-image: var( --contour );
}

.at-search-hero__title {
	margin: 14px 0 0;
	font: 400 40px/1.1 var( --font-display );
}

.at-result {
	display: grid;
	grid-template-columns: 200px 1fr auto;
	gap: 28px;
	align-items: start;
	padding: 22px 24px;
	border-bottom: var( --rule );
	color: inherit;
}

.at-result:last-of-type {
	border-bottom: 0;
}

.at-result__cat {
	font: 600 10.5px/1.6 var( --font-text );
	letter-spacing: .14em;
	text-transform: uppercase;
}

.at-result__sheet {
	display: block;
	color: var( --mute );
}

.at-result__title {
	font: 400 23px/1.2 var( --font-display );
	color: var( --ink );
}

.at-result:hover .at-result__title,
.at-result:focus-visible .at-result__title {
	color: var( --lichen );
}

.at-result__excerpt {
	margin: 8px 0 0;
	max-width: 640px;
	font: 400 14px/1.5 var( --font-text );
	color: var( --text-2 );
}

.at-result__meta {
	font: 500 12px/1.6 var( --font-text );
	color: var( --mute );
	text-align: right;
	white-space: nowrap;
}

.at-entry mark,
.at-result mark {
	background: var( --ochre-tint );
	color: var( --ink );
	padding: 0 3px;
}

/* ---------------------------------------------------------------- 11 404 */

.at-404 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.at-404__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 72px 48px;
	background-image: var( --contour );
}

.at-404__title {
	margin: 0;
	font: 400 40px/1.1 var( --font-display );
}

.at-404__dek {
	margin: 0;
	max-width: 460px;
	font: 400 17px/1.55 var( --font-text );
	color: var( --text-2 );
}

.at-404__side {
	border-left: var( --rule );
	min-width: 0;
}

.at-404__sidehead {
	padding: 10px 20px;
	border-bottom: var( --rule );
	font: 600 11px/1 var( --font-text );
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-poprow {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: var( --rule );
	font: 400 19px/1.25 var( --font-display );
	color: var( --ink );
}

.at-poprow:last-child {
	border-bottom: 0;
}

.at-poprow:hover,
.at-poprow:focus-visible {
	color: var( --lichen );
}

.at-poprow__num {
	flex: none;
	font: 500 11px/1.6 var( --font-text );
	color: var( --mute );
}

/* ------------------------------------------------------------- 12 footer */

.at-footer {
	margin-top: var( --plate-gap );
	border-top: var( --rule );
}

.at-footer__cols {
	display: grid;
	grid-template-columns: 4fr 4fr 2fr 2fr;
	gap: 40px;
	max-width: var( --container );
	margin-inline: auto;
	padding: 40px var( --gutter ) 36px;
}

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

.at-footer__brand .at-mark {
	width: 28px;
	height: 28px;
}

.at-footer__brandname {
	font: 400 21px/1 var( --font-display );
	color: var( --ink );
}

.at-footer__colophon {
	margin: 16px 0 0;
	max-width: 340px;
	font: 400 14px/1.55 var( --font-text );
	color: var( --text-2 );
}

.at-footer__revised {
	margin-top: 14px;
	font: 600 10.5px/1.4 var( --font-text );
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-footer__head {
	padding-bottom: 10px;
	border-bottom: var( --rule );
	font: 600 11px/1 var( --font-text );
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-footer__list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font: 400 13px/1.9 var( --font-text );
	color: var( --text-2 );
}

/*
 * Column flow, not row flow: the index reads 01 to 09 down the first column
 * and 10 to 18 down the second, the way the printed index does.
 */
.at-footer__list--split {
	columns: 2;
	column-gap: 24px;
}

.at-footer__list--split li {
	break-inside: avoid;
}

/*
 * Footer and index links are list navigation, not prose, so they carry a
 * target of their own: a 13px line box is 15px tall, under the 24px minimum.
 */
.at-footer__list a {
	display: block;
	padding: 7px 0;
	color: var( --text-2 );
}

.at-footer__list a:hover,
.at-footer__list a:focus-visible {
	color: var( --lichen );
}

.at-footer__num {
	color: var( --mute );
}

.at-footer__bar {
	border-top: var( --rule );
}

.at-footer__barinner {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	max-width: var( --container );
	margin-inline: auto;
	padding: 14px var( --gutter );
	font: 600 10.5px/1.6 var( --font-text );
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-footer__barinner > span:last-child {
	text-align: right;
}

/* -------------------------------------------------- 13 mobile navigation */

.at-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: none;
	overflow-y: auto;
	background: var( --paper );
	background-image: var( --contour );
	-webkit-overflow-scrolling: touch;
}

.at-drawer.is-open {
	display: block;
}

body.at-locked {
	overflow: hidden;
}

.at-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-bottom: var( --rule );
	background: var( --paper );
}

.at-drawer__search {
	padding: 20px 16px 0;
}

.at-drawer__search .at-searchform {
	width: 100%;
	max-width: none;
	height: 44px;
	background: var( --paper );
}

.at-drawer__nav {
	margin: 20px 16px 0;
	border: var( --rule );
	background: var( --paper );
}

.at-drawer__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-drawer__nav li + li a {
	border-top: var( --rule );
}

.at-drawer__nav a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	font: 400 24px/1.15 var( --font-display );
	color: var( --ink );
}

.at-drawer__nav .at-drawer__count {
	font: 600 11px/1 var( --font-text );
	letter-spacing: .14em;
	color: var( --mute );
}

.at-drawer__index {
	margin: 20px 16px 0;
	border: var( --rule );
	background: var( --paper );
}

.at-drawer__indexhead {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	border-bottom: var( --rule );
	font: 600 10px/1.4 var( --font-text );
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-drawer__indexlist {
	columns: 2;
	column-gap: 16px;
	margin: 0;
	padding: 12px 16px 14px;
	list-style: none;
	font: 400 13.5px/1.9 var( --font-text );
	color: var( --text-2 );
}

.at-drawer__indexlist li {
	break-inside: avoid;
}

.at-drawer__indexlist a {
	display: block;
	padding: 7px 0;
	color: var( --text-2 );
}

.at-drawer__about {
	padding: 20px 16px 28px;
	font: 600 10px/1.8 var( --font-text );
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --mute );
}

.at-drawer__about a {
	color: var( --mute );
}

/* Collapsible "On this sheet" on small screens. */
.at-chevron {
	flex: none;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	margin-top: -4px;
	transition: transform var( --ease );
}

details:not( [ open ] ) .at-chevron {
	transform: rotate( -45deg );
	margin-top: 2px;
}

/* --------------------------------------------------------- 14 responsive */

@media ( max-width: 1199px ) {
	:root {
		--gutter: 24px;
	}

	.at-hero__title {
		font-size: 54px;
	}

	.at-title {
		font-size: 44px;
	}

	.at-hero__body,
	.at-title-plate__body,
	.at-archive-hero__body,
	.at-404__body {
		padding: 40px 32px 32px;
	}

	.at-content-col {
		padding: 40px 32px 44px;
	}
}

@media ( max-width: 1279px ) and ( min-width: 1024px ) {
	.at-nav {
		gap: 4px 16px;
		font-size: 13.5px;
	}

	.at-nav ul {
		gap: 4px 16px;
	}
}

@media ( max-width: 1023px ) {
	.at-nav,
	.at-header__tools {
		display: none;
	}

	.at-header__toggles {
		display: flex;
	}
}

@media ( max-width: 1199px ) and ( min-width: 768px ) {
	.at-grid--3 {
		grid-template-columns: repeat( 2, 1fr );
	}

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

	.at-body-plate {
		grid-template-columns: 1fr;
	}

	.at-aside {
		border-right: 0;
		border-bottom: var( --rule );
	}

	.at-aside__inner {
		position: static;
	}

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

@media ( max-width: 899px ) and ( min-width: 768px ) {
	.at-grid--regions {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 900px ) and ( max-width: 1199px ) {
	.at-grid--regions {
		grid-template-columns: repeat( 4, 1fr );
	}
}

@media ( max-width: 767px ) {
	:root {
		--gutter: 16px;
		--plate-gap: 16px;
		--body-size: 17px;
	}

	.at-header__inner {
		padding: 12px var( --gutter );
	}

	/*
	 * A long site name must not push the icons off the edge, so the lockup
	 * becomes shrinkable here even though it is fixed-width on desktop.
	 */
	.at-brand {
		flex: 0 1 auto;
		min-width: 0;
		gap: 10px;
	}

	.at-brand .at-mark {
		width: 30px;
		height: 30px;
	}

	.at-brand__name {
		font-size: 19px;
		line-height: 1.1;
	}

	.at-brand__tag {
		display: none;
	}

	.at-plate__head {
		padding: 9px 14px;
		font-size: 10px;
	}

	/* Every multi-column grid collapses. */
	.at-grid--3,
	.at-grid--4 {
		grid-template-columns: 1fr;
	}

	/* Plate 02 becomes a list: ring, then title over one line of copy, count. */
	.at-startcell {
		grid-template-columns: 28px 1fr auto;
		grid-template-areas:
			"ring title count"
			"ring dek   count";
		column-gap: 14px;
		padding: 16px;
	}

	.at-startcell__title {
		font-size: 19px;
	}

	.at-startcell__dek {
		margin: 4px 0 0;
		font-size: 13px;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.at-startcell__count {
		font-size: 10.5px;
		letter-spacing: .1em;
	}

	/*
	 * Plate 04 leads with one full card; the rest become thumbnail rows, so
	 * three featured sheets do not cost three screens of scrolling.
	 */
	.at-grid--featured .at-card:not( :first-child ) {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 14px 16px;
	}

	.at-grid--featured .at-card:not( :first-child ) .at-card__media {
		flex: none;
		width: 96px;
	}

	.at-grid--featured .at-card:not( :first-child ) .at-card__media img {
		width: 96px;
		height: 72px;
		border: var( --rule );
	}

	.at-grid--featured .at-card:not( :first-child ) .at-card__body {
		padding: 0;
	}

	.at-grid--featured .at-card:not( :first-child ) .at-card__title {
		margin: 6px 0 0;
		font-size: 17px;
		line-height: 1.2;
	}

	.at-grid--featured .at-card:not( :first-child ) .at-card__dek {
		display: none;
	}

	.at-grid--featured .at-card:first-child .at-card__title {
		font-size: 21px;
	}

	.at-grid--featured .at-card:first-child .at-card__dek {
		display: none;
	}

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

	.at-hero,
	.at-title-plate,
	.at-archive-hero,
	.at-404,
	.at-body-plate {
		grid-template-columns: 1fr;
	}

	.at-hero__body {
		gap: 16px;
		padding: 32px 20px 28px;
	}

	.at-hero__title {
		font-size: 40px;
		line-height: 1.06;
	}

	.at-hero__dek {
		font-size: 15.5px;
	}

	.at-hero__actions {
		flex-direction: column;
	}

	.at-hero__actions .at-btn {
		width: 100%;
	}

	.at-hero__legend {
		gap: 10px 22px;
		padding-top: 16px;
	}

	.at-hero__media {
		border-left: 0;
		border-top: var( --rule );
	}

	.at-hero__media img,
	.at-hero__media--fill img {
		height: 260px;
		min-height: 0;
	}

	.at-caption {
		padding: 10px 14px;
		font-size: 10.5px;
	}

	.at-caption__scale .at-scalebar {
		display: none;
	}

	/* Caption over credit, both left-aligned, at the narrow width. */
	.at-entry figcaption {
		flex-direction: column;
		gap: 4px;
	}

	.at-entry figcaption .at-figcredit {
		text-align: left;
	}

	/* Article title plate */
	.at-title-plate__body {
		gap: 14px;
		padding: 26px 20px 24px;
	}

	.at-title {
		font-size: 34px;
		line-height: 1.1;
	}

	.at-standfirst {
		font-size: 16.5px;
	}

	.at-byline {
		font-size: 11.5px;
	}

	.at-title-plate__media img {
		height: 240px;
	}

	.at-facts {
		grid-template-columns: 1fr 1fr;
		gap: 0;
		margin: 0 -1px -1px 0;
		padding-top: 0;
		border-top: var( --rule );
	}

	.at-facts > * {
		padding: 14px 16px;
		border-right: var( --rule );
		border-bottom: var( --rule );
	}

	.at-facts__label {
		font-size: 10px;
	}

	.at-facts__value {
		font-size: 19px;
	}

	/* Contents rail becomes its own collapsible plate above the body. */
	.at-aside {
		border-right: 0;
		border-bottom: var( --rule );
		padding: 0;
	}

	.at-aside__inner {
		position: static;
		gap: 0;
	}

	.at-aside__head {
		padding: 12px 16px;
		border-bottom: 0;
		color: var( --ink );
		min-height: 44px;
	}

	.at-toc-block .at-chevron {
		display: block;
	}

	.at-aside__toc {
		border-top: var( --rule );
	}

	.at-toc {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
		margin: 0;
		padding: 4px 16px 12px;
		font-size: 13.5px;
	}

	.at-toc a {
		align-items: center;
		gap: 10px;
		padding: 8px 0;
	}

	.at-toc .at-ring {
		width: 22px;
		height: 22px;
	}

	.at-toc__text {
		padding-top: 0;
	}

	.at-aside__extra {
		padding: 16px;
		border-top: var( --rule );
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.at-content-col {
		padding: 24px 20px 28px;
	}

	.at-entry > p:first-of-type {
		font-size: 18px;
		line-height: 1.55;
		margin-bottom: 24px;
	}

	.at-entry p,
	.at-entry ul,
	.at-entry ol {
		font-size: 17px;
	}

	.at-entry h2 {
		margin-top: 28px;
		font-size: 27px;
	}

	.at-entry h2::before {
		font-size: 10.5px;
		margin-bottom: 8px;
	}

	.at-entry h3 {
		font-size: 21px;
	}

	/* Tables scroll inside their rule, with a fade and a swipe hint. */
	.at-tablewrap {
		border: var( --rule );
	}

	.at-tablewrap .at-entry table,
	.at-tablewrap table {
		border: 0;
		min-width: 520px;
	}

	.at-tablewrap::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 36px;
		background: linear-gradient( 90deg, rgba( 245, 237, 225, 0 ), var( --paper ) );
		pointer-events: none;
	}

	.at-tablewrap.is-end::after {
		opacity: 0;
	}

	.at-tablehint {
		display: block;
	}

	.at-pun {
		grid-template-columns: 1fr;
		margin: 0 0 -1px 0;
	}

	.at-pun__cell {
		border-right: 0;
		border-bottom: var( --rule );
		text-align: left;
	}

	.at-months {
		grid-template-columns: repeat( 6, 1fr );
		margin: 0 -1px -1px 0;
	}

	.at-months > * {
		padding: 14px 0;
		border-bottom: var( --rule );
		font-size: 11px;
	}

	.at-months__legend {
		flex-direction: column;
		gap: 8px;
		padding: 14px 16px;
	}

	.at-archive-hero__body {
		padding: 28px 20px 24px;
	}

	.at-archive-hero__title {
		font-size: 32px;
	}

	.at-pillarcard {
		border-left: 0;
		border-top: var( --rule );
	}

	.at-pillarcard img {
		height: 220px;
	}

	.at-card__media img {
		height: 200px;
	}

	.at-search-hero {
		grid-template-columns: 1fr;
		padding: 24px 20px;
	}

	.at-search-hero__title {
		font-size: 30px;
	}

	.at-result {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 18px 16px;
	}

	.at-result__meta {
		text-align: left;
	}

	.at-404__body {
		padding: 32px 20px;
	}

	.at-404__title {
		font-size: 30px;
	}

	.at-404__side {
		border-left: 0;
		border-top: var( --rule );
	}

	.at-index-col {
		border-right: 0;
	}

	.at-pagebar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.at-footer {
		padding: 0;
	}

	.at-footer__cols {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 24px var( --gutter ) 20px;
	}

	.at-footer__barinner {
		flex-direction: column;
		gap: 8px;
		font-size: 10px;
	}

	.at-footer__barinner > span:last-child {
		text-align: left;
	}
}

.at-tablehint {
	display: none;
	margin: 8px 0 24px;
	font: 500 10.5px/1.4 var( --font-text );
	color: var( --mute );
}

/* --------------------------------------------- 15 registered block styles */

.at-entry .is-style-atlas-fieldnote {
	margin: 0 0 32px;
	padding: 20px 24px;
	border: var( --rule );
	background-color: var( --paper );
	background-image: var( --contour );
	font-style: normal;
}

.at-entry .is-style-atlas-plate {
	padding: 24px;
	border: var( --rule );
	margin-bottom: 32px;
}

.at-entry .is-style-atlas-credits {
	font-size: 12.5px;
	line-height: 1.7;
	color: var( --mute );
}

.at-entry .is-style-atlas-neatline {
	border: var( --rule );
}

.at-entry hr.is-style-atlas-neatline {
	height: 0;
	margin: 32px 0;
	border: 0;
	border-top: var( --rule );
}

/* Core block defaults inside the article column. */
.at-entry .wp-block-image {
	margin: 0 0 32px;
}

.at-entry .wp-block-image img {
	border: var( --rule );
}

.at-entry .alignwide,
.at-entry .alignfull {
	max-width: var( --measure );
	margin-inline: 0;
}

.at-entry .wp-block-button__link {
	border-radius: 0;
}

/* Comments */
.at-commentlist {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.at-commentlist .comment-body {
	padding: 18px 0;
	border-top: var( --rule );
}

.at-commentlist .comment-meta {
	font: 500 12px/1.4 var( --font-text );
	color: var( --mute );
}

.at-comments input[ type="text" ],
.at-comments input[ type="email" ],
.at-comments input[ type="url" ],
.at-comments textarea {
	width: 100%;
	max-width: var( --measure );
	padding: 10px 12px;
	border: var( --rule );
	background: var( --paper );
	color: var( --ink );
	font: 400 15px/1.5 var( --font-text );
}

.at-comments .submit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 13px 18px;
	border: 1px solid var( --ink );
	background: var( --ink );
	color: var( --paper );
	font: 600 13px/1 var( --font-text );
	letter-spacing: .06em;
	cursor: pointer;
}

.at-comments .submit:hover {
	background: var( --lichen );
	border-color: var( --lichen );
}

/* ---------------------------------------------------------------- 16 print */

@media print {
	.at-header,
	.at-footer,
	.at-aside,
	.at-pun,
	.at-drawer,
	.at-skip {
		display: none !important;
	}

	.at-plate {
		border: 0;
		margin: 0;
	}

	.at-body-plate {
		grid-template-columns: 1fr;
	}

	.at-content-col {
		padding: 0;
	}

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