/*
Theme Name: HyperTexted
Theme URI: https://www.hypertexted.com
Author: HyperTexted
Author URI: https://www.hypertexted.com
Description: Brutalist Editorial block theme for HyperTexted, a writing, editing, and research firm. Warm paper canvas inside a signal-yellow frame, a 2px ink hairline grid, Archivo display type, and brand red as the single accent.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hypertexted
Tags: full-site-editing, block-theme, one-column, custom-colors, custom-menu, editor-style, wide-blocks, accessibility-ready
*/

:root {
	--ht-rule: 2px;
	/* Vertical frame stays tight; the horizontal one opens up so the yellow
	   field is visible on both sides at every width. */
	--ht-frame: clamp(10px, 1.4vw, 20px);
	--ht-frame-x: clamp(12px, 4vw, 96px);
	--ht-canvas: 1180px;
	--ht-gutter: clamp(20px, 2.6vw, 36px);
	--ht-ink: var(--wp--preset--color--ink);
	--ht-paper: var(--wp--preset--color--paper);
	--ht-red: var(--wp--preset--color--brand-red);
	--ht-yellow: var(--wp--preset--color--signal-yellow);
}

/* ---------------------------------------------------------------
   1. The frame. Every page sits on a yellow field with a bordered
   paper canvas. This is the signature container.
   --------------------------------------------------------------- */

body {
	padding: var(--ht-frame) var(--ht-frame-x);
	min-height: 100vh;
}

/* The canvas is capped well below the viewport so the yellow field reads
   as a deliberate margin rather than a hairline border. Widen or narrow
   --ht-canvas to change how much yellow shows. */
.wp-site-blocks {
	background: var(--ht-paper);
	border: var(--ht-rule) solid var(--ht-ink);
	overflow: clip;
	max-width: var(--ht-canvas);
	margin: 0 auto;
}

/* Nothing in this system is round or shadowed. */
.wp-site-blocks *,
.wp-site-blocks *::before,
.wp-site-blocks *::after {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Core ships `.wp-block-column { word-break: break-word }`. That deprecated
   value maps to overflow-wrap:anywhere, so browsers break inside words
   eagerly and display type shatters ("EDUCATIONA / L / INSTITUTION / S").
   It also lets flex columns shrink below their longest word, which is why
   the cells collapse as well.
   !important is deliberate: core's editor stylesheet loads after the theme
   in the block editor, so specificity alone does not win in both contexts. */
.wp-block-column,
.wp-block-columns,
.wp-block-post-title,
.wp-block-group,
p, li, figcaption,
h1, h2, h3, h4, h5, h6,
.ht-index__title,
.ht-index__desc,
.ht-list__label,
.ht-hero__headline,
.ht-hero__tagline {
	word-break: normal !important;
	overflow-wrap: break-word !important;
	hyphens: none;
}

/* With eager breaking gone, min-content is the longest word again. Keep the
   sector cells sharing width evenly rather than sizing to their text. */
.ht-two-col .wp-block-columns .wp-block-columns > .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

/* Visible focus, since links carry no underline by default. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: var(--ht-rule) solid var(--ht-red);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   2. Cell grid. Sections divide into bordered cells with 2px ink
   hairlines. Borders, never shadows.
   --------------------------------------------------------------- */

.ht-section {
	border-top: var(--ht-rule) solid var(--ht-ink);
}

.ht-section:first-child {
	border-top: 0;
}

.ht-pad {
	padding: var(--ht-gutter);
}

.ht-divide-x > * + * {
	border-left: var(--ht-rule) solid var(--ht-ink);
}

.ht-divide-y > * + * {
	border-top: var(--ht-rule) solid var(--ht-ink);
}

.ht-border-r {
	border-right: var(--ht-rule) solid var(--ht-ink);
}

.ht-border-t {
	border-top: var(--ht-rule) solid var(--ht-ink);
}

.ht-border-b {
	border-bottom: var(--ht-rule) solid var(--ht-ink);
}

/* ---------------------------------------------------------------
   3. Eyebrow labels. Small filled square, then an uppercase label.
   --------------------------------------------------------------- */

.ht-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ht-ink);
	margin: 0 0 22px;
}

.ht-eyebrow::before {
	content: "";
	width: 14px;
	height: 14px;
	background: var(--ht-red);
	flex: none;
}

.ht-eyebrow.is-yellow::before {
	background: var(--ht-yellow);
}

/* ---------------------------------------------------------------
   4. Headline accent. One word per headline in brand red.
   --------------------------------------------------------------- */

.ht-accent,
.wp-site-blocks .ht-accent {
	color: var(--ht-red);
}

/* Red asterisk mark. Three crossing strokes, drawn not typed. */
.ht-asterisk {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: none;
	background:
		linear-gradient(to bottom, transparent 44%, var(--ht-red) 44%, var(--ht-red) 56%, transparent 56%),
		linear-gradient(60deg, transparent 44%, var(--ht-red) 44%, var(--ht-red) 56%, transparent 56%),
		linear-gradient(-60deg, transparent 44%, var(--ht-red) 44%, var(--ht-red) 56%, transparent 56%);
}

.ht-star {
	color: var(--ht-yellow);
	font-size: 24px;
	line-height: 1;
}

/* The three sector cells are the narrowest columns on the page, and they
   carry the longest words ("EDUCATIONAL INSTITUTIONS"). Heading size and
   cell padding are both tuned so the longest word always fits on one
   line inside the capped canvas. */
/* WordPress emits preset size classes as `.has-h-3-font-size { font-size:
   ... !important }`, so a plain rule here loses and the headings render at
   the full 24px in a 200px cell. Matching !important is the only way to
   size them down. */
.ht-two-col h3,
.ht-two-col h3.has-h-3-font-size {
	font-size: clamp(14px, 1.35vw, 16px) !important;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.ht-two-col .wp-block-columns .wp-block-columns .ht-pad {
	padding: clamp(14px, 1.6vw, 24px);
}

/* ---------------------------------------------------------------
   5. Header. Logo cell, nav cells divided by hairlines, and a
   yellow "start a project" cell at the end.
   --------------------------------------------------------------- */

.ht-header {
	display: flex;
	align-items: stretch;
	border-bottom: var(--ht-rule) solid var(--ht-ink);
}

.ht-header__brand {
	display: flex;
	align-items: center;
	padding: 18px var(--ht-gutter);
	flex: 1;
	min-width: 0;
}

.ht-header__brand img,
.ht-header__brand .custom-logo {
	height: 38px;
	width: auto;
	display: block;
}

.ht-header .wp-block-navigation {
	align-items: stretch;
}

.ht-header .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
}

.ht-header .wp-block-navigation-item {
	display: flex;
	align-items: stretch;
	border-left: var(--ht-rule) solid var(--ht-ink);
}

.ht-header .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding: 0 22px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ht-ink);
	text-decoration: none;
	white-space: nowrap;
}

.ht-header .wp-block-navigation-item__content:hover {
	color: var(--ht-red);
	text-decoration: none;
}

/* Active page reads red and heavier. */
.ht-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.ht-header .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content {
	color: var(--ht-red);
	font-weight: 700;
}

.ht-header__cta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 26px;
	border-left: var(--ht-rule) solid var(--ht-ink);
	background: var(--ht-yellow);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ht-ink);
	text-decoration: none;
	line-height: 1.1;
}

.ht-header__cta:hover {
	background: var(--ht-ink);
	color: var(--ht-yellow);
	text-decoration: none;
}

.ht-header__cta:hover .ht-arrow::before,
.ht-header__cta:hover .ht-arrow::after {
	background: var(--ht-yellow);
}

/* The CTA cell shortens on small screens so the header row still fits
   beside the logo and the menu toggle. */
.ht-cta-short {
	display: none;
}

/* ---------------------------------------------------------------
   6. Arrow mark. A drawn diagonal arrow, used on links and rows.
   --------------------------------------------------------------- */

.ht-arrow {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 16px;
	flex: none;
	vertical-align: middle;
}

.ht-arrow::before,
.ht-arrow::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.ht-arrow::before {
	width: 14.5px;
	height: var(--ht-rule);
	top: 7px;
	left: 1px;
	transform: rotate(-45deg);
}

.ht-arrow::after {
	width: 9px;
	height: 9px;
	top: 2px;
	right: 2px;
	background: none;
	border-top: var(--ht-rule) solid currentColor;
	border-right: var(--ht-rule) solid currentColor;
}

/* ---------------------------------------------------------------
   7. Numbered index rows. 01 to 05 in large Archivo, hairline
   between rows, trailing arrow.
   --------------------------------------------------------------- */

.ht-index__row {
	display: grid;
	grid-template-columns: 92px 1fr 1.5fr 40px;
	align-items: center;
	gap: 24px;
	padding: 30px var(--ht-gutter);
	border-top: var(--ht-rule) solid var(--ht-ink);
	color: var(--ht-ink);
	text-decoration: none;
}

.ht-index__row:hover {
	background: var(--ht-yellow);
	text-decoration: none;
}

.ht-index__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
}

.ht-index__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	line-height: 1.05;
}

.ht-index__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	color: var(--wp--preset--color--warm-gray);
}

/* Compact variant for the hero list. */
.ht-list__row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 4px;
	border-top: var(--ht-rule) solid var(--ht-ink);
	color: var(--ht-ink);
	text-decoration: none;
}

.ht-list__row:last-child {
	border-bottom: var(--ht-rule) solid var(--ht-ink);
}

.ht-list__row:hover {
	color: var(--ht-red);
	text-decoration: none;
}

.ht-list__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 26px;
	min-width: 44px;
	line-height: 1;
}

.ht-list__label {
	flex: 1;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* "NEW" tag. */
.ht-tag-new {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ht-red);
	border: 1.5px solid var(--ht-red);
	padding: 1px 5px;
	margin-left: 6px;
	vertical-align: middle;
	text-transform: uppercase;
}

/* Deliverable chips. */
.ht-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.ht-chips li {
	border: var(--ht-rule) solid var(--ht-ink);
	padding: 7px 12px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
}

/* ---------------------------------------------------------------
   8. Hero.
   --------------------------------------------------------------- */

/* The design fixes the hero at 772px tall on desktop, which is what
   gives the illustration cell its presence. Scaled here so it doesn't
   overflow short viewports. */
.ht-hero {
	display: grid;
	grid-template-columns: 1.32fr 1fr;
	align-items: stretch;
	min-height: clamp(520px, 54vw, 772px);
}

.ht-hero__main {
	display: flex;
	flex-direction: column;
	padding: clamp(32px, 5vw, 80px) var(--ht-gutter) var(--ht-gutter);
	border-right: var(--ht-rule) solid var(--ht-ink);
}

.ht-hero__headline {
	position: relative;
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.9;
	letter-spacing: -0.025em;
}

.ht-hero__tagline {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(20px, 2.4vw, 27px);
	letter-spacing: 0.01em;
	margin: 0;
}

.ht-hero__down {
	width: 34px;
	height: 60px;
	flex: none;
}

/* Right column of the hero: illustration cell on top taking the slack,
   the numbered index sitting at its natural height below. */
.ht-hero__aside {
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: 0;
}

.ht-illus {
	background: var(--wp--preset--color--illustration-ground);
	border-bottom: var(--ht-rule) solid var(--ht-ink);
	min-height: 200px;
	overflow: hidden;
	position: relative;
}

/* The image block fills the cell edge to edge. Figure margins are reset
   so artwork meets the hairline borders with no paper gap. */
.ht-illus figure,
.ht-illus .wp-block-image,
.ht-illus__img {
	margin: 0;
	height: 100%;
}

/* The numbered index sits at the bottom of the hero's right column. */
.ht-hero__index {
	align-self: end;
	width: 100%;
}

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

/* Before artwork is uploaded the image has no src. Hide it so the cell
   reads as a clean dark frame instead of a broken-image icon. */
.ht-illus img:not([src]),
.ht-illus img[src=""] {
	display: none;
}

/* ---------------------------------------------------------------
   9. Feed rows (Ideas).
   --------------------------------------------------------------- */

.ht-feed__row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 2px;
	border-top: var(--ht-rule) solid var(--ht-ink);
	color: var(--ht-ink);
	text-decoration: none;
}

.ht-feed__row:last-child {
	border-bottom: var(--ht-rule) solid var(--ht-ink);
}

.ht-feed__row:hover {
	color: var(--ht-red);
	text-decoration: none;
}

.ht-meta {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--warm-gray);
}

/* Post cards on the Ideas index. */
.ht-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.ht-cards > * {
	padding: var(--ht-gutter);
	border-left: var(--ht-rule) solid var(--ht-ink);
}

.ht-cards > *:first-child {
	border-left: 0;
}

/* ---------------------------------------------------------------
   10. Article. A narrow reading column with a red-ruled pullquote.
   --------------------------------------------------------------- */

.ht-article {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 64px) var(--ht-gutter);
}

.ht-article p {
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 1.4em;
}

.ht-article h2,
.ht-article h3 {
	margin: 2em 0 0.6em;
}

.ht-article .wp-block-pullquote,
.ht-article blockquote {
	border: 0;
	border-left: 4px solid var(--ht-red);
	margin: 2em 0;
	padding: 4px 0 4px 24px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.ht-article .wp-block-pullquote p,
.ht-article blockquote p {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

/* ---------------------------------------------------------------
   11. Forms. 2px ink border, white fill, red focus ring.
   Covers the native WordPress.com / Jetpack contact form.
   --------------------------------------------------------------- */

.ht-form label,
.wp-block-jetpack-contact-form label,
.ht-form .grunion-field-label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ht-ink);
	margin-bottom: 8px;
}

.ht-form input[type="text"],
.ht-form input[type="email"],
.ht-form input[type="tel"],
.ht-form input[type="url"],
.ht-form textarea,
.ht-form select,
.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form input[type="url"],
.wp-block-jetpack-contact-form textarea,
.wp-block-jetpack-contact-form select {
	width: 100%;
	border: var(--ht-rule) solid var(--ht-ink);
	background: #ffffff;
	padding: 13px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--ht-ink);
	line-height: 1.4;
}

.ht-form textarea,
.wp-block-jetpack-contact-form textarea {
	resize: vertical;
	min-height: 120px;
}

.ht-form input:focus,
.ht-form textarea:focus,
.ht-form select:focus,
.wp-block-jetpack-contact-form input:focus,
.wp-block-jetpack-contact-form textarea:focus,
.wp-block-jetpack-contact-form select:focus {
	outline: var(--ht-rule) solid var(--ht-red);
	outline-offset: 1px;
	border-color: var(--ht-red);
}

.ht-form .ht-optional {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.ht-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.ht-form__stack {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Checkbox chips for "what do you need help with". */
.ht-form .ht-checkgroup ul,
.wp-block-jetpack-contact-form .ht-checkgroup ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ht-form .ht-checkgroup label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: var(--ht-rule) solid var(--ht-ink);
	padding: 8px 12px;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.ht-form button[type="submit"],
.wp-block-jetpack-contact-form button[type="submit"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	background: var(--ht-red);
	color: var(--ht-paper);
	border: 0;
	padding: 18px 26px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
}

.ht-form button[type="submit"]:hover,
.wp-block-jetpack-contact-form button[type="submit"]:hover,
.wp-block-button__link:hover {
	background: var(--ht-ink);
	color: var(--ht-paper);
	text-decoration: none;
}

/* Direct email address, set in the display face. */
.ht-email {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(18px, 2.2vw, 22px);
	letter-spacing: -0.01em;
	margin: 0;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------
   12. Footer. Ink band, paper text, hairline at #2E2C28.
   Muted text is #9A968E, which clears WCAG AA on ink at 6.31:1.
   The design's #7A776F measured 4.15:1 and is not used.
   --------------------------------------------------------------- */

.ht-footer {
	background: var(--ht-ink);
	color: var(--ht-paper);
	border-top: var(--ht-rule) solid var(--ht-ink);
}

.ht-footer a {
	color: var(--ht-paper);
	text-decoration: none;
}

.ht-footer a:hover {
	color: var(--ht-paper);
	text-decoration: underline;
}

.ht-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	padding: 44px var(--ht-gutter) 36px;
}

.ht-footer__brand {
	max-width: 320px;
}

.ht-footer__brand img {
	height: 52px;
	width: auto;
	display: block;
	margin-bottom: 18px;
}

.ht-footer__blurb {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.ht-footer__cols {
	display: flex;
	gap: 64px;
	flex-wrap: wrap;
}

.ht-footer__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ht-footer__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ht-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 18px var(--ht-gutter);
	border-top: var(--ht-rule) solid var(--wp--preset--color--footer-rule);
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

.ht-footer .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--ht-paper);
}

/* ---------------------------------------------------------------
   13. Responsive. At 900px two-column bands collapse to one and
   the nav becomes an overlay menu. The frame narrows but stays.
   --------------------------------------------------------------- */

@media (max-width: 900px) {
	.ht-hero,
	.ht-hero__aside,
	.ht-cards,
	.ht-form__grid,
	.ht-two-col {
		grid-template-columns: 1fr;
	}

	/* Core stacks columns at 781px. This system flips its cell borders
	   at 900px, so stack here too and keep the two in agreement. */
	.wp-block-columns {
		flex-wrap: wrap;
	}

	.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}

	/* Stacked, the hero is as tall as its content. The illustration
	   becomes a fixed band between the CTA and the index, matching the
	   mobile artboard. */
	.ht-hero {
		min-height: 0;
	}

	.ht-hero__main {
		border-right: 0;
		border-bottom: var(--ht-rule) solid var(--ht-ink);
	}

	.ht-hero__aside {
		grid-template-rows: auto auto;
	}

	.ht-illus {
		min-height: 240px;
		border-top: var(--ht-rule) solid var(--ht-ink);
	}

	.ht-divide-x > * + * {
		border-left: 0;
		border-top: var(--ht-rule) solid var(--ht-ink);
	}

	.ht-border-r {
		border-right: 0;
		border-bottom: var(--ht-rule) solid var(--ht-ink);
	}

	.ht-cards > * {
		border-left: 0;
		border-top: var(--ht-rule) solid var(--ht-ink);
	}

	.ht-cards > *:first-child {
		border-top: 0;
	}

	.ht-index__row {
		grid-template-columns: 52px 1fr 28px;
		gap: 14px;
		padding: 22px var(--ht-gutter);
	}

	.ht-index__desc {
		grid-column: 2 / 4;
	}

	.ht-index__num {
		font-size: 22px;
	}

	.ht-index__title {
		font-size: 19px;
	}

	.ht-header__brand {
		padding: 14px 16px;
	}

	.ht-header__brand img,
	.ht-header__brand .custom-logo {
		height: 26px;
	}

	.ht-header__cta {
		padding: 0 16px;
		font-size: 11px;
	}

	.ht-hero__down {
		width: 24px;
		height: 48px;
	}

	.ht-footer__top {
		flex-direction: column;
		gap: 32px;
	}

	.ht-footer__cols {
		gap: 40px;
	}
}

@media (max-width: 600px) {
	.ht-header .wp-block-navigation__responsive-container-open {
		padding: 0 16px;
		border-left: var(--ht-rule) solid var(--ht-ink);
		display: flex;
		align-items: center;
	}

	.ht-cta-long {
		display: none;
	}

	.ht-cta-short {
		display: inline;
	}

	.ht-header__cta {
		gap: 8px;
		padding: 0 14px;
	}

	.ht-header__brand img,
	.ht-header__brand .custom-logo,
	.ht-header__brand .wp-block-site-logo img {
		height: 22px;
	}

	.ht-chips li {
		font-size: 13px;
		padding: 6px 10px;
	}
}

/* Nav overlay picks up the brand rather than core defaults. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ht-paper);
	color: var(--ht-ink);
	padding: var(--ht-gutter);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-left: 0;
	border-bottom: var(--ht-rule) solid var(--ht-ink);
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 16px 0;
	font-size: 18px;
	width: 100%;
}

/* ---------------------------------------------------------------
   14. Print and reduced motion.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	body {
		background: #fff;
		padding: 0;
	}

	.wp-site-blocks {
		border: 0;
	}

	.ht-header,
	.ht-footer {
		display: none;
	}
}