/*
 * Hospitality Now — component styles.
 *
 * theme.json carries the tokens; this file carries the things theme.json
 * cannot express: the section bands, the audience-accent behaviour, the header
 * and footer, and the 8F sequence.
 *
 * Values here were measured off Colibri's generated CSS, not invented — the
 * type scale, the 1232px container and the section rhythm all match what the
 * live site renders today, so converted pages land on top of their originals.
 */

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

:root {
	/* --hn-accent / --hn-accent-dark are re-pointed per page by the theme. */
	--hn-accent: #03a9f4;
	--hn-accent-dark: #026e9f;
	/* Accent darkened enough to be readable as text on white. */
	--hn-accent-text: #016691;

	--hn-ink: #17252a;
	--hn-ink-soft: #25292a;
	--hn-body: #46707f;
	--hn-white: #ffffff;
	--hn-wash: #f5fafd;
	--hn-mist: #f2f2f2;
	--hn-grey: #717171;
	--hn-indigo: #313891;
	--hn-rule: #e4ebee;
	--hn-gold-tint: #fae9b5;
	--hn-green: #00bf87;
	--hn-green-dark: #006a4b;

	--hn-container: 1232px;
	--hn-gutter: 15px;
	--hn-section-y: 90px;
	--hn-section-y-tight: 30px;
}

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

body {
	background: var(--hn-white);
	color: var(--hn-body);
	/*
	 * The old site set everything in filson-pro, an Adobe Fonts face we cannot
	 * serve. Mulish is the closest free equivalent — the same humanist
	 * geometric shapes — and the theme already registered it for exactly that
	 * reason, then never used it: this rule was pinning everything to Open Sans,
	 * which is narrower and squarer and made the headings read wrong.
	 */
	font-family: "Mulish", "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--hn-ink);
	text-wrap: balance;
}

/* Link text uses the readable variant; buttons and fills keep the brand value. */
a { color: var(--hn-accent-text); }
a:hover { color: var(--hn-accent-dark); }

:where(a):focus-visible,
:where(button):focus-visible {
	outline: 2px solid var(--hn-accent);
	outline-offset: 2px;
}

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

/* Lead paragraph, as the old site set it. */
.hn-lead,
.is-style-lead {
	font-weight: 300;
	font-size: 1.25em;
	line-height: 1.5;
	color: var(--hn-ink-soft);
}

/* ---------------------------------------------------------------- layout - */

.hn-container,
.wp-site-blocks > .alignfull > :where(.wp-block-group__inner-container) {
	max-width: var(--hn-container);
	margin-inline: auto;
	padding-inline: var(--hn-gutter);
}

/* --------------------------------------------------------- section bands - */

/*
 * The old site alternated white and a pale blue wash, with occasional bands in
 * a brand colour. These three variations cover every case on the site.
 */

.wp-block-group.is-style-section,
.wp-block-group.is-style-section-wash,
.wp-block-group.is-style-section-gold,
.wp-block-group.is-style-section-accent {
	padding-block: var(--hn-section-y);
	padding-inline: var(--hn-gutter);
}

.wp-block-group.is-style-section { background-color: var(--hn-white); }
.wp-block-group.is-style-section-wash { background-color: var(--hn-wash); }

/*
 * A band in the brand gold, used behind the signatories.
 *
 * Not the palette's gold itself — #efbb00 is a saturated marker colour and
 * the old site lays it on as a soft tint, roughly 28% over white. Kept as its
 * own token so the two do not drift apart.
 */
.wp-block-group.is-style-section-gold { background-color: var(--hn-gold-tint); }

.wp-block-group.is-style-section-accent {
	background-color: var(--hn-accent);
	color: var(--hn-white);
}

.wp-block-group.is-style-section-accent :is(h1, h2, h3, h4, h5, h6),
.wp-block-group.is-style-section-accent p {
	color: var(--hn-white);
}

.wp-block-group.is-style-section-accent a:not(.wp-block-button__link) {
	color: var(--hn-white);
	text-decoration: underline;
}

/* A tighter band, for stacked content sections. */
.wp-block-group.is-style-section.is-tight,
.wp-block-group.is-style-section-wash.is-tight {
	padding-block: var(--hn-section-y-tight);
}

@media (max-width: 767px) {
	.wp-block-group.is-style-section,
	.wp-block-group.is-style-section-wash,
	.wp-block-group.is-style-section-gold,
	.wp-block-group.is-style-section-accent {
		padding-block: 50px;
	}
}

/* --------------------------------------------------------------- eyebrow - */

.wp-block-heading.is-style-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hn-accent-text);
	margin-bottom: 0.6em;
}

/* --------------------------------------------------------------- buttons - */

.wp-block-button__link {
	background-color: var(--hn-accent);
	color: var(--hn-white);
	border-radius: 3px;
	font-weight: 600;
	padding: 0.85rem 1.75rem;
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
	transition: background-color 0.15s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--hn-accent-dark);
	color: var(--hn-white);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--hn-accent);
	border: 2px solid var(--hn-accent);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--hn-accent);
	color: var(--hn-white);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link { transition: none; }
}

/* ------------------------------------------------------- the 8F sequence - */

/*
 * Each of the eight principles owns a pastel. The sequence is part of the
 * charter's identity, so it is a token set rather than eight one-off colours.
 */

.hn-f {
	--hn-f-bg: var(--hn-mist);
	background-color: var(--hn-f-bg);
	padding: 2.5rem var(--hn-gutter);
}

/*
 * Declared on the root so the charter plugin can reach them: the member area
 * lists the same eight principles inside the course, and one definition beats
 * two that drift.
 */
:root {
	--hn-f1: #f5e2da;
	--hn-f2: #f9ebd6;
	--hn-f3: #fbf8d7;
	--hn-f4: #dbeee1;
	--hn-f5: #cedde7;
	--hn-f6: #e2dae8;
	--hn-f7: #e9d7e3;
	--hn-f8: #f2d8d7;
}

.hn-f--1 { --hn-f-bg: var(--hn-f1); }
.hn-f--2 { --hn-f-bg: var(--hn-f2); }
.hn-f--3 { --hn-f-bg: var(--hn-f3); }
.hn-f--4 { --hn-f-bg: var(--hn-f4); }
.hn-f--5 { --hn-f-bg: var(--hn-f5); }
.hn-f--6 { --hn-f-bg: var(--hn-f6); }
.hn-f--7 { --hn-f-bg: var(--hn-f7); }
.hn-f--8 { --hn-f-bg: var(--hn-f8); }

/*
 * Two rows of four rather than eight in a line. At the container width eight
 * columns leave about 140px each, which breaks every other word.
 */
:root .hn-principles {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1.25rem;
	margin-block: 2.5rem 0;
}

:root .hn-principles > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-principles p {
	margin: 0;
	text-align: left;
}

/* The number: large, blue, and the first thing read in each card. */
.hn-f__number {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	text-align: left;
	color: var(--hn-accent);
	opacity: 1;
}

.hn-f__title { margin-top: 0.35rem; }

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

@media (max-width: 560px) {
	:root .hn-principles { grid-template-columns: minmax( 0, 1fr ); }
}


/* ------------------------------------------------------ employer pledges - */

/*
 * Eight bordered cards, two to a row, each opening with the charter's tick.
 *
 * The conversion left them as eight columns in a single line, which at the
 * container width is about 140px each. The tick is Font Awesome's
 * check-square-o — the icon the old site used — carried as a background image
 * rather than as markup, because it says nothing a reader needs said.
 */
:root .hn-pledges {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 30px;
	margin-block: 2.5rem 0;
}

:root .hn-pledges > .hn-pledge {
	display: grid;
	grid-template-columns: 30px minmax( 0, 1fr );
	column-gap: 44px;
	align-content: start;
	flex-basis: auto;
	margin: 0;
	padding: 28px 30px;
	border: 1px solid #e0e1e1;
	background: var( --hn-white );
	transition: transform 0.2s, box-shadow 0.2s;
}

.hn-pledge::before {
	content: "";
	width: 30px;
	height: 30px;
	margin-top: 0.15rem;
	background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201664%201896.0833'%20fill='%2340bf9a'%3E%3Cpath%20d='M1408%20930v318q0%20119-84.5%20203.5T1120%201536H288q-119%200-203.5-84.5T0%201248V416q0-119%2084.5-203.5T288%20128h832q63%200%20117%2025%2015%207%2018%2023%203%2017-9%2029l-49%2049q-10%2010-23%2010-3%200-9-2-23-6-45-6H288q-66%200-113%2047t-47%20113v832q0%2066%2047%20113t113%2047h832q66%200%20113-47t47-113V994q0-13%209-22l64-64q10-10%2023-10%206%200%2012%203%2020%208%2020%2029zm231-489l-814%20814q-24%2024-57%2024t-57-24L281%20825q-24-24-24-57t24-57l110-110q24-24%2057-24t57%2024l263%20263%20647-647q24-24%2057-24t57%2024l110%20110q24%2024%2024%2057t-24%2057z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* The old site lifts a card under the pointer. */
.hn-pledge:hover {
	transform: translateY( -2px );
	box-shadow: 0 10px 20px 2px rgba( 189, 189, 189, 0.2 );
}

.hn-pledge p {
	margin: 0;
	text-align: left;
}

@media (prefers-reduced-motion: reduce) {
	:root .hn-pledges > .hn-pledge { transition: none; }
	.hn-pledge:hover { transform: none; }
}

@media (max-width: 780px) {
	:root .hn-pledges { grid-template-columns: minmax( 0, 1fr ); }

	:root .hn-pledges > .hn-pledge {
		column-gap: 24px;
		padding: 22px 24px;
	}
}

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

/*
 * Two treatments, matching the old site: artwork with the navigation floating
 * over it, or a plain indigo bar.
 *
 * Two deliberate departures from the original, both agreed:
 *   - a scrim between artwork and title, because white text straight onto the
 *     multi-coloured banners does not reach contrast in places;
 *   - height and type that scale down on small screens, so the banner does not
 *     swallow a phone viewport.
 */

.hn-hero {
	position: relative;
	/*
	 * The measured heights are the whole banner, header included, so the
	 * padding that makes room for the floating menu has to count inside them.
	 * Without this the front page came out 1264px tall against the 1060 it was
	 * given, and every element sat 200px lower than the original.
	 */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--hn-indigo);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Banner depth below the menu; see inc/hero.php. */
	min-height: var( --hn-hero-h, 283px );
	padding: clamp(2rem, 5vw, 3.5rem) var(--hn-gutter);
	text-align: center;
}

/*
 * The scrim. Sits above the artwork, below the title.
 *
 * These heroes are not photographs. They are flat graphic panels — a bright
 * gradient carrying the H monogram pattern — and the whole point of them is
 * the colour: the charter's is orange, Why Now's runs cyan to pink. A flat
 * dark wash over the top turned all of them into the same muddy navy, which
 * is how the artwork ended up unrecognisable rather than merely dimmed.
 *
 * So the scrim is a soft ellipse behind the title instead of a sheet over
 * everything, and it is kept light: on the orange banners even a soft navy
 * ellipse turned the colour brown, which is the one thing these panels cannot
 * afford. What legibility it used to buy now comes from the title's own
 * shadows, which tint the letters rather than the artwork.
 */
.hn-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 58% 62% at 50% 50%,
		rgba(12, 16, 48, 0.12) 0%,
		rgba(12, 16, 48, 0.07) 48%,
		rgba(12, 16, 48, 0) 76%
	);
	pointer-events: none;
}

/*
 * A flat wash, for the one banner that had one. Colibri kept these per header
 * record; only the 8F panel used it, tinting a pale low-poly graphic indigo so
 * white type would sit on it. Everywhere else this resolves to nothing.
 */
.hn-hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var( --hn-hero-wash, transparent );
	pointer-events: none;
}

.hn-hero__inner { position: relative; z-index: 1; max-width: var(--hn-container); width: 100%; }

/* A hero carrying a headline, copy and buttons rather than just a title. */
.hn-hero--rich .hn-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.hn-hero--rich :is(h1, h2, h3, p) { color: var(--hn-white); }

/*
 * The banner headline. Heavy, with a hard shadow thrown down and right rather
 * than a soft glow — that offset is a large part of why the original reads as
 * confident against a busy pattern.
 *
 * A page title on a banner is set much larger than the front page's sentence
 * headline: about 85px against 46px, measured off the old site. The front
 * page is the exception, not the rule, so it takes the override.
 */
.hn-hero--rich h1 {
	font-size: clamp(2.2rem, 5.4vw, 5.1rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.01em;
	text-shadow: 4px 4px 0 rgba( 9, 12, 38, 0.34 ), 0 1px 3px rgba( 9, 12, 38, 0.5 );
}

.home .hn-hero--rich h1 { font-size: clamp(1.9rem, 3.2vw, 2.86rem); }

.hn-hero--rich p {
	max-width: 50rem;
	font-size: 0.95rem;
	line-height: 1.75;
}

.hn-hero--rich .wp-block-buttons { justify-content: center; }

/*
 * The launch banner is a flat graphic rather than a photograph, so how it is
 * scaled changes the design and not just the crop. `cover` on this hero blows
 * the pattern up to about half again the size the original shows.
 *
 * 140% across, anchored top, is the closest fit — found by rendering the
 * banner at a range of sizes and scoring each against the old site's own
 * capture, ignoring the middle of the frame where the content sits. It scored
 * 84.5 against 122.3 for `cover`.
 */
.home .hn-hero {
	background-size: 140% auto;
	background-position: center top;
}

/*
 * The charter mark. On most banners it is the roundel, set about 300px
 * across; the front page carries the wide wordmark lockup instead, which is
 * shallower and sits at 190.
 */
.hn-hero--rich .hn-photo img { max-height: 300px; width: auto; margin-inline: auto; }
.home .hn-hero--rich .hn-photo img { max-height: 190px; }
.hn-hero--rich figure { margin: 0; }

.hn-hero__title {
	margin: 0;
	color: var(--hn-white);
	font-size: clamp(2rem, 6vw, 4.2rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
	/*
	 * Two shadows, as the original had: an offset hard one that lifts the
	 * letters off the pattern, and a soft one that holds contrast where the
	 * artwork runs pale. This is what carries legibility now the flat wash
	 * has gone.
	 */
	text-shadow:
		3px 3px 0 rgba(9, 12, 38, 0.34),
		0 1px 3px rgba(9, 12, 38, 0.55),
		0 2px 20px rgba(9, 12, 38, 0.45);
}

/*
 * On pages with artwork the navigation floats over it in a translucent purple,
 * as the original did.
 *
 * The header is taken out of flow rather than pulled up with a negative
 * margin: a negative margin has to know the header's height, and getting that
 * wrong collapses the hero entirely.
 */
.hn-has-hero-image .wp-site-blocks { position: relative; }

/*
 * The template part wrapper is what has to come out of flow, not the group
 * inside it. Positioning the inner group left the wrapper holding its own
 * height, so the header sat in a band of its own above the artwork instead
 * of over it — the whole effect, missing, for the sake of one element.
 */
.hn-has-hero-image .wp-site-blocks > header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}

/*
 * WordPress gives every child of .wp-site-blocks a top margin and clears it on
 * the first one. Taking the header out of flow makes the banner the first
 * thing in flow but not the first child, so it kept the margin and the whole
 * page sat 16px below the top of the window.
 */
.hn-has-hero-image .wp-site-blocks > header.wp-block-template-part + * {
	margin-block-start: 0;
}

.hn-has-hero-image .hn-header {
	z-index: 2;
	/*
	 * A light purple wash, as the original had. The artwork is meant to read
	 * through it: that is why the band is orange on Signatories, gold on
	 * Students and blue running to purple here — sampled from the old site at
	 * #d65739, #dbb04f and #2474e4 against the same three banners.
	 *
	 * I had this at 88% navy, which is legible and wrong: it turned every
	 * banner into the same dark bar and lost the thing the artwork is for.
	 * White menu text on the palest banners does fall below 4.5:1 at this
	 * weight — the original has that problem too — so the type carries a
	 * shadow, and there is a stronger variant a line below if we want it.
	 */
	background: linear-gradient(
		to bottom,
		rgba( 62, 30, 160, 0.30 ),
		rgba( 62, 30, 160, 0.18 )
	);
	/*
	 * The blur is what makes this work, and it is why the old site's header
	 * looks like a smooth blue-to-purple gradient on the home page and a wash
	 * of orange on Signatories: it is not a colour at all, it is the banner
	 * behind it, blurred. Without it the pattern reads straight through as
	 * hard-edged squares behind the menu.
	 */
	-webkit-backdrop-filter: blur( 26px );
	backdrop-filter: blur( 26px );
	box-sizing: border-box;
	display: flex;
	align-items: center;
	/*
	 * Sized by its own content rather than pinned. I had this at a measured
	 * 204px, which was the old site's height with a seventeen-item menu
	 * wrapping to four rows; ours is curated down to ten and wraps to two, so
	 * a fixed height just left a tall empty band.
	 */
	padding-block: 30px;
}

.hn-has-hero-image .hn-header > .wp-block-group { width: 100%; }

/*
 * The banner runs the full height with the menu floating inside it, so the
 * hero has to leave room for the header rather than start below it.
 *
 * The header is out of flow, so its height cannot be read in CSS; this is the
 * height it settles at with our ten-item menu at desktop width, kept as one
 * value both rules can share.
 */
:root { --hn-header-h: 132px; }

.hn-has-hero-image .hn-hero {
	/* The stated depth is below the menu, so the menu's height is added on. */
	min-height: calc( var( --hn-header-h ) + var( --hn-hero-h, 283px ) );
	padding-top: var( --hn-header-h );
	padding-bottom: 0;
}

/*
 * A tall banner hangs its content a set distance below the menu rather than
 * centring it in the box. That distance is 120px on the old site, and it is
 * why a shorter menu pulls the whole banner up instead of leaving a gap.
 *
 * Centring looked right at the width I was testing and wrong everywhere else:
 * our menu is ten items to the original's seventeen, so our header is 72px
 * shorter, and centring quietly spent that saving on empty space above the
 * logo — 197px against the original's 120.
 */
.hn-has-hero-image .hn-hero--rich {
	align-items: flex-start;
	padding-top: calc( var( --hn-header-h ) + 120px );
}

@media (max-width: 781px) {
	/*
	 * On a phone there is not room for the menu and the title in the same
	 * band, so the header returns to normal flow above the hero.
	 */
	.hn-has-hero-image .wp-site-blocks > header.wp-block-template-part {
		position: static;
	}

	.hn-has-hero-image .hn-header {
		background: var(--hn-indigo);
	}

	.hn-has-hero-image .hn-hero {
		padding-top: clamp(2rem, 5vw, 3.5rem);
		min-height: min( var( --hn-hero-h, 406px ), 46vw );
	}
}



/* ------------------------------------------------------ heading appearance */

/*
 * Size a heading as though it were another level.
 *
 * Colibri chose heading tags for how big they looked, so a card title is an
 * h4 because h4 was the right size. The tags have been renumbered so the
 * outline is sequential — a screen reader user should not be told there are
 * levels of structure that do not exist — and these carry the appearance the
 * page had, which is the stylesheet's business rather than the markup's.
 *
 * Values are theme.json's own element sizes, so the two stay in step. A class
 * beats a bare element selector, so these win without !important.
 */
.hn-looks-h2 { font-size: 2.4rem;   font-weight: 300; line-height: 1.143; }
.hn-looks-h3 { font-size: 2.25rem;  font-weight: 300; line-height: 1.25; }
.hn-looks-h4 { font-size: 1.25rem;  font-weight: 600; line-height: 1.6; }
.hn-looks-h5 { font-size: 1.125rem; font-weight: 600; line-height: 1.55; }
.hn-looks-h6 { font-size: 1rem;     font-weight: 600; line-height: 1.6; }

/* ------------------------------------------------------- content-sized col */

/*
 * Colibri's h-col-lg-auto sizes a column from its content rather than taking
 * an equal share of the row. Gutenberg columns divide equally by default,
 * which squeezed long text columns sitting beside a portrait.
 */

.wp-block-column.hn-col-auto {
	flex: 1 1 auto;
	flex-basis: auto;
	min-width: 0;
}

@media (max-width: 781px) {
	/* Stack rather than letting a content-sized column collapse to a sliver. */
	.wp-block-column.hn-col-auto { flex-basis: 100%; }
}

/* ----------------------------------------------------------- cropped photo */

/*
 * Photographs that Colibri drew as fixed-height background boxes with
 * background-size: cover. The converter carries the box height across as
 * --hn-photo-h and the crop happens here, so the picture is a real <img> in
 * the document but still fills its frame the way it used to.
 */

.hn-photo { margin: 0; }

/*
 * A diagram, not a photograph. The crop above would take 173px out of the
 * middle of the 8F wheel, which is the part that carries the meaning.
 */
.hn-figure { margin: 0; }

.hn-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.hn-photo img {
	display: block;
	width: 100%;
	height: var( --hn-photo-h, auto );
	/* Photos with no recorded crop height are capped rather than left at
	   their natural size, which on some originals is several thousand pixels. */
	max-height: 520px;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 781px) {
	/* Tall crops eat a phone screen, so cap them. */
	.hn-photo img { height: min( var( --hn-photo-h, auto ), 60vw ); }
}

/* --------------------------------------------------- header and footer -- */

.hn-header {
	background: var(--hn-indigo);
	padding-block: 20px;
}

.hn-header .wp-block-navigation {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/*
 * The menu sits to the right of the logo and wraps within itself, filling from
 * the right — which is what the original does, and what makes a menu this long
 * work at all.
 *
 * Without the flex-grow the whole navigation wrapped below the logo instead of
 * its items wrapping inside it, and the rows then started hard against the
 * left edge under an otherwise empty header.
 */
.hn-header > .wp-block-group {
	gap: 1.5rem;
	flex-wrap: nowrap;
}

.hn-header .wp-block-navigation__container {
	flex: 1 1 auto;
	justify-content: flex-end;
	gap: 0.55rem 2.3rem;
}

.hn-header .wp-block-site-logo { flex: 0 0 auto; }

/*
 * Only where the menu floats over artwork. On an ordinary indigo header
 * there is nothing to separate the text from, and a shadow would just look
 * like a printing fault.
 */
.hn-has-hero-image .hn-header .wp-block-navigation,
.hn-has-hero-image .hn-header .wp-block-site-logo img {
	text-shadow: 0 1px 3px rgba( 9, 12, 38, 0.72 );
	filter: drop-shadow( 0 1px 3px rgba( 9, 12, 38, 0.45 ) );
}

:root .hn-header .wp-block-navigation a,
:root .hn-header .wp-block-navigation a:visited,
:root .hn-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--hn-white);
	opacity: 1;
}

:root .hn-header .wp-block-navigation a:hover,
:root .hn-header .wp-block-navigation a:focus-visible {
	color: #d8dcff;
	text-decoration: underline;
}

.hn-header .wp-block-navigation a:focus-visible {
	outline: 2px solid var(--hn-white);
	outline-offset: 3px;
}

/*
 * The dropdown panel.
 *
 * It is white, and the header's type is white with a shadow under it for the
 * artwork it floats over — text-shadow is inherited, so the panel was getting
 * white letters with a soft halo on white. Everything inside it goes back to
 * the page's own ink, with no shadow.
 */
.hn-header .wp-block-navigation__submenu-container {
	min-width: 15rem;
	padding-block: 0.4rem;
	border: 1px solid var( --hn-rule );
	border-radius: 4px;
	background-color: var( --hn-white );
	box-shadow: 0 8px 24px rgba( 9, 12, 38, 0.18 );
}

:root .hn-header .wp-block-navigation .wp-block-navigation__submenu-container a,
:root .hn-header .wp-block-navigation .wp-block-navigation__submenu-container a:visited,
:root .hn-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.2rem;
	color: var( --hn-ink );
	text-shadow: none;
}

:root .hn-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover,
:root .hn-header .wp-block-navigation .wp-block-navigation__submenu-container a:focus-visible {
	background-color: var( --hn-wash );
	color: var( --hn-accent-text );
	text-decoration: underline;
}

.hn-header .wp-block-navigation__submenu-container a:focus-visible {
	outline: 2px solid var( --hn-accent-text );
	outline-offset: -2px;
}

.hn-footer__links { list-style: none; margin: 0; padding: 0; }
.hn-footer__links li { margin-bottom: 0.4rem; }

.hn-header .wp-block-site-logo img { max-height: 86px; width: auto; }

/* -------------------------------------------------------------- news grid -- */

/*
 * Latest updates: each post a white card with its image across the top and the
 * headline beneath, nothing else.
 *
 * A grid rather than CSS columns. Columns pack each one top to bottom, which
 * put the second-newest post underneath the newest instead of beside it — on
 * a list headed "Latest updates" the order across the row is the point.
 *
 * Cards keep their natural height rather than stretching to match the tallest
 * in the row, so a two-line headline does not sit in a card sized for a
 * six-line one.
 */
.hn-news .hn-post-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	align-items: start;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hn-news .hn-post-grid > li {
	display: block;
	margin: 0;
	background: var( --hn-white );
	border: 1px solid rgba( 23, 37, 42, 0.07 );
	box-shadow: 0 1px 5px rgba( 23, 37, 42, 0.07 );
	overflow: hidden;
}

/* The image runs the full width of the card, flush to its top edge. */
.hn-news .wp-block-post-featured-image {
	margin: 0;
	line-height: 0;
}

.hn-news .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hn-news .wp-block-post-title {
	margin: 0;
	padding: 1.4rem 1.5rem 1.6rem;
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.45;
}

.hn-news .wp-block-post-title a {
	color: var( --hn-ink );
	text-decoration: none;
}

.hn-news .wp-block-post-title a:hover,
.hn-news .wp-block-post-title a:focus-visible {
	color: var( --hn-accent-text );
	text-decoration: underline;
}

:root .hn-news__more {
	margin-top: 2.5rem;
	justify-content: center;
}

/*
 * The archive keeps its pagination — there are eight pages of updates behind
 * it, and the front page's "View more updates" button is the only other way
 * in. Only the front page drops it, because there the button is the link.
 */
:root .hn-news__pagination {
	margin-top: 2.75rem;
	gap: 0.35rem;
	align-items: center;
	font-size: 0.92rem;
}

.hn-news__pagination .page-numbers,
.hn-news__pagination .wp-block-query-pagination-previous,
.hn-news__pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding-inline: 0.6rem;
	border: 1px solid var( --hn-rule );
	background: var( --hn-white );
	color: var( --hn-accent-text );
	text-decoration: none;
	font-weight: 600;
}

.hn-news__pagination .page-numbers:hover,
.hn-news__pagination .wp-block-query-pagination-previous:hover,
.hn-news__pagination .wp-block-query-pagination-next:hover {
	border-color: var( --hn-accent );
	color: var( --hn-accent-dark );
}

.hn-news__pagination .page-numbers.current {
	background: var( --hn-accent );
	border-color: var( --hn-accent );
	color: var( --hn-white );
}

/* The ellipsis is not a link and should not look like a key. */
.hn-news__pagination .page-numbers.dots {
	border: 0;
	background: none;
	min-width: 1.2rem;
	color: var( --hn-grey );
}

/* The archive's own heading, above the grid. */
.hn-archive-head { margin-bottom: 2.4rem; }
.hn-archive-head h1 { margin: 0; }

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

@media (max-width: 600px) {
	.hn-news .hn-post-grid { grid-template-columns: minmax( 0, 1fr ); }
}

/* ------------------------------------------------------------ promo bands -- */

/*
 * The two calls to action: a white panel running the width of the row with an
 * artwork card laid over one end of it, taller than the panel and offset, on a
 * very pale wash of the arrows banner. They alternate — artwork left for the
 * Charter, artwork right for the 8F Framework.
 *
 * Panel and artwork share a single grid row and overlap by being given
 * overlapping column spans, rather than by absolute positioning. That way the
 * row is still as tall as its contents and nothing has to be measured.
 */
/*
 * :root to outrank .wp-block-group.is-style-section, which sets the section
 * rhythm at a higher specificity and was holding these to 90px.
 */
:root .hn-promo {
	position: relative;
	isolation: isolate;
	/* The old site gives the panel a lot of air: it fills 58% of the band. */
	padding-block: 190px;
	/*
	 * No block margin. These sit directly against each other and against the
	 * band above, and WordPress's 1rem default showed as a white stripe
	 * between two washed backgrounds that are meant to read as continuous.
	 */
	margin-block: 0;
	overflow: hidden;
	background-color: #eceaf5;
	background-image: url( "../../../../uploads/2022/05/hospitality-now-hero-11.png" );
	background-size: cover;
	background-position: center;
}

/*
 * The banner is fully saturated indigo and blue; the old site washes it out
 * almost to white and keeps only a suggestion of the shapes. A flat overlay
 * does that more predictably than filtering the image.
 */
.hn-promo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 240, 239, 250, 0.93 );
	z-index: -1;
}

:root .hn-promo__row {
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	align-items: center;
	gap: 0;
	margin-block: 0;
}

:root .hn-promo__panel {
	grid-row: 1;
	grid-column: 1 / -1;
	background: var( --hn-white );
	box-shadow: 0 6px 34px rgba( 24, 27, 74, 0.10 );
	padding: 3.4rem 3.6rem;
	margin: 0;
	flex-basis: auto;
}

:root .hn-promo__media {
	grid-row: 1;
	/* Above the panel, and taller than it. */
	z-index: 2;
	position: relative;
	/* Stands proud of the panel top and bottom, as the original does. */
	margin-block: -48px;
	padding: 0;
	flex-basis: auto;
}

/*
 * Where the artwork sits, as proportions of the panel rather than as column
 * spans. Measured off the old site: the card is 45% of the panel's width, set
 * in 10% from the panel's outer edge, with 6% of clear air before the text
 * starts. Twelve columns could not express that without landing on 50%, which
 * read as cramped against the copy.
 */
:root .hn-promo__media {
	grid-column: 1 / -1;
}

.hn-promo__art { width: 45%; }

.hn-promo--media-first .hn-promo__art { margin-left: 10%; }
.hn-promo--media-first .hn-promo__panel { padding-left: 61%; }

/* And the mirror image. */
.hn-promo--media-last .hn-promo__art { margin-left: auto; margin-right: 10%; }
.hn-promo--media-last .hn-promo__panel { padding-right: 61%; }

/* The artwork card, with the roundel centred on it. */
.hn-promo__art {
	position: relative;
	margin: 0;
	aspect-ratio: 5 / 6;
	box-shadow: 0 10px 40px rgba( 24, 27, 74, 0.22 );
}

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

/*
 * The roundel is a sibling of the artwork, not a child of it, so `inset: 0`
 * measures against the media column — which now spans the full row. That blew
 * the badge up to 764px and laid it over the copy. It is pinned to the same
 * slice of the row the card occupies instead, top and bottom matching because
 * the column is exactly as tall as the card.
 */
.hn-promo__badge {
	position: absolute;
	top: 0;
	bottom: 0;
	display: grid;
	place-items: center;
	margin: 0;
	pointer-events: none;
}

.hn-promo--media-first .hn-promo__badge { left: 10%; right: 45%; }
.hn-promo--media-last .hn-promo__badge { left: 45%; right: 10%; }

.hn-promo__badge img {
	width: 62%;
	height: auto;
	max-height: none;
}

/* The panel's own type. */
.hn-promo__panel h3 {
	font-size: 2.1rem;
	font-weight: 600;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 1rem;
}

.hn-promo__panel p { margin-block: 0 1rem; }

.hn-promo__button .wp-block-button__link {
	background: var( --hn-accent );
	border-radius: 0;
	padding: 1rem 1.8rem;
	font-size: 0.83rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hn-promo__button .wp-block-button__link:hover {
	background: var( --hn-accent-dark );
}

/*
 * The testimonial band. The old site washes the signatory's own photograph
 * out to a soft sage behind the panel, so the colour of the band comes from
 * the picture rather than from the palette.
 */
:root .hn-promo--sage {
	background-image: url( "../../../../uploads/2024/01/Photo-Healing-Manor-Hotel.jpeg" );
	background-color: #a3b49e;
}

.hn-promo--sage::before { background: rgba( 163, 180, 158, 0.88 ); }

/* A portrait photograph rather than a square card. */
.hn-promo--sage .hn-promo__art { aspect-ratio: 3 / 4.4; }

/* The signatory's own mark, above their words. */
.hn-promo__mark { margin: 0 0 1.6rem; }
.hn-promo__mark img { max-height: 96px; width: auto; }

/* Their name and title, set as a signature. */
.hn-promo__attrib { margin-top: 1.6rem; font-style: italic; }

/* An outlined call to action, as the testimonial carries. */
.hn-promo__button.is-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var( --hn-accent );
	color: var( --hn-accent-dark );
}

.hn-promo__button.is-outline .wp-block-button__link:hover {
	background: var( --hn-accent );
	color: var( --hn-white );
}

/* The signatories band takes the brand green rather than the blue. */
.hn-promo__button.is-green .wp-block-button__link { background: var( --hn-green ); }
.hn-promo__button.is-green .wp-block-button__link:hover { background: var( --hn-green-dark ); }

/*
 * The pale sign-up bands, one at the foot of the Charter page and one at the
 * foot of the 8F page. Same shape as the front page's calls to action, but the
 * old site washes the artwork behind them almost to white rather than to
 * lilac, so they read as paler than the two on the front page. Each names its
 * own background; everything else about the treatment is shared.
 */
:root .hn-promo--pale {
	background-color: var( --hn-mist );
	/* No overhead banner on these pages, so they sit closer to the block above. */
	padding-block: 130px;
}

.hn-promo--pale::before { background: rgba( 255, 255, 255, 0.90 ); }

/* Near enough square, as the old site crops them. */
.hn-promo--pale .hn-promo__art { aspect-ratio: 16 / 15; }

/* The roundel fills more of its card here than it does on the front page. */
.hn-promo--pale .hn-promo__badge img { width: 78%; }

/*
 * The artwork is taller than the copy here, so the panel is stretched by the
 * row and the copy would otherwise sit against its top edge with a hand's
 * width of empty white beneath the button.
 */
.hn-promo--pale .hn-promo__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

:root .hn-promo--join {
	background-image: url( "../../../../uploads/2022/05/colibri-image-31.png" );
}

/* Colibri crops the banner well right of centre; the waves read differently. */
.hn-promo--join .hn-promo__art img { object-position: 87.7% 49.2%; }

:root .hn-promo--8f {
	background-image: url( "../../../../uploads/2022/11/8F_Homepage_Callout_BG.png" );
}

/*
 * This panel's heading is an h2 — it is a section of the Charter page, not a
 * card within one — so it keeps the page's heading size and only loses the
 * leading space it would otherwise open with.
 */
.hn-promo__panel h2 {
	margin-top: 0;
	margin-bottom: 1rem;
	line-height: 1.15;
}

@media (max-width: 900px) {
	/* Stacked: artwork above, panel below, no overlap to preserve. */
	.hn-promo { padding-block: 48px; }

	:root .hn-promo__row { grid-template-columns: minmax( 0, 1fr ); }

	:root .hn-promo__media,
	:root .hn-promo__panel {
		grid-row: auto;
		grid-column: 1;
		margin-block: 0;
	}

	:root .hn-promo__panel {
		padding: 2rem 1.6rem;
	}

	.hn-promo__art { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------- what we do band -- */

/*
 * "Students for Hospitality, Hospitality for Students" and the eight things
 * the initiative does, each on its own card.
 *
 * The heading and the standfirst are held well inside the container — that is
 * what makes the title break after the comma rather than running the full
 * width — and the cards sit in two columns beneath them.
 */

/*
 * Held narrow and pushed left.
 *
 * A constrained layout centres every child that is narrower than the content
 * width, using `margin-left: auto !important` — which cannot be beaten on
 * specificity, so the override has to be !important too.
 *
 * On its own that pushed the title out to the section's padding edge rather
 * than the cards' left edge, because the children are centred inside a wider
 * box than the cards occupy. Pinning the inner container to the container
 * width first gives everything in the section the same left edge to start
 * from, and the title then aligns with the first card.
 */
/*
 * A band carrying the stacked monogram, bleeding off the right-hand edge
 * behind the content. Used on the front page and on the Charter.
 *
 * There is no inner container to constrain — a constrained group is its own
 * container — so the band is held to the content width by its padding
 * instead. Everything in the section then starts at the same left edge, and
 * the background can still run full width behind it.
 *
 * The motif only occupies the right quarter of the file, so `contain` shrinks
 * it to a thin strip; `cover` gives it the size the original has.
 */
:root .hn-monogram {
	padding-inline: max( var( --hn-gutter ), calc( ( 100% - var( --hn-container ) ) / 2 ) );
	background-image: url( "../../../../uploads/2022/05/bg_stacked-right.jpg" );
	background-repeat: no-repeat;
	background-position: right top;
	background-size: cover;
}

/*
 * A plain monogram band, where the copy simply runs down the left of the
 * artwork. Kept separate from .hn-monogram itself so that bands with their
 * own measures — the front page's title and standfirst have theirs — are not
 * overridden by a blanket width.
 */
.hn-monogram--copy > :is(p, h2, h3, .wp-block-buttons) {
	max-width: 62%;
	/*
	 * A constrained layout centres anything narrower than the content width
	 * with `margin-left: auto !important`, so without this the copy sat
	 * centred over the band rather than running down its left edge.
	 */
	margin-left: 0 !important;
	margin-right: auto !important;
}

@media (max-width: 900px) {
	.hn-monogram--copy > :is(p, h2, h3, .wp-block-buttons) { max-width: none; }
}

:root .hn-intro__title,
:root .hn-intro__lead {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.hn-intro__title {
	max-width: 30ch;
	font-weight: 600;
	margin-bottom: 0.7em;
}

/*
 * Set larger than body copy, as a standfirst rather than a first paragraph.
 * The width is in rem rather than ch so it does not shrink as the type grows
 * — in ch it wrapped to three lines where the original takes two.
 */
.hn-intro__lead {
	max-width: 48rem;
	font-size: 1.4rem;
	line-height: 1.5;
	margin-bottom: 2.6rem;
}

/*
 * Two cards to a row, laid out as a grid rather than as flex columns.
 *
 * WordPress gives each columns block its own generated layout class carrying
 * its own gap, so as flex the four rows came out at slightly different widths
 * — 601px, 591px, 601px — and the cards butted into each other. A grid of two
 * equal tracks is the same thing said once, and grid items stretch, so the
 * two cards in a row are always the same height.
 */
:root .hn-intro__row {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1rem;
	margin-block: 0 1rem;
}

:root .hn-intro__row:last-of-type { margin-bottom: 0; }

/* The column is now a grid cell; let the card fill it. */
:root .hn-intro__row > .wp-block-column {
	flex-basis: auto;
	display: flex;
	margin: 0;
}

.hn-intro__card {
	background: var( --hn-white );
	border: 1px solid rgba( 23, 37, 42, 0.09 );
	box-shadow: 0 1px 4px rgba( 23, 37, 42, 0.06 );
	border-radius: 2px;
	padding: 1.35rem 1.5rem;
	margin: 0;
	width: 100%;
	text-align: left;
}

@media (max-width: 781px) {
	.hn-intro__title,
	.hn-intro__lead { max-width: none; }

	:root .hn-intro__row {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1rem;
		margin-bottom: 1rem;
	}

	.hn-intro__lead { font-size: 1.2rem; }
}

/* ----------------------------------------------------------- logo strip -- */

/*
 * Signatory logos, each on its own white card so that marks drawn for a white
 * ground do not sit directly on the gold.
 */
:root .hn-logos {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 1.75rem;
	margin-block: 2.5rem 0;
}

:root .hn-logos > .wp-block-column {
	flex-basis: auto;
	margin: 0;
	background: var( --hn-white );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.6rem;
	/*
	 * Half as tall as they are wide, which is the proportion the old site
	 * gives them. Left to the logos the cards came out four-fifths as tall
	 * again and the band read as a row of boxes rather than a strip.
	 */
	aspect-ratio: 2 / 1;
	min-height: 0;
}

.hn-logos figure { margin: 0; }

.hn-logos img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

/* The band's own call to action sits well clear of the strip. */
.is-style-section-gold .wp-block-buttons { margin-top: 3rem; }

@media (max-width: 781px) {
	:root .hn-logos { grid-template-columns: minmax( 0, 1fr ); gap: 1rem; }
	:root .hn-logos > .wp-block-column { min-height: 0; }
}

/* -------------------------------------------------------------- partners -- */

/*
 * The partner wall. Same three-up grid as the signatories, but these marks sit
 * straight on the wash rather than on white cards — they were drawn for a pale
 * ground and the old site trusts them to it.
 *
 * The conversion split the wall into three rows of columns, which left INCARTA
 * alone in the last one and stretched it the full width of the page.
 */
:root .hn-logos--plain > .wp-block-column {
	background: none;
	aspect-ratio: auto;
	padding: 0;
	min-height: 120px;
}

.hn-logos--plain img { max-height: 96px; }

.hn-logos--plain a {
	display: block;
	line-height: 0;
}

/*
 * A partner in their own words: their mark down one third, what they say about
 * the charter across the other two. The conversion kept the words and dropped
 * the mark — Colibri held it in a column of its own, and a column holding one
 * picture and nothing else read as empty.
 */
:root .hn-partner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 2fr );
	align-items: start;
	gap: 2.5rem;
	margin-block: 0;
}

:root .hn-partner > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-partner__logo { text-align: center; }

.hn-partner__logo figure { margin: 0; }

.hn-partner__logo img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 140px;
	display: inline-block;
}

.hn-partner__copy > :first-child { margin-top: 0; }

.hn-partner__copy :is( p, h3 ) { text-align: left; }

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

	:root .hn-partner {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1.5rem;
	}

	.hn-partner__logo { text-align: left; }
}

@media (max-width: 560px) {
	:root .hn-logos--plain { grid-template-columns: minmax( 0, 1fr ); }
}

/* ---------------------------------------------------------- audience bar -- */

/*
 * The four audiences under the home banner: one white card, four cells split
 * by hairlines, straddling the bottom edge of the banner so half of it sits on
 * the artwork and half on the page.
 *
 * The overlap is done by pulling the card up half its own height. Using half
 * the height rather than a fixed offset keeps it centred on the edge whatever
 * the icons and labels come out at, which matters because the labels wrap on
 * narrower screens.
 */
/*
 * Prefixed with :root to outweigh WordPress's own
 * `:root :where(.is-layout-flow) > *`, which sets margin-block-start: 1rem at
 * the same specificity and later in the cascade. Without it the card sat 16px
 * below the banner instead of straddling it, and nothing in the stylesheet
 * looked wrong.
 */
:root .hn-audience {
	--hn-audience-h: 208px;
	position: relative;
	z-index: 1;
	/* Multiplied by -0.5; dividing by a negative in calc() is invalid. */
	margin-top: calc( var( --hn-audience-h ) * -0.5 );
	margin-bottom: 0;
	padding-inline: var( --hn-gutter );
}

.hn-audience__row {
	background: var( --hn-white );
	box-shadow: 0 2px 22px rgba( 15, 20, 60, 0.13 );
	margin-bottom: 0;
	gap: 0;
}

.hn-audience__cell {
	min-height: var( --hn-audience-h );
	display: flex;
	/* A hairline between cells, and none before the first. */
	box-shadow: inset 1px 0 0 var( --hn-rule );
}

.hn-audience__cell:first-child { box-shadow: none; }

.hn-audience__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	width: 100%;
	padding: 2rem 1rem;
	color: var( --hn-indigo );
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
}

.hn-audience__icon {
	display: block;
	line-height: 0;
}

.hn-audience__icon svg {
	width: 52px;
	height: 52px;
	fill: currentColor;
}

.hn-audience__label {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hn-audience__link:hover,
.hn-audience__link:focus-visible {
	color: var( --hn-accent-dark );
}

.hn-audience__link:hover .hn-audience__icon { transform: translateY( -2px ); }

@media (prefers-reduced-motion: reduce) {
	.hn-audience__link,
	.hn-audience__icon { transition: none; }
}

@media (max-width: 781px) {
	/*
	 * Stacked on a phone, so the card is far too tall to straddle anything.
	 * It sits below the banner instead, and the cells divide horizontally.
	 */
	:root .hn-audience {
		margin-top: 0;
	}

	.hn-audience__cell {
		min-height: 0;
		box-shadow: inset 0 1px 0 var( --hn-rule );
	}

	.hn-audience__link { padding: 1.5rem 1rem; gap: 1rem; }
}

/* ------------------------------------------------------- calls to action -- */

/*
 * The two banner buttons. Both are 2px white outlines with uppercase, letter
 * spaced type; the first is filled orange, the second is a pale wash of white
 * that takes its colour from whatever banner is behind it. Measured from the
 * old site at #e35b1f, 321x50, with a 21px gap.
 */
.hn-hero .wp-block-buttons { gap: 21px; }

.hn-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	border: 2px solid var(--hn-white);
	border-radius: 3px;
	padding: 0.78rem 1.6rem;
	font-size: 0.83rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--hn-white);
}

.hn-cta .wp-block-button__link::before {
	font-size: 0.95em;
	line-height: 1;
}

.hn-cta--primary .wp-block-button__link {
	background: #e35b1f;
}

.hn-cta--primary .wp-block-button__link::before { content: "\2605"; }

.hn-cta--ghost .wp-block-button__link {
	background: rgba( 255, 255, 255, 0.34 );
}

.hn-cta--ghost .wp-block-button__link::before { content: "\2709"; }

.hn-cta .wp-block-button__link:hover,
.hn-cta .wp-block-button__link:focus-visible {
	color: var(--hn-white);
}

.hn-cta--primary .wp-block-button__link:hover { background: #c94d16; }
.hn-cta--ghost .wp-block-button__link:hover { background: rgba( 255, 255, 255, 0.48 ); }

/*
 * The footer is light, as the original was: a centred tagline, the partner
 * logos, then the legal line. The old markup carried its styling inline; it
 * lives here instead so it is one place to change.
 */
.hn-footer {
	background: var(--hn-white);
	border-top: 1px solid var(--hn-rule);
	color: var(--hn-body);
	padding-block: 46px 30px;
}

.hn-footer__tagline {
	margin: 0 0 2rem;
	/* The original used #5bc1d0 on white, which is 2.1:1 - well under the 3:1
	   a large bold face needs. Darkened to keep the colour but clear the bar. */
	color: #1a7d8c;
	font-style: italic;
	font-weight: 700;
	font-size: 1.2rem;
}

.hn-partners {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp( 1.5rem, 5vw, 4rem );
}

.hn-partners__item { display: flex; }

.hn-partners img {
	max-height: 78px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.hn-footer__legal { gap: 1rem; }
.hn-footer__legal p { margin: 0; }

.hn-footer a { color: var(--hn-accent-text); }
.hn-footer a:hover { color: var(--hn-accent-dark); }

@media (max-width: 600px) {
	/* Stack the legal line rather than squeezing it onto one row. */
	.hn-footer__legal { justify-content: center; text-align: center; }
	.hn-partners img { max-height: 56px; }
}

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

/*
 * The gradient call to action, at the foot of Students and part-way down
 * Universities: purple running to blue, white type, and an orange button that
 * stays orange whatever the page's own colour is.
 */
:root .hn-cta-band {
	margin-block: 0;
	padding-block: 40px;
	background-image: linear-gradient( 90deg, rgba( 106, 17, 203, 0.8 ) 0%, rgba( 37, 117, 252, 0.8 ) 100% );
	background-size: cover;
}

.hn-cta-band :is( h1, h2, h3, p ) {
	color: var( --hn-white );
	text-align: left;
}

:root .hn-cta-band__row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 2rem;
	margin-block: 0;
}

:root .hn-cta-band__row > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-cta-band h2 { margin-block: 0; }
.hn-cta-band p { margin-block: 0.5rem 0; }

.hn-cta-band .wp-block-button__link {
	padding: 15px 30px;
	border-radius: 5px;
	background-color: #e35b1f;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.hn-cta-band .wp-block-button__link:hover,
.hn-cta-band .wp-block-button__link:focus { background-color: #e38f6b; }

/*
 * A media column that runs off the right edge of the page. Its band has to
 * clip, or a scrollbar turns the overhang into sideways scrolling.
 */
:root .hn-split > .hn-split__media.hn-media-bleed,
.hn-media-bleed { margin-right: min( 0px, calc( ( var( --hn-container ) - 100vw ) / 2 ) ); }

/* ------------------------------------------------------------ split rows -- */

/*
 * Copy one side, a photograph the other. Which side is set per block, because
 * these pages alternate.
 */
:root .hn-split {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-items: center;
	gap: 3rem;
	margin-block: 0;
}

:root .hn-split > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-split--tight { gap: 0; }

.hn-split__copy :is( h2, h3 ) {
	margin-top: 0;
	text-align: left;
}

.hn-split__copy :is( p, li ) { text-align: left; }

/*
 * A heading in the page's own colour. Stated per heading rather than per
 * block: these pages mix coloured and plain headings inside the same shape —
 * Students colours "Our Research", Universities leaves its two alone.
 */
.hn-accent-head { color: var( --hn-accent ); }

.hn-split__media figure { margin: 0; }

/* Colibri recorded a crop box for these; where it did, the picture fills it. */
.hn-split__media img {
	width: 100%;
	height: var( --hn-photo-h, auto );
	max-height: none;
	object-fit: cover;
	display: block;
}

/* Three named causes, one under the other, each headed in the page colour. */
:root .hn-causes {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 1.6rem;
	margin-block: 1.5rem 0;
}

:root .hn-causes > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-cause h3 {
	margin: 0 0 0.5rem;
	color: var( --hn-accent );
	text-transform: uppercase;
	text-align: left;
}

.hn-cause p {
	margin: 0;
	text-align: left;
}

/* ------------------------------------------------------------- about us -- */

/*
 * A white panel with the photograph laid over its right edge. The panel leans
 * into the picture rather than the picture reaching back, which is how the old
 * site holds the two together.
 */
:root .hn-aboutus {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-items: center;
	gap: 0;
	margin-block: 0;
}

:root .hn-aboutus > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

:root .hn-aboutus__panel {
	position: relative;
	z-index: 1;
	padding: 12% 14%;
	text-align: left;
	background: var( --hn-white );
	box-shadow: 0 5px 15px 2px rgba( 0, 0, 0, 0.1 );
	transform: translateX( 6% );
}

.hn-aboutus__panel > :first-child { margin-top: 0; }

.hn-aboutus__panel :is( h2, h3, p ) { text-align: left; }

/* The eyebrow above the heading: small, dark, and not the page colour. */
.hn-aboutus__panel h3 {
	margin-bottom: 0.4rem;
	font-size: 0.95rem;
	color: var( --hn-ink );
}

.hn-aboutus__panel h2 {
	margin-block: 0 1rem;
	color: var( --hn-accent );
}

:root .hn-aboutus__media {
	position: relative;
	z-index: 2;
}

.hn-aboutus__media figure { margin: 0; }

.hn-aboutus__media img {
	width: 100%;
	height: var( --hn-photo-h, auto );
	max-height: none;
	object-fit: cover;
	display: block;
	box-shadow: 0 5px 20px 2px rgba( 0, 0, 0, 0.15 );
}

/* ------------------------------------------------------------------ FAQ -- */

/*
 * The questions are already a run of details blocks, so all they wanted was
 * the old site's colours: a white bar each, and the page colour under the one
 * that is open.
 */
:root .hn-faq { margin-block: 2rem 0; }

.hn-faq .wp-block-details {
	margin: 8px 4px;
	border-radius: 3px;
	background: var( --hn-white );
}

.hn-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 12px 24px;
	color: var( --hn-ink );
	cursor: pointer;
	list-style: none;
	transition: background-color 0.2s, color 0.2s;
}

.hn-faq summary::-webkit-details-marker { display: none; }

.hn-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

.hn-faq .wp-block-details[open] summary::after { content: "\2013"; }

.hn-faq summary:hover,
.hn-faq summary:focus-visible,
.hn-faq .wp-block-details[open] summary {
	background: var( --hn-accent );
	color: var( --hn-white );
}

.hn-faq .wp-block-details > :not( summary ) {
	margin-block: 0;
	padding: 12px 24px;
	text-align: left;
}

/* ---------------------------------------------------------- how to help -- */

/*
 * Universities' five suggestions, each led by the icon the old site gave it,
 * beside a photograph with a green block standing out behind it.
 */
:root .hn-help {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 1.6rem;
	margin-block: 1.5rem 0;
}

:root .hn-help > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

:root .hn-help__item {
	display: grid;
	grid-template-columns: 50px minmax( 0, 1fr );
	align-items: start;
	gap: 0 1.25rem;
	margin-block: 0;
}

:root .hn-help__item > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-help__item::before {
	content: "";
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.hn-help__item p {
	margin: 0;
	text-align: left;
}

.hn-help__item--1::before { background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201896.0833'%20fill='%236df00b'%3E%3Cpath%20d='M1664%20640q53%200%2090.5%2037.5T1792%20768t-37.5%2090.5T1664%20896v384q0%2052-38%2090t-90%2038q-417-347-812-380-58%2019-91%2066t-31%20100.5%2040%2092.5q-20%2033-23%2065.5t6%2058%2033.5%2055%2048%2050T768%201566q-29%2058-111.5%2083T488%201660.5%20356%201605q-7-23-29.5-87.5t-32-94.5-23-89-15-101%203.5-98.5%2022-110.5H160q-66%200-113-47T0%20864V672q0-66%2047-113t113-47h480q435%200%20896-384%2052%200%2090%2038t38%2090v384zm-128%20604V290q-394%20302-768%20343v270q377%2042%20768%20341z'/%3E%3C/svg%3E" ); }
.hn-help__item--2::before { background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201896.0833'%20fill='%236df00b'%3E%3Cpath%20d='M1408%20768q0%20139-94%20257t-256.5%20186.5T704%201280q-86%200-176-16-124%2088-278%20128-36%209-86%2016h-3q-11%200-20.5-8t-11.5-21q-1-3-1-6.5t.5-6.5%202-6l2.5-5%203.5-5.5%204-5%204.5-5%204-4.5q5-6%2023-25t26-29.5%2022.5-29%2025-38.5%2020.5-44q-124-72-195-177T0%20768q0-139%2094-257t256.5-186.5T704%20256t353.5%2068.5T1314%20511t94%20257zm384%20256q0%20120-71%20224.5T1526%201425q10%2024%2020.5%2044t25%2038.5%2022.5%2029%2026%2029.5%2023%2025q1%201%204%204.5t4.5%205%204%205%203.5%205.5l2.5%205%202%206%20.5%206.5-1%206.5q-3%2014-13%2022t-22%207q-50-7-86-16-154-40-278-128-90%2016-176%2016-271%200-472-132%2058%204%2088%204%20161%200%20309-45t264-129q125-92%20192-212t67-254q0-77-23-152%20129%2071%20204%20178t75%20230z'/%3E%3C/svg%3E" ); }
.hn-help__item--3::before { background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201896.0833'%20fill='%236df00b'%3E%3Cpath%20d='M1671%20566q0%2040-28%2068l-724%20724-136%20136q-28%2028-68%2028t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28%2068-28t68%2028l294%20295%20656-657q28-28%2068-28t68%2028l136%20136q28%2028%2028%2068z'/%3E%3C/svg%3E" ); }
.hn-help__item--4::before { background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201611.2499%201896.0833'%20fill='%236df00b'%3E%3Cpath%20d='M1468%20380q28%2028%2048%2076t20%2088v1152q0%2040-28%2068t-68%2028H96q-40%200-68-28t-28-68V96q0-40%2028-68T96%200h896q40%200%2088%2020t76%2048zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384%201528V640H992q-40%200-68-28t-28-68V128H128v1536h1280zM384%20800q0-14%209-23t23-9h704q14%200%2023%209t9%2023v64q0%2014-9%2023t-23%209H416q-14%200-23-9t-9-23v-64zm736%20224q14%200%2023%209t9%2023v64q0%2014-9%2023t-23%209H416q-14%200-23-9t-9-23v-64q0-14%209-23t23-9h704zm0%20256q14%200%2023%209t9%2023v64q0%2014-9%2023t-23%209H416q-14%200-23-9t-9-23v-64q0-14%209-23t23-9h704z'/%3E%3C/svg%3E" ); }
.hn-help__item--5::before { background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201896.0833'%20fill='%236df00b'%3E%3Cpath%20d='M1792%20896q0%20174-120%20321.5t-326%20233-450%2085.5q-70%200-145-8-198%20175-460%20242-49%2014-114%2022-17%202-30.5-9t-17.5-29v-1q-3-4-.5-12t2-10%204.5-9.5l6-9%207-8.5%208-9q7-8%2031-34.5t34.5-38%2031-39.5%2032.5-51%2027-59%2026-76q-157-89-247.5-220T0%20896q0-130%2071-248.5T262%20443t286-136.5T896%20256q244%200%20450%2085.5t326%20233T1792%20896z'/%3E%3C/svg%3E" ); }

/* The green block behind the photograph, up and to the left of it. */
.hn-framed { position: relative; }

.hn-framed::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translate( -5%, -5% );
	background: #6df00b;
	z-index: -1;
}

.hn-framed figure { margin: 0; position: relative; }

.hn-framed img {
	width: 100%;
	height: auto;
	max-height: none;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.hn-faq summary { transition: none; }
}

@media (max-width: 900px) {
	:root .hn-split,
	:root .hn-aboutus { grid-template-columns: minmax( 0, 1fr ); }

	:root .hn-aboutus__panel {
		padding: 2rem 1.6rem;
		transform: none;
	}

	:root .hn-split > .hn-split__media.hn-media-bleed,
	.hn-media-bleed { margin-right: 0; }
}

/* ---------------------------------------------------------------- unions -- */

/*
 * The Unions page runs a pale blue wedge in behind its photographs, and says
 * what a union can do as a run of bars in the page's own gold.
 */
.hn-wedge-right {
	background-image: linear-gradient( 110deg, rgba( 255, 255, 255, 0 ) 60%, #a6dcf4 60% );
	background-size: cover;
	background-repeat: no-repeat;
}

/*
 * One suggestion to a bar. Gold takes dark type, not white.
 *
 * Named for the page, not for the shape: the member dashboard already owns
 * .hn-bar for its progress track, and a shared name put a bar's padding on an
 * 8px rule.
 */
.hn-union-bar {
	margin-block: 0 8px;
	padding: 0.65rem 1rem;
	background: var( --hn-accent );
	color: var( --hn-ink );
	text-align: left;
}

.hn-union-bar a { color: var( --hn-ink ); }

/* The framed photograph takes the page colour rather than the green. */
.hn-framed--gold::before { background: var( --hn-accent ); }

/* ------------------------------------------------------------- employers -- */

/*
 * The opening block: copy down the left three-fifths, a photograph filling the
 * rest of the band and running off the right edge of the page.
 *
 * Colibri drew the photograph as a column background, so it filled its column
 * top to bottom and bled past the container. The conversion read it as a
 * picture and capped it at 400px in the middle of a half-width column.
 */
:root .hn-lede {
	display: grid;
	grid-template-columns: 3fr 2fr;
	align-items: stretch;
	gap: 0;
	margin-block: 0;
}

:root .hn-lede > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-lede__copy {
	padding: 5% 12% 5% 0;
	text-align: left;
}

.hn-lede__copy :is( p, h2, h3 ) { text-align: left; }

/*
 * Off the right edge of the page, as the old site has it. Written as a child
 * of the row so it outranks the rule above, which zeroes every column's margin.
 * The band clips, so a scrollbar cannot turn the overhang into sideways
 * scrolling.
 */
:root .hn-lede > .hn-lede__media {
	position: relative;
	min-height: 560px;
	margin-right: min( 0px, calc( ( var( --hn-container ) - 100vw ) / 2 ) );
	box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.2 );
}

.hn-bleed-right { overflow-x: clip; }

.hn-lede__media figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

.hn-lede__media img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	display: block;
}

/* The benefits, two to a row, each in the page's own orange. */
:root .hn-benefits {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px;
	margin-block: 1.5rem 0;
}

:root .hn-benefits > .hn-benefit {
	flex-basis: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: 5px;
	background-color: var( --hn-accent );
}

.hn-benefit p {
	margin: 0;
	color: var( --hn-white );
	text-align: left;
}

/* ------------------------------------------------------------ our research */

:root .hn-research {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-items: center;
	gap: 3rem;
	margin-block: 0;
}

:root .hn-research > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-research__photo figure { margin: 0; }

.hn-research__photo img {
	width: 100%;
	height: auto;
	max-height: none;
	display: block;
}

.hn-research__copy :is( h2, h3 ) {
	margin-top: 0;
	color: var( --hn-accent );
	text-align: left;
}

.hn-research__copy p { text-align: left; }

/* ----------------------------------------------------------- take action -- */

/*
 * The four things an employer can do. Two to a row, each numbered in the
 * page's orange, on the hatched artwork the old site washes almost to white.
 */
:root .hn-hash-right {
	position: relative;
	isolation: isolate;
	background-image: url( "../../../../uploads/2022/05/bg_hash-right.jpg" );
	background-size: cover;
	background-position: center;
}

.hn-hash-right::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 255, 255, 255, 0.9 );
	z-index: -1;
}

:root .hn-actions {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-items: start;
	gap: 3rem 4rem;
	margin-block: 2.5rem 0;
}

:root .hn-actions > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

:root .hn-action {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	align-items: start;
	gap: 0 0.9rem;
	margin-block: 0;
}

:root .hn-action > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-action__num p {
	margin: 0;
	color: var( --hn-accent );
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1;
	text-align: left;
}

.hn-action__body > :first-child { margin-top: 0; }

.hn-action__body h3 {
	margin-bottom: 0.6rem;
	color: var( --hn-accent );
	text-align: left;
}

.hn-action__body p { text-align: left; }

@media (max-width: 900px) {
	:root .hn-lede,
	:root .hn-research,
	:root .hn-actions { grid-template-columns: minmax( 0, 1fr ); }

	.hn-lede__copy { padding: 0 0 1.5rem; }

	:root .hn-lede > .hn-lede__media {
		min-height: 320px;
		margin-right: 0;
	}

	:root .hn-benefits { grid-template-columns: minmax( 0, 1fr ); }

	:root .hn-actions { gap: 2rem; }
}

/* --------------------------------------------------------- feature rows -- */

/*
 * Why Now? is one long diagonal: white to the top left, pale blue to the
 * bottom right, with the whole page laid over it. The old site put a single
 * hard-stop gradient on the page's own wrapper, which is what this is.
 */
.hn-diagonal {
	background-image: linear-gradient( 105deg, var( --hn-white ) 41%, #bce4f5 41% );
	background-size: cover;
	background-repeat: no-repeat;
}

/* The bands over it keep their rhythm but not their colour. */
.wp-block-group.is-style-section.is-clear,
.wp-block-group.is-style-section-wash.is-clear { background-color: transparent; }

/*
 * A feature row: copy one side, a pair of overlapping photographs the other.
 * The pair is an aspect box with both pictures placed inside it as fractions
 * of its width, so the overlap holds at any size without being measured.
 */
:root .hn-feature {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-items: center;
	gap: 0;
	margin-block: 0;
}

:root .hn-feature > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-feature__copy { text-align: left; }

/* The copy stops well short of the pictures; the old site gives it 12%. */
.hn-feature--media-last .hn-feature__copy { padding-right: 12%; }
.hn-feature--media-first .hn-feature__copy { padding-left: 12%; }

.hn-feature__copy :is( h2, h3 ) {
	margin-top: 0;
	text-align: left;
}

.hn-feature__copy p { text-align: left; }

/*
 * The pair leans out past its column — away from the copy — which is what
 * gives the page its drift. No in-flow content, so the padding is the height.
 */
:root .hn-feature__media {
	position: relative;
	padding-top: 110%;
}

.hn-feature--media-last .hn-feature__media { transform: translateX( -10% ); }
.hn-feature--media-first .hn-feature__media { transform: translateX( 10% ); }

.hn-stack__back,
.hn-stack__front {
	position: absolute;
	margin: 0;
}

.hn-stack__back img,
.hn-stack__front img {
	width: 100%;
	height: auto;
	max-height: none;
	display: block;
}

/* The larger picture, behind. */
.hn-stack__back {
	width: 94.264%;
	z-index: 1;
}

/* The smaller one, in front, in the white frame the old site gives it. */
.hn-stack__front {
	width: 66.203%;
	z-index: 2;
}

.hn-stack__front img {
	border: 15px solid var( --hn-white );
	box-shadow: 0 5px 20px 2px rgba( 0, 0, 0, 0.2 );
}

/*
 * Measured off the old site, one placement per row.
 *
 * The larger picture rides above the row it belongs to, which is what gives
 * the page its drift. Colibri's own widest rule lifts it a third of the box —
 * far enough here to land on the banner — where the page as it actually
 * renders lifts it a tenth. The tenth is what this follows.
 */
.hn-feature--media-last .hn-stack__back { top: -10%; left: 20%; }
.hn-feature--media-last .hn-stack__front { top: 47.474%; left: 4.545%; }

.hn-feature--media-first .hn-stack__back { top: -10%; left: -10%; }
.hn-feature--media-first .hn-stack__front { top: 54.770%; left: 30%; }

/* ------------------------------------------------------------ the people -- */

/*
 * A researcher: portrait one side, everything about them the other. The
 * conversion nested a second columns block inside the first, which put the
 * name in one narrow column and the whole biography in another.
 */
:root .hn-people-head { text-align: left; }

:root .hn-person {
	display: grid;
	grid-template-columns: minmax( 0, 400px ) minmax( 0, 1fr );
	align-items: start;
	gap: 40px;
	margin-block: 40px 0;
}

:root .hn-person > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.hn-person__photo img {
	width: 100%;
	height: auto;
	max-height: none;
	display: block;
}

.hn-person__body > :first-child { margin-top: 0; }

.hn-person__body :is( h3, p ) { text-align: left; }

.hn-person__body h3 { margin-bottom: 1.2rem; }

@media (max-width: 900px) {
	:root .hn-feature,
	:root .hn-person { grid-template-columns: minmax( 0, 1fr ); }

	:root .hn-feature__copy { padding-inline: 0; }

	/* Stacked: no overlap left to hold, so the pictures simply follow. */
	:root .hn-feature__media {
		padding-top: 0;
		transform: none;
		margin-top: 1.5rem;
	}

	.hn-stack__back,
	.hn-stack__front {
		position: static;
		width: 100%;
	}

	.hn-stack__front { margin-top: 1rem; }

	:root .hn-person { gap: 24px; }
}

/* ----------------------------------------------------------- contact us -- */

/*
 * The contact block: a charcoal panel with the form card laid over its left
 * two-thirds, standing proud of it top and bottom, on the banner artwork
 * washed almost to white.
 *
 * Colibri built the panel out of two dark columns either side of a white one —
 * a 10% strip, the 60% card, then the 30% social panel. The strip is drawn
 * here instead, so the card can be a single column and the row does not need
 * an empty column in the markup to hold a colour.
 */
:root .hn-contact {
	position: relative;
	isolation: isolate;
	margin-block: 0;
	padding-block: var( --hn-section-y );
	background-color: var( --hn-mist );
	background-image: url( "../../../../uploads/2022/05/hospitality-now-hero-02.png" );
	background-size: cover;
	background-position: center;
}

/* The artwork is fully saturated; the old site keeps a whisper of it. */
.hn-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 255, 255, 255, 0.85 );
	z-index: -1;
}

:root .hn-contact__row {
	display: grid;
	grid-template-columns: repeat( 10, minmax( 0, 1fr ) );
	align-items: center;
	gap: 0;
	width: 75%;
	margin-inline: auto;
	margin-block: 0;
}

/* The charcoal panel, behind everything, inset from the row top and bottom. */
.hn-contact__row::before {
	content: "";
	grid-row: 1;
	grid-column: 1 / -1;
	align-self: stretch;
	margin-block: 40px;
	border-radius: 5px;
	background: var( --hn-ink );
}

:root .hn-contact__form {
	grid-row: 1;
	grid-column: 2 / 8;
	z-index: 1;
	flex-basis: auto;
	margin: 0;
	padding: 40px;
	border-radius: 5px;
	background: var( --hn-white );
	box-shadow: 0 2px 10px 2px rgba( 0, 0, 0, 0.2 );
}

:root .hn-contact__social {
	grid-row: 1;
	grid-column: 8 / -1;
	align-self: center;
	z-index: 1;
	flex-basis: auto;
	margin: 0;
	padding: 25px;
	text-align: center;
}

.hn-contact__social h2 {
	margin: 0 0 40px;
	color: var( --hn-white );
	text-transform: uppercase;
	font-weight: 700;
}

/* One outlined roundel, which turns green under the pointer. */
.hn-contact__social .wp-block-social-links { margin: 0; }

.hn-social .wp-social-link {
	margin: 5px;
	padding: 10px;
	border: 1px solid var( --hn-white );
	border-radius: 300px;
	background-color: transparent;
	transition: border-color 0.5s;
}

.hn-social .wp-social-link a { padding: 0; display: block; }

.hn-social .wp-social-link svg {
	width: 20px;
	height: 20px;
	fill: var( --hn-white );
	transition: fill 0.5s;
}

.hn-social .wp-social-link:hover { border-color: var( --hn-green ); }
.hn-social .wp-social-link:hover svg { fill: var( --hn-green ); }

/*
 * The form. Colibri drew these fields as a single rule under the ink, with no
 * box around them at all, and the site's blue on the submit.
 */
.hn-contact__form :is( input:not( [type="submit"] ):not( [type="checkbox"] ):not( [type="radio"] ):not( [type="file"] ), select, textarea ) {
	margin-block: 4px 16px;
	padding: 10px;
	border: 0;
	border-bottom: 1px solid var( --hn-ink );
	border-radius: 0;
	background-color: var( --hn-white );
	box-shadow: none;
	font-size: 14px;
}

.hn-contact__form :is( input, select, textarea ):focus {
	outline: 2px solid var( --hn-accent );
	outline-offset: 2px;
}

/*
 * Formidable prints its own stylesheet inside the shortcode's own output, so
 * it lands after this file and wins every tie. The :root prefix takes these
 * past its two-class selectors rather than fighting them with !important.
 */
:root .hn-contact__form .frm_primary_label {
	color: var( --hn-body );
	font-weight: 700;
}

:root .hn-contact__form .frm_submit :is( input[type="submit"], button ) {
	margin-inline: 0 auto;
	padding: 20px 40px;
	border: 0;
	border-radius: 5px;
	/*
	 * Not the page accent. This page's accent is the ink the panel behind is
	 * painted in, and the old site put the site blue on this one button
	 * regardless — a dark button on a dark panel would disappear.
	 */
	background-color: #03a9f4;
	color: var( --hn-white );
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s;
}

/* The old site turns it orange on the way in, whatever the page accent is. */
:root .hn-contact__form .frm_submit :is( input[type="submit"], button ):hover,
:root .hn-contact__form .frm_submit :is( input[type="submit"], button ):focus {
	background-color: #e35b1f;
}

@media (prefers-reduced-motion: reduce) {
	.hn-social .wp-social-link,
	.hn-social .wp-social-link svg,
	:root .hn-contact__form .frm_submit :is( input[type="submit"], button ) { transition: none; }
}

@media (max-width: 900px) {
	:root .hn-contact__row {
		grid-template-columns: minmax( 0, 1fr );
		width: 100%;
	}

	/* Stacked, so there is no panel left to stand proud of. */
	.hn-contact__row::before { display: none; }

	:root .hn-contact__form,
	:root .hn-contact__social {
		grid-row: auto;
		grid-column: 1;
	}

	:root .hn-contact__social {
		margin-top: 24px;
		border-radius: 5px;
		background: var( --hn-ink );
	}

	:root .hn-contact__form { padding: 24px; }
}

/* ------------------------------------------------------- resource cards -- */

/*
 * The downloads library: twelve white cards, four to a row.
 *
 * The conversion left them as twelve columns in a single line. They are a
 * grid, so a row is as tall as its tallest card and the copy in each one is
 * centred in whatever height that turns out to be — which is what the old site
 * did, and why its buttons do not line up across a row.
 */
:root .hn-cards {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 30px;
	margin-block: 0;
}

:root .hn-cards > .hn-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-basis: auto;
	margin: 0;
	padding: 40px;
	text-align: center;
	background: var( --hn-white );
	box-shadow: 0 1px 3px 2px rgba( 189, 189, 189, 0.4 );
}

.hn-card > :first-child { margin-top: 0; }
.hn-card > :last-child { margin-bottom: 0; }

.hn-card h2 {
	margin-bottom: 1.4rem;
	color: var( --hn-ink );
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.3;
	text-wrap: balance;
}

.hn-card p { margin-block: 0 1.6rem; }

/* Small, uppercase and letter-spaced, with the document mark the old site set
   against every one of them. */
.hn-card__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	padding: 12px 24px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.hn-card__cta .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-right: 10px;
	background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201611.2499%201896.0833'%20fill='%23ffffff'%3E%3Cpath%20d='M1468%20380q28%2028%2048%2076t20%2088v1152q0%2040-28%2068t-68%2028H96q-40%200-68-28t-28-68V96q0-40%2028-68T96%200h896q40%200%2088%2020t76%2048zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384%201528V640H992q-40%200-68-28t-28-68V128H128v1536h1280zm-514-593q33%2026%2084%2056%2059-7%20117-7%20147%200%20177%2049%2016%2022%202%2052%200%201-1%202l-2%202v1q-6%2038-71%2038-48%200-115-20t-130-53q-221%2024-392%2083-153%20262-242%20262-15%200-28-7l-24-12q-1-1-6-5-10-10-6-36%209-40%2056-91.5t132-96.5q14-9%2023%206%202%202%202%204%2052-85%20107-197%2068-136%20104-262-24-82-30.5-159.5T657%20552q11-40%2042-40h22q23%200%2035%2015%2018%2021%209%2068-2%206-4%208%201%203%201%208v30q-2%20123-14%20192%2055%20164%20146%20238zm-576%20411q52-24%20137-158-51%2040-87.5%2084t-49.5%2074zm398-920q-15%2042-2%20132%201-7%207-44%200-3%207-43%201-4%204-8-1-1-1-2-1-2-1-3-1-22-13-36%200%201-1%202v2zm-124%20661q135-54%20284-81-2-1-13-9.5t-16-13.5q-76-67-127-176-27%2086-83%20197-30%2056-45%2083zm646-16q-24-24-140-24%2076%2028%20124%2028%2014%200%2018-1%200-1-2-3z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Nothing to download yet, so it does not behave like a link. */
.hn-card__cta.is-soon .wp-block-button__link {
	background-color: var( --hn-grey );
	pointer-events: none;
	cursor: default;
}

@media (max-width: 1100px) {
	:root .hn-cards { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media (max-width: 600px) {
	:root .hn-cards { grid-template-columns: minmax( 0, 1fr ); }
	:root .hn-cards > .hn-card { padding: 28px 24px; }
}

/* ------------------------------------------------------- framework table -- */

/*
 * The 8F matrix: eight principles down the side, four consequences across.
 *
 * It comes out of a Shortcoder snippet with the markup already right — a real
 * thead, and the first cell of every row a row header — so all it ever needed
 * was its colours back. Both header bands take the indigo, the body alternates
 * a pale cyan against the band behind it, and the rules between cells are
 * white rather than grey, which is what makes it read as blocks of colour
 * rather than as a grid.
 */

.frameworktable {
	width: 100%;
	border-collapse: collapse;
	/*
	 * Long copy in five columns; below this it stops being a table and the
	 * wrapper scrolls it instead of crushing every word onto its own line.
	 */
	min-width: 860px;
	font-size: 0.9rem;
	line-height: 1.5;
}

.frameworktable :is(th, td) {
	padding: 0.9em 1em;
	vertical-align: top;
	text-align: left;
	border: 1px solid var( --hn-white );
}

/* Both the head row and the row headers down the side. */
.frameworktable th {
	font-weight: 700;
	background-color: #404898;
	color: var( --hn-white );
}

.frameworktable th :is(p, span) { color: var( --hn-white ); }

.frameworktable td { color: var( --hn-ink ); }

/*
 * Where the first cell is a label rather than an argument, it needs less room.
 * Keyed on the row header, because the same table appears in the lessons with
 * four columns and no label down the side — there the rule was squeezing a
 * column of prose into one word a line.
 */
.frameworktable th[scope="row"] { width: 14%; }

.frameworktable tr:nth-child(even) { background-color: #dbf2f5; }

.frameworktable :is(th, td) > p { margin: 0; }
.frameworktable :is(th, td) > p + p { margin-top: 0.8em; }

/* The snippet marks a lead-in line inside a cell with a bare span. */
.frameworktable span {
	display: block;
	margin-bottom: 1.1rem;
	font-weight: 800;
	font-size: 125%;
}

@media (max-width: 781px) {
	.frameworktable { font-size: 0.82rem; }
	.frameworktable :is(th, td) { padding: 0.7em 0.75em; }
}

/* ------------------------------------------------------------- utilities - */

.hn-banner {
	background-color: var(--hn-indigo);
	color: var(--hn-white);
	padding-block: 70px;
}

.hn-banner :is(h1, h2, h3, h4, h5, h6),
.hn-banner p { color: var(--hn-white); }

.hn-card {
	background: var(--hn-white);
	border: 1px solid var(--hn-rule);
	border-radius: 6px;
	padding: 1.75rem;
}

.hn-rule {
	border: 0;
	border-top: 3px solid var(--hn-accent);
	width: 60px;
	margin: 1.25rem 0;
}

/* Tables and other wide content must scroll rather than break the page. */
.wp-block-table { overflow-x: auto; }

/* ---------------------------------------------------------- screen reader */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--hn-white);
	clip-path: none;
	color: #0b3d6b;
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}