/* ==========================================================================
   VII Breaths — page hero and flexible content sections
   ========================================================================== */

/* --- Page hero ------------------------------------------------------------ */

.page-hero {
	position: relative;
	padding-block: clamp(3rem, 2rem + 6vw, 6rem) var(--vii-space-2xl);
	background-color: var(--vii-bg);
	color: var(--vii-text);
	overflow: hidden;
	border-bottom: 1px solid var(--vii-rule);
}

.page-hero--compact {
	padding-block: var(--vii-space-xl);
}

.page-hero__inner {
	position: relative;
	z-index: 2;
}

.page-hero__logo {
	width: min(100%, 32rem);
	margin-bottom: var(--vii-space-l);
}

/* Wordmark hero — the sleeve front. The mark, centred, and nothing else.
   The h1 text is carried by .page-hero__title.screen-reader-text. */
.page-hero--wordmark {
	display: flex;
	align-items: center;
	min-height: min(58vh, 30rem);
	padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
	text-align: center;
	border-bottom: 0;
}

@media (max-width: 40rem) {
	.page-hero--wordmark {
		min-height: 0;
		padding-block: var(--vii-space-xl);
	}

	.page-hero__scroll {
		margin-top: var(--vii-space-l);
	}
}

.page-hero--wordmark .page-hero__logo {
	width: min(100%, 46rem);
	margin-inline: auto;
	margin-bottom: 0;
}

.page-hero__standfirst {
	margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
	font-size: var(--vii-step--1);
	font-weight: 600;
	letter-spacing: var(--vii-tracking-wide);
	text-transform: uppercase;
	color: var(--vii-text-soft);
}

.page-hero__standfirst span {
	white-space: nowrap;
}

/* On a phone the three parts have to be allowed to break, or the line runs off
   the screen. */
@media (max-width: 40rem) {
	.page-hero__standfirst {
		letter-spacing: 0.12em;
	}

	.page-hero__standfirst span {
		white-space: normal;
	}
}

.page-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: var(--vii-space-2xs);
	margin-top: var(--vii-space-xl);
	font-size: var(--vii-step--1);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--vii-accent-text);
}

.page-hero__scroll::after {
	content: "\2193";
	transition: transform 240ms var(--vii-ease);
}

.page-hero__scroll:hover::after {
	transform: translateY(3px);
}

/* --- Media band: one full-bleed image, straight under the hero ------------
   Fed by the page's hero_image when the hero is set to show the wordmark.
   Without an image the theme renders the stand-in, so the band never
   collapses mid-build. ----------------------------------------------------- */

.media-band {
	position: relative;
	background: var(--vii-ink-deep);
	overflow: hidden;
}

.media-band__figure {
	margin: 0;
}

.media-band__img,
.media-band__placeholder {
	display: block;
	width: 100%;
	height: clamp(15rem, 36vw, 28rem);
	object-fit: cover;
	object-position: center 28%;
}

.media-band__img {
	filter: grayscale(0.35) contrast(1.08);
}

.media-band__placeholder {
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(135deg, rgba(216, 198, 153, 0.09) 0 3px, transparent 3px 14px),
		radial-gradient(70% 60% at 70% 20%, rgba(216, 198, 153, 0.16) 0%, rgba(216, 198, 153, 0) 60%),
		linear-gradient(160deg, #2b2620 0%, #16130f 60%, #0b0a09 100%);
}

.media-band__note {
	padding: 0.7em 1.2em;
	box-shadow: inset 0 0 0 2px var(--vii-red);
	color: var(--vii-kraft);
	font-size: var(--vii-step--1);
	font-weight: 600;
	letter-spacing: var(--vii-tracking-wide);
	text-transform: uppercase;
	text-align: center;
}

.media-band__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0.5em 0.9em;
	background: var(--vii-ink);
	color: var(--vii-on-ink-soft);
	font-size: var(--vii-step--1);
	letter-spacing: 0.08em;
}

/* --- Quote strip: one line, full width, hard rules top and bottom ---------
   The quote layout set to "strip" — used for the line that opens a page. --- */

.section-quote--strip {
	padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	border-block: 2px solid var(--vii-red);
	text-align: center;
}

.section-quote--strip .quote {
	max-width: none;
	padding-left: 0;
	border-left: 0;
}

.section-quote--strip .quote__text {
	max-width: 30ch;
	margin-inline: auto;
}

.section-quote--strip .quote__source {
	color: var(--vii-accent-text);
	letter-spacing: var(--vii-tracking-wide);
}

.section-quote--strip .quote__role {
	display: inline;
}

.page-hero__title {
	font-size: var(--vii-step-4);
	max-width: 20ch; /* Anton is condensed — a 16ch measure reads far too narrow */
	margin-bottom: var(--vii-space-m);
}

.page-hero__intro {
	font-size: var(--vii-step-1);
	color: var(--vii-text-soft);
	max-width: 42ch;
}

.page-hero__intro > * + * {
	margin-top: var(--vii-space-s);
}

/* Full-bleed photographic hero */
.page-hero--image {
	--vii-bg: var(--vii-ink);
	--vii-text: var(--vii-kraft);
	--vii-text-soft: rgba(216, 198, 153, 0.82);
	--vii-rule: rgba(216, 198, 153, 0.24);
	--vii-accent: var(--vii-red-hot);
	--vii-accent-text: var(--vii-red-soft);
	background-color: var(--vii-ink);
	color: var(--vii-kraft);
	min-height: min(78vh, 42rem);
	display: flex;
	align-items: flex-end;
}

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 10, 9, 0.35) 0%, rgba(11, 10, 9, 0.88) 100%);
}

.page-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.35) contrast(1.08);
}

/* --- Intro ---------------------------------------------------------------- */

.section-intro .section__title {
	font-size: var(--vii-step-2);
	max-width: 20ch;
}

/* Text and an optional image column, inside the band body. The image sits to
   the right of the text and drops under it on narrow screens. */
.intro__grid {
	display: grid;
	gap: var(--vii-space-l) var(--vii-space-xl);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 48rem) {
	.intro__grid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	}
}

.intro__media {
	margin: 0;
}

.intro__img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: grayscale(0.3) contrast(1.05);
}

.intro__media .split__placeholder {
	aspect-ratio: 3 / 4;
}

.section-intro.is-center {
	text-align: center;
}

.section-intro.is-center .section__title,
.section-intro.is-center .prose {
	margin-inline: auto;
}

.section-intro.is-center .eyebrow {
	justify-content: center;
}

/* --- Offerings ------------------------------------------------------------ */

.card-grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	border-top: 2px solid var(--vii-text);
}

.card-grid[data-columns="2"] {
	grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
}

.card {
	display: flex;
	flex-direction: column;
	padding: var(--vii-space-m) var(--vii-space-m) var(--vii-space-l) 0;
	border-bottom: 1px solid var(--vii-rule);
}

@media (min-width: 42rem) {
	.card {
		padding-right: var(--vii-space-l);
	}

	.card + .card {
		padding-left: var(--vii-space-l);
		border-left: 1px solid var(--vii-rule);
	}
}

/* Format line, title, text and link line up across every card, however the
   format label wraps. Four rows, shared from the grid above. Cards without a
   format line still sit on the same rows because the template prints the
   element either way. */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 42rem) {
		.card-grid {
			grid-auto-rows: auto;
		}

		.card {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 4;
			align-content: start;
		}
	}
}

.card__media {
	margin-bottom: var(--vii-space-m);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.3);
	transition: transform 700ms var(--vii-ease), filter 700ms var(--vii-ease);
}

.card:hover .card__img {
	transform: scale(1.03);
	filter: grayscale(0);
}

/* Printed even when empty so the subgrid rows stay aligned across cards —
   an empty one just takes no space. */
.card__format:empty {
	margin-bottom: 0;
}

.card__format {
	font-size: var(--vii-step--1);
	font-weight: 600;
	letter-spacing: var(--vii-tracking-wide);
	text-transform: uppercase;
	color: var(--vii-accent-text);
	margin-bottom: var(--vii-space-2xs);
}

.card__title {
	font-size: var(--vii-step-2);
	font-weight: var(--vii-weight-display);
	margin-bottom: var(--vii-space-xs);
}

.card__text {
	color: var(--vii-text-soft);
	flex: 1 1 auto;
}

/* --- Image + text --------------------------------------------------------- */

.split {
	display: grid;
	gap: var(--vii-space-xl);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 54rem) {
	.split {
		grid-template-columns: 5fr 6fr;
	}

	.is-image-right .split__media {
		order: 2;
	}
}

.split__img,
.split__placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	max-width: 100%;
}

.split__img {
	filter: grayscale(0.3) contrast(1.05);
}

.split__placeholder {
	position: relative;
	background:
		repeating-linear-gradient(
			135deg,
			var(--vii-kraft-deep) 0 2px,
			transparent 2px 9px
		),
		var(--vii-bone);
	box-shadow: inset 0 0 0 1px var(--vii-rule);
}

.split__placeholder::after {
	content: attr(data-label);
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.5em 0.9em;
	background: var(--vii-ink);
	color: var(--vii-kraft);
	font-size: var(--vii-step--1);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.split__body .section__title {
	font-size: var(--vii-step-2);
}

/* --- The brush mark -------------------------------------------------------
   One stroke, once per page, above the quote it belongs to. It draws itself
   left to right when the section comes into view — a single pass, not a
   loop. ---------------------------------------------------------------- */

.quote-brush {
	width: min(100%, 24rem);
	aspect-ratio: 10 / 1;
	margin-bottom: var(--vii-space-l);
	background: var(--vii-accent);
	-webkit-mask-image: var(--vii-stroke-brush);
	mask-image: var(--vii-stroke-brush);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.js .reveal .quote-brush {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 900ms var(--vii-ease) 120ms;
}

.js .reveal.is-visible .quote-brush {
	clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
	.js .reveal .quote-brush,
	.js .reveal.is-visible .quote-brush {
		clip-path: none;
		transition: none;
	}
}

/* --- Quote ---------------------------------------------------------------- */

.quote {
	position: relative;
	max-width: 46rem;
	padding-left: clamp(1.5rem, 4vw, 3rem);
	border-left: 3px solid var(--vii-accent);
}

/* Anton names things; Epilogue says them. A quote is speech, so it is set in
   the body face — large, tight, and readable at length. */
.quote__text {
	font-family: var(--vii-font-body);
	font-weight: 400;
	font-size: var(--vii-step-quote);
	line-height: 1.3;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

/* A quote carried inside another section rather than given its own band. */
.quote--inset {
	margin-top: var(--vii-space-l);
	max-width: 40rem;
}

@media (min-width: 48rem) {
	.quote--inset {
		margin-top: var(--vii-space-xl);
	}
}

.quote--inset .quote__text {
	font-size: var(--vii-step-1);
	line-height: 1.45;
	letter-spacing: 0;
}

.quote__source {
	margin-top: var(--vii-space-m);
	font-size: var(--vii-step--1);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.quote__name {
	display: block;
}

.quote__role {
	display: block;
	color: var(--vii-text-soft);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: none;
}

/* --- Numbered list: roman, because seven is the whole idea ----------------- */

.numbered-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	counter-reset: vii-item;
}

.numbered-list__item {
	counter-increment: vii-item;
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: var(--vii-space-m);
	padding-block: var(--vii-space-m);
	border-top: 1px solid var(--vii-rule);
}

.numbered-list__item:first-child {
	border-top: 2px solid var(--vii-text);
}

.numbered-list__item:last-child {
	border-bottom: 2px solid var(--vii-text);
}

.numbered-list__index {
	font-family: var(--vii-font-display);
	font-size: var(--vii-step-2);
	font-weight: var(--vii-weight-display);
	line-height: 1;
	color: var(--vii-accent-text);
	font-variant-numeric: tabular-nums;
}

.numbered-list__index:empty::before {
	content: counter(vii-item, upper-roman);
}

.numbered-list__title {
	text-wrap: balance;
	font-size: var(--vii-step-1);
	font-family: var(--vii-font-body);
	font-weight: 600;
	margin-bottom: var(--vii-space-2xs);
}

.numbered-list__text {
	color: var(--vii-text-soft);
	max-width: 58ch;
	text-wrap: pretty;
}

.numbered-list__text p {
	margin: 0;
}

/* Paragraphs inside an entry sit apart, not run together. */
.numbered-list__text p + p {
	margin-top: 0.75em;
}

@media (max-width: 34rem) {
	.numbered-list__item {
		grid-template-columns: 1fr;
		gap: var(--vii-space-2xs);
	}
}

/* --- Credits: who has booked him, set like a sleeve credit block ---------- */

.credits-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0;
	border-top: 2px solid var(--vii-text);
}

.credits-list li {
	font-family: var(--vii-font-body);
	font-size: var(--vii-step-1);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
	padding-block: var(--vii-space-s);
	padding-right: var(--vii-space-m);
	border-bottom: 1px solid var(--vii-rule);
}

.credits__note {
	margin-top: var(--vii-space-l);
	font-size: var(--vii-step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vii-text-soft);
	max-width: 60ch;
}

/* --- CTA ------------------------------------------------------------------ */

.section-cta {
	--vii-bg: var(--vii-red);
	--vii-text: #fff;
	--vii-text-soft: rgba(255, 255, 255, 0.86);
	--vii-rule: rgba(255, 255, 255, 0.3);
	--vii-accent: #fff;
	--vii-accent-text: rgba(255, 255, 255, 0.86);
	background-color: var(--vii-red);
	color: #fff;
}

.cta {
	display: grid;
	gap: var(--vii-space-l) var(--vii-space-xl);
	grid-template-columns: 1fr;
	align-items: end;
}

@media (min-width: 54rem) {
	.cta {
		grid-template-columns: 1.1fr 1fr;
	}
}

.cta__title {
	font-size: var(--vii-step-3);
	font-weight: var(--vii-weight-display-loud);
	max-width: 18ch;
}

.cta__text {
	color: var(--vii-text-soft);
	max-width: 48ch;
}

.section-cta .button {
	background: var(--vii-ink);
	color: var(--vii-kraft);
}

.section-cta .button:hover {
	background: #fff;
	color: var(--vii-ink);
}

/* --- Contact -------------------------------------------------------------- */

.split--contact {
	align-items: start;
}

/* No form shortcode set — one column at reading width rather than an empty
   right half. */
.split--single {
	grid-template-columns: 1fr;
}

.split--single > * {
	max-width: var(--vii-wrap-narrow);
}

@media (min-width: 54rem) {
	.split--single {
		grid-template-columns: 1fr;
	}
}

.contact-list {
	margin-top: var(--vii-space-l);
	gap: 0;
}

.contact-list li {
	display: grid;
	gap: var(--vii-space-3xs);
	padding-block: var(--vii-space-s);
	border-top: 1px solid var(--vii-rule);
}

.contact-list li:last-child {
	border-bottom: 1px solid var(--vii-rule);
}

.contact-list__label {
	font-size: var(--vii-step--1);
	font-weight: 600;
	letter-spacing: var(--vii-tracking-wide);
	text-transform: uppercase;
	color: var(--vii-text-soft);
}

/* Generic form styling so any plugin's markup inherits the system. */
.split__form input[type="text"],
.split__form input[type="email"],
.split__form input[type="tel"],
.split__form textarea,
.split__form select {
	width: 100%;
	padding: 0.9em 1em;
	font: inherit;
	font-size: var(--vii-step-0);
	color: var(--vii-ink);
	background: var(--vii-bone);
	border: 2px solid var(--vii-ink);
	border-radius: var(--vii-radius);
}

.split__form textarea {
	min-height: 9rem;
	resize: vertical;
}

.split__form label {
	display: block;
	margin-bottom: var(--vii-space-3xs);
	font-size: var(--vii-step--1);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vii-text-soft);
}

.split__form p + p {
	margin-top: var(--vii-space-s);
}

.split__form input[type="submit"],
.split__form button[type="submit"] {
	margin-top: var(--vii-space-m);
	padding: 0.95em 2em;
	width: auto;
	background: var(--vii-red);
	color: #fff;
	font-size: var(--vii-step--1);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 0;
	border-radius: var(--vii-radius);
	cursor: pointer;
	transition: background 240ms var(--vii-ease);
}

.split__form input[type="submit"]:hover,
.split__form button[type="submit"]:hover {
	background: var(--vii-red-hot);
}

/* --- Blog fallback -------------------------------------------------------- */

.entry {
	padding-block: var(--vii-space-m);
	border-bottom: 1px solid var(--vii-rule);
}

.entry__title {
	font-size: var(--vii-step-2);
}

.entry__title a {
	text-decoration: none;
}

/* --- Contact: optional image opposite the details --------------------------- */

.split--contact.has-media {
	align-items: center;
}

.contact__media {
	margin: 0;
}

.contact__img {
	display: block;
	width: 100%;
	max-width: 26rem;
	height: auto;
	margin-inline: auto;
}