/* The House of Seyd'amour — the classic-only layer.
 *
 * The block build got its header, footer and column widths from block attributes written
 * into the template files. Those attributes are gone, so the same measurements live here
 * instead: the menu, the mobile drawer, the widget areas, the footer grid, and the column
 * proportions each section was built to.
 *
 * main.css is shared with the block build and is not touched by any of this.
 */

/* ==========================================================================
   Header shell
   ========================================================================== */
.hos-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.hos-nav__right {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	min-width: 0;
}
.hos-header-static .hos-header { position: relative; }

/* The Customizer sets the logo width in pixels, which is the right unit on a desktop and
   the wrong one on a phone: 250px of a 375px screen is two thirds of the header. The cap
   keeps the chosen width until the screen is too small to carry it. */
.hos-logo img { width: min(var(--hos-logo-w, 250px), 44vw); }
.hos-logo--text a {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.hos-logo--text a:hover { color: var(--wp--preset--color--pink, #E4E2E2); }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.hos-announce__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ==========================================================================
   Primary menu
   ========================================================================== */
.hos-menu__list,
.hos-menu__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hos-menu__list {
	display: flex;
	align-items: center;
	gap: clamp(.9rem, 1.6vw, 1.9rem);
}
.hos-menu__item { position: relative; margin: 0; }

.hos-menu__link {
	display: inline-block;
	position: relative;
	color: #fff;
	opacity: .88;
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding-block: .5em;
	transition: color .3s ease, opacity .3s ease;
}
.hos-menu__link:hover { color: #fff; opacity: 1; }
.hos-menu__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 0;
	background: var(--wp--preset--color--pink, #E4E2E2);
	transition: width .4s cubic-bezier(.22, 1, .36, 1);
}
.hos-menu__link:hover::after,
.current-menu-item > .hos-menu__link::after,
.current-menu-ancestor > .hos-menu__link::after,
.current_page_item > .hos-menu__link::after { width: 100%; }

/* Dropdowns. The toggle button is the keyboard and touch route in; hover is the extra. */
.hos-submenu-toggle {
	background: none;
	border: 0;
	color: #fff;
	opacity: .7;
	cursor: pointer;
	padding: .3em .4em;
	font-size: .7rem;
	line-height: 1;
	transition: transform .3s ease, opacity .3s ease;
}
.hos-submenu-toggle:hover { opacity: 1; }
.hos-submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }

.hos-menu__sub {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 15rem;
	background: var(--wp--preset--color--ink, #171518);
	border: 1px solid rgba(255, 255, 255, .12);
	padding-block: .5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
	z-index: 40;
}
.hos-menu__item--parent:hover > .hos-menu__sub,
.hos-menu__item--parent:focus-within > .hos-menu__sub,
.hos-menu__item--parent.is-open > .hos-menu__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.hos-menu__sub .hos-menu__link {
	display: block;
	padding: .8em 1.4em;
	letter-spacing: .12em;
}
.hos-menu__sub .hos-menu__link::after { display: none; }
.hos-menu__sub .hos-menu__link:hover { background: rgba(255, 255, 255, .06); }

.hos-header-cta { flex: 0 0 auto; margin-top: 0; }
.hos-header-cta .wp-block-button__link { font-size: .66rem; padding: 1em 1.9em; }

/*
 * The header bar is black, and so is the default button. A black button on a black bar is
 * an invisible button, so the one inside the header inverts: white face, black label. Same
 * for the copy inside the mobile drawer, which sits on the same black.
 */
.hos-header .wp-block-button__link {
	background-color: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--noir, #0B0B0D);
}
.hos-header .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--pink, #E4E2E2);
	color: var(--wp--preset--color--noir, #0B0B0D);
}

/* Only ever visible inside the mobile drawer. */
.hos-menu__cta { display: none; }

/* The drawer's button sits inside .hos-menu, and main.css paints everything in there white
   so the menu reads on the black bar. A filled button is not menu text: white on a pale
   button is unreadable, and it measured 1.25:1.

   The .hos-header prefix is there to carry the weight. main.css matches it with
   `.hos-header .hos-menu a`, two classes and an element, which outranks two classes on
   their own — the first attempt at this rule looked right and changed nothing. */
.hos-header .hos-menu__cta .wp-block-button__link { color: var(--wp--preset--color--noir, #0B0B0D); }
.hos-header .hos-menu__cta .wp-block-button__link:hover { color: var(--wp--preset--color--white, #fff); }

/* ==========================================================================
   Mobile drawer
   ========================================================================== */
.hos-menu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: .6rem;
	cursor: pointer;
	color: #fff;
}
.hos-menu-toggle__bars { display: block; width: 26px; }
.hos-menu-toggle__bars span {
	display: block;
	height: 1px;
	background: currentColor;
	margin: 6px 0;
	transition: transform .35s ease, opacity .25s ease;
}
.hos-menu-toggle[aria-expanded="true"] .hos-menu-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hos-menu-toggle[aria-expanded="true"] .hos-menu-toggle__bars span:nth-child(2) { opacity: 0; }
.hos-menu-toggle[aria-expanded="true"] .hos-menu-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
	.hos-menu__link { font-size: .68rem; letter-spacing: .1em; }
	.hos-header-cta .wp-block-button__link { padding: .9em 1.3em; font-size: .6rem; }
}

@media (max-width: 999px) {
	.hos-menu-toggle { display: block; }
	.hos-header-cta { display: none; }

	.hos-menu {
		position: fixed;
		inset: 0;
		background: var(--wp--preset--color--noir, #0B0B0D);
		padding: 6rem var(--hos-gutter) 3rem;
		overflow-y: auto;
		z-index: 80;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-1.5rem);
		transition: opacity .35s ease, transform .35s ease, visibility .35s;
	}
	.hos-menu.is-open { opacity: 1; visibility: visible; transform: none; }

	.hos-menu__list { flex-direction: column; align-items: stretch; gap: 0; }
	.hos-menu__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}
	.hos-menu__link { flex: 1; font-size: .9rem; padding: 1.1em 0; letter-spacing: .14em; }
	.hos-menu__link::after { display: none; }

	/* On a phone a submenu only opens from the button, never on hover, so a tap on the
	   parent link still follows the link. */
	.hos-menu__sub {
		position: static;
		width: 100%;
		flex-basis: 100%;
		border: 0;
		background: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		padding: 0 0 .6rem 1rem;
	}
	.hos-menu__item--parent:hover > .hos-menu__sub { display: none; }
	.hos-menu__item--parent.is-open > .hos-menu__sub { display: block; }
	.hos-menu__sub .hos-menu__link { padding: .7em 0; font-size: .8rem; opacity: .75; }

	.hos-menu__cta { display: flex; margin-top: 2rem; }
}

/* The drawer covers the page, so the page must not scroll behind it. */
body.hos-menu-open { overflow: hidden; }

/* ==========================================================================
   Page headers and breadcrumbs
   ==========================================================================

   An inner page is a title and then paragraphs, and left bare that reads as an unfinished
   document rather than a page of this site. The header gets a soft band and a hairline so
   the page opens on something, and the body gets a standfirst and marked section headings
   so it has structure to look at.
   ========================================================================== */
.hos-page-head { text-align: center; }

/* Petal unless the template asked for a colour of its own, which the treatment and shop
   headers do. */
.hos-page-head:not(.has-background) {
	background-color: var(--wp--preset--color--petal, #FAFAFA);
}
.hos-page-head { padding-block: clamp(2.6rem, 6vw, 4.6rem); }

.hos-page-head h1 { margin-block: 1.2rem 0; }
.hos-page-head h1::after {
	content: "";
	display: block;
	width: 88px;
	height: 1px;
	margin: 1.5rem auto 0;
	background: var(--wp--preset--color--pink-deep, #6B6668);
	opacity: .55;
}
.hos-page-head .hos-lede { margin-inline: auto; max-width: 46rem; margin-top: 1.5rem; }

/* The opening paragraph of a page reads as a standfirst. */
.hos-entry--flow > p:first-child {
	font-size: var(--wp--preset--font-size--lede, 1.22rem);
	line-height: 1.85;
	color: var(--wp--preset--color--smoke, #6B6668);
}

/* Every h2 in page content opens a section: air above it, and a short rule to mark it. */
.hos-entry--flow > h2 {
	margin-top: clamp(2.6rem, 5vw, 4rem);
	padding-top: 1.5rem;
	position: relative;
}
.hos-entry--flow > h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 54px;
	height: 1px;
	background: var(--wp--preset--color--pink-deep, #6B6668);
}

/* Content that follows a full width band needs room, or it reads as a stray offcut caught
   between two coloured blocks. */
.hos-entry--flow > .alignfull + * { margin-top: clamp(2.6rem, 5vw, 4rem); }
.hos-entry--flow > :last-child { margin-bottom: clamp(1rem, 3vw, 2.5rem); }

.hos-crumbs {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist, #A5A0A2);
	margin-bottom: 1.4rem;
}
.hos-crumbs a:hover { color: var(--wp--preset--color--pink-deep, #6B6668); }
.hos-crumb-sep { opacity: .5; }

/* ==========================================================================
   Section proportions
   ==========================================================================

   The block build wrote these widths into each column as a flex-basis attribute. Setting
   flex-basis alone is not enough here: the base layer gives every column flex-grow 1, so a
   column with a 52% basis still grows into half of whatever is left and the split comes out
   at 76/24 instead. The grow has to be turned off on any column that has been given a
   width, which is what the 0 in each shorthand below is doing.
   ========================================================================== */

/* Hero. The photograph runs to the edge of the viewport, so the column gap is zero and the
   text column carries all of the padding itself. */
.hos-hero > .wp-block-columns { gap: 0; }
.hos-hero__text {
	flex: 0 1 52%;
	padding: var(--wp--preset--spacing--50, 5rem) var(--wp--preset--spacing--40, 3rem) var(--wp--preset--spacing--40, 3rem);
}
.hos-hero__figure { padding: 0; }
.hos-hero h1 { margin-block: .3em .45em; }

@media (min-width: 782px) {
	.hos-hero__text { padding-left: max(var(--hos-gutter), calc((100vw - var(--hos-wide)) / 2)); }
}

/* About. */
.hos-about__media { flex: 0 1 42%; }
.hos-about h2 { margin-block: 0 .5rem; }

/* Treatment cards beside the photograph, same full bleed trick as the hero. */
.hos-treatments > .wp-block-columns { gap: 0; }
.hos-treatments__text {
	flex: 0 1 64%;
	padding: 0 var(--wp--preset--spacing--40, 3rem) var(--wp--preset--spacing--50, 5rem);
}
.hos-treatments__figure { padding: 0; }

@media (min-width: 782px) {
	.hos-treatments__text { padding-left: max(var(--hos-gutter), calc((100vw - var(--hos-wide)) / 2)); }
}
@media (max-width: 781px) {
	.hos-treatments { padding-top: var(--wp--preset--spacing--40, 3rem); }
}

/* Academy. */
.hos-academy__head { max-width: 46rem; }
.hos-academy__cols { margin-top: var(--wp--preset--spacing--40, 3rem); gap: var(--wp--preset--spacing--20, 1.2rem); }
.hos-academy__courses { flex: 0 1 58%; }
/*
 * The price on a treatment card.
 *
 * It earns its place twice over. It is the thing people are actually looking for, and on a
 * card with no photograph it is what stops the space under the writing reading as something
 * missing. A hairline above it turns that space into a deliberate division rather than a gap.
 */
.hos-tcard__from {
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 1.05rem;
	color: var(--wp--preset--color--rose-ink, #0B0B0D);
	margin: .2rem 0 0;
	padding-top: .8rem;
	width: 100%;
	border-top: 1px solid var(--hos-hair-pink, rgba(217, 154, 168, .34));
}

.hos-tcard__link--on-dark { border-color: rgba(255, 255, 255, .35); color: #fff; }
.hos-tcard__link--on-dark:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; }

/* ==========================================================================
   The editorial homepage
   ========================================================================== */

/* The hero headline carries the script line inside it rather than above it. */
.hos-hero--editorial h1 { text-transform: none; letter-spacing: 0; }

/* The hero portrait, inset from the edge rather than bleeding off it. The full build's hero
   runs its photograph to the edge of the screen; this one is a framed picture. */
.hos-hero__figure--arch {
	padding-block: var(--wp--preset--spacing--40, 3rem);
	padding-inline: var(--hos-gutter);
}
@media (min-width: 782px) {
	.hos-hero__figure--arch {
		padding-right: max(var(--hos-gutter), calc((100vw - var(--hos-wide)) / 2));
		padding-left: 0;
	}
}
/*
 * The whole photograph, not a crop of it.
 *
 * main.css crops the hero portrait to 4/5 and covers, which is right when the picture
 * bleeds off the edge of the screen. Here it is a framed portrait, and cropping it cut the
 * telephone off the bottom — the part of the photograph the clinic picked it for. So the
 * image keeps its own proportions and the arch only rounds its corners.
 */
/* The ratio comes inline from the file's own dimensions — see hos_image_ratio_style(). */
.hos-hero__figure--arch img {
	border-radius: 6px;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: fill;
}
.hos-script--inline {
	display: block;
	font-family: var(--wp--preset--font-family--script, cursive);
	color: var(--wp--preset--color--rose-ink, #0B0B0D);
	font-size: .82em;
	line-height: 1.15;
	margin-top: .1em;
}
.hos-stats--hero { margin-top: clamp(2rem, 4vw, 3rem); }
.hos-hero--editorial .wp-block-image figcaption {
	text-align: center;
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--smoke, #6B6668);
	padding: .9rem 1rem 0;
}

/* Sabrina's name, set as a signature under her own words. */
.hos-script--signature {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-top: 1.2rem;
}

/* Signature treatments: four numbered cards. */
.hos-siggrid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.6rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	margin-top: var(--wp--preset--spacing--40, 3rem);
}

/*
 * Every card the same height, across rows as well as along them.
 *
 * A grid already stretches the cards within one row, so a row was always even. Rows were
 * not: seven cards over two rows measured 590 and 585, because each row sizes itself to its
 * own tallest card. Five pixels is small and it is visible, because the two rows sit
 * directly above one another and the eye reads the step. 1fr rows make every row take the
 * height of the tallest card on the grid.
 */
.hos-tgrid,
.hos-siggrid { grid-auto-rows: 1fr; }
.hos-sig {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--hos-hair-pink, rgba(217, 154, 168, .34));
	padding: clamp(1.6rem, 2.6vw, 2.2rem);
	display: flex;
	flex-direction: column;
	gap: .55rem;
	position: relative;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease, border-color .5s ease;
}
.hos-sig:hover {
	transform: translateY(-6px);
	box-shadow: var(--hos-shadow, 0 18px 50px rgba(11, 11, 13, .07));
	border-color: var(--wp--preset--color--pink, #E4E2E2);
}
/* A card with a photograph runs it to the card edges, the same as the treatment cards. */
.hos-sig--result { padding-top: 0; padding-inline: 0; }
.hos-sig--result > *:not(.hos-sig__ba) { padding-inline: clamp(1.6rem, 2.6vw, 2.2rem); }
.hos-sig__ba { margin: 0 0 1rem; overflow: hidden; background: var(--wp--preset--color--blush, #F4F3F3); }
/* 4/5, and full size on click — see the note on .hos-tcard__ba in main.css. */
.hos-sig__ba img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 40%;
	display: block;
	transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.hos-sig--result:hover .hos-sig__ba img { transform: scale(1.04); }
.hos-sig__ba figcaption {
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist, #A5A0A2);
	padding: .6em 1rem .1em;
	text-align: center;
}
.hos-sig__num {
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: .82rem;
	letter-spacing: .2em;
	/* Secondary text, not the mid accent: it is a numeral somebody reads, and on the mid
	   accent it measured 2.08:1. */
	color: var(--wp--preset--color--smoke, #6B6668);
}
.hos-sig h3 { margin: 0; font-size: 1.3rem; line-height: 1.25; }
.hos-sig .hos-eyebrow { margin: 0; font-size: .62rem; }
.hos-sig__copy { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--wp--preset--color--smoke, #6B6668); flex: 1; }
.hos-sig__from {
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 1.2rem;
	color: var(--wp--preset--color--rose-ink, #0B0B0D);
	margin: 0;
	padding-top: .9rem;
	border-top: 1px solid var(--hos-hair-pink, rgba(217, 154, 168, .34));
}
.hos-sig--result .hos-sig__from { margin-inline: clamp(1.6rem, 2.6vw, 2.2rem); padding-inline: 0; }

/* ---------------------------------------------------------------------------
   Inside the studio.

   A captioned row rather than a tiled grid, and the difference is the point: the Instagram
   strip below is squares butted together because that is what a feed looks like, and this is
   spaced portraits with a line under each because that is what being shown round a room looks
   like. Two bands of photographs on one page have to read as two different things.
   --------------------------------------------------------------------------- */
.hos-studio__grid {
	list-style: none;
	margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(1rem, 2vw, 1.6rem);
	grid-template-columns: repeat(var(--hos-studio-cols, 4), 1fr);
}
@media (max-width: 900px) {
	.hos-studio__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.hos-studio__grid { grid-template-columns: 1fr; }
}
.hos-studio__item { margin: 0; }
.hos-studio__figure { margin: 0; }
.hos-studio__figure img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	background: var(--wp--preset--color--blush, #F4F3F3);
}
.hos-studio__figure figcaption {
	margin-top: .85rem;
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--smoke, #6B6668);
	text-align: center;
}

/* ---------------------------------------------------------------------------
   The Instagram strip.

   Six squares in a row on a wide screen, three on a phone, and the row is the whole point:
   it reads as one continuous band of work rather than six separate cards, so the pictures
   sit edge to edge with a single hairline gap and no borders of their own.
   --------------------------------------------------------------------------- */
.hos-ig__grid {
	list-style: none;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding: 0;
	display: grid;
	gap: 2px;
	/*
	 * A ceiling on how big one square may get, and a row that centres itself once it stops
	 * filling the page.
	 *
	 * Without it, two photographs became two 572 pixel squares side by side, because a grid
	 * shares out whatever width it is given however few items it holds. Six is what this band
	 * is drawn for and at six the cap never applies; it only exists to stop three or fewer
	 * turning an Instagram strip into a billboard.
	 */
	max-width: calc(var(--hos-ig-cols, 6) * 280px);
	/* The template only ever has as many columns as there are photographs, so choosing three
	   fills the row with three rather than leaving half the band empty. The count is set on
	   the element by the section, because CSS cannot count its own children. */
	grid-template-columns: repeat(var(--hos-ig-cols, 6), 1fr);
}
@media (max-width: 900px) {
	.hos-ig__grid { grid-template-columns: repeat(var(--hos-ig-cols-sm, 3), 1fr); }
}
.hos-ig__item {
	margin: 0;
	position: relative;
	overflow: hidden;
	/* Transparent rather than a tint, so that on the rare picture that is not 4:5 the space
	   either side of it reads as the page rather than as a grey box round the picture. */
	background: transparent;
}
.hos-ig__item a {
	display: block;
	position: relative;
	line-height: 0;
}
/*
 * 4:5, and the whole picture inside it.
 *
 * These were squares, which is what an Instagram grid looks like inside Instagram. It is not
 * what an Instagram post is: the clinic posts at 4:5, and a square frame cropped a fifth off
 * every one of them, taking the last line of text with it. "3 questions every client should
 * ask before getting filler" arrived as "3 questions every client should ask before getting".
 *
 * So the frame is the shape of the posts, and contain rather than cover, which means a
 * picture of any other proportion is still shown whole rather than trimmed to fit.
 */
.hos-ig__item img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	display: block;
	transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}
/* The mark only appears over a picture somebody is pointing at, so the band stays quiet
   until it is being used. */
.hos-ig__mark {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	background: rgba(11, 11, 13, .38);
	opacity: 0;
	transition: opacity .45s ease;
}
.hos-ig__item a:hover img,
.hos-ig__item a:focus-visible img { transform: scale(1.06); }
.hos-ig__item a:hover .hos-ig__mark,
.hos-ig__item a:focus-visible .hos-ig__mark { opacity: 1; }
.hos-ig__item a:focus-visible { outline: 2px solid var(--wp--preset--color--noir, #0B0B0D); outline-offset: -2px; }

.hos-ig__cta { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* A feed plugin brings its own markup and its own grid. All this does is stop it running
   wider than the rest of the page. */
.hos-ig__feed { margin-top: clamp(2rem, 4vw, 3rem); }
.hos-ig__feed img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
	.hos-ig__item img { transition: none; }
	.hos-ig__item a:hover img { transform: none; }
}

/* The masterclass panel, full width under the course cards. */
.hos-cgrid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.hos-master--wide { margin-top: clamp(1rem, 2vw, 1.6rem); }
.hos-master__copy { color: rgba(255, 255, 255, .72); margin: 0; max-width: 44rem; }
.hos-master__list { margin-top: .6rem; }
.hos-master__list p { border-bottom-color: rgba(255, 255, 255, .14); }
.hos-master__list .hos-price__name { color: rgba(255, 255, 255, .85); }
.hos-master__list .hos-price__amt { color: var(--wp--preset--color--pink, #E4E2E2); }
.hos-master--wide .hos-tcard__link { align-self: flex-start; margin-top: .6rem; }

/* Visit. */
.hos-visit__media { flex: 0 1 46%; }
.hos-visit__img img { border-radius: 280px 280px 4px 4px; }
.hos-contact-rows { margin-top: var(--wp--preset--spacing--30, 2rem); }

/* The dark call to action band. */
.hos-cta-band { text-align: center; }
.hos-cta-band h2 { color: var(--wp--preset--color--white, #fff); margin-block: 1.3rem; }
.hos-cta-band p { color: var(--wp--preset--color--blush, #F4F3F3); }
.hos-cta-band a { text-decoration: underline; text-underline-offset: .25em; }
/* On black, the eyebrow takes the baby pink. Brand v3 has no gold in it — if you find a
   champagne or #d9c7a5 anywhere, it is a v2 leftover and should go. */
.hos-cta-band .hos-eyebrow { color: var(--wp--preset--color--pink, #E4E2E2); }
.hos-cta-band .wp-block-button__link {
	background: var(--wp--preset--color--blush, #F4F3F3);
	color: var(--wp--preset--color--noir, #0B0B0D);
}
.hos-cta-band .wp-block-button__link:hover {
	background: var(--wp--preset--color--pink, #E4E2E2);
	color: var(--wp--preset--color--noir, #0B0B0D);
}

/* ==========================================================================
   Before and after: cropped on the card, full size on click
   ========================================================================== */
.hos-ba__zoom {
	display: block;
	position: relative;
	overflow: hidden;
	cursor: zoom-in;
	line-height: 0;
}
.hos-ba__hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .7em 1em;
	font-size: .58rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.4;
	text-align: center;
	color: #fff;
	background: linear-gradient(to top, rgba(11, 11, 13, .72), rgba(11, 11, 13, 0));
	opacity: 0;
	transform: translateY(30%);
	transition: opacity .35s ease, transform .35s ease;
}
.hos-ba__zoom:hover .hos-ba__hint,
.hos-ba__zoom:focus-visible .hos-ba__hint { opacity: 1; transform: none; }

/* Touch has no hover, so the hint simply stays. */
@media (hover: none) {
	.hos-ba__hint { opacity: 1; transform: none; }
}

.hos-lightbox {
	border: 0;
	padding: 0;
	max-width: 92vw;
	max-height: 92svh;
	width: auto;
	background: var(--wp--preset--color--white, #fff);
	overflow: hidden;
}
.hos-lightbox::backdrop { background: rgba(11, 11, 13, .82); }

/* The point of opening it is to see the whole thing, so the picture is sized to fit the
   screen rather than the screen scrolled to follow the picture. These are tall portraits;
   left to fill the width they run well past the bottom of the window. */
.hos-lightbox__img {
	display: block;
	max-width: 92vw;
	max-height: 82svh;
	width: auto;
	height: auto;
	margin-inline: auto;
}
.hos-lightbox__caption {
	margin: 0;
	padding: .9em 1.2em;
	font-size: .64rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--mist, #6E6968);
}
.hos-lightbox__close {
	position: absolute;
	top: .4rem;
	right: .4rem;
	z-index: 2;
	width: 2.4rem;
	height: 2.4rem;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--noir, #0B0B0D);
	background: rgba(255, 255, 255, .9);
}
.hos-lightbox__close:hover { background: #fff; }

@media (prefers-reduced-motion: reduce) {
	.hos-ba__hint { transition: none; }
}

/* ==========================================================================
   Cards in archives
   ========================================================================== */
.hos-card--text h3 { margin: 0; }
.hos-card--text h3 a:hover { color: var(--wp--preset--color--pink-deep, #6B6668); }
.hos-card__excerpt { color: var(--wp--preset--color--smoke, #6B6668); margin: 0; }
.hos-card .hos-eyebrow { margin: 0; }
.hos-card .hos-card__img { display: block; margin: -1px -1px 1.2rem; }

.hos-post-summary {
	padding-bottom: clamp(2rem, 4vw, 3rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--hos-hair-pink, rgba(217, 154, 168, .34));
}
.hos-post-summary:last-child { border-bottom: 0; }
.hos-post-summary__img { display: block; margin-bottom: 1.4rem; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.hos-pagination { margin-top: var(--wp--preset--spacing--40, 3rem); }
.hos-pagination ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hos-pagination li { margin: 0; }
.hos-pagination a,
.hos-pagination span {
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: .8em;
	border: 1px solid var(--hos-hair-pink, rgba(217, 154, 168, .34));
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background-color .3s ease, border-color .3s ease;
}
.hos-pagination a:hover { background: var(--wp--preset--color--blush, #F4F3F3); }
.hos-pagination .current {
	background: var(--wp--preset--color--noir, #0B0B0D);
	border-color: var(--wp--preset--color--noir, #0B0B0D);
	color: #fff;
}

/* ==========================================================================
   Widgets
   ========================================================================== */
.hos-widget { margin-bottom: 2.2rem; }
.hos-widget:last-child { margin-bottom: 0; }
.hos-widget__title {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 1.2rem;
}
.hos-widget ul { list-style: none; margin: 0; padding: 0; }
.hos-widget li { margin-bottom: .6em; font-size: .92rem; }

.hos-sidebar .hos-widget__title { color: var(--wp--preset--color--rose-ink, #0B0B0D); }

/* ==========================================================================
   Footer
   ==========================================================================

   The block build carried these two paddings as block attributes on the group. Attributes
   do not survive a move to PHP, and nothing replaced them, so both bands ended up at zero:
   the trust strip was crushed against the band above it, and the footer logo sat flush on
   the footer's top edge with nothing between them.
   ========================================================================== */
.hos-foot-trust { padding-block: clamp(1.8rem, 4vw, 2.8rem); }

.hos-footer {
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.hos-footer__cols {
	display: grid;
	gap: var(--wp--preset--spacing--30, 2rem) var(--wp--preset--spacing--40, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
@media (min-width: 900px) {
	.hos-footer__cols { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}
.hos-footer .hos-widget__title,
.hos-footer h4 { color: var(--wp--preset--color--pink, #E4E2E2); }
.hos-footer__links { list-style: none; margin: 0; padding: 0; }
.hos-footer__links li { margin-bottom: .55em; font-size: .92rem; }
.hos-footer__col--brand .hos-logo { margin-bottom: 1.4rem; }
.hos-footer__col--brand .hos-logo img { width: clamp(170px, 18vw, 236px); }
.hos-footer__col--brand .hos-logo--text a { font-size: 1.15rem; }
.hos-footer__social a { margin-right: 1.2em; border-bottom: 1px solid rgba(255, 255, 255, .25); }

.hos-foot-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--40, 3rem);
	padding-top: var(--wp--preset--spacing--30, 2rem);
}
.hos-foot-bottom p { margin: 0; }
.hos-legal-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .92rem;
}
.hos-legal-links__list li { margin: 0; }

/* ==========================================================================
   Comments
   ========================================================================== */
.hos-comments { margin-top: clamp(3rem, 6vw, 5rem); }
.hos-comments__list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.hos-comments__list .children { list-style: none; padding-left: 1.6rem; }
.hos-comments__list li { margin-bottom: 1.6rem; }
.comment-form p { margin-bottom: 1.2rem; }

/* ==========================================================================
   404
   ========================================================================== */
.hos-404__search { max-width: 30rem; margin: var(--wp--preset--spacing--30, 2rem) auto 0; }

@media (prefers-reduced-motion: reduce) {
	.hos-menu,
	.hos-menu__sub,
	.hos-menu-toggle__bars span,
	.hos-submenu-toggle { transition: none; }
}