/*
Theme Name: Milev
Theme URI: https://aleksandarmilev.bg
Author: Aleksandar Milev
Description: A minimal black and white theme for an independent fashion designer, built on the typography and layout of Sovereign. Includes a Collections system with its own admin screen. Runs with no plugins at all. Images are shown at their natural proportions - never cropped, never resized by hand.
Version: 9.44.2
Requires at least: 6.0
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: milev
Tags: minimal, black-and-white, portfolio, one-column, custom-menu, custom-logo, featured-images
*/

/* ==========================================================================
   1. Tokens - values taken from Sovereign's compiled CSS
   ========================================================================== */

:root {
	--ink: #151515;
	--body: #999999;
	--paper: #ffffff;
	--wash: #fafafa;
	--rule: #d3d3d3;
	--hair: rgba(206, 206, 206, 0.2);
	--footer-top: #000000;
	--footer-bottom: #000000;
	--veil: rgba(17, 17, 17, 0.94);

	--font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;

	--grid: 1300px;
	--frame: 40px;
	--menu-h: 110px;
	--title-h: 328px;
	--rhythm: 110px;

	--ease: cubic-bezier(0.54, 0.49, 0.24, 0.99);
}

@media (max-width: 1024px) {
	:root {
		--frame: 24px;
		--menu-h: 80px;
		--title-h: 240px;
		--rhythm: 68px;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--menu-h) + 40px);
}

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

body {
	margin: 0;
	font-family: var(--font);
	font-weight: 300;
	font-size: 14px;
	line-height: 26px;
	color: var(--body);
	background-color: var(--paper);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 20px 0;
	color: var(--ink);
	font-family: var(--font);
	font-weight: 700;
}

h1 { font-size: 35px; line-height: 48px; letter-spacing: -0.02em; }
h2 { font-size: 30px; line-height: 44px; letter-spacing: -0.02em; }
h3 { font-size: 25px; line-height: 36px; letter-spacing: -0.02em; }
h4 { font-size: 19px; line-height: 25px; }
h5 { font-size: 16px; line-height: 22px; }
h6 { font-size: 14px; line-height: 24px; }

p {
	margin: 0 0 18px;
}

p:last-child {
	margin-bottom: 0;
}

blockquote {
	margin: 42px 0;
	padding-left: 26px;
	border-left: 3px solid var(--ink);
	color: var(--ink);
	font-size: 19px;
	font-weight: 500;
	line-height: 32px;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--ink);
	color: #fff;
	padding: 12px 22px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.skip-link:focus {
	left: 0;
}

/* ==========================================================================
   3. Grid
   ========================================================================== */

.grid {
	width: 100%;
	max-width: var(--grid);
	margin: 0 auto;
	padding: 0 var(--frame);
}

.grid--narrow {
	max-width: 860px;
}

.section {
	padding: var(--rhythm) 0;
}

.section--tight {
	padding: calc(var(--rhythm) * 0.5) 0;
}

.section--flush-top {
	padding-top: 0;
}

.rule {
	display: block;
	width: 30px;
	height: 0;
	border: 0;
	border-bottom: 3px solid #333333;
	margin: 22px 0 26px;
}

.rule--center {
	margin-left: auto;
	margin-right: auto;
}

.rule--light {
	border-bottom-color: #ffffff;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: auto;
	outline: none;
	font-family: inherit;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0.13em;
	font-weight: 600;
	text-transform: uppercase;
	padding: 12px 52px;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: none;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn--solid {
	color: #fff;
	background-color: var(--ink);
	border: 2px solid transparent;
}

.btn--solid:hover {
	color: var(--ink);
	background-color: transparent;
	border-color: var(--ink);
}

.btn--outline {
	color: var(--ink);
	background-color: transparent;
	border: 2px solid var(--rule);
}

.btn--outline:hover {
	color: #fff;
	background-color: var(--ink);
	border-color: var(--ink);
}

.btn--light {
	color: #fff;
	background-color: transparent;
	border: 2px solid #fff;
}

.btn--light:hover {
	color: var(--ink);
	background-color: #fff;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.header {
	position: relative;
	z-index: 110;
	width: 100%;
}

.header__bar {
	height: var(--menu-h);
	background-color: var(--paper);
	display: flex;
	align-items: center;
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}

.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	min-height: 74px;
	background: var(--paper);
	border-bottom: 1px solid transparent;
	z-index: 120;
	display: flex;
	align-items: center;
	transform: translateY(-100%);
	transition: transform 0.55s var(--ease), background-color 0.55s var(--ease), border-color 0.55s var(--ease);
	will-change: transform;
}

/* The page shows through, blurred, rather than the bar being a solid
   slab laid over it. The hairline at the foot is what separates the two
   once the blur alone stops being enough to read as an edge. */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.sticky {
		background: rgba(255, 255, 255, 0.62);
		-webkit-backdrop-filter: blur(var(--sticky-blur, 20px)) saturate(1.6);
		backdrop-filter: blur(var(--sticky-blur, 20px)) saturate(1.6);
	}

	.sticky.is-visible {
		border-bottom-color: var(--rule);
	}
}

.sticky.is-visible {
	transform: translateY(0);
}

/* Nothing is hidden on a phone any more. The full menu would not fit, so
   the bar carries the name and the button and the menu opens over it. */

.sticky .menu {
	min-width: 0;
}

@media (max-width: 1024px) {
	.sticky .menu {
		display: none;
	}
}

.opener--sticky {
	display: none;
}

@media (max-width: 1024px) {
	.opener--sticky {
		display: block;
	}
}

.admin-bar .sticky {
	top: 32px;
}

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



.logo {
	flex: 0 0 auto;
}

.logo a {
	display: inline-block;
	color: var(--ink);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

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

.logo__tagline {
	display: block;
	margin-top: 7px;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--body);
}

.sticky .logo a {
	font-size: 18px;
}

.sticky .logo__tagline {
	display: none;
}

.menu {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.menu__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu__list > li > a {
	position: relative;
	display: inline-block;
	padding: 0 23px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 23px;
	text-transform: lowercase;
}

.menu__list > li > a::after {
	content: "";
	position: absolute;
	left: 23px;
	right: calc(100% - 23px);
	bottom: -7px;
	height: 2px;
	background: var(--ink);
	transition: right 0.35s var(--ease);
}

.menu__list > li > a:hover::after,
.menu__list > li.current-menu-item > a::after,
.menu__list > li.current_page_item > a::after {
	right: 23px;
}

.tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 22px;
}

.opener {
	background: none;
	border: 0;
	padding: 8px;
	margin: 0;
	cursor: pointer;
	color: var(--ink);
	line-height: 0;
}

.opener span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform 0.3s var(--ease), opacity 0.2s ease;
}

.opener span + span {
	margin-top: 5px;
}

.opener[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.opener[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.opener[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
	.menu {
		display: none;
	}
}

/* ==========================================================================
   6. Fullscreen menu
   ========================================================================== */

.overlay {
	position: fixed;
	inset: 0;
	z-index: 115;
	background-color: #0a0a0a;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s var(--ease), visibility 0s 0.55s;
}

/* The page behind is blurred rather than merely dimmed. Half seen text
   from the form underneath was reading through the veil and turning the
   menu into a double exposure. */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.overlay {
		background-color: rgba(8, 8, 8, var(--menu-veil, 0.55));
		-webkit-backdrop-filter: blur(var(--menu-blur, 30px)) saturate(0.5);
		backdrop-filter: blur(var(--menu-blur, 30px)) saturate(0.5);
	}
}

/* White type over a blurred photograph can land on a pale patch of it,
   so the words carry a shadow of their own rather than relying on the
   veil being dark enough everywhere. */

.overlay__list a,
.overlay__meta {
	text-shadow: 0 1px 26px rgba(0, 0, 0, 0.7);
}

.overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s var(--ease);
}

.overlay__list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.overlay__list li {
	overflow: hidden;
}

/* Set in the serif and large. A menu of six words is the one place on a
   site where the words can be the whole design, and heavy grey sans at
   twenty four pixels wastes that. */

.overlay__list a {
	display: inline-block;
	position: relative;
	margin: 6px 0;
	padding: 2px 6px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	/* Chosen in the panel, but never wider than the screen can carry */
	font-size: min(var(--menu-size, 40px), 11vw);
	line-height: 1.22;
	letter-spacing: 0.01em;
	color: #ffffff;
	border: 0;
	transform: translateY(34px);
	opacity: 0;
	transition: transform 0.75s var(--ease), opacity 0.75s var(--ease), color 0.5s var(--ease);
}

/* They arrive one after another rather than all at once, which is the
   difference between a panel appearing and a page being turned. */

.overlay.is-open .overlay__list a {
	transform: translateY(0);
	opacity: 1;
}

.overlay.is-open .overlay__list li:nth-child(1) a { transition-delay: 0.06s; }
.overlay.is-open .overlay__list li:nth-child(2) a { transition-delay: 0.12s; }
.overlay.is-open .overlay__list li:nth-child(3) a { transition-delay: 0.18s; }
.overlay.is-open .overlay__list li:nth-child(4) a { transition-delay: 0.24s; }
.overlay.is-open .overlay__list li:nth-child(5) a { transition-delay: 0.30s; }
.overlay.is-open .overlay__list li:nth-child(6) a { transition-delay: 0.36s; }
.overlay.is-open .overlay__list li:nth-child(7) a { transition-delay: 0.42s; }

/* A hairline that draws itself from the left, in the pink of the name,
   so the one colour on the site is what marks where you are going. */

.overlay__list a::after {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 6px;
	height: 1px;
	background: var(--mark-ink, #e9a6ac);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--ease);
}

.overlay__list a:hover::after,
.overlay__list a:focus-visible::after,
.overlay__list .current-menu-item a::after {
	transform: scaleX(1);
}

/* Resting on one dims the others, so the eye is left with a single word
   rather than a list. */

.overlay__list:hover a {
	color: rgba(255, 255, 255, 0.38);
}

.overlay__list a:hover,
.overlay__list a:focus-visible {
	color: #ffffff;
}

.overlay__meta {
	margin-top: 52px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.overlay__meta a:hover {
	color: #fff;
}

@media (max-width: 640px) {
	.overlay__list a {
		font-size: min(var(--menu-size-m, 26px), 13vw);
	}

	.overlay__meta {
		margin-top: 36px;
		letter-spacing: 0.24em;
		text-indent: 0.24em;
	}
}

/* A list of six words dimming and lifting is movement for its own sake
   to anyone who has asked for less of it. */

@media (prefers-reduced-motion: reduce) {
	.overlay__list a,
	.overlay__list a::after {
		transition: none;
	}

	.overlay__list:hover a {
		color: #ffffff;
	}
}

/* ==========================================================================
   7. Page title bar
   ========================================================================== */

.masthead {
	position: relative;
	width: 100%;
	height: var(--title-h);
	text-align: center;
	background-color: var(--wash);
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.masthead__veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.32);
}

.masthead__body {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 var(--frame);
}

.masthead__title {
	margin: 0;
	line-height: 48px;
	letter-spacing: 0;
}

.masthead__sub {
	max-width: 620px;
	margin: 14px auto 0;
	font-size: 16px;
	line-height: 28px;
}

.masthead--dark .masthead__title,
.masthead--dark .masthead__sub {
	color: #fff;
}

/* ==========================================================================
   8. Opening screen
   ========================================================================== */

.opening {
	position: relative;
	width: 100%;
	height: var(--opening-h, calc(100vh - var(--menu-h)));
	min-height: 340px;
	max-height: 1100px;
	overflow: hidden;
	background-color: var(--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.opening__media {
	position: absolute;
	inset: 0;
}

.opening__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center var(--opening-focus, 28%);
}

.opening__veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
}

.opening__body {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 900px;
	padding: 0 var(--frame);
}

.opening__title {
	margin: 0;
	color: #fff;
	font-size: 62px;
	line-height: 1.06;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	text-indent: 0.22em;
}

.opening__sub {
	margin: 26px auto 0;
	max-width: 540px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 16px;
	line-height: 28px;
}

.opening__actions {
	margin-top: 40px;
}

/* The whole photograph, at its own proportions. The frame follows the
   picture instead of the picture being padded out to fill the frame,
   so there is never a band of colour above, below or beside it. */

.opening--contain {
	position: relative;
	display: block;
	height: auto;
	min-height: 0;
	max-height: none;
	background: var(--paper);
}

.opening--contain .opening__media {
	position: relative;
	inset: auto;
	display: flex;
	justify-content: center;
	width: 100%;
}

/* The height setting becomes a ceiling on the picture itself. The
   photograph shrinks to meet it and the frame shrinks with it, so
   nothing is cropped and no empty colour is left over. */

.opening--contain .opening__media img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, var(--opening-w, 100%));
	max-height: var(--opening-h, none);
	object-fit: contain;
	margin: 0 auto;
}

.opening--contain .opening__veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.14);
}

.opening--contain .opening__body {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0 var(--frame);
}

/* ------------------------------------------------------------------
   Editorial: the photograph beside the words, both anchored on the
   same baseline. Nothing sits on top of the picture, so a busy image
   stays readable and the type stays legible.
   ------------------------------------------------------------------ */

.opening--editorial {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 84px);
	align-items: end;
	height: auto;
	min-height: 0;
	max-height: none;
	max-width: var(--grid);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 88px) var(--frame) 0;
	background: var(--paper);
	text-align: left;
	overflow: visible;
}

.opening--editorial .opening__media {
	position: static;
	inset: auto;
}

.opening--editorial .opening__media img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.opening--editorial .opening__body {
	position: static;
	width: auto;
	max-width: none;
	padding: 0 0 clamp(8px, 2vw, 34px);
	color: var(--ink);
	text-align: left;
}

/* ------------------------------------------------------------------
   Framed: the photograph centred with white around it and the words
   underneath, the way a plate is laid out in a book.
   ------------------------------------------------------------------ */

.opening--framed {
	display: block;
	height: auto;
	min-height: 0;
	max-height: none;
	max-width: var(--opening-w, 1100px);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 90px) var(--frame) 0;
	background: var(--paper);
	overflow: visible;
}

.opening--framed .opening__media {
	position: static;
	inset: auto;
}

.opening--framed .opening__media img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.opening--framed .opening__body {
	position: static;
	width: auto;
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px) 0 0;
	color: var(--ink);
	text-align: center;
}

/* Type for both editorial layouts */

.opening--editorial .opening__title,
.opening--framed .opening__title {
	font-family: var(--serif);
	font-size: clamp(30px, 4.2vw, 54px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	text-indent: 0;
	text-transform: none;
	color: var(--ink);
}

.opening--editorial .opening__sub,
.opening--framed .opening__sub {
	margin-left: 0;
	margin-right: 0;
	max-width: 40ch;
	color: #5c5c5c;
	font-size: 15px;
	line-height: 27px;
}

.opening--framed .opening__sub {
	margin-left: auto;
	margin-right: auto;
}

.opening--editorial .opening__actions,
.opening--framed .opening__actions {
	margin-top: 30px;
}

@media (max-width: 900px) {
	.opening--editorial {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: start;
	}

	.opening--editorial .opening__body {
		padding-bottom: 0;
	}
}

/* Narrower frame */

.opening--boxed {
	max-width: var(--opening-w, none);
	margin: 40px auto 0;
}

@media (max-width: 900px) {
	.opening--boxed {
		margin-top: 0;
	}
}

.opening--plain {
	height: auto;
	min-height: 0;
	max-height: none;
	background: var(--wash);
	padding: calc(var(--rhythm) * 0.9) 0 calc(var(--rhythm) * 0.9);
	border-bottom: 1px solid #ececec;
}

.opening--plain .opening__title {
	color: var(--ink);
}

.opening--plain .opening__sub {
	color: var(--body);
}

@media (max-width: 1024px) {
	.opening__title {
		font-size: 38px;
		letter-spacing: 0.16em;
		text-indent: 0.16em;
	}
}

@media (max-width: 600px) {
	.opening__title {
		font-size: 25px;
		letter-spacing: 0.12em;
		text-indent: 0.12em;
	}

	.opening__sub {
		font-size: 14px;
	}
}

.scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%);
	z-index: 3;
	color: #fff;
	width: 22px;
	animation: milev-cue 2.4s ease-in-out infinite;
}

@keyframes milev-cue {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 9px); }
}

@media (prefers-reduced-motion: reduce) {
	.scroll-cue {
		animation: none;
	}
}

/* ==========================================================================
   8b. Full-width dark band
   ========================================================================== */

.band {
	position: relative;
	overflow: hidden;
	background-color: #1c1c1c;
	background-size: cover;
	background-position: center center;
	text-align: center;
	padding: 96px 0;
}

.band__veil {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 12, 0.72);
}

.band__body {
	position: relative;
	z-index: 2;
	max-width: 640px;
	margin: 0 auto;
	padding: 0 var(--frame);
}

.band__title {
	margin: 0;
	color: #fff;
	font-size: 30px;
	line-height: 44px;
	letter-spacing: -0.02em;
}

.band__text {
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 28px;
}

.band__actions {
	margin-top: 34px;
}

@media (max-width: 640px) {
	.band {
		padding: 64px 0;
	}

	.band__title {
		font-size: 22px;
		line-height: 32px;
	}
}

/* ==========================================================================
   9. Section headings
   ========================================================================== */

.head {
	max-width: 640px;
}

.head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.head__eyebrow {
	display: block;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--body);
}

.head__title {
	margin: 0 0 14px;
}

.head__text {
	display: block;
	margin: 6px 0 0;
	font-size: 16px;
	line-height: 28px;
	color: var(--body);
}

/* ==========================================================================
   10. Image wall - natural proportions
   ========================================================================== */

.wall {
	columns: 3;
	column-gap: 30px;
}

.wall--calm { columns: 2; }
.wall--wide { columns: 4; }
.wall--four { columns: 4; column-gap: 24px; }

@media (max-width: 1100px) {
	.wall--four { columns: 2; }
}

@media (max-width: 640px) {
	.wall--four { columns: 2; column-gap: 14px; }
}

@media (max-width: 1100px) {
	.wall,
	.wall--wide { columns: 2; }
	.wall--calm { columns: 1; }
}

@media (max-width: 640px) {
	.wall,
	.wall--wide,
	.wall--calm { columns: 1; }
}

.tile {
	break-inside: avoid;
	margin: 0 0 30px;
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--wash);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.tile.is-in {
	opacity: 1;
	transform: translateY(0);
}

.tile__link {
	display: block;
	position: relative;
	cursor: zoom-in;
}

.tile__link img {
	width: 100%;
	height: auto;
	transition: transform 1.2s var(--ease);
}

.tile:hover .tile__link img {
	transform: scale(1.045);
}

.tile__veil {
	position: absolute;
	inset: 0;
	background: rgba(21, 21, 21, 0);
	transition: background-color 0.45s var(--ease);
}

.tile:hover .tile__veil {
	background: rgba(21, 21, 21, 0.32);
}

.tile__text {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 14px);
	z-index: 3;
	width: 100%;
	padding: 0 20px 26px;
	text-align: center;
	opacity: 0;
	transition: all 0.6s var(--ease);
	pointer-events: none;
}

.tile:hover .tile__text {
	opacity: 1;
	transform: translate(-50%, 0);
}

.tile__title {
	display: block;
	margin: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.02em;
}

.tile__note {
	display: block;
	margin: 4px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
	letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
	.tile {
		opacity: 1;
		transform: none;
	}
}

/* Variant with a permanently visible caption - used by Collection */

.tile--open {
	background: transparent;
	overflow: visible;
}

.tile--open .tile__link {
	overflow: hidden;
	display: block;
}

.tile--open .tile__veil,
.tile--open:hover .tile__veil {
	background: rgba(21, 21, 21, 0);
}

.tile--open .tile__text {
	position: static;
	transform: none;
	opacity: 1;
	width: auto;
	padding: 18px 0 0;
	text-align: left;
}

.tile--open:hover .tile__text {
	transform: none;
}

.tile--open .tile__title {
	color: var(--ink);
}

.tile--open .tile__note {
	color: var(--body);
}

/* ==========================================================================
   10b. Collections - editorial index
   ========================================================================== */

.pieces {
	display: grid;
	grid-template-columns: repeat(var(--piece-cols, 2), minmax(0, 1fr));
	gap: 92px 60px;
}

@media (max-width: 1100px) {
	.pieces {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 72px 40px;
	}
}

@media (max-width: 720px) {
	.pieces {
		grid-template-columns: 1fr;
		gap: 64px;
	}
}

.piece__link {
	display: block;
	text-align: center;
}

/* The heads are given a floor so that a one line title and a two line
   title still leave their photographs starting at the same height. The
   text sits at the bottom of that space, against the picture. */

.piece__head {
	margin-bottom: 26px;
	min-height: 116px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Set in the serif, in italic, in the same ink as the title. Small grey
   capitals read as a label pinned above the name; the italic reads as
   part of the same line of thought. */

.piece__season {
	display: block;
	margin-bottom: 10px;
	font-family: var(--serif);
	font-style: italic;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--ink);
	opacity: 0.72;
	transition: opacity 0.4s var(--ease);
}

.piece:hover .piece__season {
	opacity: 1;
}

/* The older setting, for anyone who prefers the label */

.pieces--caps .piece__season {
	font-family: var(--font);
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 1;
	color: var(--body);
}

/* The cards on the Collection page are set the same way, so a name
   reads as the same name whichever page you meet it on. */

.piece__title {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 34px;
	font-weight: 300;
	line-height: 1.22;
	letter-spacing: 0.012em;
	color: var(--ink);
}

@media (max-width: 600px) {
	.piece__title {
		font-size: 27px;
	}

	.piece__season {
		font-size: 14px;
	}

	/* One to a line on a phone, so nothing has to line up with anything */

	.piece__head {
		min-height: 0;
	}
}

.piece__frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--wash);
}

.piece__frame img {
	width: 100%;
	height: auto;
	transition: transform 1.6s var(--ease), filter 1.2s var(--ease);
}

/* Fixed height cards: the frame sets the shape, the photograph fills it */

.pieces--fixed .piece__frame {
	aspect-ratio: var(--piece-ratio, 3 / 4);
}

.pieces--fixed .piece__frame img {
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.pieces--fixed .piece__blank {
	padding-top: 0;
	height: 100%;
}

.piece__blank {
	display: block;
	width: 100%;
	padding-top: 128%;
	background: var(--wash);
}

.piece:hover .piece__frame img {
	transform: scale(1.06);
}

.piece__veil {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0);
	transition: background-color 0.7s var(--ease);
}

.piece:hover .piece__veil {
	background: rgba(10, 10, 10, 0.34);
}

/* Read more - rises from below with a hairline drawn above it */

.piece__cta {
	position: absolute;
	left: 50%;
	bottom: 44px;
	transform: translate(-50%, 18px);
	z-index: 3;
	opacity: 0;
	transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}

.piece:hover .piece__cta {
	opacity: 1;
	transform: translate(-50%, 0);
}

.piece__cta-line {
	display: block;
	width: 0;
	height: 1px;
	margin: 0 auto 14px;
	background: #fff;
	transition: width 0.8s var(--ease) 0.1s;
}

.piece:hover .piece__cta-line {
	width: 54px;
}

.piece__cta-text {
	display: block;
	color: #fff;
	font-family: var(--font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-indent: 0.28em;
	white-space: nowrap;
}

.piece__intro {
	max-width: 44ch;
	margin: 24px auto 0;
	font-size: 14px;
	line-height: 26px;
	color: var(--body);
}

/* ==========================================================================
   10c. Collections - single
   ========================================================================== */

.cover {
	position: relative;
	width: 100%;
	background-color: var(--wash);
	overflow: hidden;
}

/* The whole photograph, nothing cut away. It is held inside the screen
   by a height limit, so a tall portrait does not fill three screens. */

.cover--natural .cover__media {
	display: flex;
	justify-content: center;
	padding: 46px var(--frame) 0;
	background: var(--paper);
}

.cover--natural .cover__media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--cover-max, 70vh);
}

/* Edge to edge instead, for photographs shot wide on purpose. */

.cover--natural.cover--wide .cover__media {
	padding: 0;
}

.cover--natural.cover--wide .cover__media img {
	width: 100%;
	max-height: none;
}

.cover--natural .cover__body {
	padding: 44px var(--frame) 0;
	text-align: center;
	background: var(--paper);
}

@media (max-width: 700px) {
	.cover--natural .cover__media {
		padding: 26px var(--frame) 0;
	}

	.cover--natural .cover__media img {
		max-height: 58vh;
	}
}

/* Cover with a strip of thumbnails beside or under it */

.cover__media--with-strip {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.cover__media--right { flex-direction: row; }
.cover__media--left { flex-direction: row-reverse; }
.cover__media--below { flex-direction: column; }

.cover__main {
	min-width: 0;
}

.cover__media--with-strip .cover__main img {
	max-height: var(--cover-max, 70vh);
	width: auto;
	height: auto;
	max-width: 100%;
}

.shots {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.cover__media--right .shots,
.cover__media--left .shots {
	flex-direction: column;
	max-height: var(--cover-max, 70vh);
	overflow-y: auto;
}

.cover__media--below .shots {
	flex-direction: row;
	flex-wrap: wrap;
}

.shot {
	width: var(--shot-size, 90px);
	height: var(--shot-size, 90px);
	padding: 0;
	border: 0;
	background: var(--wash);
	cursor: pointer;
	overflow: hidden;
	position: relative;
	opacity: 0.5;
	transition: opacity 0.4s var(--ease);
	flex-shrink: 0;
}

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

.shot:hover,
.shot.is-on {
	opacity: 1;
}

.shot.is-on::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--ink);
}

.cover--dark .shot.is-on::after {
	border-color: #ffffff;
}

.cover__photo {
	transition: opacity 0.35s ease;
}

.cover__photo.is-fading {
	opacity: 0;
}

@media (max-width: 700px) {
	.cover__media--with-strip {
		flex-direction: column;
	}

	.cover__media--with-strip .shots {
		flex-direction: row;
		flex-wrap: wrap;
		max-height: none;
		overflow: visible;
		justify-content: center;
	}
}

/* Photograph on the left, the words beside it. */

.cover--side {
	display: grid;
	grid-template-columns: var(--cover-cols, minmax(0, 7fr) minmax(0, 5fr));
	gap: var(--cover-gap, 90px);
	align-items: stretch;
	padding: var(--cover-pad, 72px) var(--frame);
	background: var(--paper);
}

.cover--side .cover__media {
	display: flex;
	justify-content: var(--media-x, start);
	align-items: center;
}

.cover--side.cover--swap .cover__media {
	order: 2;
}

.cover--side.cover--swap .cover__body {
	order: 1;
}

.cover--side .cover__media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--cover-max, 70vh);
}

.cover--side .cover__body {
	max-width: var(--body-w, 400px);
	width: 100%;
	margin: 0;
	text-align: var(--body-text, left);
	justify-self: var(--body-x, start);
	align-self: var(--body-y, center);
}

.cover--side .cover__rule {
	margin-left: 0;
	margin-right: auto;
}

.cover--side[style*="--body-text:center"] .cover__rule {
	margin-left: auto;
	margin-right: auto;
}

.cover--side[style*="--body-text:right"] .cover__rule {
	margin-left: auto;
	margin-right: 0;
}

.cover--side .cover__title {
	font-size: 46px;
	line-height: 1.14;
}

.cover--side .cover__season {
	margin-bottom: 16px;
}

.cover--side .cover__note {
	margin-top: 16px;
}

/* Hairline between the naming and the introduction */

.cover__rule {
	display: block;
	width: 34px;
	height: 0;
	border-bottom: 2px solid var(--ink);
	margin: 30px 0 26px;
}

.cover--dark .cover__rule {
	border-bottom-color: #ffffff;
}

.cover__lede {
	margin: 0;
	font-size: 15px;
	line-height: 28px;
	color: #6f6f6f;
	max-width: 38ch;
}

.cover--dark .cover__lede {
	color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 900px) {
	.cover--side {
		grid-template-columns: 1fr;
		gap: 34px;
		padding: 40px var(--frame);
	}

	.cover--side .cover__media,
	.cover--side.cover--swap .cover__media {
		order: 0;
		justify-content: center;
	}

	.cover--side.cover--swap .cover__body {
		order: 0;
	}

	.cover--side .cover__body {
		justify-self: center;
		align-self: auto;
		text-align: center;
		max-width: none;
	}

	.cover--side .cover__body {
		text-align: center;
		max-width: none;
		margin: 0 auto;
	}

	.cover--side .cover__title {
		font-size: 34px;
	}

	.cover--side .cover__rule {
		margin-left: auto;
		margin-right: auto;
	}

	.cover--side .cover__lede {
		max-width: none;
	}

	.cover--side .cover__media img {
		margin: 0 auto;
		max-height: 58vh;
	}
}

/* A band across the page, and a full screen version. Both crop. */

.cover--band,
.cover--full,
.cover--plain {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 90px var(--frame);
}

.cover--band { min-height: 460px; }
.cover--full { min-height: 82vh; }
.cover--plain { min-height: 360px; }

.cover--band .cover__media,
.cover--full .cover__media {
	position: absolute;
	inset: 0;
}

.cover--band .cover__media img,
.cover--full .cover__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.cover__veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.38);
}

.cover__body {
	position: relative;
	z-index: 2;
	max-width: 820px;
	margin: 0 auto;
}

.cover__season {
	display: block;
	margin-bottom: 22px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-indent: 0.28em;
	color: #6f6f6f;
}

.cover__title {
	margin: 0;
	font-family: var(--serif);
	font-size: 68px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--ink);
}

.cover__note {
	display: block;
	margin-top: 22px;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: #6f6f6f;
}

/* Dark variant of the uncropped layouts */

.cover--dark,
.cover--dark.cover--side,
.cover--dark.cover--natural .cover__media,
.cover--dark.cover--natural .cover__body {
	background: #0b0b0b;
}

.cover--dark .cover__title {
	color: #ffffff;
}

.cover--dark .cover__season,
.cover--dark .cover__note {
	color: rgba(255, 255, 255, 0.68);
}

.cover--band .cover__title,
.cover--full .cover__title {
	color: #fff;
}

.cover--band .cover__season,
.cover--band .cover__note,
.cover--full .cover__season,
.cover--full .cover__note {
	color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 900px) {
	.cover__title { font-size: 42px; }
	.cover--full { min-height: 62vh; }
}

@media (max-width: 600px) {
	.cover__title { font-size: 32px; }
}

.lede {
	max-width: 46ch;
	margin: 0 auto;
	font-family: var(--serif);
	font-size: 24px;
	line-height: 1.5;
	color: var(--ink);
}

.jump {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 34px;
	justify-content: center;
}

.jump a {
	font-family: var(--serif);
	font-size: 22px;
	color: var(--ink);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease);
}

.jump a:hover {
	border-bottom-color: var(--ink);
}

/* ==========================================================================
   11. Runway - the run of photographs on a collection page
   ========================================================================== */

.runway {
	display: grid;
	grid-template-columns: repeat(var(--runway-cols, 3), minmax(0, 1fr));
	gap: var(--runway-gap, 2px);
	background: transparent;
}

.runway--dark {
	background: #000000;
	padding: var(--runway-gap, 2px);
}

.runway__frame {
	position: relative;
	display: block;
	overflow: hidden;
	background: #0a0a0a;
	cursor: zoom-in;
}

.runway:not(.runway--natural):not(.runway--contain) .runway__frame {
	aspect-ratio: var(--runway-ratio, 2 / 3);
}

/* Everything on one line. The frames take their size from the
   proportion above, so the row stays even on any screen. */

.runway--row {
	height: auto;
}

.runway--row .runway__frame {
	min-width: 0;
}

.runway--row .runway__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

.runway:not(.runway--natural) .runway__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	transition: transform 1.4s var(--ease), opacity 0.5s var(--ease);
}

/* Only the photograph under the cursor moves. Nothing dims. */

.runway--natural .runway__frame img {
	width: 100%;
	height: auto;
	transition: transform 1.4s var(--ease), opacity 0.5s var(--ease);
}

.runway__frame:hover img {
	transform: scale(1.035);
}

.runway__num {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 2;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.72);
	mix-blend-mode: difference;
	pointer-events: none;
}

/* Held inside the page rather than running to the edges, the way a
   magazine sets a row of plates. */

.runway--boxed {
	max-width: var(--runway-max, var(--grid));
	margin: 0 auto;
	padding: 0 var(--frame);
}

/* Room above the row, so the photographs can sit lower on the page */

.runway {
	margin-top: var(--runway-top, 0);
}

/* The whole photograph, sized by height, with white around it */

.runway--contain,
.runway--contain.runway--row {
	height: auto;
	align-items: end;
	background: transparent;
	padding: 0;
}

.runway--contain .runway__frame,
.runway--contain.runway--row .runway__frame {
	aspect-ratio: auto;
	height: auto;
	background: transparent;
	overflow: visible;
}

.runway--contain .runway__frame img,
.runway--contain.runway--row .runway__frame img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--runway-height, 70vh);
	object-fit: contain;
	margin: 0 auto;
}

.runway--contain .runway__frame:hover img {
	transform: scale(1.025);
}

.runway--contain .runway__num {
	color: var(--body);
	mix-blend-mode: normal;
	top: -22px;
	right: 0;
}

/* The dividers between looks. Each one takes the whole width, which
   pushes the photograph after it onto a fresh line and keeps every
   look starting at the left edge. */

.runway__look {
	grid-column: 1 / -1;
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid var(--rule);
	text-align: center;
}

.runway--looks .runway__look:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.runway__look-name {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
}

.runway__look-text {
	max-width: 46em;
	margin: 10px auto 0;
	font-size: 13px;
	line-height: 1.75;
	color: var(--body);
}

.runway__look-name + .runway__look-text {
	margin-top: 8px;
}

/* Inside a dark run the rule and the label have to lift off the black */

.runway--dark .runway__look {
	border-top-color: rgba(255, 255, 255, 0.22);
}

.runway--dark .runway__look-name {
	color: #ffffff;
}

.runway--dark .runway__look-text {
	color: rgba(255, 255, 255, 0.68);
}

/* The line under each plate */

.runway__cap {
	display: block;
	padding: 16px 6px 0;
	text-align: center;
}

.runway__name {
	display: block;
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.35;
	color: var(--ink);
}

.runway__note {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--body);
}

@media (max-width: 900px) {
	.runway {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.runway--row {
		height: auto;
	}

	.runway--row .runway__frame {
		height: auto;
		aspect-ratio: 2 / 3;
	}
}

@media (max-width: 560px) {
	.runway {
		grid-template-columns: 1fr;
	}
}

/* The closing block wants room between it and the photographs above */

.closing {
	padding-top: calc(var(--rhythm) * 1.25);
}

/* When the naming leads, it needs less air under it than above */

.section--naming-top {
	padding-bottom: calc(var(--rhythm) * 0.35);
}

/* The naming block, when it sits with the photographs */

.naming {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.naming__season {
	display: block;
	margin-bottom: 20px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-indent: 0.28em;
	color: #6f6f6f;
}

/* In the same hand as the writing beside the photographs and the line
   under the name on the front page: the serif, in italic, light. Upright
   at four hundred it read as a heading in a document. */

.naming__title {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(38px, 5vw, 62px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: 0.012em;
	color: var(--ink);
}

.naming__note {
	display: block;
	margin-top: 18px;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: #6f6f6f;
}

.naming__lede {
	margin: 0 auto;
	max-width: 46ch;
	font-family: var(--serif);
	font-size: 22px;
	line-height: 1.5;
	color: var(--ink);
}

@media (max-width: 700px) {
	.naming__title { font-size: 34px; }
	.naming__lede { font-size: 18px; }
}

/* ==========================================================================
   11b. Viewer
   ========================================================================== */

.viewer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #000000;
	display: none;
	grid-template-columns: minmax(0, 1fr) 340px;
	grid-template-rows: minmax(0, 1fr);
	align-items: stretch;
	gap: 48px;
	padding: 46px 56px;
}

.viewer.is-open {
	display: grid;
}

/* The admin bar covers the top of the screen, so the middle of the
   window is not the middle of what you can actually see. */

.admin-bar .viewer {
	top: 32px;
}

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

/* Plain: the photograph on its own, no panel beside it, and the page
   behind it blurred rather than blacked out. */

.viewer--plain {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	place-items: center;
	padding: 46px;
	background: rgba(255, 255, 255, 0.78);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.viewer--plain {
		background: rgba(255, 255, 255, 0.42);
		-webkit-backdrop-filter: blur(var(--viewer-blur, 22px)) saturate(1.05);
		backdrop-filter: blur(var(--viewer-blur, 22px)) saturate(1.05);
	}

	.viewer--plain.viewer--dim {
		background: rgba(12, 12, 12, 0.52);
	}

	/* Drained as well as darkened. A dark photograph cannot stand out
	   against a dark page unless the page gives up its colour, so the
	   backdrop goes nearly monochrome and the photograph keeps its own. */

	.viewer--plain.viewer--ink {
		background: rgba(8, 8, 8, 0.66);
		-webkit-backdrop-filter: blur(var(--viewer-blur, 22px)) saturate(0.12) brightness(0.5);
		backdrop-filter: blur(var(--viewer-blur, 22px)) saturate(0.12) brightness(0.5);
	}
}

.viewer--plain.viewer--dim {
	background: rgba(12, 12, 12, 0.86);
}

.viewer--plain.viewer--ink {
	background: rgba(8, 8, 8, 0.93);
}

/* A rim of light around the photograph, so its own dark edges do not
   dissolve into the backdrop, and a deep shadow to lift it forward. */

.viewer--plain.viewer--ink .viewer__stage img,
.viewer--plain.viewer--dim .viewer__stage img {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.14),
		0 40px 120px rgba(0, 0, 0, 0.75);
}

.viewer--plain.viewer--ink .viewer__close {
	color: rgba(255, 255, 255, 0.7);
}

.viewer--plain.viewer--ink .viewer__close:hover {
	color: #ffffff;
}

.viewer--plain .viewer__side {
	display: none;
}

.viewer--plain .viewer__stage {
	width: 100%;
	height: 100%;
}

.viewer--plain .viewer__stage img {
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
}

.viewer--plain .viewer__close {
	color: rgba(21, 21, 21, 0.55);
}

.viewer--plain .viewer__close:hover {
	color: var(--ink);
}

.viewer--plain.viewer--dim .viewer__close {
	color: rgba(255, 255, 255, 0.7);
}

.viewer--plain.viewer--dim .viewer__close:hover {
	color: #ffffff;
}

.viewer__close {
	position: absolute;
	top: 24px;
	right: 28px;
	z-index: 3;
	background: none;
	border: 0;
	padding: 12px;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	line-height: 0;
	transition: color 0.25s ease;
}

.viewer__close:hover {
	color: #ffffff;
}

/* The photograph, held inside the screen */

.viewer__stage {
	margin: 0;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.viewer__stage img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: opacity 0.35s ease;
}

.viewer__stage img.is-fading {
	opacity: 0;
}

/* The words beside it */

.viewer__side {
	align-self: center;
	min-width: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.viewer__nav {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: -10px;
}

.viewer__nav button {
	background: none;
	border: 0;
	padding: 10px;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	line-height: 0;
	transition: color 0.25s ease;
}

.viewer__nav button:hover {
	color: #ffffff;
}

.viewer__num {
	font-family: var(--serif);
	font-size: 28px;
	color: #ffffff;
	min-width: 46px;
	text-align: center;
}

.viewer__toggle {
	margin-top: 18px;
	background: none;
	border: 0;
	padding: 8px 0;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-indent: 0.24em;
	cursor: pointer;
	transition: color 0.25s ease;
}

.viewer__toggle:hover,
.viewer__toggle.is-on {
	color: #ffffff;
}

.viewer__info {
	margin-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 20px;
	max-width: 300px;
}

.viewer__title {
	margin: 0 0 10px;
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.28;
	color: #ffffff;
}

.viewer__text {
	margin: 0;
	font-size: 13px;
	line-height: 24px;
	color: rgba(255, 255, 255, 0.62);
}

.viewer__count {
	margin-top: 34px;
	font-size: 12px;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.42);
}

.viewer__slash {
	margin: 0 6px;
}

@media (max-width: 1024px) {
	.viewer {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 1fr) auto;
		gap: 22px;
		padding: 64px 20px 26px;
	}

	.viewer__side {
		align-self: end;
		align-items: center;
		width: 100%;
		text-align: center;
	}

	.viewer__nav {
		margin-left: 0;
	}

	.viewer__info {
		max-width: none;
	}

	.viewer__count {
		margin-top: 18px;
	}
}

/* The opening statement on the home page */

.statement {
	font-family: var(--serif);
	font-weight: 400;
	color: var(--ink);
	letter-spacing: 0;
}

.statement--center {
	max-width: 30ch;
	margin: 0 auto;
	text-align: center;
}

.statement--left {
	max-width: 34ch;
	margin: 0;
	text-align: left;
}

.statement p {
	margin: 0 0 0.7em;
}

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

/* The first line carries the weight, the rest settles under it */

.statement p:first-child {
	font-size: 1em;
}

.statement p + p {
	font-size: 0.62em;
	line-height: 1.6;
	font-family: var(--font);
	font-weight: 300;
	color: #5c5c5c;
	max-width: 46ch;
	margin-top: 1.6em;
}

.statement--center p + p {
	margin-left: auto;
	margin-right: auto;
}

.statement--small { font-size: 26px; line-height: 1.42; }
.statement--medium { font-size: 34px; line-height: 1.34; }
.statement--large { font-size: 44px; line-height: 1.24; }

@media (max-width: 900px) {
	.statement--small { font-size: 22px; }
	.statement--medium { font-size: 26px; }
	.statement--large { font-size: 30px; }

	.statement--center,
	.statement--left {
		max-width: none;
	}
}

/* ==========================================================================
   11d. Editorial spread - photographs of differing sizes, staggered
   ========================================================================== */

.spread {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--spread-gap, 40px);
	row-gap: calc(var(--spread-gap, 40px) * 1.6);
	align-items: start;
}

.spread__item {
	margin: 0;
	min-width: 0;
}

.spread__link {
	display: block;
	overflow: hidden;
	background: var(--wash);
	cursor: zoom-in;
}

.spread__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.4s var(--ease);
}

.spread__item:hover .spread__link img {
	transform: scale(1.035);
}

/* ------------------------------------------------------------------
   The arrangements. Each is a repeating cycle, so any number of
   photographs keeps its rhythm.
   ------------------------------------------------------------------ */

/* Staggered: four shapes, each dropping a different distance */

.spread--stagger .spread__item:nth-child(4n + 1) { grid-column: 1 / span 6; }
.spread--stagger .spread__item:nth-child(4n + 1) .spread__link { aspect-ratio: 4 / 5; }

.spread--stagger .spread__item:nth-child(4n + 2) {
	grid-column: 8 / span 5;
	margin-top: var(--spread-step, 120px);
}
.spread--stagger .spread__item:nth-child(4n + 2) .spread__link { aspect-ratio: 3 / 4; }

.spread--stagger .spread__item:nth-child(4n + 3) { grid-column: 3 / span 4; }
.spread--stagger .spread__item:nth-child(4n + 3) .spread__link { aspect-ratio: 2 / 3; }

.spread--stagger .spread__item:nth-child(4n + 4) {
	grid-column: 8 / span 5;
	margin-top: calc(var(--spread-step, 120px) * 0.45);
}
.spread--stagger .spread__item:nth-child(4n + 4) .spread__link { aspect-ratio: 1 / 1; }

/* Diagonal: a staircase walking across and down the page */

.spread--diagonal .spread__item:nth-child(3n + 1) { grid-column: 1 / span 6; }
.spread--diagonal .spread__item:nth-child(3n + 1) .spread__link { aspect-ratio: 3 / 4; }

.spread--diagonal .spread__item:nth-child(3n + 2) {
	grid-column: 4 / span 6;
	margin-top: calc(var(--spread-step, 120px) * -0.35);
}
.spread--diagonal .spread__item:nth-child(3n + 2) .spread__link { aspect-ratio: 4 / 5; }

.spread--diagonal .spread__item:nth-child(3n + 3) {
	grid-column: 7 / span 6;
	margin-top: calc(var(--spread-step, 120px) * -0.35);
}
.spread--diagonal .spread__item:nth-child(3n + 3) .spread__link { aspect-ratio: 3 / 4; }

/* Drift: two uneven columns, the narrow one carried far down */

.spread--drift .spread__item:nth-child(4n + 1) { grid-column: 1 / span 7; }
.spread--drift .spread__item:nth-child(4n + 1) .spread__link { aspect-ratio: 3 / 4; }

.spread--drift .spread__item:nth-child(4n + 2) {
	grid-column: 9 / span 4;
	margin-top: calc(var(--spread-step, 120px) * 1.4);
}
.spread--drift .spread__item:nth-child(4n + 2) .spread__link { aspect-ratio: 2 / 3; }

.spread--drift .spread__item:nth-child(4n + 3) {
	grid-column: 2 / span 4;
	margin-top: calc(var(--spread-step, 120px) * -0.3);
}
.spread--drift .spread__item:nth-child(4n + 3) .spread__link { aspect-ratio: 1 / 1; }

.spread--drift .spread__item:nth-child(4n + 4) {
	grid-column: 7 / span 6;
	margin-top: calc(var(--spread-step, 120px) * 0.2);
}
.spread--drift .spread__item:nth-child(4n + 4) .spread__link { aspect-ratio: 4 / 5; }

/* Anchor: one photograph holds the page, the others gather beside it */

.spread--anchor .spread__item:nth-child(4n + 1) { grid-column: 1 / span 8; }
.spread--anchor .spread__item:nth-child(4n + 1) .spread__link { aspect-ratio: 4 / 5; }

.spread--anchor .spread__item:nth-child(4n + 2) {
	grid-column: 10 / span 3;
	margin-top: var(--spread-step, 120px);
}
.spread--anchor .spread__item:nth-child(4n + 2) .spread__link { aspect-ratio: 2 / 3; }

.spread--anchor .spread__item:nth-child(4n + 3) {
	grid-column: 10 / span 3;
	margin-top: calc(var(--spread-gap, 40px) * -1);
}
.spread--anchor .spread__item:nth-child(4n + 3) .spread__link { aspect-ratio: 1 / 1; }

.spread--anchor .spread__item:nth-child(4n + 4) {
	grid-column: 2 / span 6;
	margin-top: calc(var(--spread-step, 120px) * 0.3);
}
.spread--anchor .spread__item:nth-child(4n + 4) .spread__link { aspect-ratio: 3 / 4; }

/* Overlap: the photographs layer over one another */

.spread--overlap .spread__item:nth-child(3n + 1) {
	grid-column: 1 / span 7;
	z-index: 1;
}
.spread--overlap .spread__item:nth-child(3n + 1) .spread__link { aspect-ratio: 3 / 4; }

.spread--overlap .spread__item:nth-child(3n + 2) {
	grid-column: 6 / span 6;
	margin-top: calc(var(--spread-step, 120px) * -0.55);
	z-index: 3;
}
.spread--overlap .spread__item:nth-child(3n + 2) .spread__link { aspect-ratio: 2 / 3; }

.spread--overlap .spread__item:nth-child(3n + 3) {
	grid-column: 3 / span 5;
	margin-top: calc(var(--spread-step, 120px) * -0.4);
	z-index: 2;
}
.spread--overlap .spread__item:nth-child(3n + 3) .spread__link { aspect-ratio: 1 / 1; }

/* A hairline of paper around each one, so the layers read as layers */

.spread--overlap .spread__link {
	box-shadow: 0 0 0 12px var(--paper), 0 24px 60px rgba(0, 0, 0, 0.12);
}

/* Breakout: a photograph across the whole screen, then one held in */

.spread--breakout .spread__item:nth-child(odd) {
	grid-column: 1 / -1;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.spread--breakout .spread__item:nth-child(odd) .spread__link { aspect-ratio: 21 / 9; }

.spread--breakout .spread__item:nth-child(4n + 2) {
	grid-column: 8 / span 4;
	margin-top: calc(var(--spread-step, 120px) * 0.2);
}
.spread--breakout .spread__item:nth-child(4n + 2) .spread__link { aspect-ratio: 3 / 4; }

.spread--breakout .spread__item:nth-child(4n + 4) {
	grid-column: 2 / span 4;
	margin-top: calc(var(--spread-step, 120px) * 0.2);
}
.spread--breakout .spread__item:nth-child(4n + 4) .spread__link { aspect-ratio: 3 / 4; }

.spread--breakout .spread__item:nth-child(odd) .spread__cap {
	max-width: var(--grid);
	margin: 0 auto;
	padding-left: var(--frame);
	padding-right: var(--frame);
}

/* The statement standing in the grid, filling space the photographs
   leave open instead of taking a screen of its own */

.spread__text {
	align-self: center;
	padding: 20px 0;
}

.spread__text--right {
	grid-column: 8 / span 5;
}

.spread__text--left {
	grid-column: 1 / span 5;
}

.spread__text .statement {
	max-width: none;
}

.spread__text .statement--center {
	margin: 0;
	text-align: left;
}

/* Inside a column it has to come down a size or two to fit */

.spread__text .statement--large { font-size: 30px; }
.spread__text .statement--medium { font-size: 25px; }
.spread__text .statement--small { font-size: 21px; }

.spread__text .statement p + p {
	font-size: 0.6em;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 860px) {
	.spread__text {
		padding: 0;
	}

	.spread__text .statement--large { font-size: 26px; }
}

/* Less air, or more, around the statement when it stands alone */

.section--roomy {
	padding-top: calc(var(--rhythm) * 1.7);
	padding-bottom: calc(var(--rhythm) * 1.7);
}

/* A single photograph should not sit off to one side */

.spread__item:first-child:last-child {
	grid-column: 3 / span 8;
	margin-top: 0;
}

.spread__cap {
	display: block;
	padding: 16px 2px 0;
}

.spread__name {
	display: block;
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.35;
	color: var(--ink);
}

.spread__note {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--body);
}

@media (max-width: 860px) {
	.spread {
		grid-template-columns: 1fr;
		row-gap: var(--spread-gap, 40px);
	}

	.spread .spread__item {
		grid-column: 1 / -1 !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		width: auto !important;
		z-index: auto !important;
	}

	.spread--overlap .spread__link {
		box-shadow: none;
	}
}

/* ==========================================================================
   11c. Press
   ========================================================================== */

.press-band {
	background: var(--paper);
}

.press-band--wash {
	background: var(--wash);
}

/* A hairline across the page under the heading, the way a magazine
   opens a section */

.press-head {
	text-align: center;
	padding-bottom: 22px;
	border-bottom: 1px solid #e6e6e6;
	margin-bottom: 54px;
}

.press-head__label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-indent: 0.22em;
	color: var(--ink);
}

.press {
	display: grid;
	grid-template-columns: repeat(var(--press-cols, 3), minmax(0, 1fr));
	gap: 54px 36px;
}

@media (max-width: 900px) {
	.press {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
	}
}

@media (max-width: 560px) {
	.press {
		grid-template-columns: 1fr;
	}
}

/* No card, no border. The photograph sits on the paper and the words
   line up under its left edge. */

.press__item {
	display: block;
	background: transparent;
}

.press__frame {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--ink);
}

.press__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease), opacity 0.5s var(--ease);
}

.press__item:hover .press__frame img {
	transform: scale(1.04);
}

.press__blank {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	color: #ffffff;
	font-family: var(--serif);
	font-size: 22px;
	line-height: 1.3;
}

.press__body {
	display: block;
	padding: 20px 0 0;
}

.press__source {
	display: block;
	margin-bottom: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-indent: 0.22em;
	color: #3f3f3f;
}

.press__title {
	display: block;
	font-family: var(--serif);
	font-size: 23px;
	font-weight: 500;
	line-height: 1.26;
	color: var(--ink);
}

.press__note {
	display: block;
	margin-top: 9px;
	font-size: 13px;
	line-height: 21px;
	color: #5c5c5c;
}

.press__go {
	display: inline-block;
	margin-top: 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-indent: 0.2em;
	color: var(--ink);
	border-bottom: 1px solid transparent;
	padding-bottom: 3px;
	transition: border-color 0.4s var(--ease);
}

.press__item:hover .press__go {
	border-bottom-color: var(--ink);
}

/* ==========================================================================
   11d. Editorial spread - photographs of differing sizes, staggered
   ========================================================================== */

.spread {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--spread-gap, 40px);
	row-gap: calc(var(--spread-gap, 40px) * 1.6);
	align-items: start;
}

.spread__item {
	margin: 0;
	min-width: 0;
}

.spread__link {
	display: block;
	overflow: hidden;
	background: var(--wash);
	cursor: zoom-in;
}

.spread__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.4s var(--ease);
}

.spread__item:hover .spread__link img {
	transform: scale(1.035);
}

/* ------------------------------------------------------------------
   The arrangements. Each is a repeating cycle, so any number of
   photographs keeps its rhythm.
   ------------------------------------------------------------------ */

/* Staggered: four shapes, each dropping a different distance */

.spread--stagger .spread__item:nth-child(4n + 1) { grid-column: 1 / span 6; }
.spread--stagger .spread__item:nth-child(4n + 1) .spread__link { aspect-ratio: 4 / 5; }

.spread--stagger .spread__item:nth-child(4n + 2) {
	grid-column: 8 / span 5;
	margin-top: var(--spread-step, 120px);
}
.spread--stagger .spread__item:nth-child(4n + 2) .spread__link { aspect-ratio: 3 / 4; }

.spread--stagger .spread__item:nth-child(4n + 3) { grid-column: 3 / span 4; }
.spread--stagger .spread__item:nth-child(4n + 3) .spread__link { aspect-ratio: 2 / 3; }

.spread--stagger .spread__item:nth-child(4n + 4) {
	grid-column: 8 / span 5;
	margin-top: calc(var(--spread-step, 120px) * 0.45);
}
.spread--stagger .spread__item:nth-child(4n + 4) .spread__link { aspect-ratio: 1 / 1; }

/* Diagonal: a staircase walking across and down the page */

.spread--diagonal .spread__item:nth-child(3n + 1) { grid-column: 1 / span 6; }
.spread--diagonal .spread__item:nth-child(3n + 1) .spread__link { aspect-ratio: 3 / 4; }

.spread--diagonal .spread__item:nth-child(3n + 2) {
	grid-column: 4 / span 6;
	margin-top: calc(var(--spread-step, 120px) * -0.35);
}
.spread--diagonal .spread__item:nth-child(3n + 2) .spread__link { aspect-ratio: 4 / 5; }

.spread--diagonal .spread__item:nth-child(3n + 3) {
	grid-column: 7 / span 6;
	margin-top: calc(var(--spread-step, 120px) * -0.35);
}
.spread--diagonal .spread__item:nth-child(3n + 3) .spread__link { aspect-ratio: 3 / 4; }

/* Drift: two uneven columns, the narrow one carried far down */

.spread--drift .spread__item:nth-child(4n + 1) { grid-column: 1 / span 7; }
.spread--drift .spread__item:nth-child(4n + 1) .spread__link { aspect-ratio: 3 / 4; }

.spread--drift .spread__item:nth-child(4n + 2) {
	grid-column: 9 / span 4;
	margin-top: calc(var(--spread-step, 120px) * 1.4);
}
.spread--drift .spread__item:nth-child(4n + 2) .spread__link { aspect-ratio: 2 / 3; }

.spread--drift .spread__item:nth-child(4n + 3) {
	grid-column: 2 / span 4;
	margin-top: calc(var(--spread-step, 120px) * -0.3);
}
.spread--drift .spread__item:nth-child(4n + 3) .spread__link { aspect-ratio: 1 / 1; }

.spread--drift .spread__item:nth-child(4n + 4) {
	grid-column: 7 / span 6;
	margin-top: calc(var(--spread-step, 120px) * 0.2);
}
.spread--drift .spread__item:nth-child(4n + 4) .spread__link { aspect-ratio: 4 / 5; }

/* Anchor: one photograph holds the page, the others gather beside it */

.spread--anchor .spread__item:nth-child(4n + 1) { grid-column: 1 / span 8; }
.spread--anchor .spread__item:nth-child(4n + 1) .spread__link { aspect-ratio: 4 / 5; }

.spread--anchor .spread__item:nth-child(4n + 2) {
	grid-column: 10 / span 3;
	margin-top: var(--spread-step, 120px);
}
.spread--anchor .spread__item:nth-child(4n + 2) .spread__link { aspect-ratio: 2 / 3; }

.spread--anchor .spread__item:nth-child(4n + 3) {
	grid-column: 10 / span 3;
	margin-top: calc(var(--spread-gap, 40px) * -1);
}
.spread--anchor .spread__item:nth-child(4n + 3) .spread__link { aspect-ratio: 1 / 1; }

.spread--anchor .spread__item:nth-child(4n + 4) {
	grid-column: 2 / span 6;
	margin-top: calc(var(--spread-step, 120px) * 0.3);
}
.spread--anchor .spread__item:nth-child(4n + 4) .spread__link { aspect-ratio: 3 / 4; }

/* Overlap: the photographs layer over one another */

.spread--overlap .spread__item:nth-child(3n + 1) {
	grid-column: 1 / span 7;
	z-index: 1;
}
.spread--overlap .spread__item:nth-child(3n + 1) .spread__link { aspect-ratio: 3 / 4; }

.spread--overlap .spread__item:nth-child(3n + 2) {
	grid-column: 6 / span 6;
	margin-top: calc(var(--spread-step, 120px) * -0.55);
	z-index: 3;
}
.spread--overlap .spread__item:nth-child(3n + 2) .spread__link { aspect-ratio: 2 / 3; }

.spread--overlap .spread__item:nth-child(3n + 3) {
	grid-column: 3 / span 5;
	margin-top: calc(var(--spread-step, 120px) * -0.4);
	z-index: 2;
}
.spread--overlap .spread__item:nth-child(3n + 3) .spread__link { aspect-ratio: 1 / 1; }

/* A hairline of paper around each one, so the layers read as layers */

.spread--overlap .spread__link {
	box-shadow: 0 0 0 12px var(--paper), 0 24px 60px rgba(0, 0, 0, 0.12);
}

/* Breakout: a photograph across the whole screen, then one held in */

.spread--breakout .spread__item:nth-child(odd) {
	grid-column: 1 / -1;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.spread--breakout .spread__item:nth-child(odd) .spread__link { aspect-ratio: 21 / 9; }

.spread--breakout .spread__item:nth-child(4n + 2) {
	grid-column: 8 / span 4;
	margin-top: calc(var(--spread-step, 120px) * 0.2);
}
.spread--breakout .spread__item:nth-child(4n + 2) .spread__link { aspect-ratio: 3 / 4; }

.spread--breakout .spread__item:nth-child(4n + 4) {
	grid-column: 2 / span 4;
	margin-top: calc(var(--spread-step, 120px) * 0.2);
}
.spread--breakout .spread__item:nth-child(4n + 4) .spread__link { aspect-ratio: 3 / 4; }

.spread--breakout .spread__item:nth-child(odd) .spread__cap {
	max-width: var(--grid);
	margin: 0 auto;
	padding-left: var(--frame);
	padding-right: var(--frame);
}

/* The statement standing in the grid, filling space the photographs
   leave open instead of taking a screen of its own */

.spread__text {
	align-self: center;
	padding: 20px 0;
}

.spread__text--right {
	grid-column: 8 / span 5;
}

.spread__text--left {
	grid-column: 1 / span 5;
}

.spread__text .statement {
	max-width: none;
}

.spread__text .statement--center {
	margin: 0;
	text-align: left;
}

/* Inside a column it has to come down a size or two to fit */

.spread__text .statement--large { font-size: 30px; }
.spread__text .statement--medium { font-size: 25px; }
.spread__text .statement--small { font-size: 21px; }

.spread__text .statement p + p {
	font-size: 0.6em;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 860px) {
	.spread__text {
		padding: 0;
	}

	.spread__text .statement--large { font-size: 26px; }
}

/* Less air, or more, around the statement when it stands alone */

.section--roomy {
	padding-top: calc(var(--rhythm) * 1.7);
	padding-bottom: calc(var(--rhythm) * 1.7);
}

/* A single photograph should not sit off to one side */

.spread__item:first-child:last-child {
	grid-column: 3 / span 8;
	margin-top: 0;
}

.spread__cap {
	display: block;
	padding: 16px 2px 0;
}

.spread__name {
	display: block;
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.35;
	color: var(--ink);
}

.spread__note {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--body);
}

@media (max-width: 860px) {
	.spread {
		grid-template-columns: 1fr;
		row-gap: var(--spread-gap, 40px);
	}

	.spread .spread__item {
		grid-column: 1 / -1 !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		width: auto !important;
		z-index: auto !important;
	}

	.spread--overlap .spread__link {
		box-shadow: none;
	}
}

/* ==========================================================================
   11c. Press
   ========================================================================== */

/* The section's background is set once, above (white, or light grey
   when chosen in the panel). A second rule here painted it grey
   whatever the panel said. */

.press {
	display: grid;
	grid-template-columns: repeat(var(--press-cols, 3), minmax(0, 1fr));
	gap: 46px 34px;
}

@media (max-width: 900px) {
	.press {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 24px;
	}
}

@media (max-width: 560px) {
	.press {
		grid-template-columns: 1fr;
	}
}

.press__item {
	display: block;
	background: var(--paper);
}

.press__frame {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--ink);
}

.press__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease), opacity 0.5s var(--ease);
}

.press__item:hover .press__frame img {
	transform: scale(1.05);
	opacity: 0.82;
}

.press__blank {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	color: #ffffff;
	font-family: var(--serif);
	font-size: 22px;
	line-height: 1.3;
}

.press__body {
	display: block;
	padding: 26px 26px 28px;
}

.press__source {
	display: block;
	margin-bottom: 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-indent: 0.24em;
	color: #3f3f3f;
}

.press__title {
	display: block;
	font-family: var(--serif);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.24;
	color: var(--ink);
}

.press__note {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	line-height: 22px;
	color: #5c5c5c;
}

.press__go {
	display: inline-block;
	margin-top: 22px;
	padding-top: 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-indent: 0.2em;
	color: var(--ink);
	position: relative;
}

/* A hairline that grows across on hover */

.press__go::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 1px;
	background: var(--ink);
	transition: width 0.55s var(--ease);
}

.press__item:hover .press__go::before {
	width: 100%;
}

/* The Press page in the italic serif of the collection headings -
   Cormorant set as writing rather than spaced capitals. Only the Press
   page; the Press block on the home page keeps its own look. */

.press-page .press-head__label {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.25;
	letter-spacing: 0.006em;
	text-transform: none;
	text-indent: 0;
	color: var(--ink);
}

.press-page .press__source {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.006em;
	text-transform: none;
	text-indent: 0;
	color: #6b6b6b;
	margin-bottom: 8px;
}

.press-page .press__title {
	font-style: italic;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.22;
	letter-spacing: 0.004em;
}

.press-page .press__note {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: #6b6b6b;
}

.press-page .press__go {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 17px;
	letter-spacing: 0.006em;
	text-transform: none;
	text-indent: 0;
}

/* ==========================================================================
   12. Text and pages
   ========================================================================== */

.prose {
	font-size: 15px;
	line-height: 28px;
}

.prose h2 { margin: 46px 0 18px; }
.prose h3 { margin: 38px 0 14px; }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose img,
.prose figure {
	margin: 40px 0;
}

.prose figcaption {
	margin-top: 12px;
	font-size: 12px;
	letter-spacing: 0.06em;
}

.prose ul,
.prose ol {
	padding-left: 20px;
	margin: 0 0 18px;
}

.prose li + li {
	margin-top: 6px;
}

.prose a {
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
}

.prose a:hover {
	border-bottom-color: var(--ink);
}

.duo {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 70px;
	align-items: start;
}

.duo--flip {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

@media (max-width: 900px) {
	.duo,
	.duo--flip {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.duo__media {
	position: sticky;
	top: 110px;
}

@media (max-width: 900px) {
	.duo__media {
		position: static;
	}
}

.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   13. Contacts
   ========================================================================== */

.contact {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
	gap: 72px;
	align-items: start;
}

/* The words on the left, set as writing in the same hand as the rest of
   the site rather than in grey interface type. */

.contact .prose {
	max-width: 26em;
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.008em;
	color: var(--ink);
}

.contact .prose p {
	margin: 0 0 0.9em;
}

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

@media (max-width: 900px) {
	.contact {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

.facts {
	margin: 0;
}

.facts dt {
	margin-top: 32px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--body);
}

.facts dt:first-child {
	margin-top: 0;
}

.facts dd {
	margin: 6px 0 0;
	color: var(--ink);
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
}

.facts dd a:hover {
	color: var(--body);
}

.field {
	margin-bottom: 24px;
}

/* Small, spaced and in the ink of the page. Grey at twelve pixels was
   the loudest thing on the form and the least readable. */

.field label {
	display: block;
	margin-bottom: 7px;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-indent: 0.24em;
	text-transform: uppercase;
	color: #000000;
}

/* What is typed is set in the serif, so a message written here looks
   like the rest of the writing on the site rather than like a form. */

.field input[type="text"],
.field input[type="email"],
.field input[type="search"],
.field textarea {
	width: 100%;
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ink);
	background: transparent;

	/* Back to a single rule under the field, but drawn in black rather
	   than the grey it was. One black line under a line of writing is
	   quieter than a box and reads as more considered. */
	border: 0;
	border-bottom: 1px solid #000000;
	border-radius: 0;
	padding: 6px 0;
	transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
	color: rgba(0, 0, 0, 0.28);
}

/* On the way in the box goes to full black and thickens by a hair,
   drawn with a shadow so nothing shifts on the page. */

.field input:hover,
.field textarea:hover {
	border-bottom-color: #000000;
}

/* The rule thickens by a hair on the way in, drawn with a shadow so
   nothing on the page shifts. */

.field input:focus,
.field textarea:focus {
	border-bottom-color: #000000;
	box-shadow: 0 1px 0 0 #000000;
	outline: none;
}

.field textarea {
	min-height: 104px;
	resize: vertical;
}

/* The form is a column of writing, not a panel. Held to a narrow measure
   it stops sprawling and starts looking considered. */

.contact form {
	max-width: 23em;
}

/* The details opposite, in the same hand */

.facts dt {
	font-size: 10px;
	letter-spacing: 0.26em;
	text-indent: 0.26em;
	color: var(--ink);
	opacity: 0.55;
}

.facts dd {
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
}

.facts dt {
	margin-top: 24px;
}

/* A line of type with a rule under it rather than a black slab. It is
   the last thing on the page and does not need to shout. */

/* The button is boxed like the fields, so the column reads as one set
   of parts rather than three lines and a loose word. */

.contact .btn,
.contact button[type="submit"] {
	width: 100%;
	margin-top: 14px;
	padding: 14px 0;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	color: #000000;
	background: none;
	border: 1px solid #000000;
	transition: color 0.4s var(--ease), background-color 0.4s var(--ease);
}

.contact .btn:hover,
.contact button[type="submit"]:hover {
	background: #000000;
	color: #ffffff;
	border-color: #000000;
}

.pot {
	position: absolute;
	left: -9999px;
}

.flash {
	padding: 16px 22px;
	margin-bottom: 34px;
	font-size: 13px;
	letter-spacing: 0.04em;
	border: 2px solid var(--ink);
	color: var(--ink);
}

.flash--bad {
	background: var(--ink);
	color: #fff;
}

/* --------------------------------------------------------------------------
   The contact form, set like a page of a lookbook.

   A title in the italic serif. Each field is a single hairline with its
   name written on it in the same italic; when you click in, the name
   lifts and shrinks above the line and a black line draws across from
   the left. Name and email share a row. The button is a black bar with
   the words on the left and a long hairline arrow on the right, which
   draws further out and turns the words the pink of the name on hover.
   ----------------------------------------------------------------------- */

.contact .form--atelier {
	max-width: 34em;
}

.form__title {
	margin: 0 0 34px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: 0.004em;
	color: #000000;
}

.form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 36px;
}

.form--atelier .field--float {
	position: relative;
	margin: 0 0 30px;
	padding-top: 22px;
}

.form--atelier .field--float input,
.form--atelier .field--float textarea {
	display: block;
	width: 100%;
	padding: 8px 0 10px;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--serif);
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.45;
	color: #000000;
	transition: border-color 0.4s var(--ease);
	-webkit-appearance: none;
	appearance: none;
}

.form--atelier .field--float textarea {
	min-height: 120px;
	resize: none;
	overflow: hidden;
}

.form--atelier .field--float input:hover,
.form--atelier .field--float textarea:hover {
	border-bottom-color: rgba(0, 0, 0, 0.45);
}

.form--atelier .field--float input:focus,
.form--atelier .field--float textarea:focus {
	outline: none;
	box-shadow: none;
	border-bottom-color: rgba(0, 0, 0, 0.2);
}

.form--atelier .field--float input::placeholder,
.form--atelier .field--float textarea::placeholder {
	color: transparent;
}

/* The name of the field, written on the line */

.form--atelier .field--float label {
	position: absolute;
	top: 32px;
	left: 0;
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: none;
	text-indent: 0;
	color: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	transform-origin: left top;
	transition: transform 0.45s var(--ease), color 0.45s var(--ease);
}

/* ...and lifted above it once you are writing */

.form--atelier .field--float input:focus + label,
.form--atelier .field--float input:not(:placeholder-shown) + label,
.form--atelier .field--float textarea:focus + label,
.form--atelier .field--float textarea:not(:placeholder-shown) + label {
	transform: translateY(-30px) scale(0.72);
	color: #000000;
}

/* The black line that draws across on the way in */

.field__line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #000000;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s var(--ease);
}

.form--atelier .field--float:focus-within .field__line {
	transform: scaleX(1);
}

/* The button: a slim black bar just wide enough for its words, in the
   same manner as the Back button. The selectors are made heavier than
   the older submit-button rules above so those no longer reach it. */

.contact .form--atelier .form__send {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	width: auto;
	height: 48px;
	margin-top: 14px;
	padding: 0 24px 0 26px;
	border: 0;
	border-radius: 0;
	background: #000000;
	color: #ffffff;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 19px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-indent: 0;
	text-transform: none;
	cursor: pointer;
	transition: color 0.45s var(--ease);
}

.contact .form--atelier .form__send span {
	transform: translateY(-1px);
}

.contact .form--atelier .form__send svg {
	display: block;
	flex: none;
	width: 28px;
	overflow: visible;
	transform-origin: left center;
	transition: transform 0.55s var(--ease);
}

.contact .form--atelier .form__send:hover,
.contact .form--atelier .form__send:focus-visible {
	background: #000000;
	color: var(--form-accent, #e9a6ac);
}

.contact .form--atelier .form__send:hover svg,
.contact .form--atelier .form__send:focus-visible svg {
	transform: translateX(5px) scaleX(1.18);
}

/* The words on the left in the italic serif of the title opposite */

.contact .prose {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.45;
	letter-spacing: 0.004em;
	color: #000000;
}

/* The note after sending, in the same hand */

.contact .flash {
	margin: 0 0 34px;
	padding: 4px 0 4px 20px;
	border: 0;
	border-left: 1px solid #000000;
	background: none;
	font-family: var(--serif);
	font-style: italic;
	font-size: 19px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: #000000;
}

.contact .flash--bad {
	background: none;
	color: #000000;
	border-left-color: var(--form-accent, #e9a6ac);
	border-left-width: 2px;
}

@media (max-width: 700px) {
	.form__title {
		font-size: 32px;
		margin-bottom: 24px;
	}

	.form__row {
		grid-template-columns: 1fr;
	}

	.form--atelier .field--float input,
	.form--atelier .field--float textarea,
	.form--atelier .field--float label {
		font-size: 18px;
	}

	.form--atelier .field--float label {
		top: 31px;
	}

	.contact .form--atelier .form__send {
		height: 46px;
		font-size: 18px;
	}

	.contact .prose {
		font-size: 21px;
	}
}

/* ==========================================================================
   14. Footer - fixed behind, revealed as the content slides up
   ========================================================================== */

.page-wrap {
	position: relative;
	z-index: 2;
	background-color: var(--paper);
}

.footer {
	margin-top: 0;
}

/* The uncover effect only makes sense on a wide screen. */
@media (min-width: 1025px) {
	.footer--uncover {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		width: 100%;
	}
}

/* The grey of the body text was set for black on white. Against a black
   panel the same grey reads as switched off, so the footer keeps its own
   near-white and dims only on the pieces that should sit back. */

.footer__top {
	background-color: var(--footer-top);
	padding: 96px 0 72px;
	color: rgba(255, 255, 255, 0.82);
}

.footer__top a {
	color: rgba(255, 255, 255, 0.82);
	transition: color 0.35s var(--ease);
}

.footer__top a:hover,
.footer__top a:focus-visible {
	color: #ffffff;
}

.footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px;
}

@media (max-width: 860px) {
	.footer__cols {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.footer__brand {
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

.footer__label {
	display: block;
	margin: 0 0 18px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 32px;
}

.footer__list a {
	color: rgba(255, 255, 255, 0.82);
	border: 0;
}

.footer__list a:hover,
.footer__list a:focus-visible {
	color: #ffffff;
}

.footer__bottom {
	background-color: var(--footer-bottom);
	padding: 0 0 64px;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.55);
}

.footer__bottom a {
	color: rgba(255, 255, 255, 0.55);
}

.footer__bottom a:hover {
	color: #fff;
}

/* --------------------------------------------------------------------------
   The footer's words in the language of the rest of the site, in clean
   white on the black: the headings as small, widely spaced capitals,
   everything you can click in the italic serif, and the copyright as a
   line of spaced capitals under a short white hairline. A link turns the
   pink of the name when the pointer reaches it - no underline.
   ----------------------------------------------------------------------- */

.footer__top,
.footer__top a,
.footer__list a {
	color: #ffffff;
}

.footer__label {
	margin: 0 0 20px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.footer__list {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 19px;
	line-height: 1.8;
	letter-spacing: 0.01em;
}

.footer__list a {
	transition: color 0.45s var(--ease);
}

.footer__top a:hover,
.footer__top a:focus-visible,
.footer__list a:hover,
.footer__list a:focus-visible,
.footer__bottom a:hover,
.footer__bottom a:focus-visible {
	color: var(--foot-accent, #e9a6ac);
}

.footer__list .footer__mail {
	font-size: 21px;
	margin-bottom: 6px;
	overflow-wrap: anywhere;
}

.footer__cols > div > p {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.6;
	color: #ffffff;
}

.footer__bottom {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #ffffff;
}

.footer__line {
	position: relative;
	padding-top: 34px;
}

.footer__line::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 44px;
	height: 1px;
	background: #ffffff;
	transform: translateX(-50%);
}

.footer__bottom a {
	color: #ffffff;
	transition: color 0.45s var(--ease);
}

#to-top {
	position: fixed;
	right: 25px;
	bottom: 40px;
	z-index: 10000;
	width: 41px;
	height: 41px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	color: #fff;
	border: 0;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s 0.3s;
}

#to-top.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

/* ==========================================================================
   15. Odds and ends
   ========================================================================== */

.note {
	padding: 52px 0;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
	font-size: 15px;
	line-height: 28px;
	max-width: 640px;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.wp-caption,
.gallery-caption {
	font-size: 12px;
}

/* ==========================================================================
   19. The drawn name at the head of the front page
   ========================================================================== */

.mark {
	position: relative;
	padding: calc(var(--rhythm) * 0.75) var(--frame) 0;
	text-align: center;
}

.mark--close {
	padding-top: calc(var(--rhythm) * 0.4);
}

.mark--roomy {
	padding-top: var(--rhythm);
}

/* A screen of its own. The name is all there is until you scroll, which
   is what gives it the room to read as a mark rather than a heading.
   The header is part of the same screen, so its height comes off. */

.mark--screen {
	min-height: calc(100svh - var(--menu-h));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
}

/* svh is recent. Older browsers get the old unit, which is close enough
   everywhere except a scrolling phone. */

@supports not (height: 100svh) {
	.mark--screen {
		min-height: calc(100vh - var(--menu-h));
	}
}

.mark__inner {
	width: 100%;
}

/* The width is set on the section so the artwork scales as one piece,
   and never grows past the room the page actually has. */

.mark__svg {
	display: block;
	width: min(var(--mark-w, 700px), 100%);
	height: auto;
	margin: 0 auto;
	color: var(--mark-ink, #e9a6ac);
}

/* The line under the name, held between two hairlines */

.mark__line {
	margin: 34px 0 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.46em;
	text-transform: uppercase;
	color: var(--body);
}

/* Three ways of setting the name on its screen */

.mark--full .mark__svg {
	width: calc(100vw - var(--frame) * 3);
	max-width: none;
}

.mark--centre .mark__svg {
	width: min(var(--mark-w, 700px), 100%);
}

/* Set against the left margin and carried low, the way a name sits on
   the cover of a book rather than in the middle of a poster. */

.mark--low {
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
	padding-bottom: calc(var(--rhythm) * 0.7);
	padding-left: var(--frame);
	padding-right: var(--frame);
}

.mark--low .mark__svg {
	width: min(calc(var(--mark-w, 700px) * 1.1), 100%);
	margin-left: 0;
}

.mark--low .mark__line {
	margin-left: 4px;
}

.mark--low .mark__cue {
	left: auto;
	right: var(--frame);
	transform: none;
}

/* A hairline that fills and empties, rather than an arrow. Quieter, and
   it does not need a word to explain itself. */

.mark__cue {
	position: absolute;
	bottom: 42px;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 56px;
	overflow: hidden;
	background: var(--rule);
}

.mark__cue span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ink);
	transform-origin: top;
	animation: milev-cue 2.6s var(--ease) infinite;
}

@keyframes milev-cue {
	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
	.mark__cue span {
		animation: none;
	}
}

/* The photographs below want air between them and the name */

.mark + .section,
.mark + .section--tight,
.mark + .opening {
	margin-top: calc(var(--rhythm) * 0.5);
}

@media (max-width: 700px) {
	.mark,
	.mark--roomy {
		padding-top: calc(var(--rhythm) * 0.55);
	}

	/* Its own width on a narrow screen. Nothing here reaches a desktop. */

	.mark--centre .mark__svg,
	.mark--low .mark__svg {
		width: min(var(--mark-w-m, 260px), 100%);
	}

	.mark__line {
		width: min(var(--mark-w-m, 260px), 100%);
	}

	.mark--screen {
		padding-top: 0;
	}

	.mark__line {
		gap: 14px;
	}

	.mark__cue {
		bottom: 26px;
		height: 40px;
	}
}

/* ==========================================================================
   20. The press page
   ========================================================================== */

/* Nothing but the footer under it, so the section carries its own room
   rather than relying on a neighbour to provide it. */

.press-page .press-band {
	padding-top: calc(var(--rhythm) * 0.8);
}

.press-page__empty {
	padding: calc(var(--rhythm) * 0.8) 0;
	text-align: center;
}

/* ==========================================================================
   21. The even grids on the front page
   ========================================================================== */

.even {
	display: grid;
	grid-template-columns: repeat(var(--even-cols, 3), minmax(0, 1fr));
	column-gap: var(--even-gap, 40px);
	row-gap: calc(var(--even-gap, 40px) * 1.4);
	align-items: start;
}

.even__item {
	margin: 0;
	min-width: 0;
}

.even__link {
	display: block;
	overflow: hidden;
	background: var(--wash);
	cursor: zoom-in;
}

/* Left as shot. Every frame keeps its own height, which is what a run
   of landscape photographs wants. */

.even--natural .even__link img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 1.4s var(--ease);
}

/* Trimmed to one shape, so the tops and bottoms line up exactly */

.even--ratio .even__link {
	aspect-ratio: var(--even-ratio, 3 / 2);
}

.even--ratio .even__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	transition: transform 1.4s var(--ease);
}

.even__item:hover .even__link img {
	transform: scale(1.035);
}

/* Five or six small frames on a phone are unreadable, so the count
   falls back as the screen narrows however many were asked for. */

@media (max-width: 1100px) {
	.even {
		grid-template-columns: repeat(min(var(--even-cols, 3), 3), minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	.even {
		grid-template-columns: repeat(min(var(--even-cols, 3), 2), minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.even {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   22. The corner of the header
   ========================================================================== */

.logo--mark a {
	display: block;
	border: 0;
}

.logo--mark .mark__svg--corner {
	width: 190px;
	height: auto;
	color: var(--mark-ink, #e9a6ac);
	display: block;
}

/* Nothing in the corner, but the space is still held so the menu keeps
   its place in the middle of the row. */

.logo--empty {
	min-height: 1px;
}



/* ==========================================================================
   24. The editorial rhythm
   ========================================================================== */

.editorial {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--editorial-gap, 40px);
	row-gap: calc(var(--editorial-gap, 40px) * 1.8);
	align-items: start;
}

.editorial__item {
	margin: 0;
	min-width: 0;
}

/* One across the whole line, then two sharing the next */

.editorial__item.is-wide {
	grid-column: 1 / -1;
}

/* Out past the page and to the edges of the screen. The margin trick
   works from the middle of the item, so it holds whatever the page
   width happens to be. */

.editorial--bleed .editorial__item.is-wide {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.editorial__link {
	display: block;
	overflow: hidden;
	background: var(--wash);
	cursor: zoom-in;
}

.editorial__link img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 2s var(--ease);
}

/* A landscape photograph run to the full width of a wide screen comes
   out taller than the screen itself, so a whole one is never in view.
   Held to a band, it reads as cinema instead. */

.editorial__item.is-wide .editorial__link {
	max-height: 84vh;
}

.editorial__item.is-wide .editorial__link img {
	height: 84vh;
	object-fit: cover;
	object-position: center 34%;
}

@media (max-width: 780px) {
	.editorial__item.is-wide .editorial__link,
	.editorial__item.is-wide .editorial__link img {
		max-height: none;
		height: auto;
	}

	.editorial__item.is-wide .editorial__link img {
		object-fit: fill;
	}
}

.editorial__item:hover .editorial__link img {
	transform: scale(1.025);
}

/* The line under a plate. Numeral first, then the name, so the run
   reads as a numbered sequence even when nothing has been titled. */

.editorial__cap {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0 0;
}

.editorial__cap:empty {
	display: none;
}

.editorial--bleed .editorial__item.is-wide .editorial__cap {
	padding-left: var(--frame);
	padding-right: var(--frame);
}

.editorial__name {
	font-family: var(--serif);
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
}

.editorial__note {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--body);
}

@media (max-width: 780px) {
	.editorial {
		grid-template-columns: 1fr;
		row-gap: calc(var(--editorial-gap, 40px) * 1.5);
	}

	.editorial--bleed .editorial__item.is-wide .editorial__cap {
		padding-left: 0;
		padding-right: 0;
	}
}

/* A slower arrival. At one photograph to a line the movement is the
   difference between a page loading and a page unfolding. */

.reveal--slow {
	transition-duration: 1.5s;
}

/* ==========================================================================
   25. Plates that fill the window
   ========================================================================== */

/* No page margin, no gap, no white. The photographs are the page. */

.plates {
	display: grid;
	grid-template-columns: repeat(var(--plates-tracks, 6), minmax(0, 1fr));
	column-gap: var(--plates-gap, 6px);
	row-gap: var(--plates-rows, 40px);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 var(--plates-gap, 6px);
	box-sizing: border-box;
}

.plates__item {
	position: relative;
	display: block;
	grid-column: span var(--plates-span, 2);
	height: var(--plates-h, 70svh);
	overflow: hidden;
	background: var(--wash);
	border: 0;
	cursor: zoom-in;
}

/* svh is recent. Where it is missing the plate falls back to a share of
   the old unit, which is the same everywhere except a scrolling phone. */

@supports not (height: 100svh) {
	.plates__item {
		height: var(--plates-h-fallback, 70vh);
	}
}

.plates__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
	transition: transform 2.4s var(--ease);
}

.plates__item:hover img {
	transform: scale(1.03);
}

/* A photograph spread across the whole row is far wider than it is tall,
   so holding it to the same height as a single plate would cut it to a
   letterbox. It keeps its own proportions instead and nothing is lost. */

.plates__item.is-wide {
	height: auto;
}

.plates__item.is-wide img {
	height: auto;
	object-fit: contain;
}

/* A name only while the cursor is on the plate, so nothing sits over the
   photographs while they are simply being looked at. */

.plates__name {
	position: absolute;
	left: 22px;
	bottom: 20px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #ffffff;
	mix-blend-mode: difference;
	opacity: 0;
	transition: opacity 0.6s var(--ease);
	pointer-events: none;
}

.plates__item:hover .plates__name,
.plates__item:focus-visible .plates__name {
	opacity: 1;
}

/* On a phone the columns would be slivers, so they stack and each takes
   a comfortable part of the screen rather than all of it. */

/* Narrow screens keep their own spacing. Nothing below this line
   changes anything on a desktop. */

@media (max-width: 900px) {
	.plates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--plates-rows-m, 12px);
	}

	.plates__item {
		grid-column: span 1;
		height: 52svh;
	}
}

/* One to a line on a phone, and whole. A tall crop of a landscape
   photograph on a narrow screen shows a sliver and little else. */

@media (max-width: 560px) {
	.plates {
		grid-template-columns: 1fr;
	}

	.plates__item,
	.plates__item.is-wide {
		height: auto;
	}

	.plates__item img,
	.plates__item.is-wide img {
		height: auto;
		object-fit: contain;
	}
}

/* With the plates directly under it the name wants to sit tight and
   small, the way a mark sits above a spread rather than filling one. */

.mark--tight {
	padding-top: calc(var(--rhythm) * 0.3);
	padding-bottom: 0;
	min-height: 0;
}

/* The space under the name is set on its own, because the distance
   between a mark and the first photograph is the one measurement that
   decides whether a page feels considered or thrown together. */

.mark {
	padding-bottom: var(--mark-gap, 0px);
}

.mark--screen {
	padding-bottom: 0;
}

@media (max-width: 700px) {
	.mark {
		padding-bottom: calc(var(--mark-gap, 0px) * 0.6);
	}
}

/* ==========================================================================
   26. The stacked header
   ========================================================================== */

/* The name on the top line, the menu under it, both on the centre of the
   page. The bar stops being a row of three and becomes a block, so the
   height is left to the content rather than fixed. */

.header--stack .header__bar {
	height: auto;
	padding: 34px 0 26px;
}

.header--stack .header__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	position: relative;
}

.header--stack .logo {
	order: 1;
}

.header--stack .menu {
	order: 2;
}

/* The button leaves the flow entirely, or it would push the name off
   the centre of the page by half its own width. */

.header--stack .tools {
	order: 3;
	position: absolute;
	top: 0;
	right: 0;
}

.header--stack .logo--empty {
	display: none;
}

.header--stack .logo--mark .mark__svg--corner {
	width: var(--head-mark-w, 300px);
}

/* Centred under the name rather than spread across the bar */

.header--stack .menu__list {
	justify-content: center;
}

@media (max-width: 900px) {
	.header--stack .header__bar {
		padding: 24px 0 18px;
	}

	.header--stack .header__inner {
		gap: 16px;
	}

	.header--stack .logo--mark .mark__svg--corner,
	.logo--mark .mark__svg--corner {
		width: min(var(--head-mark-w-m, 180px), 62vw);
	}
}

/* ==========================================================================
   27. The line that hands the page over to the photographs
   ========================================================================== */

.cue {
	padding: 0 var(--frame) var(--cue-gap, 120px);
	text-align: center;
}

.cue__link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	border: 0;
	text-decoration: none;
	transition: transform 0.9s var(--ease);
}

/* Set in the serif, in italic, at a size that reads as a line of writing
   rather than as a label. The ampersand of Cormorant is the reason to
   write the words this way round: it is the best character in the face,
   and small capitals waste it. */

.cue--serif .cue__words {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	/* Chosen in pixels, but never wider than the screen can carry, so a
	   large setting simply becomes as large as a phone allows. */
	font-size: min(var(--cue-size, 34px), 9vw);
	line-height: 1.25;
	letter-spacing: 0.005em;
	color: var(--ink);
	transition: opacity 0.7s var(--ease);
}

.cue--serif .cue__sub {
	margin-top: 4px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-transform: uppercase;
	color: var(--body);
}

/* The plainer setting, kept for anyone who prefers it */

.cue--caps .cue__words {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.38em;
	text-indent: 0.38em;
	text-transform: uppercase;
	color: var(--body);
}

.cue--caps .cue__sub {
	display: none;
}

/* No arrowhead. A hairline hanging from the words, with a darker length
   falling down it and away, over and over. It says the same thing as an
   arrow without looking like a button. */

.cue__line {
	position: relative;
	display: block;
	width: 1px;
	height: var(--cue-rule, 72px);
	margin-top: 8px;
	background: var(--rule);
	overflow: hidden;
}

.cue__line span {
	position: absolute;
	inset: 0 0 auto;
	display: block;
	height: 34%;
	background: var(--ink);
	animation: milev-fall 3s cubic-bezier(0.45, 0, 0.15, 1) infinite;
}

@keyframes milev-fall {
	0%   { transform: translateY(-100%); opacity: 0; }
	18%  { opacity: 1; }
	72%  { opacity: 1; }
	100% { transform: translateY(294%); opacity: 0; }
}

.cue__link:hover,
.cue__link:focus-visible {
	transform: translateY(3px);
}

.cue__link:hover .cue__words {
	opacity: 0.62;
}

.cue__link:hover .cue__line span {
	animation-duration: 1.6s;
}

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

	.cue__line span {
		animation: none;
		height: 100%;
		opacity: 0.35;
	}
}

@media (max-width: 700px) {
	.cue {
		padding-bottom: calc(var(--cue-gap, 120px) * 0.6);
	}

	.cue__link {
		gap: 14px;
	}

	.cue--serif .cue__words {
		font-size: min(var(--cue-size-m, 24px), 11vw);
	}

	.cue--caps .cue__words {
		letter-spacing: 0.26em;
		text-indent: 0.26em;
		white-space: normal;
	}

	.cue__line {
		height: calc(var(--cue-rule, 72px) * 0.7);
	}
}

/* ==========================================================================
   28. The reflection under the name
   ========================================================================== */

/* The flip goes on the artwork and the fade on the wrapper around it.
   Doing both on one element would turn the mask upside down along with
   everything else, and the reflection would fade at the wrong end. */

.mark__mirror {
	display: block;
	margin-top: 3px;
	line-height: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent var(--mirror-fade, 70%));
	mask-image: linear-gradient(to bottom, #000 0%, transparent var(--mirror-fade, 70%));
}

.mark__mirror .mark__svg {
	transform: scaleY(-1);
	opacity: var(--mirror-op, 0.3);
	filter: blur(var(--mirror-blur, 1px));
}

/* Where masks are not supported the reflection would sit there at full
   height with a hard bottom edge, which is worse than not having one. */

@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
	.mark__mirror {
		display: none;
	}
}

/* Set low and to the left the name sits close to the foot of the screen,
   so a reflection under it would be cut off by the edge. */

.mark--low .mark__mirror {
	display: none;
}

@media (max-width: 700px) {
	.mark__mirror {
		--mirror-fade: 40%;
	}
}

/* The name in the corner is artwork rather than a line of type, so the
   link that holds it gives up the leading a line of text would carry -
   otherwise the bar is taller than the drawing inside it. There is no
   reflection here: the corner mark stands on its own, the right way up,
   and the reflection belongs to the large name on the front page. */

.logo--mark a {
	line-height: 0;
}

/* ==========================================================================
   29. The lookbook - one frontal photograph to a look
   ========================================================================== */

.lookbook {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--look-min, 340px), 100%), 1fr));
	column-gap: 40px;
	row-gap: 76px;
	align-items: start;
}

.look {
	margin: 0;
	min-width: 0;
}

/* The angles are stacked on top of one another and only one is lit at a
   time, so turning the garment costs nothing but a change of opacity. */

.look__frame {
	position: relative;
	display: block;
	border: 0;
	background: var(--wash);
	overflow: hidden;
	cursor: pointer;
}

.look__angle {
	display: block;
	opacity: 0;
	transition: opacity 0.55s var(--ease);
}

.look__angle.is-on {
	opacity: 1;
}

/* Every angle after the first is taken out of the flow, or the frame
   would be as tall as all of them put together. */

.look__angle:not(:first-child) {
	position: absolute;
	inset: 0;
}

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

/* How many angles there are, so it is clear there is more to see */

.look__count {
	position: absolute;
	right: 14px;
	bottom: 12px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: #ffffff;
	mix-blend-mode: difference;
	opacity: 0;
	transition: opacity 0.5s var(--ease);
	pointer-events: none;
}

.look__frame:hover .look__count {
	opacity: 1;
}

.look__hidden {
	display: none;
}

.look__note {
	display: block;
	padding-top: 18px;
	text-align: left;
}

.look__name {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	line-height: 1.3;
	color: var(--ink);
}

.look__text {
	display: block;
	margin-top: 7px;
	font-size: 12px;
	line-height: 1.85;
	letter-spacing: 0.01em;
	color: var(--body);
}

@media (max-width: 900px) {
	.lookbook {
		column-gap: 24px;
		row-gap: 52px;
	}
}

@media (max-width: 560px) {
	.lookbook {
		grid-template-columns: 1fr;
		row-gap: 44px;
	}
}

/* ==========================================================================
   30. Collection cards whose photographs take turns
   ========================================================================== */

.piece__turn {
	display: block;
	opacity: 0;
	transition: opacity 1s var(--ease);
}

.piece__turn.is-on {
	opacity: 1;
}

/* All but the first come out of the flow, or the frame would be as tall
   as every photograph stacked one on another. */

.piece__turn:not(:first-child) {
	position: absolute;
	inset: 0;
}

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

/* With no veil under it the words need their own weight to stay legible
   against whatever part of the photograph they land on. */

.piece__frame--bare .piece__cta-text {
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.piece__frame--bare .piece__cta-line {
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   31. A collection laid out look by look
   ========================================================================== */

.lookrun__look {
	position: relative;
	padding-top: 62px;
	margin-top: 52px;
}

.lookrun__look:first-child {
	padding-top: 0;
	margin-top: 0;
}

/* A short rule set on the centre, the way an ornament sits between
   passages of a printed book, rather than a grey line drawn across the
   whole page. It is the ink of the text, not a shade of the paper. */

.lookrun--rule-short .lookrun__look::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 46px;
	height: 1px;
	margin-left: -23px;
	background: var(--ink);
	opacity: 0.85;
}

.lookrun--rule-full .lookrun__look {
	border-top: 1px solid var(--ink);
}

.lookrun--rule-full .lookrun__look:first-child,
.lookrun--rule-short .lookrun__look:first-child::before {
	border-top: 0;
	content: none;
}

.lookrun__note {
	max-width: 38em;
	margin: 0 auto 34px;
	text-align: center;
}

.lookrun__name {
	display: block;
	margin-bottom: 14px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	text-transform: uppercase;
	color: var(--ink);
	opacity: 0.55;
}

/* The description is the writing, so it is set as writing: the serif, in
   the ink of the page, with room between the lines. Grey at twelve
   pixels reads as a caption apologising for itself. */

/* Cormorant is a light face by nature, and at three hundred it thins out
   to almost nothing on a white page. Five hundred gives the strokes
   enough body to be read without the text turning heavy. */

.lookrun__text {
	margin: 0;
	font-family: var(--serif);
	font-size: var(--look-note, 16px);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.004em;
	color: #000000;
}

/* The number across comes from how many there are, so a look of three
   fills its row the same way a look of five does. */

/* The frames are given a width to aim for and the row fits in as many
   as it can. A look of three and a look of seven then show at the same
   size, instead of the longer one being squeezed to fit its line. */

.lookrun__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--lookrun-min, 320px), 100%), 1fr));
	gap: var(--lookrun-gap, 40px);
	align-items: start;
}

.lookrun__frame {
	display: block;
	border: 0;
	background: var(--wash);
	overflow: hidden;
	cursor: zoom-in;
}

.lookrun__frame img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 1.6s var(--ease);
}

/* Rows flush on both sides with nothing cropped. Each frame is given a
   width in proportion to its own shape, and the space left over on a
   line is shared out the same way, so the widths stay proportional and
   every photograph on that line ends up the same height. */

.lookrun--justify .lookrun__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lookrun-gap, 40px);
}

.lookrun--justify .lookrun__frame {
	flex: var(--ar, 1) 1 calc(var(--ar, 1) * var(--lookrun-min, 320px) * 0.78);
	aspect-ratio: var(--ar, 1);
	min-width: 0;
}

.lookrun--justify .lookrun__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* One photograph left alone on the last line would stretch across the
   whole width, so it is held to something closer to its neighbours. */

.lookrun--justify .lookrun__frame:last-child:first-of-type {
	max-width: 100%;
}

@media (max-width: 560px) {
	.lookrun--justify .lookrun__grid {
		display: grid;
		grid-template-columns: 1fr;
	}

	.lookrun--justify .lookrun__frame {
		aspect-ratio: auto;
	}

	.lookrun--justify .lookrun__frame img {
		height: auto;
	}
}

/* Trimmed to one shape so the line is even. What falls outside is lost,
   which is the price of the tops and bottoms lining up. */

.lookrun--shaped .lookrun__frame {
	aspect-ratio: var(--look-shape, 3 / 4);
}

.lookrun--shaped .lookrun__frame img {
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
}

/* A ceiling measured against the window rather than in pixels.

   A photograph is asked for at a width, and the row then shares out
   whatever space is left between however many are on it. On a wide
   laptop a set of two or three wide photographs can take far more than
   was asked for, and one of them ends up taller than the screen - which
   is not a large photograph, it is a photograph you cannot see.

   The ceiling is given as a height, so it holds whatever the shape:
   an upright frame is allowed less width than a wide one and the two
   come out the same height on the screen. */

.lookrun--capped .lookrun__grid {
	justify-items: center;
}

.lookrun--capped .lookrun__frame {
	max-width: calc(var(--ar, 1) * var(--look-cap, 70vh));
}

/* Held to the middle of its column rather than sitting against one
   side of a track that is wider than the photograph is allowed to be. */

.lookrun--capped:not(.lookrun--justify) .lookrun__frame {
	width: 100%;
}

/* Trimmed frames all share one shape, so the ceiling reads that shape
   rather than the proportions the photograph happened to be shot in. */

.lookrun--capped.lookrun--shaped .lookrun__frame {
	max-width: calc(var(--look-shape-n, 0.75) * var(--look-cap, 70vh));
}

/* A flush row that no longer reaches both sides, because its frames
   have hit the ceiling, is centred instead of left hanging. */

.lookrun--capped.lookrun--justify .lookrun__grid {
	justify-content: center;
}

/* An album: the set stands as one photograph, and the rest are behind it
   until someone asks. Opening one is not an expansion but a change of
   page - the shelf goes, and what is left is that album and nothing
   else, with the way back at the head of it. */

/* Shut, the albums are a shelf: as many across as asked for, every cover
   the same width and the same shape. */

.lookrun--album {
	display: grid;
	grid-template-columns: repeat(var(--album-cols, 3), minmax(0, 1fr));
	gap: calc(var(--lookrun-gap, 40px) + 22px) var(--lookrun-gap, 40px);
	align-items: start;
}

/* On the shelf each album is its own object, so the rule that separates
   one passage of a collection from the next has nothing to divide. */

.lookrun--album .lookrun__look {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.lookrun--album .lookrun__look::before {
	content: none;
}

/* With one album open the shelf is not a grid at all - the others are
   gone, and the one left has the page to itself. */

.lookrun--album.has-open {
	display: block;
}

.lookrun--album.has-open .lookrun__look--album.is-shut {
	display: none;
}

.album {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* The words stand over their cover, in the hand the rest of the site
   writes in: Cormorant in italic, in the ink of the page rather than a
   shade of grey apologising for itself. The name leads and whatever was
   written for the set follows it, so a set given only a description is
   still named by its own words rather than standing there bare. */

.album__words {
	display: block;
	margin-bottom: 18px;
}

.album__name {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 21px;
	line-height: 1.34;
	letter-spacing: 0.006em;
	color: #000000;
}

.album__note {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.006em;
	color: #000000;
}

/* Given both, the description is a line under the name rather than a
   second heading of the same weight. */

.album__name + .album__note {
	margin-top: 7px;
	opacity: 0.72;
}

.album__frame {
	display: block;
	overflow: hidden;
	background: var(--wash);
}

.album__frame img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 1.8s var(--ease);
}

/* Every cover trimmed to the same shape. The photographs inside the
   album are untouched - only the face of it is cut, the way the spine
   of a book is the same height whatever is printed inside. */

.album--shaped .album__frame {
	aspect-ratio: var(--album-shape, 3 / 4);
}

.album--shaped .album__frame img {
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
}

.album:hover .album__frame img,
.album:focus-visible .album__frame img {
	transform: scale(1.035);
}

/* The count is writing too, so it is set as writing: the same italic
   serif as the name above the cover, in the ink of the page. Nine pixels
   of spaced-out capitals reads as a label on a shelf in a shop. */

.album__count {
	display: block;
	margin-top: 13px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: #000000;
	opacity: 0.55;
	transition: opacity 0.45s var(--ease);
}

.album:hover .album__count {
	opacity: 1;
}

/* Shut, the photographs and the words are not merely invisible - they
   are out of the page altogether, so nothing is read out to a screen
   reader or found by a search before it has been asked for. */

.lookrun__look--album.is-shut .lookrun__note,
.lookrun__look--album.is-shut .lookrun__grid,
.lookrun__look--album.is-shut .album__back {
	display: none;
}

.lookrun__look--album:not(.is-shut) .album {
	display: none;
}

/* The way back: a thin arrow and a word, in the ink of the page and in
   the same italic serif as everything else the site writes. No border,
   no box - it is a step backwards, not a button to be pressed for its
   own sake.

   It sits on the left, lined up with the edge of the first photograph
   below it. */

.album__back {
	margin: 0 0 38px;
	text-align: left;
}

.album__shut {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #000000;
	cursor: pointer;
}

.album__shut svg {
	display: block;
	align-self: center;
	transition: transform 0.4s var(--ease);
}

.album__shut:hover svg {
	transform: translateX(-4px);
}

/* --------------------------------------------------------------------------
   The Back button. A slim black bar with the word in the site's italic
   serif and a long hairline arrow, the way a fashion house letters a
   label: quiet, exact, nothing heavy. On hover the arrow draws further
   out and the word takes the pink of the name. The same button closes
   an album in the gallery and leads from a collection back to all the
   collections.
   ----------------------------------------------------------------------- */

.album__shut,
.milev-back {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 42px;
	padding: 0 24px 0 18px;
	border: 0;
	border-radius: 0;
	background: #000000;
	color: #ffffff;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.45s var(--ease);
}

.album__shut span,
.milev-back span {
	margin: 0;
	transform: translateY(-1px);
}

.album__shut svg,
.milev-back svg {
	display: block;
	flex: none;
	overflow: visible;
	transform-origin: right center;
	transition: transform 0.55s var(--ease);
}

.album__shut:hover,
.album__shut:focus-visible,
.milev-back:hover,
.milev-back:focus-visible {
	background: #000000;
	color: var(--back-accent, #e9a6ac);
}

.album__shut:hover svg,
.album__shut:focus-visible svg,
.milev-back:hover svg,
.milev-back:focus-visible svg {
	transform: translateX(-5px) scaleX(1.18);
}

/* On a collection it stands on the same left edge as the name in the
   header, close above the collection's title. */

.collection-back {
	padding-top: 28px;
	padding-bottom: 0;
	margin-bottom: -10px;
}

@media (max-width: 560px) {
	.collection-back {
		padding-top: 18px;
	}

	.album__shut,
	.milev-back {
		height: 38px;
		padding: 0 20px 0 15px;
		font-size: 17px;
	}
}

/* The words of the album sit above its photographs, as the looks of a
   collection do, so an opened album reads the same way a collection
   page does rather than inventing a second manner. */

.lookrun__look--album:not(.is-shut) .lookrun__note {
	margin-bottom: 40px;
}

/* Four covers across a tablet are stamps, so the shelf narrows before
   the photographs on it become too small to be worth showing. */

@media (max-width: 1100px) {
	.lookrun--album {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.lookrun--album {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.album__name {
		font-size: 19px;
	}

	.album__note {
		font-size: 15px;
	}

	.album__back {
		margin-bottom: 28px;
	}
}

.lookrun__frame:hover img {
	transform: scale(1.03);
}

@media (max-width: 900px) {
	.lookrun__grid {
		gap: 18px;
	}

	.lookrun__look {
		padding-top: 44px;
		margin-top: 36px;
	}

	.lookrun__text {
		font-size: calc(var(--look-note, 16px) * 0.88);
	}
}

@media (max-width: 560px) {
	.lookrun__grid {
		grid-template-columns: 1fr;
	}

	/* One photograph to a line already, and the width of a telephone is
	   its own ceiling. Holding to the window's height as well would
	   leave an upright photograph inset from both edges for no reason. */

	.lookrun--capped .lookrun__frame,
	.lookrun--capped.lookrun--shaped .lookrun__frame {
		max-width: 100%;
	}

	/* Every frame the full width of the line. A centred column sizes a
	   frame from the photograph inside it, and the first photographs
	   of the page - loaded straight away rather than on scroll - report
	   a smaller natural width than the rest, so they came out narrower
	   than everything below them. Phones only; nothing wider changes. */

	.lookrun__grid > .lookrun__frame {
		justify-self: stretch;
		width: 100%;
		max-width: 100%;
	}
}


/* How far the run reaches. Out of the page grid and across the whole
   window, with or without a margin of its own at the sides. */

.lookrun--edge,
.lookrun--flush {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

.lookrun--edge {
	padding-left: var(--frame);
	padding-right: var(--frame);
}

/* Flush to the glass, and with the gaps closed the photographs touch */

.lookrun--flush {
	padding-left: 0;
	padding-right: 0;
}

/* The words stay where the rest of the page keeps its text, however far
   the photographs run, or they would drift to the middle of the window
   and lose the column everything else is read in. */

.lookrun--edge .lookrun__note,
.lookrun--flush .lookrun__note {
	padding-left: var(--frame);
	padding-right: var(--frame);
}

/* The way out of the menu, in the same place as the way in */

.overlay__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--menu-h);
	display: flex;
	align-items: center;
	pointer-events: none;
}

.overlay__bar-inner {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.opener--over {
	color: #ffffff;
	pointer-events: auto;
}

/* Its three bars are already taught to fold into a cross when the menu
   is open, so nothing has to be drawn twice. */

.opener--over span:not(.screen-reader-text) {
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

/* The admin bar pushes the page down but not a fixed overlay, so without
   this the button on top sits exactly its height above the one beneath.
   Only ever seen by someone logged in, which is why it went unnoticed. */

.admin-bar .overlay__bar {
	top: 32px;
}

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

/* Filled from the start rather than only when the cursor arrives. A
   button that is invisible until you find it is not a button. */

.btn--fill {
	color: #ffffff;
	background-color: var(--ink);
	border: 2px solid var(--ink);
}

.btn--fill:hover,
.btn--fill:focus-visible {
	color: #ffffff;
	background-color: #2a2a2a;
	border-color: #2a2a2a;
}

/* The drawn name in the footer, in its own colour against the black */

.footer__brand--mark {
	line-height: 0;
	margin: 0 0 18px;
}

.mark__svg--foot {
	width: min(var(--foot-mark-w, 240px), 100%);
	height: auto;
	color: var(--mark-ink, #e9a6ac);
}

@media (max-width: 700px) {
	.mark__svg--foot {
		width: min(var(--foot-mark-w, 240px), 62vw);
	}
}

/* ==========================================================================
   32. The viewer, opened on its own over the page
   ========================================================================== */

.viewer--plain {
	grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 360px);
	gap: 34px;

	/* Room taken off the right moves the whole pair - the photograph and
	   the words beside it - away from that edge and back towards the
	   middle of the window, without changing the space between them. */
	padding-right: clamp(56px, 10vw, 220px);

	/* The single column version centres its one item. With a second
	   column the items have to be stretched again, or the stage gets no
	   height and the photograph never appears. */
	place-items: stretch;
}

/* The photograph and its controls travel together. The figure shrinks to
   the width of the picture, so an arrow beside it really is beside the
   picture rather than out at the edge of the window. */

/* Pushed to the right of its column rather than centred in it. The dead
   space was all between the photograph and the words, which is the one
   gap that should be small. */

.viewer__frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 22px;
	min-width: 0;
	height: 100%;
	padding-right: 54px;
}

.viewer__frame .viewer__stage {
	position: relative;
	height: 100%;
	width: auto;
	flex: 0 1 auto;
}

.viewer__arrow {
	flex: 0 0 auto;
	border: 0;
	background: none;
	padding: 6px;
	line-height: 0;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.35s var(--ease), transform 0.45s var(--ease);
}

.viewer__arrow svg {
	width: 38px;
	height: 38px;
	stroke-width: 1;
}

.viewer__arrow:hover,
.viewer__arrow:focus-visible {
	color: #ffffff;
}

.viewer__arrow--prev:hover {
	transform: translateX(-4px);
}

.viewer__arrow--next:hover {
	transform: translateX(4px);
}

/* Against the top corner of the picture, not the corner of the screen */

.viewer--plain .viewer__close,
.viewer__frame .viewer__close {
	position: absolute;
	top: -10px;
	right: -58px;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: none;
	color: #ffffff;
	transition: color 0.35s var(--ease), transform 0.5s var(--ease), opacity 0.35s var(--ease);
	opacity: 0.9;
}

.viewer__frame .viewer__close svg {
	width: 34px;
	height: 34px;
	stroke-width: 1;
}

.viewer__frame .viewer__close:hover,
.viewer__frame .viewer__close:focus-visible {
	color: #ffffff;
	opacity: 1;
	transform: rotate(90deg);
}

/* The words, set close to the picture and bright enough to read */

.viewer--plain .viewer__side {
	display: flex;
	align-self: center;
	padding-left: 0;
}

.viewer--plain .viewer__toggle {
	display: none;
}

.viewer--plain .viewer__info[hidden] {
	display: block;
}

.viewer--plain .viewer__info {
	border: 0;
	padding: 0;
	margin: 0;
}

.viewer--plain .viewer__title {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 14px;
}

/* The same hand as the line under the name on the front page: the serif,
   in italic, large enough to be read as writing rather than as a label. */

.viewer--plain .viewer__text {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: 21px;
	line-height: 2;
	letter-spacing: 0.012em;
	color: #ffffff;
	margin: 0;
	white-space: pre-line;
}

/* Counting frames is a gallery habit. A lookbook says what the garment
   is, not which number it happens to be. */

.viewer--plain .viewer__num,
.viewer--plain .viewer__count,
.viewer--plain .viewer__nav {
	display: none;
}

@media (max-width: 900px) {
	.viewer--plain {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
		gap: 14px;
	}

	.viewer--plain {
		padding-right: 46px;
	}

	.viewer__frame {
		gap: 6px;
		justify-content: center;
		padding-right: 0;
	}

	.viewer__arrow svg {
		width: 30px;
		height: 30px;
	}

	/* The frame shrinks to the photograph instead of filling the whole
	   column, so the X sits just above the photograph's top corner
	   rather than up at the top of the screen. The ceiling on the
	   photograph's height leaves room for the X above it and the words
	   below it. */

	.viewer__frame .viewer__stage {
		height: auto;
		max-height: 100%;
	}

	.viewer__frame .viewer__stage img {
		max-height: calc(100svh - 150px);
	}

	.viewer__frame .viewer__close {
		top: -48px;
		right: 4px;
	}

	/* The photograph as large as the phone allows: the side margins go,
	   and the arrows sit over its edges instead of taking room beside
	   it. A soft shadow keeps them visible on a light photograph. */

	.viewer,
	.viewer--plain {
		padding: 60px 0 18px;
	}

	.viewer__side,
	.viewer--plain .viewer__side {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}

	.viewer__frame {
		position: relative;
		gap: 0;
	}

	.viewer__arrow {
		position: absolute;
		top: 50%;
		z-index: 2;
		transform: translateY(-50%);
		filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
	}

	.viewer__arrow--prev {
		left: 2px;
	}

	.viewer__arrow--next {
		right: 2px;
	}

	.viewer__arrow--prev:hover,
	.viewer__arrow--next:hover {
		transform: translateY(-50%);
	}

	.viewer--plain .viewer__side {
		align-items: center;
		text-align: center;
	}

	.viewer--plain .viewer__text {
		font-size: 17px;
		line-height: 1.8;
	}
}

/* ==========================================================================
   33. The About page
   ========================================================================== */

/* Set as writing rather than as a paragraph of interface. The same hand
   as the line under the name, the descriptions beside the photographs
   and the collection titles. */

.page-template-template-about .prose {
	max-width: 34em;
	font-family: var(--serif);
	font-size: clamp(19px, 1.6vw, 24px);
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: 0.008em;
	color: var(--ink);
}

.page-template-template-about .prose p {
	margin: 0 0 1.1em;
}

.page-template-template-about .prose p:last-child {
	margin-bottom: 0;
}

/* The first line set larger, the way a piece of writing opens */

.page-template-template-about .prose > p:first-of-type {
	font-style: italic;
	font-size: 1.18em;
	line-height: 1.55;
}

.page-template-template-contact main > .section:first-of-type {
	min-height: calc(100svh - var(--menu-h) - 240px);
	padding-bottom: calc(var(--rhythm) * 0.8);
}

@supports not (height: 100svh) {
	.page-template-template-contact main > .section:first-of-type {
		min-height: calc(100vh - var(--menu-h) - 240px);
	}
}

@media (max-width: 700px) {
	.page-template-template-contact main > .section:first-of-type {
		min-height: 0;
	}
}

/* A short page left the footer halfway up the screen. The section is
   given a floor so the page fills the window before the black begins. */

.page-template-template-about main > .section:first-of-type {
	min-height: calc(100svh - var(--menu-h) - 260px);
	padding-bottom: calc(var(--rhythm) * 0.9);
}

@supports not (height: 100svh) {
	.page-template-template-about main > .section:first-of-type {
		min-height: calc(100vh - var(--menu-h) - 260px);
	}
}

@media (max-width: 700px) {
	.contact .prose {
		font-size: 21px;
	}

	.contact form {
		max-width: none;
	}

	.page-template-template-about .prose {
		font-size: 18px;
	}

	.page-template-template-about main > .section:first-of-type {
		min-height: 0;
	}
}