/*
 * Bower.
 *
 * The hero sits on a computed sky, so the type there is light on dark; the rest
 * of the page resolves to paper and is dark on light. Both are covered by fixed
 * tokens rather than by anything the shader decides, because the sky changes
 * with the date and the words have to stay readable on every one of them.
 */

:root {
	--paper: #f9f6f1;
	--ink: #221f1b;
	--ink-2: #494339;
	--ink-3: #5f584c;
	--rule: rgba(34, 31, 27, 0.16);
	--rule-2: rgba(34, 31, 27, 0.09);
	--sheet: rgba(249, 246, 241, 0.93);

	--accent: #7a5a2e;

	/* On the sky. Solved against the darkest the shader is allowed to go. */
	--on-sky: #fbf8f3;
	--on-sky-2: #e6dfd2;

	--display: 'Bower Display', ui-serif, Georgia, serif;
	--sans: 'Bower Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--pad: clamp(1.1rem, 4vw, 3.4rem);
	--measure: 34rem;
	--maxw: 78rem;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media ( prefers-reduced-motion: reduce ) { html { scroll-behavior: auto; } }
html.is-locked { overflow: hidden; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: clamp(0.98rem, 0.95rem + 0.18vw, 1.07rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 400; letter-spacing: -0.014em; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

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

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--accent); outline-offset: 3px;
}

.skip {
	position: absolute; left: 0.6rem; top: -4rem; z-index: 200;
	background: var(--ink); color: var(--paper);
	padding: 0.6em 1em; text-decoration: none;
	transition: top 0.2s var(--ease);
}
.skip:focus { top: 0.6rem; }

/* ─────────────────────────  The sky  ────────────────────────────────── */

/*
 * The ground carries a real sky even when the shader is not there.
 *
 * It used to be transparent, on the assumption that the canvas would always be
 * painting. Three ways that assumption fails, and all three leave reversed-out
 * hero type on the paper background, which is invisible:
 *
 *   - no WebGL2, or no float render target;
 *   - the quality governor reaching the bottom of its ladder and stopping,
 *     which a heavy shader on a software rasteriser will do;
 *   - the first 1.2 seconds of every single load, while the canvas fades in.
 *
 * So the fallback is a static dusk that stands in for the shader, and it is
 * dark enough on its own: the hero type is rgb(251,248,243), and the lightest
 * stop below is at a relative luminance of 0.081, which clears 4.5:1 without
 * any help from the scrim.
 */
.ground {
	position: fixed; inset: 0; z-index: 0; pointer-events: none; contain: strict;
	background: var(--paper);
}

.has-hero .ground {
	background: linear-gradient(
		to bottom,
		#1b2130 0%,
		#272a33 34%,
		#3a3026 62%,
		#5c421f 84%,
		#6b4a22 100%
	);
}
.ground__canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.ground__canvas.is-ready { opacity: 1; }

.masthead, .site-main, .site-footer { position: relative; z-index: 1; }
.masthead { z-index: 60; }
.drawer { z-index: 70; }

/* ─────────────────────────  Masthead  ───────────────────────────────── */

/*
 * The masthead starts on the sky and ends on paper, so it carries both colour
 * schemes and swaps when it settles.
 */
.masthead { position: sticky; top: 0; color: var(--ink); transition: background-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
/* Light only where there is actually sky behind it. */
.has-hero .masthead { color: var(--on-sky); }

.masthead.is-settled,
.has-hero .masthead.is-settled {
	color: var(--ink);
	background: var(--sheet);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--rule-2);
}
.masthead__inner {
	max-width: var(--maxw); margin-inline: auto;
	padding: clamp(0.8rem, 2vh, 1.2rem) var(--pad);
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.mark { text-decoration: none; display: grid; gap: 0.1rem; }
.mark__name { font-family: var(--display); font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: 0.01em; }
.mark__what { font-size: 0.76rem; opacity: 0.8; }

.nav { display: none; }
@media ( min-width: 58rem ) {
	.nav { display: flex; gap: clamp(1rem, 2vw, 1.9rem); align-items: baseline; }
	.drawer-toggle { display: none; }
}
.nav a {
	font-size: 0.9rem; text-decoration: none; opacity: 0.86;
	padding-bottom: 0.2em; border-bottom: 1px solid transparent;
	transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; border-color: currentColor; }

.drawer-toggle {
	appearance: none; background: transparent; border: 0; padding: 0.6rem;
	cursor: pointer; display: grid; gap: 5px; margin-right: -0.6rem; color: inherit;
}
.drawer-toggle i { display: block; width: 24px; height: 1.5px; background: currentColor; }

.drawer {
	position: fixed; inset: 0; background: var(--sheet); color: var(--ink);
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	display: grid; place-content: center; gap: 1.1rem; text-align: center;
	opacity: 0; visibility: hidden;
	transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a { font-family: var(--display); font-size: clamp(1.4rem, 5vw, 2.1rem); text-decoration: none; }
.drawer__close {
	position: absolute; top: 1rem; right: 1rem;
	appearance: none; background: transparent; border: 0; cursor: pointer;
	font-size: 0.85rem; color: var(--ink-2); padding: 0.7rem;
}

/* ─────────────────────────  Reveals  ────────────────────────────────── */

.js [data-reveal] {
	opacity: 0; transform: translateY(12px);
	transition: opacity 0.8s var(--out), transform 0.8s var(--out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media ( prefers-reduced-motion: reduce ) {
	.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────  Sections  ───────────────────────────────── */

.opening, .light, .grid, .listing-top, .single,
.room__top, .room__body, .room__holds, .stepper {
	max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
}

/* The hero is on the sky, so it is light on dark and needs the room to be. */
/*
 * The hero is a whole viewport of sky.
 *
 * It used to be a 76vh band whose bottom padding was where the sky handed over
 * to paper, which meant the shader's strong region was a strip most of the page
 * never saw — the honest verdict on that was that you could not tell there was
 * a shader running. The hand-over now happens BELOW this box, so the sky is at
 * full strength for a full screen and the type is reversed out of it.
 */
/*
 * A legibility scrim under the hero copy.
 *
 * The sky is now strong enough to be a real background, and that brings back the
 * problem the old faded version never had: the bottom third of a sunset is a
 * near-white gold, and reversed-out type on near-white gold is unreadable. The
 * measured contrast for the sub-heading over the horizon was 1.24:1.
 *
 * The fix is a scrim rather than a darker sky, because darkening the sky to suit
 * the type is how the first version ended up invisible. This darkens only the
 * band the words are actually in, is anchored to the bottom of the hero where
 * the bright horizon always is, and leaves the whole upper sky untouched.
 */
.opening::before {
	content: ""; position: absolute; bottom: 0;
	/* Full bleed. The hero is a max-width container, so inset-inline: 0 stopped
	   the scrim at the text column and drew two hard vertical seams down the
	   sunset. */
	left: 50%; width: 100vw; transform: translateX(-50%);
	height: min(58%, 30rem); pointer-events: none; z-index: 0;
	/*
	 * Solved against the measurement, not chosen by eye. The sub-heading is
	 * rgb(230,223,210); on the unscrimmed golden band at rgb(162,133,62) that is
	 * 2.66:1. To clear 4.5:1 the ground under it has to come down to about a
	 * relative luminance of 0.12, which is what these stops do.
	 */
	background: linear-gradient(
		to top,
		rgba(12, 9, 6, 0.80) 0%,
		rgba(12, 9, 6, 0.68) 22%,
		rgba(12, 9, 6, 0.44) 48%,
		rgba(12, 9, 6, 0.16) 74%,
		rgba(12, 9, 6, 0) 100%
	);
}

.opening > * { position: relative; z-index: 1; }

/* The masthead sits on open sky at the top of the hero, which can be bright at
   midday as well as dark at dusk, so it gets its own small scrim rather than a
   colour that only works at one hour. */
.has-hero .masthead::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
	background: linear-gradient( rgba(14, 11, 8, 0.46), rgba(14, 11, 8, 0) );
}
.has-hero .masthead { position: sticky; }
.has-hero .masthead.is-settled::before { opacity: 0; transition: opacity 300ms var(--ease); }

.opening {
	/* The scrim below is absolutely positioned against this box. Without a
	   containing block it anchored to the viewport instead and put a dark band
	   across a paper section at the foot of the document. */
	position: relative;
	min-height: 100svh;
	display: grid; align-items: end;
	padding-block: clamp(6rem, 18vh, 11rem) clamp(3rem, 7vh, 5rem);
	color: var(--on-sky);
}

/* A quiet hint that there is more below a full-height first screen. */
.opening__more {
	display: block; margin-top: clamp(1.6rem, 4vh, 2.6rem);
	font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--on-sky); opacity: 0.82; text-decoration: none;
}
.opening__more::after {
	content: ""; display: block; width: 1px; height: 2.4rem; margin-top: 0.7rem;
	background: linear-gradient(var(--on-sky), transparent);
}
.opening__inner { width: 100%; }
.opening__line {
	font-family: var(--display);
	font-size: clamp(2.4rem, 7vw, 5.4rem);
	font-weight: 300; letter-spacing: -0.012em; max-width: 15ch;
	margin-bottom: clamp(0.8rem, 2vh, 1.4rem);
	text-shadow: 0 1px 24px rgba(20, 16, 10, 0.30);
}
.opening__sub {
	max-width: var(--measure); color: var(--on-sky);
	font-size: clamp(1.02rem, 1.25vw, 1.16rem);
	/* A tight halo, not a wash: the wash shadow spreads its ink over 16px and
	   changes nothing directly behind a stroke, which is where contrast lives.
	   Measured on the brightest part of the golden band this line was 3.25:1;
	   with the halo the ground behind every glyph is dark whatever the sky is
	   doing. */
	text-shadow:
		0 0 2px rgba(12, 9, 6, 0.9),
		0 1px 6px rgba(12, 9, 6, 0.75),
		0 2px 18px rgba(12, 9, 6, 0.5);
}

/* ─────────────────────────  The light panel  ────────────────────────── */

.light { padding-block: clamp(2.5rem, 7vh, 4.5rem); }
.light__title { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin-bottom: 0.7rem; }
.light__note { color: var(--ink-2); max-width: var(--measure); font-size: 0.92rem; margin-top: 0.9rem; }

.light__form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.light__label { font-size: 0.86rem; color: var(--ink-2); }
.light__date {
	font: inherit; font-size: 0.95rem; color: var(--ink);
	background: rgba(255,255,255,0.6); border: 1px solid var(--rule); padding: 0.5em 0.7em;
}
.light__go {
	font: inherit; font-size: 0.9rem; cursor: pointer;
	background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 0.55em 1.2em;
}

.light__date-said { font-family: var(--display); font-size: clamp(1.1rem, 1.9vw, 1.4rem); margin-bottom: 0.8rem; }
.light__list { margin: 0; display: grid; gap: 0; }
.light__row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.4rem 1rem; align-items: baseline;
	padding-block: 0.62rem; border-top: 1px solid var(--rule-2);
}
.light__row:first-child { border-top: 0; }
.light__row dt { font-size: 0.9rem; color: var(--ink-2); }
.light__row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.light__row--key dd { font-size: 1.12rem; }
.light__where { display: block; font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: normal; }

@media ( min-width: 58rem ) {
	.light { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
}

/* ─────────────────────────  Capacity  ───────────────────────────────── */

.holds { padding-block: clamp(1.5rem, 4vh, 2.6rem); }
.holds__title { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin-bottom: 0.7rem; }
.holds__note { color: var(--ink-2); max-width: var(--measure); }
.holds__cap { margin-top: 0.7rem; color: var(--accent); max-width: var(--measure); font-size: 0.92rem; }

.holds__table { width: 100%; border-collapse: collapse; margin-top: clamp(1rem, 2.5vh, 1.6rem); }
.holds__table th, .holds__table td { text-align: left; padding: 0.7rem 0.8rem 0.7rem 0; border-top: 1px solid var(--rule-2); vertical-align: baseline; }
.holds__table tr:first-child th, .holds__table tr:first-child td { border-top: 0; }
.holds__table th { font-weight: 500; width: 11rem; }
.holds__n { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); width: 8rem; font-variant-numeric: tabular-nums; }
.holds__tables { display: block; font-family: var(--sans); font-size: 0.76rem; color: var(--ink-3); }
.holds__how { color: var(--ink-3); font-size: 0.86rem; }

@media ( min-width: 58rem ) {
	.holds { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
}
@media ( max-width: 40rem ) {
	.holds__table th { width: auto; }
	.holds__how { display: none; }
}

/* ─────────────────────────  Rooms  ──────────────────────────────────── */

/*
 * .grid used to BE the card grid. It now has a heading above the cards, so the
 * grid moved down a level -- leaving it on the section made the heading and the
 * whole card list into two columns of an auto-fit grid, which put every card in
 * a single stack down the right-hand half of the page.
 */
.grid {
	/* The sky finishes resolving to paper just below the hero, and this padding
	   is the room that happens in. Without it the heading sits on the tail of
	   the gradient. */
	padding-top: clamp(4.5rem, 12vh, 8rem);
	padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.grid__said {
	margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}

.grid__title {
	font-family: var(--display);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 300; letter-spacing: -0.012em; margin: 0;
}

.grid__note { margin: 0.6rem 0 0; max-width: 52ch; }

.grid__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.2rem, 3vw, 2.2rem);
}
.card { margin: 0; }
.card__link { display: grid; gap: 0.6rem; text-decoration: none; color: inherit; }
.card__cover { display: block; overflow: hidden; background: rgba(34,31,27,0.06); }
.card__cover img { width: 100%; aspect-ratio: 10 / 7; object-fit: cover; transition: transform 0.6s var(--out); }
.card__link:hover .card__cover img { transform: scale(1.02); }
.cover__none { display: block; width: 100%; aspect-ratio: 10 / 7; background: rgba(34,31,27,0.06); }
.card__said { display: grid; gap: 0.2rem; }
.card__name { font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.card__holds { font-size: 0.84rem; color: var(--ink-2); }
.card__aspect { font-size: 0.8rem; color: var(--ink-3); }

.room__top { min-height: 82svh; display: grid; align-content: end;
	padding-block: clamp(6rem, 17vh, 10rem) clamp(3rem, 7vh, 5rem); color: var(--on-sky); }
.room__title { font-family: var(--display); font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 300; max-width: 17ch; text-shadow: 0 1px 24px rgba(20,16,10,0.30); }
.room__aspect {
	margin-top: 0.7rem; color: var(--on-sky);
	text-shadow:
		0 0 2px rgba(12, 9, 6, 0.9),
		0 1px 6px rgba(12, 9, 6, 0.75),
		0 2px 18px rgba(12, 9, 6, 0.5);
}
.room__hero { margin: 0 auto clamp(1.5rem, 4vh, 2.5rem); max-width: var(--maxw); padding-inline: var(--pad); }
.room__body { padding-block: clamp(1.2rem, 3vh, 2rem); }

.stepper { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: clamp(3rem, 8vh, 5rem); }
.stepper__go { font-size: 0.88rem; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 0.15em; }
.stepper__go:hover { color: var(--ink); border-color: var(--accent); }
.stepper__go--next { margin-left: auto; }

/* ─────────────────────────  Listings & prose  ───────────────────────── */

/*
 * Ink, not sky. Only the front page hero and a room hero are tall enough to
 * guarantee sky behind them; a short listing header has nowhere to hand over,
 * so it sits on paper like the rest of the page.
 */
.listing-top { padding-block: clamp(5rem, 15vh, 9rem) clamp(1.2rem, 3vh, 2rem); color: var(--ink); }
.listing-title { font-family: var(--display); font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 300; max-width: 17ch; }
.listing-intro { margin-top: 0.7rem; max-width: var(--measure); color: var(--ink-2); }
.listing-empty { color: var(--ink-2); padding-block: 3rem; font-style: italic; }

.single { padding-bottom: clamp(3rem, 8vh, 5rem); }

.prose { max-width: var(--measure); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.05em; }
.prose p { line-height: 1.68; color: var(--ink-2); }
.prose h2 { font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-top: 1.8em; color: var(--ink); }
.prose a { color: var(--accent); text-underline-offset: 0.18em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; color: var(--ink-2); }
.prose li + li { margin-top: 0.35em; }

.notes { display: grid; }
.note { padding-block: clamp(1rem, 2.5vh, 1.6rem); border-top: 1px solid var(--rule-2); }
.note:first-child { border-top: 0; }
.note__link { text-decoration: none; display: grid; gap: 0.3rem; }
.note__name { font-family: var(--display); font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
.note__sub { color: var(--ink-2); }
.note__when { font-size: 0.76rem; color: var(--ink-3); }

/* ─────────────────────────  Bits  ───────────────────────────────────── */

.btn {
	display: inline-block; font-size: 0.9rem;
	padding: 0.7em 1.5em; text-decoration: none;
	background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
}

.hunt { display: flex; gap: 0.5rem; flex-wrap: wrap; max-width: 30rem; }
.hunt__field {
	flex: 1 1 13rem; min-width: 0; font: inherit; color: var(--ink);
	background: rgba(255,255,255,0.6); border: 1px solid var(--rule); padding: 0.6em 0.9em;
}
.hunt__go {
	font: inherit; font-size: 0.9rem; cursor: pointer;
	background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 0.6em 1.3em;
}

.pager { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: clamp(2rem, 5vh, 3.2rem) auto 0; max-width: var(--maxw); padding-inline: var(--pad); }
.pager .page-numbers {
	display: inline-grid; place-items: center; min-width: 2.5rem; padding: 0.45rem 0.7rem;
	font-size: 0.86rem; text-decoration: none; border: 1px solid var(--rule); color: var(--ink-2);
}
.pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ─────────────────────────  Footer  ─────────────────────────────────── */

.site-footer {
	margin-top: clamp(2.5rem, 7vh, 5rem);
	border-top: 1px solid var(--rule-2);
	padding-block: clamp(2.2rem, 6vh, 3.6rem) clamp(1.4rem, 4vh, 2.2rem);
}
.site-footer__inner {
	max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
	display: grid; gap: clamp(1.2rem, 3vh, 2rem);
}
.foot__head { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.45rem); margin-bottom: 0.4rem; }
.foot__note { color: var(--ink-2); max-width: 34ch; }
.foot__where { color: var(--ink-3); font-size: 0.86rem; margin-top: 0.4rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-content: start; }
.foot__nav a { font-size: 0.88rem; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.foot__nav a:hover { border-color: var(--accent); color: var(--ink); }
.foot__fine { font-size: 0.76rem; color: var(--ink-3); }

@media ( min-width: 62rem ) {
	.site-footer__inner { grid-template-columns: 1.4fr 1fr; align-items: start; }
	.foot__fine { grid-column: 1 / -1; }
}

/* ============================================================ the gallery */

/*
 * Full-bleed justified rows. The flex-basis and flex-grow on each figure come
 * from the picture's own aspect ratio, computed in PHP from the dimensions
 * WordPress already stored — so a row fills the width exactly and nothing is
 * cropped to fit a cell.
 */
.shots {
	margin-block: clamp(4rem, 11vh, 8rem);
}

.shots__said {
	max-width: var(--wide, 76rem);
	margin: 0 auto clamp(1.6rem, 4vh, 2.6rem);
	padding-inline: var(--gutter, clamp(1.25rem, 5vw, 4rem));
}

.shots__title {
	font-family: var(--display);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 300; letter-spacing: -0.012em; margin: 0;
}

.shots__note {
	margin: 0.6rem 0 0; max-width: 48ch; color: var(--ink-2, inherit);
}

.shots__row {
	display: flex; gap: 6px; margin-bottom: 6px;
}

.shot {
	margin: 0; min-width: 0; position: relative; overflow: hidden;
	background: var(--stone, #e9e4da);
}

.shot img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform 900ms var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

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

.shot figcaption {
	position: absolute; inset-inline: 0; bottom: 0;
	padding: 2.4rem 1rem 0.9rem;
	font-size: 0.82rem; line-height: 1.35; color: #fff;
	background: linear-gradient(transparent, rgba(18, 14, 10, 0.72));
	opacity: 0; transform: translateY(0.4rem);
	transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}

.shot:hover figcaption,
.shot:focus-within figcaption { opacity: 1; transform: none; }

@media (max-width: 40rem) {
	/* Two rows of one on a phone is a scroll, not a gallery. Let them wrap. */
	.shots__row { flex-wrap: wrap; }
	.shot { flex-basis: calc(50% - 3px) !important; flex-grow: 1 !important; aspect-ratio: 4 / 3; }
	.shot figcaption { opacity: 1; transform: none; font-size: 0.74rem; }
}

/* ==================================================== the summary table */

.allholds {
	max-width: var(--wide, 76rem); margin: clamp(4rem, 11vh, 8rem) auto;
	padding-inline: var(--gutter, clamp(1.25rem, 5vw, 4rem));
}

.allholds__title {
	font-family: var(--display);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 300; letter-spacing: -0.012em; margin: 0;
}

.allholds__note { margin: 0.6rem 0 clamp(1.4rem, 3vh, 2.2rem); max-width: 52ch; }

.allholds__scroll { overflow-x: auto; }

.allholds__table { width: 100%; border-collapse: collapse; text-align: left; }

.allholds__table th,
.allholds__table td {
	padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule, #d8d2c6);
	font-weight: 400; white-space: nowrap;
}

.allholds__table thead th {
	font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase;
	border-bottom-width: 2px; border-bottom-color: currentColor;
}

.allholds__table tbody th a { color: inherit; text-decoration: none; }
.allholds__table tbody th a:hover { text-decoration: underline; }

.allholds__table td.n {
	font-variant-numeric: tabular-nums; font-size: 1.05rem;
}

/* ========================================================= the day plan */

.day {
	max-width: var(--wide, 76rem); margin: clamp(4rem, 11vh, 8rem) auto;
	padding-inline: var(--gutter, clamp(1.25rem, 5vw, 4rem));
}

.day__title {
	font-family: var(--display);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 300; letter-spacing: -0.012em; margin: 0;
}

.day__note { margin: 0.6rem 0 clamp(1.8rem, 4vh, 2.8rem); max-width: 56ch; }

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

.day__step {
	display: grid; gap: 0.15rem 2rem;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	padding: 1.05rem 0 1.05rem 1.6rem;
	border-left: 2px solid var(--rule, #d8d2c6);
	position: relative;
}

.day__step::before {
	content: ""; position: absolute; left: -5px; top: 1.5rem;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--rule, #d8d2c6);
}

.day__step.is-key { border-left-color: currentColor; }
.day__step.is-key::before { background: currentColor; width: 12px; height: 12px; left: -7px; }

.day__when {
	font-variant-numeric: tabular-nums; font-size: 1.02rem;
	grid-row: span 2; align-self: start;
}

.day__what { font-size: 1.08rem; }
.day__step.is-key .day__what { font-size: 1.35rem; }

.day__how { font-size: 0.9rem; opacity: 0.78; max-width: 54ch; }

@media (max-width: 34rem) {
	.day__step { grid-template-columns: minmax(0, 1fr); }
	.day__when { grid-row: auto; font-size: 0.9rem; letter-spacing: 0.06em; }
}

/* ============================================================== the tail */

.tail {
	max-width: var(--wide, 76rem); margin: clamp(4rem, 12vh, 9rem) auto clamp(3rem, 8vh, 6rem);
	padding-inline: var(--gutter, clamp(1.25rem, 5vw, 4rem));
}

.tail__title {
	font-family: var(--display);
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 300; letter-spacing: -0.014em; margin: 0; max-width: 18ch;
}

.tail__said { margin: 0.9rem 0 1.6rem; max-width: 54ch; }

.tail__go {
	display: inline-block; padding: 0.85rem 1.8rem;
	border: 1px solid currentColor; color: inherit; text-decoration: none;
	font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase;
	transition: background-color 300ms var(--ease), color 300ms var(--ease);
}

.tail__go:hover { background: currentColor; }
.tail__go:hover { color: var(--paper, #f7f4ee); }