@charset "UTF-8";
/* هافز — home page art direction
   RTL-first. Mobile-first. One visual language for every section. */

:root {
	--hz-ink: #0e1613;
	--hz-forest: #113529;
	--hz-green: #1e6f5c;
	--hz-green-2: #2f8d73;
	--hz-mint: #dceae3;
	--hz-paper: #f6f2ea;
	--hz-paper-2: #ede7db;
	--hz-ochre: #b4862f;
	--hz-ash: #6b7a73;
	--hz-line: rgba(17, 53, 41, .16);
	--hz-line-light: rgba(246, 242, 234, .18);

	--hz-display: "HzDisplay", "مکتب خونه (maktab)", "Vazirmatn", serif;
	--hz-ui: "Vazirmatn", system-ui, sans-serif;
	--hz-verse: "Amiri", "HzDisplay", serif;

	--hz-pad: clamp(1.1rem, 5vw, 4.5rem);
	--hz-max: 1360px;
	--hz-gap: clamp(1.5rem, 3.4vw, 3.4rem);

	--hz-ease: cubic-bezier(.22, .61, .36, 1);
	--hz-dur: .62s;
}

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

.hz,
.hz * {
	box-sizing: border-box;
}

.hz {
	position: relative;
	font-family: var(--hz-ui);
	color: var(--hz-ink);
	direction: rtl;
	padding-inline: var(--hz-pad);
	padding-block: clamp(3.4rem, 8vw, 7.5rem);
	overflow: clip;
}

.hz p,
.hz h1,
.hz h2,
.hz h3,
.hz ol,
.hz ul,
.hz dl,
.hz dd,
.hz figure,
.hz blockquote {
	margin: 0;
	padding: 0;
}

.hz ol,
.hz ul {
	list-style: none;
}

.hz a {
	color: inherit;
	text-decoration: none;
}

.hz img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* paper grain — one inline SVG, no request, barely there */
.hz-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------ shared bits */

.hz-eyebrow {
	font-size: .78rem;
	letter-spacing: .16em;
	color: var(--hz-ash);
	display: flex;
	align-items: center;
	gap: .8rem;
}

.hz-eyebrow span {
	white-space: nowrap;
}

.hz-eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .35;
}

.hz-eyebrow--center {
	justify-content: center;
}

.hz-eyebrow--center::after {
	display: none;
}

.hz-shead {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: clamp(.8rem, 2vw, 1.6rem);
	row-gap: .5rem;
	padding-bottom: clamp(1.6rem, 3.4vw, 3rem);
	margin-bottom: clamp(1.8rem, 3.6vw, 3.2rem);
	border-bottom: 1px solid var(--hz-line);
}

.hz-shead__idx {
	font-family: var(--hz-display);
	font-size: clamp(1.5rem, 3vw, 2.4rem);
	line-height: 1;
	color: var(--hz-ochre);
	padding-top: .35em;
}

.hz-shead__idx--light {
	color: var(--hz-ochre);
	display: block;
	font-size: clamp(1.5rem, 3vw, 2.4rem);
	font-family: var(--hz-display);
	margin-bottom: 1rem;
}

.hz-shead__title {
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.85rem, 5.2vw, 3.6rem);
	line-height: 1.24;
	letter-spacing: -.01em;
	grid-column: 2;
}

.hz-shead__note {
	grid-column: 2;
	max-width: 46ch;
	color: var(--hz-ash);
	font-size: .96rem;
	line-height: 2;
}

.hz-shead__link {
	grid-column: 2;
	justify-self: start;
	margin-top: .4rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--hz-green);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--hz-ease), gap .3s var(--hz-ease);
	display: inline-flex;
	gap: .45rem;
	align-items: center;
}

.hz-shead__link::after {
	content: "←";
	font-size: .95em;
	transition: transform .3s var(--hz-ease);
}

.hz-shead__link:hover {
	border-color: currentColor;
}

.hz-shead__link:hover::after {
	transform: translateX(-.28rem);
}

@media (min-width: 900px) {
	.hz-shead {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: end;
	}

	.hz-shead__title {
		grid-column: 2;
		grid-row: 1;
	}

	.hz-shead__note {
		grid-column: 2;
		grid-row: 2;
	}

	.hz-shead__link {
		grid-column: 3;
		grid-row: 1 / span 2;
		align-self: end;
		margin-top: 0;
	}
}

/* buttons */
.hz-btn {
	--b: var(--hz-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .85rem 1.9rem;
	font-size: .95rem;
	font-weight: 600;
	border: 1px solid var(--b);
	border-radius: 2px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color .35s var(--hz-ease), border-color .35s var(--hz-ease), transform .25s var(--hz-ease);
	will-change: transform;
}

.hz-btn > span {
	position: relative;
	z-index: 2;
}

.hz-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--b);
	transform: scaleY(1);
	transform-origin: bottom;
	transition: transform .42s var(--hz-ease);
}

.hz-btn--solid {
	--b: var(--hz-forest);
	color: var(--hz-paper);
}

.hz-btn--solid:hover {
	color: var(--hz-forest);
}

.hz-btn--solid:hover::before {
	transform: scaleY(0);
}

.hz-btn--ghost {
	color: var(--hz-ink);
}

.hz-btn--ghost::before {
	transform: scaleY(0);
}

.hz-btn--ghost:hover {
	color: var(--hz-paper);
}

.hz-btn--ghost:hover::before {
	transform: scaleY(1);
}

.hz-btn--light.hz-btn--solid {
	--b: var(--hz-paper);
	color: var(--hz-forest);
}

.hz-btn--light.hz-btn--solid:hover {
	color: var(--hz-paper);
}

.hz-btn--light.hz-btn--ghost {
	--b: rgba(246, 242, 234, .5);
	color: var(--hz-paper);
}

.hz-btn--light.hz-btn--ghost:hover {
	color: var(--hz-forest);
}

.hz-btn--light.hz-btn--ghost::before {
	background: var(--hz-paper);
}

.hz-btn--sm {
	min-height: 42px;
	padding: .6rem 1.3rem;
	font-size: .875rem;
}

.hz-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	font-size: .95rem;
	color: var(--hz-green);
}

.hz-link i {
	width: 26px;
	height: 1px;
	background: currentColor;
	display: block;
	transition: width .32s var(--hz-ease);
}

.hz-link:hover i {
	width: 44px;
}

.hz-link--light {
	color: var(--hz-paper);
}

.hz-tag {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 .85rem;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .04em;
	background: var(--hz-paper);
	color: var(--hz-forest);
	border-radius: 999px;
}

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

.hz-hero {
	background: var(--hz-ink);
	color: var(--hz-paper);
	padding-block: clamp(2.6rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
	min-height: min(92svh, 900px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1.8rem, 4vw, 3rem);
}

.hz-hero__rule {
	position: absolute;
	background: var(--hz-line-light);
	pointer-events: none;
}

.hz-hero__rule--a {
	inset-block: 0;
	inset-inline-start: clamp(1.1rem, 5vw, 4.5rem);
	width: 1px;
}

.hz-hero__rule--b {
	inset-inline: 0;
	bottom: clamp(4.4rem, 9vw, 7rem);
	height: 1px;
}

.hz-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(1.4rem, 4vw, 2rem);
	align-items: center;
	max-width: var(--hz-max);
	margin-inline: auto;
	width: 100%;
}

.hz-hero__type {
	order: 2;
}

.hz-hero__title {
	margin-block: clamp(.9rem, 2.4vw, 1.4rem) 0;
	font-weight: 400;
	line-height: .92;
}

.hz-hero__word {
	display: block;
	font-family: var(--hz-display);
	font-size: clamp(4.4rem, 21vw, 11rem);
	/* Persian shaping: tracking splits the cursive joins, and a negative value
	   pulls the ف over the ز, so the last glyph reads as broken. */
	letter-spacing: normal;
	/* the ز drops below the baseline; .84 left it no room */
	line-height: .92;
	padding-block-end: .06em;
	/* the gradient used to land on --hz-green-2 over the forest ground (3.3:1)
	   so the final glyph faded out. It ends light now: 7.8:1. */
	background: linear-gradient(200deg, #ffffff 6%, var(--hz-mint) 48%, #a8cec0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hz-hero__sub {
	display: block;
	margin-top: clamp(.5rem, 1.4vw, .9rem);
	font-family: var(--hz-ui);
	font-size: clamp(1.05rem, 3.4vw, 1.7rem);
	font-weight: 500;
	line-height: 1.6;
	color: rgba(246, 242, 234, .82);
}

.hz-hero__lede {
	margin-top: clamp(1rem, 2.4vw, 1.5rem);
	max-width: 42ch;
	font-size: 1rem;
	line-height: 2.05;
	color: rgba(246, 242, 234, .62);
}

.hz-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.hz-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.4rem, 4vw, 3.2rem);
	margin-top: clamp(1.8rem, 4vw, 2.8rem);
	padding-top: clamp(1.2rem, 2.6vw, 1.8rem);
	border-top: 1px solid var(--hz-line-light);
}

.hz-fact__n {
	font-family: var(--hz-display);
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	line-height: 1;
	color: var(--hz-paper);
}

.hz-fact__l {
	margin-top: .35rem;
	font-size: .78rem;
	letter-spacing: .06em;
	color: rgba(246, 242, 234, .5);
}

/* portrait */
.hz-hero__figure {
	order: 1;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	min-height: 46svh;
}

.hz-hero__ghost {
	position: absolute;
	inset-block-start: 4%;
	inset-inline-start: 50%;
	transform: translateX(50%);
	font-family: var(--hz-display);
	font-size: clamp(6rem, 30vw, 15rem);
	line-height: 1;
	color: rgba(246, 242, 234, .07);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.hz-hero__disc {
	position: absolute;
	inset-block-end: 4%;
	inset-inline-start: 50%;
	transform: translateX(50%);
	width: min(78vw, 430px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, rgba(47, 141, 115, .34), rgba(17, 53, 41, 0) 68%);
	pointer-events: none;
}

.hz-hero__portrait {
	position: relative;
	z-index: 2;
	display: block;
	width: min(74vw, 360px);
	will-change: transform;
}

.hz-hero__img {
	width: 100%;
	height: auto;
	filter: grayscale(1) contrast(1.06);
}

.hz-hero__cap {
	position: absolute;
	z-index: 3;
	inset-block-end: 0;
	inset-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding-inline-start: .9rem;
	border-inline-start: 1px solid var(--hz-ochre);
	font-size: .78rem;
	letter-spacing: .05em;
}

.hz-hero__capname {
	color: var(--hz-paper);
	font-weight: 600;
}

.hz-hero__capyear {
	color: rgba(246, 242, 234, .48);
}

.hz-hero__foot {
	position: relative;
	z-index: 2;
	max-width: var(--hz-max);
	margin-inline: auto;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1.4rem;
	padding-top: clamp(1.2rem, 3vw, 2rem);
	border-top: 1px solid var(--hz-line-light);
}

.hz-hero__verse p {
	font-family: var(--hz-verse);
	font-size: clamp(1.15rem, 3.6vw, 1.9rem);
	line-height: 1.9;
	color: var(--hz-mint);
}

.hz-hero__verse cite {
	display: block;
	margin-top: .3rem;
	font-style: normal;
	font-size: .8rem;
	letter-spacing: .08em;
	color: rgba(246, 242, 234, .45);
}

.hz-scroll {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	font-size: .72rem;
	letter-spacing: .12em;
	color: rgba(246, 242, 234, .55);
}

.hz-scroll__l {
	width: 1px;
	height: 42px;
	background: linear-gradient(to bottom, var(--hz-ochre), transparent);
	position: relative;
	overflow: hidden;
}

.hz-scroll__l::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -40%;
	height: 40%;
	background: var(--hz-paper);
	animation: hz-drop 2.4s var(--hz-ease) infinite;
}

@keyframes hz-drop {
	0% { transform: translateY(0); opacity: 0; }
	30% { opacity: 1; }
	100% { transform: translateY(340%); opacity: 0; }
}

@media (min-width: 900px) {
	.hz-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		gap: clamp(2rem, 5vw, 5rem);
	}

	.hz-hero__type {
		order: 1;
	}

	.hz-hero__figure {
		order: 2;
		min-height: 62svh;
		align-items: center;
	}

	.hz-hero__portrait {
		width: min(38vw, 460px);
	}

	.hz-hero__ghost {
		inset-inline-start: auto;
		inset-inline-end: 62%;
		transform: none;
		inset-block-start: 10%;
	}
}

/* ------------------------------------------------------- 01 learn */

.hz-learn {
	background: var(--hz-paper);
}

.hz-learn__grid {
	display: grid;
	gap: var(--hz-gap);
	max-width: var(--hz-max);
	margin-inline: auto;
}

.hz-feature {
	position: relative;
}

.hz-feature__link {
	display: block;
	position: relative;
}

.hz-feature__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--hz-paper-2);
}

.hz-feature__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--hz-ease), filter .6s var(--hz-ease);
	filter: saturate(.92);
}

.hz-feature__link:hover .hz-feature__img {
	transform: scale(1.045);
	filter: saturate(1);
}

.hz-feature__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 22, 19, .72) 0%, rgba(14, 22, 19, .12) 46%, transparent 72%);
}

.hz-tag--float {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
}

.hz-feature__body {
	display: block;
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding: clamp(1.1rem, 3vw, 2.2rem);
	color: var(--hz-paper);
}

.hz-feature__title {
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	line-height: 1.3;
}

.hz-feature__ex {
	display: block;
	margin-top: .5rem;
	max-width: 44ch;
	font-size: .92rem;
	line-height: 1.95;
	color: rgba(246, 242, 234, .74);
}

.hz-feature__go {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
	font-size: .9rem;
	font-weight: 600;
}

.hz-feature__go i {
	display: block;
	width: 26px;
	height: 1px;
	background: currentColor;
	transition: width .32s var(--hz-ease);
}

.hz-feature__link:hover .hz-feature__go i {
	width: 46px;
}

/* product shelf */
.hz-shelf__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--hz-line);
	font-family: var(--hz-ui);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--hz-ash);
}

.hz-shelf__title h3 {
	font: inherit;
	color: inherit;
	margin: 0;
}

.hz-shelf__title a {
	font-size: .82rem;
	color: var(--hz-green);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--hz-ease);
}

.hz-shelf__title a:hover {
	border-color: currentColor;
}

.hz-prow {
	border-bottom: 1px solid var(--hz-line);
}

.hz-prow__link {
	display: grid;
	grid-template-columns: auto 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(.7rem, 2vw, 1.3rem);
	padding-block: clamp(.9rem, 2vw, 1.35rem);
	transition: background-color .35s var(--hz-ease);
}

.hz-prow__link:hover {
	background: rgba(30, 111, 92, .05);
}

.hz-prow__idx {
	font-family: var(--hz-display);
	font-size: .95rem;
	color: var(--hz-ochre);
	opacity: .8;
}

.hz-prow__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--hz-paper-2);
}

.hz-prow__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--hz-ease);
}

.hz-prow__link:hover .hz-prow__img {
	transform: scale(1.08);
}

.hz-prow__title {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.65;
}

.hz-prow__cat {
	display: block;
	margin-top: .2rem;
	font-size: .76rem;
	letter-spacing: .05em;
	color: var(--hz-ash);
}

.hz-prow__price {
	font-size: .9rem;
	font-weight: 600;
	color: var(--hz-forest);
	white-space: nowrap;
}

/* WooCommerce prints a screen-reader sentence next to every sale price. It is
   only hidden by the shop stylesheet, which this page has no reason to load. */
.hz .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hz-prow__price .woocommerce-Price-amount {
	white-space: nowrap;
}

.hz-prow__price del {
	display: block;
	opacity: .45;
	font-weight: 400;
	font-size: .82em;
}

.hz-prow__price ins {
	display: block;
	text-decoration: none;
	background: none;
	color: inherit;
}

@media (min-width: 900px) {
	.hz-learn__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;
	}

	.hz-feature__media {
		aspect-ratio: 5 / 6;
	}

	.hz-shelf {
		padding-top: clamp(1rem, 3vw, 2.6rem);
	}
}

/* -------------------------------------------------------- 02 verse */

.hz-verse {
	background: var(--hz-forest);
	color: var(--hz-paper);
}

.hz-verse .hz-shead {
	border-color: var(--hz-line-light);
	max-width: var(--hz-max);
	margin-inline: auto;
}

.hz-verse .hz-shead__note {
	color: rgba(246, 242, 234, .6);
}

.hz-verse__stage {
	position: relative;
	z-index: 2;
	max-width: var(--hz-max);
	margin-inline: auto;
	min-height: clamp(16rem, 34vw, 24rem);
}

.hz-beyt {
	display: grid;
	gap: clamp(.4rem, 1.2vw, .9rem);
}

.hz-beyt__line {
	font-family: var(--hz-verse);
	font-size: clamp(1.25rem, 4.6vw, 2.9rem);
	line-height: 1.85;
	color: var(--hz-paper);
}

.hz-beyt__line:nth-child(even) {
	color: rgba(246, 242, 234, .72);
	padding-inline-start: clamp(1rem, 6vw, 5rem);
}

.hz-panel__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(1.8rem, 4vw, 3rem);
	padding-top: clamp(1rem, 2.4vw, 1.6rem);
	border-top: 1px solid var(--hz-line-light);
}

.hz-panel__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.hz-pill {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 .9rem;
	border: 1px solid var(--hz-line-light);
	border-radius: 999px;
	font-size: .8rem;
	color: rgba(246, 242, 234, .82);
	transition: background-color .3s var(--hz-ease), color .3s var(--hz-ease), border-color .3s var(--hz-ease);
}

.hz-pill:hover {
	background: var(--hz-paper);
	color: var(--hz-forest);
	border-color: var(--hz-paper);
}

.hz-pill--poet {
	border-color: var(--hz-ochre);
	color: #e5c07a;
}

.hz-pill--mute {
	border-style: dashed;
	opacity: .7;
	pointer-events: none;
}

.hz-verse .hz-link {
	color: var(--hz-paper);
}

.hz-verse__nav {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: var(--hz-max);
	margin: clamp(1.6rem, 3.4vw, 2.4rem) auto 0;
}

.hz-vbtn {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--hz-line-light);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .3s var(--hz-ease), border-color .3s var(--hz-ease);
}

.hz-vbtn:hover {
	background: rgba(246, 242, 234, .1);
	border-color: rgba(246, 242, 234, .4);
}

.hz-vbtn i {
	width: 9px;
	height: 9px;
	border-inline-start: 1px solid var(--hz-paper);
	border-block-start: 1px solid var(--hz-paper);
	transform: rotate(-45deg);
	margin-inline-start: 3px;
}

.hz-vbtn[data-hz-verse-next] i {
	transform: rotate(135deg);
	margin-inline: -3px 0;
}

.hz-dots {
	display: flex;
	gap: .5rem;
}

.hz-dot {
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	position: relative;
}

.hz-dot::after {
	content: "";
	position: absolute;
	inset-inline: 4px;
	top: 50%;
	height: 1px;
	background: rgba(246, 242, 234, .32);
	transition: background-color .3s var(--hz-ease), height .3s var(--hz-ease);
}

.hz-dot.is-on::after {
	background: var(--hz-ochre);
	height: 2px;
}

/* -------------------------------------------------------- 03 poets */

.hz-poets {
	background: var(--hz-paper-2);
}

.hz-poets__wrap {
	display: grid;
	gap: var(--hz-gap);
	max-width: var(--hz-max);
	margin-inline: auto;
}

.hz-poets__stage {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--hz-forest);
	overflow: hidden;
	order: 2;
}

.hz-poets__shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .6s var(--hz-ease), transform 1.2s var(--hz-ease);
}

.hz-poets__shot.is-on {
	opacity: 1;
	transform: scale(1);
}

.hz-poets__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hz-poets__cap {
	position: absolute;
	z-index: 2;
	inset-block-end: 0;
	inset-inline: 0;
	padding: 1.1rem 1.2rem;
	background: linear-gradient(to top, rgba(14, 22, 19, .8), transparent);
	color: var(--hz-paper);
	font-size: .85rem;
	letter-spacing: .04em;
}

.hz-index {
	order: 1;
	border-top: 1px solid var(--hz-line);
}

.hz-index__item {
	border-bottom: 1px solid var(--hz-line);
}

.hz-index__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: baseline;
	gap: clamp(.7rem, 2vw, 1.4rem);
	padding-block: clamp(.75rem, 1.8vw, 1.15rem);
	transition: padding-inline-start .4s var(--hz-ease), color .3s var(--hz-ease);
}

.hz-index__n {
	font-family: var(--hz-display);
	font-size: .9rem;
	color: var(--hz-ochre);
	opacity: .75;
}

.hz-index__name {
	font-family: var(--hz-display);
	font-size: clamp(1.25rem, 3.6vw, 2.15rem);
	line-height: 1.35;
	transition: color .3s var(--hz-ease);
}

.hz-index__kind {
	font-size: .72rem;
	letter-spacing: .08em;
	color: var(--hz-ash);
	border: 1px solid var(--hz-line);
	border-radius: 999px;
	padding: .12rem .55rem;
	align-self: center;
}

.hz-index__count {
	display: none;
	font-size: .78rem;
	color: var(--hz-ash);
}

.hz-index__item.is-on .hz-index__name,
.hz-index__link:hover .hz-index__name {
	color: var(--hz-green);
}

.hz-index__item.is-on .hz-index__link {
	padding-inline-start: .7rem;
}

@media (min-width: 900px) {
	.hz-poets__wrap {
		grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
		align-items: stretch;
	}

	.hz-poets__stage {
		order: 1;
		aspect-ratio: auto;
		position: sticky;
		top: 90px;
		height: min(72vh, 620px);
	}

	.hz-index {
		order: 2;
		border-top: 0;
	}

	.hz-index__link {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
	}

	.hz-index__count {
		display: block;
	}
}

/* ---------------------------------------------------- 04 editorial */

.hz-edit {
	background: var(--hz-paper);
}

.hz-edit__grid {
	display: grid;
	gap: var(--hz-gap);
	max-width: var(--hz-max);
	margin-inline: auto;
}

.hz-lead__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--hz-paper-2);
}

.hz-lead__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--hz-ease);
}

.hz-lead__link:hover .hz-lead__img {
	transform: scale(1.04);
}

.hz-lead__body {
	display: block;
	padding-top: clamp(.9rem, 2vw, 1.4rem);
}

.hz-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	font-size: .74rem;
	letter-spacing: .04em;
	color: var(--hz-ash);
}

.hz-card__cat {
	color: var(--hz-green);
	font-weight: 600;
}

.hz-card__meta > * + *::before {
	content: "—";
	margin-inline-end: .55rem;
	opacity: .5;
}

.hz-lead__title {
	margin-top: .55rem;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.4rem, 4vw, 2.4rem);
	line-height: 1.4;
	transition: color .3s var(--hz-ease);
}

.hz-lead__link:hover .hz-lead__title {
	color: var(--hz-green);
}

.hz-lead__ex {
	display: block;
	margin-top: .5rem;
	max-width: 52ch;
	font-size: .95rem;
	line-height: 2;
	color: var(--hz-ash);
}

.hz-side__item + .hz-side__item {
	border-top: 1px solid var(--hz-line);
}

.hz-side__link {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 1rem;
	padding-block: 1.1rem;
	align-items: center;
}

.hz-side__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--hz-paper-2);
}

.hz-side__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--hz-ease);
}

.hz-side__link:hover .hz-side__img {
	transform: scale(1.07);
}

.hz-side__title {
	margin-top: .35rem;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.75;
	transition: color .3s var(--hz-ease);
}

.hz-side__link:hover .hz-side__title {
	color: var(--hz-green);
}

.hz-rail {
	max-width: var(--hz-max);
	margin: clamp(1.8rem, 4vw, 3rem) auto 0;
	border-top: 1px solid var(--hz-line);
}

.hz-rail__item {
	border-bottom: 1px solid var(--hz-line);
}

.hz-rail__item a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .8rem 1.2rem;
	align-items: baseline;
	padding-block: .95rem;
	transition: padding-inline-start .35s var(--hz-ease);
}

.hz-rail__item a:hover {
	padding-inline-start: .6rem;
}

.hz-rail__item time {
	font-size: .78rem;
	color: var(--hz-ochre);
	letter-spacing: .04em;
}

.hz-rail__title {
	font-size: 1rem;
	font-weight: 600;
}

.hz-rail__cat {
	font-size: .74rem;
	color: var(--hz-ash);
	grid-column: 2;
}

@media (min-width: 900px) {
	.hz-edit__grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.hz-side {
		border-top: 1px solid var(--hz-line);
	}

	.hz-side__item:first-child {
		border-top: 0;
	}

	.hz-rail__item a {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.hz-rail__cat {
		grid-column: auto;
	}
}

/* -------------------------------------------------------- 05 story */

.hz-story {
	background: var(--hz-ink);
	color: var(--hz-paper);
}

.hz-story__grid {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--hz-gap);
	max-width: var(--hz-max);
	margin-inline: auto;
	align-items: center;
}

.hz-story__title {
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 6vw, 3.9rem);
	line-height: 1.35;
	margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
}

.hz-story__title em {
	font-style: normal;
	display: inline-block;
	color: var(--hz-ochre);
	position: relative;
}

.hz-story__title em::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: .08em;
	height: 1px;
	background: currentColor;
	opacity: .5;
}

.hz-story__p {
	max-width: 46ch;
	font-size: 1rem;
	line-height: 2.1;
	color: rgba(246, 242, 234, .66);
}

.hz-story__p + .hz-story__p {
	margin-top: .9rem;
}

.hz-story__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	margin-top: clamp(1.5rem, 3vw, 2.2rem);
}

.hz-story__art {
	position: relative;
	padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
}

.hz-story__shot--main {
	overflow: hidden;
	will-change: transform;
}

.hz-story__shot--main img {
	width: 100%;
	filter: saturate(.9) contrast(1.03);
}

.hz-story__shot--main figcaption {
	margin-top: .7rem;
	font-size: .78rem;
	letter-spacing: .06em;
	color: rgba(246, 242, 234, .45);
}

.hz-story__shot--folio {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: clamp(96px, 26vw, 200px);
	border: 6px solid var(--hz-ink);
	box-shadow: 0 18px 48px rgba(0, 0, 0, .4);
	will-change: transform;
}

@media (min-width: 900px) {
	.hz-story__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: clamp(2rem, 6vw, 6rem);
	}
}

/* ---------------------------------------------------------- 06 cta */

.hz-cta {
	background: var(--hz-green);
	color: var(--hz-paper);
	text-align: center;
}

.hz-cta__inner {
	max-width: 760px;
	margin-inline: auto;
}

.hz-cta__title {
	margin-top: 1rem;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 6.4vw, 3.6rem);
	line-height: 1.4;
}

.hz-cta__p {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 2.05;
	color: rgba(246, 242, 234, .78);
}

.hz-cta__acts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem;
	margin-top: clamp(1.5rem, 3vw, 2.2rem);
}

.hz-cta .hz-eyebrow {
	color: rgba(246, 242, 234, .7);
}

/* ------------------------------------------------------- footer */

.hz-foot {
	background: var(--hz-ink);
	color: var(--hz-paper);
	padding-block: clamp(2.8rem, 6vw, 5rem) clamp(1.4rem, 3vw, 2rem);
}

.hz-foot__top {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(1.8rem, 4vw, 3rem);
	max-width: var(--hz-max);
	margin-inline: auto;
	padding-bottom: clamp(1.8rem, 4vw, 3rem);
	border-bottom: 1px solid var(--hz-line-light);
}

.hz-foot__mark {
	font-family: var(--hz-display);
	font-size: clamp(2.4rem, 8vw, 3.4rem);
	line-height: 1;
	color: var(--hz-paper);
	display: block;
}

.hz-foot__tag {
	margin-block: .8rem 1.3rem;
	max-width: 32ch;
	font-size: .92rem;
	line-height: 2;
	color: rgba(246, 242, 234, .55);
}

.hz-foot__h {
	font-family: var(--hz-ui);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--hz-ochre);
	margin-bottom: .9rem;
}

.hz-foot__col li + li {
	margin-top: .55rem;
}

.hz-foot__col a {
	font-size: .95rem;
	color: rgba(246, 242, 234, .74);
	transition: color .3s var(--hz-ease);
}

.hz-foot__col a:hover {
	color: var(--hz-paper);
}

.hz-foot__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

.hz-foot__tags li + li {
	margin-top: 0;
}

.hz-foot__tags a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 .8rem;
	border: 1px solid var(--hz-line-light);
	border-radius: 999px;
	font-size: .82rem;
}

.hz-foot__bar {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .6rem;
	max-width: var(--hz-max);
	margin-inline: auto;
	padding-top: clamp(1rem, 2.4vw, 1.5rem);
	font-size: .76rem;
	color: rgba(246, 242, 234, .42);
}

@media (min-width: 700px) {
	.hz-foot__top {
		grid-template-columns: 1.4fr repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------- motion */

/* Content is visible by default. It is only hidden for the reveal once the
   script has proved it is alive (html.hz-js), so a failed or blocked script
   can never leave the page blank. */
.hz-js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--hz-dur) var(--hz-ease), transform var(--hz-dur) var(--hz-ease);
	transition-delay: var(--d, 0ms);
}

.hz-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

.hz-js .hz-beyt__line[data-reveal] {
	transform: translateY(26px);
	clip-path: inset(0 0 110% 0);
	transition: opacity .8s var(--hz-ease), transform .8s var(--hz-ease), clip-path .9s var(--hz-ease);
}

.hz-js .hz-beyt__line[data-reveal].is-in {
	clip-path: inset(-20% -10% -20% -10%);
}

@media (prefers-reduced-motion: reduce) {
	.hz *,
	.hz *::before,
	.hz *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.hz-js [data-reveal] {
		opacity: 1;
		transform: none;
		clip-path: none !important;
	}

	.hz-scroll__l::after {
		display: none;
	}
}

/* keyboard focus, kept visible on both grounds */
.hz a:focus-visible,
.hz button:focus-visible {
	outline: 2px solid var(--hz-ochre);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ------------------------------------------------------ touch sizing */

/* Below the desktop breakpoint every interactive thing gets a real thumb-sized
   target, without changing how any of it looks. */
@media (max-width: 899px) {
	.hz-hero {
		min-height: auto;
		padding-block: clamp(2rem, 6vw, 3rem) clamp(1.2rem, 4vw, 2rem);
	}

	.hz-hero__facts {
		gap: 1.15rem 1.6rem;
		margin-top: 1.3rem;
		padding-top: 1rem;
	}

	/* let the portrait set its own height so the ghost word can sit behind it
	   instead of reserving empty space above */
	.hz-hero__figure {
		min-height: auto;
		padding-top: .6rem;
	}

	.hz-hero__ghost {
		inset-block-start: -6%;
	}

	.hz-hero {
		gap: 1.2rem;
	}
}

/* tablet portrait: the display word needs a ceiling of its own, or it eats the
   whole column between the mobile clamp and the desktop grid */
@media (min-width: 620px) and (max-width: 899px) {
	.hz-hero__word {
		font-size: clamp(5rem, 15vw, 8.5rem);
	}

	.hz-hero__portrait {
		width: min(52vw, 400px);
	}

	.hz-side__link {
		grid-template-columns: 128px minmax(0, 1fr);
	}

	.hz-hero__foot {
		align-items: center;
	}
}


/* the page itself */
body.page-id-41 {
	background: var(--hz-paper);
}

/* =========================================================================
   SITE LAYER — everything outside the home page speaks the same language.
   Loaded on every front-end view.
   ====================================================================== */

/* ------------------------------------------------------------- masthead */

.hz-mast {
	position: relative;
	direction: rtl;
	font-family: var(--hz-ui);
	padding-inline: var(--hz-pad);
	padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.4rem, 6vw, 4.5rem);
	overflow: clip;
}

.hz-mast * {
	box-sizing: border-box;
}

.hz-mast--ink {
	background: var(--hz-ink);
	color: var(--hz-paper);
}

.hz-mast--paper {
	background: var(--hz-paper-2);
	color: var(--hz-ink);
	border-bottom: 1px solid var(--hz-line);
}

.hz-mast__inner {
	position: relative;
	z-index: 2;
	max-width: var(--hz-max);
	margin-inline: auto;
	display: grid;
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: center;
}

.hz-mast--media .hz-mast__inner {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.hz-mast--media .hz-mast__inner {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
	}
}

.hz-mast__title {
	margin: 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(2.2rem, 7vw, 4.6rem);
	line-height: 1.18;
	letter-spacing: -.015em;
}

.hz-mast--ink .hz-mast__title {
	color: var(--hz-paper);
}

.hz-mast__title em {
	font-style: normal;
	color: var(--hz-ochre);
}

.hz-mast__lede {
	margin: clamp(.8rem, 2vw, 1.2rem) 0 0;
	max-width: 52ch;
	font-size: 1rem;
	line-height: 2.05;
	color: rgba(246, 242, 234, .62);
}

.hz-mast--paper .hz-mast__lede {
	color: var(--hz-ash);
}

.hz-mast__meta {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.2rem, 4vw, 2.8rem);
	margin: clamp(1.4rem, 3.4vw, 2.2rem) 0 0;
	padding-top: clamp(1rem, 2.4vw, 1.5rem);
	border-top: 1px solid var(--hz-line-light);
}

.hz-mast--paper .hz-mast__meta {
	border-color: var(--hz-line);
}

.hz-mast--paper .hz-fact__n {
	color: var(--hz-ink);
}

.hz-mast--paper .hz-fact__l {
	color: var(--hz-ash);
}

.hz-mast__acts {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: clamp(1.3rem, 3vw, 1.9rem);
}

.hz-mast__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	will-change: transform;
}

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

.hz-mast__media::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px var(--hz-line-light);
	pointer-events: none;
}

/* --------------------------------------------------------------- crumbs */

.hz-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1rem;
	font-size: .78rem;
	letter-spacing: .04em;
	color: rgba(246, 242, 234, .5);
}

.hz-mast--paper .hz-crumbs,
.hz-poem .hz-crumbs {
	color: var(--hz-ash);
}

.hz-crumbs a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--hz-ease), color .3s var(--hz-ease);
}

.hz-crumbs a:hover {
	border-color: currentColor;
}

.hz-crumbs > * + *::before {
	content: "/";
	margin-inline-end: .5rem;
	opacity: .45;
}

/* ------------------------------------------------------------- filters */

.hz-filters {
	max-width: var(--hz-max);
	margin: 0 auto clamp(1.6rem, 4vw, 2.6rem);
	display: grid;
	gap: .9rem;
}

.hz-filters__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .8rem;
	align-items: start;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--hz-line);
}

.hz-filters__k {
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--hz-ochre);
	padding-top: .55rem;
	white-space: nowrap;
}

.hz-chiprow {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hz-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 36px;
	padding: 0 .9rem;
	border: 1px solid var(--hz-line);
	border-radius: 999px;
	font-size: .85rem;
	color: var(--hz-ink);
	text-decoration: none;
	background: transparent;
	transition: background-color .3s var(--hz-ease), color .3s var(--hz-ease), border-color .3s var(--hz-ease);
}

.hz-chip i {
	font-style: normal;
	font-size: .72rem;
	color: var(--hz-ash);
	transition: color .3s var(--hz-ease);
}

.hz-chip:hover,
.hz-chip.is-on {
	background: var(--hz-forest);
	border-color: var(--hz-forest);
	color: var(--hz-paper);
}

.hz-chip:hover i,
.hz-chip.is-on i {
	color: rgba(246, 242, 234, .7);
}

/* --------------------------------------------------------- poem rows */

.hz-plist--poems {
	max-width: var(--hz-max);
	margin-inline: auto;
	border-top: 1px solid var(--hz-line);
}

.hz-prow--poem .hz-prow__link {
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: clamp(.7rem, 2vw, 1.6rem);
	padding-block: clamp(1rem, 2.2vw, 1.5rem);
	padding-inline: .2rem;
}

.hz-prow__verse {
	display: block;
	margin-top: .3rem;
	font-family: var(--hz-verse);
	font-size: .98rem;
	line-height: 1.9;
	color: var(--hz-ash);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hz-prow__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}

.hz-prow__poet {
	font-size: .82rem;
	font-weight: 600;
	color: var(--hz-green);
}

.hz-prow--poem .hz-prow__cat {
	margin: 0;
	font-size: .76rem;
	color: var(--hz-ash);
	border: 1px solid var(--hz-line);
	border-radius: 999px;
	padding: .1rem .55rem;
}

.hz-prow__n {
	font-size: .78rem;
	color: var(--hz-ash);
	white-space: nowrap;
}

.hz-prow__go {
	width: 22px;
	height: 1px;
	background: var(--hz-ochre);
	transition: width .34s var(--hz-ease);
}

.hz-prow__link:hover .hz-prow__go {
	width: 38px;
}

.hz-prow__link:hover .hz-prow__title {
	color: var(--hz-green);
}

@media (max-width: 719px) {
	.hz-prow--poem .hz-prow__link {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: .5rem;
	}

	.hz-prow__tags {
		grid-column: 2;
	}

	.hz-prow__n {
		grid-column: 2;
	}

	.hz-prow__go {
		display: none;
	}
}

/* ----------------------------------------------------------- pagination */

.hz-page {
	max-width: var(--hz-max);
	margin: clamp(2rem, 5vw, 3.4rem) auto 0;
}

.hz-page ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.hz-page a,
.hz-page span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-width: 46px;
	min-height: 46px;
	padding: 0 .9rem;
	border: 1px solid var(--hz-line);
	border-radius: 2px;
	font-size: .9rem;
	color: var(--hz-ink);
	text-decoration: none;
	transition: background-color .3s var(--hz-ease), color .3s var(--hz-ease), border-color .3s var(--hz-ease);
}

.hz-page a:hover {
	background: var(--hz-forest);
	border-color: var(--hz-forest);
	color: var(--hz-paper);
}

.hz-page .current {
	background: var(--hz-ochre);
	border-color: var(--hz-ochre);
	color: var(--hz-ink);
	font-weight: 600;
}

.hz-page__arrow {
	width: 8px;
	height: 8px;
	border-inline-start: 1px solid currentColor;
	border-block-start: 1px solid currentColor;
	transform: rotate(-45deg);
}

.hz-page__arrow--n {
	transform: rotate(135deg);
}

/* ---------------------------------------------------------- empty state */

.hz-empty {
	max-width: 46ch;
	margin-inline: auto;
	padding-block: clamp(2.5rem, 7vw, 5rem);
	text-align: center;
}

.hz-empty__mark {
	font-family: var(--hz-display);
	font-size: clamp(4rem, 14vw, 7rem);
	line-height: 1;
	color: var(--hz-ochre);
	opacity: .32;
	margin: 0;
}

.hz-empty__title {
	margin: .6rem 0 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.4rem, 4vw, 2.1rem);
}

.hz-empty__note {
	margin: .7rem 0 1.4rem;
	color: var(--hz-ash);
	line-height: 2;
}

/* --------------------------------------------------------- single poem */

.hz-poem {
	background: var(--hz-paper);
	padding-block: clamp(2rem, 5vw, 3.4rem) clamp(3rem, 8vw, 6rem);
}

.hz-poem__head {
	max-width: var(--hz-max);
	margin-inline: auto;
	padding-bottom: clamp(1.6rem, 4vw, 2.6rem);
	border-bottom: 1px solid var(--hz-line);
}

.hz-poem__poet {
	margin: 0;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--hz-green);
}

.hz-poem__poet a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--hz-ease);
}

.hz-poem__poet a:hover {
	border-color: currentColor;
}

.hz-poem__title {
	margin: .5rem 0 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(2rem, 6.4vw, 4rem);
	line-height: 1.24;
	color: var(--hz-ink);
}

.hz-poem__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .9rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	font-size: .82rem;
	color: var(--hz-ash);
}

.hz-poem__meta li + li::before {
	content: "·";
	margin-inline-end: .9rem;
	opacity: .6;
}

.hz-poem__meta a {
	color: var(--hz-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--hz-line);
	transition: border-color .3s var(--hz-ease), color .3s var(--hz-ease);
}

.hz-poem__meta a:hover {
	color: var(--hz-green);
	border-color: currentColor;
}

.hz-poem__body {
	max-width: var(--hz-max);
	margin-inline: auto;
	display: grid;
	gap: clamp(1.8rem, 4vw, 3.4rem);
	padding-top: clamp(2rem, 5vw, 3.4rem);
}

@media (min-width: 900px) {
	.hz-poem__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, .38fr);
		align-items: start;
	}
}

.hz-poem__verse {
	position: relative;
	padding-inline-start: clamp(.8rem, 2vw, 1.6rem);
	border-inline-start: 1px solid var(--hz-line);
}

.hz-mesra {
	margin: 0;
	font-family: var(--hz-verse);
	font-size: clamp(1.15rem, 3.4vw, 1.85rem);
	line-height: 2.15;
	color: var(--hz-ink);
}

.hz-mesra--b {
	color: rgba(28, 38, 34, .68);
	padding-inline-start: clamp(1rem, 5vw, 4rem);
	margin-bottom: clamp(.5rem, 1.6vw, 1.1rem);
}

.hz-poem__side {
	display: grid;
	gap: 1.2rem;
	align-content: start;
}

@media (min-width: 900px) {
	.hz-poem__side {
		position: sticky;
		top: 100px;
	}
}

.hz-poem__tools {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.hz-tool {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 42px;
	padding: 0 .9rem;
	background: transparent;
	border: 1px solid var(--hz-line);
	border-radius: 999px;
	font-family: var(--hz-ui);
	font-size: .82rem;
	color: var(--hz-ink);
	cursor: pointer;
	transition: background-color .3s var(--hz-ease), color .3s var(--hz-ease), border-color .3s var(--hz-ease);
}

.hz-tool:hover {
	background: var(--hz-forest);
	border-color: var(--hz-forest);
	color: var(--hz-paper);
}

.hz-tool__i {
	font-size: 1rem;
	line-height: 1;
}

.hz-tool__msg {
	font-size: .78rem;
	color: var(--hz-green);
	min-height: 1em;
}

.hz-poem__note,
.hz-poem__card {
	padding: 1.1rem 1.2rem;
	background: var(--hz-paper-2);
	border-inline-start: 2px solid var(--hz-ochre);
}

.hz-poem__notet {
	margin: 0 0 .4rem;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--hz-ochre);
}

.hz-poem__note p {
	margin: 0;
	font-size: .92rem;
	line-height: 2;
	color: var(--hz-ash);
}

.hz-poem__card {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: .9rem;
	align-items: center;
	border-inline-start-color: var(--hz-green);
}

.hz-poem__cardimg img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.hz-poem__cardk {
	display: block;
	font-size: .72rem;
	letter-spacing: .1em;
	color: var(--hz-ash);
}

.hz-poem__cardn {
	display: block;
	margin-top: .1rem;
	font-family: var(--hz-display);
	font-size: 1.15rem;
	color: var(--hz-ink);
	text-decoration: none;
}

.hz-poem__cardn:hover {
	color: var(--hz-green);
}

.hz-poem__cardb {
	display: block;
	margin-top: .25rem;
	font-size: .82rem;
	line-height: 1.85;
	color: var(--hz-ash);
}

.hz-poem__nav {
	max-width: var(--hz-max);
	margin: clamp(2.4rem, 6vw, 4rem) auto 0;
	display: grid;
	gap: 1px;
	background: var(--hz-line);
	border-block: 1px solid var(--hz-line);
}

@media (min-width: 700px) {
	.hz-poem__nav {
		grid-template-columns: 1fr 1fr;
	}
}

.hz-poem__navlink {
	display: block;
	padding: clamp(1.1rem, 3vw, 1.8rem) clamp(1rem, 2.4vw, 1.6rem);
	background: var(--hz-paper);
	text-decoration: none;
	transition: background-color .35s var(--hz-ease);
}

.hz-poem__navlink:hover {
	background: var(--hz-paper-2);
}

.hz-poem__navlink--next {
	text-align: start;
}

.hz-poem__navlink--prev {
	text-align: end;
}

.hz-poem__navk {
	display: block;
	font-size: .74rem;
	letter-spacing: .1em;
	color: var(--hz-ochre);
}

.hz-poem__navt {
	display: block;
	margin-top: .35rem;
	font-family: var(--hz-display);
	font-size: clamp(1.05rem, 3vw, 1.5rem);
	color: var(--hz-ink);
}

.hz-poem__more {
	max-width: var(--hz-max);
	margin: clamp(2.6rem, 6vw, 4.4rem) auto 0;
}

/* ---------------------------------------------------------- poet page */

.hz-poet {
	background: var(--hz-paper);
}

.hz-poet__bio {
	max-width: var(--hz-max);
	margin: 0 auto clamp(2rem, 5vw, 3rem);
}

.hz-poet__bioh {
	margin: 0 0 .9rem;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.3rem, 3.4vw, 1.9rem);
}

.hz-prose {
	font-size: 1.02rem;
	line-height: 2.15;
	color: var(--hz-ink);
}

.hz-prose--narrow {
	max-width: 68ch;
}

.hz-prose p {
	margin: 0 0 1.1em;
}

.hz-prose h2,
.hz-prose h3 {
	font-family: var(--hz-display);
	font-weight: 400;
	line-height: 1.4;
	margin: 1.8em 0 .6em;
}

.hz-prose h2 {
	font-size: clamp(1.35rem, 3.2vw, 1.9rem);
}

.hz-prose h3 {
	font-size: clamp(1.15rem, 2.6vw, 1.45rem);
}

.hz-prose a {
	color: var(--hz-green);
	text-decoration: none;
	border-bottom: 1px solid rgba(30, 111, 92, .35);
	transition: border-color .3s var(--hz-ease);
}

.hz-prose a:hover {
	border-color: var(--hz-green);
}

.hz-prose ul,
.hz-prose ol {
	margin: 0 0 1.2em;
	padding-inline-start: 1.4em;
}

.hz-prose li {
	margin-bottom: .5em;
}

.hz-prose blockquote {
	margin: 1.6em 0;
	padding-inline-start: 1.2rem;
	border-inline-start: 2px solid var(--hz-ochre);
	font-family: var(--hz-verse);
	font-size: 1.15em;
	color: var(--hz-ash);
}

.hz-prose img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1.6em 0;
}

.hz-prose hr {
	border: 0;
	border-top: 1px solid var(--hz-line);
	margin: 2.4em 0;
}

/* collapsed biography */
[data-hz-unfold] {
	position: relative;
	max-height: 15em;
	overflow: hidden;
	transition: max-height .6s var(--hz-ease);
}

[data-hz-unfold]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 6em;
	background: linear-gradient(to top, var(--hz-paper), transparent);
	pointer-events: none;
	transition: opacity .4s var(--hz-ease);
}

[data-hz-unfold].is-open {
	max-height: 400em;
}

[data-hz-unfold].is-open::after {
	opacity: 0;
}

.hz-unfold {
	margin-top: .6rem;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--hz-ui);
}

/* --------------------------------------------------------- site header */

/* The header is Elementor template 161; it only needs behaviour and a
   surface that agrees with the palette. */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow .35s var(--hz-ease), background-color .35s var(--hz-ease);
}

body.hz-scrolled .elementor-location-header {
	box-shadow: 0 1px 0 var(--hz-line), 0 10px 30px rgba(14, 22, 19, .07);
}

/* ------------------------------------------------------ back to top */

.hz-top {
	position: fixed;
	inset-block-end: clamp(1rem, 3vw, 1.8rem);
	inset-inline-start: clamp(1rem, 3vw, 1.8rem);
	z-index: 900;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid var(--hz-line);
	border-radius: 50%;
	background: var(--hz-paper);
	color: var(--hz-ink);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .35s var(--hz-ease), transform .35s var(--hz-ease), visibility .35s;
}

body.hz-scrolled .hz-top {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hz-top:hover {
	background: var(--hz-forest);
	border-color: var(--hz-forest);
	color: var(--hz-paper);
}

.hz-top i {
	width: 9px;
	height: 9px;
	border-inline-start: 1px solid currentColor;
	border-block-start: 1px solid currentColor;
	transform: rotate(45deg);
	margin-top: 3px;
}

/* ---------------------------------------------------------- print */

@media print {
	.elementor-location-header,
	.elementor-location-footer,
	.hz-poem__tools,
	.hz-poem__nav,
	.hz-poem__more,
	.hz-top,
	.hz-crumbs {
		display: none !important;
	}

	.hz-poem {
		background: #fff;
		padding: 0;
	}

	.hz-mesra {
		color: #000;
		font-size: 14pt;
	}

	.hz-poem__body {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   SITE LAYER 2 — magazine, article, learning, shop, search, 404, pages
   ====================================================================== */

.hz-mag,
.hz-art,
.hz-shop,
.hz-search,
.hz-page1,
.hz-course1,
.hz-learn--page {
	background: var(--hz-paper);
}

/* ------------------------------------------------------------- magazine */

.hz-lead--wide {
	max-width: var(--hz-max);
	margin-inline: auto;
	margin-bottom: clamp(2rem, 5vw, 3.4rem);
	padding-bottom: clamp(2rem, 5vw, 3.4rem);
	border-bottom: 1px solid var(--hz-line);
}

.hz-lead--wide .hz-lead__link {
	display: grid;
	gap: clamp(1.2rem, 3vw, 2.4rem);
	align-items: center;
}

@media (min-width: 900px) {
	.hz-lead--wide .hz-lead__link {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

.hz-lead--wide .hz-lead__media {
	aspect-ratio: 16 / 11;
}

.hz-lead--wide .hz-lead__title {
	font-size: clamp(1.6rem, 4.4vw, 2.9rem);
}

.hz-mag__list {
	max-width: var(--hz-max);
	margin-inline: auto;
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--hz-line);
}

.hz-mag__item {
	border-bottom: 1px solid var(--hz-line);
}

.hz-mag__link {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) auto;
	gap: clamp(.9rem, 2.4vw, 1.6rem);
	align-items: center;
	padding-block: clamp(1rem, 2.4vw, 1.5rem);
	text-decoration: none;
	color: inherit;
	transition: padding-inline-start .35s var(--hz-ease);
}

.hz-mag__link:hover {
	padding-inline-start: .5rem;
}

.hz-mag__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--hz-paper-2);
}

.hz-mag__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--hz-ease);
}

.hz-mag__link:hover .hz-mag__img {
	transform: scale(1.07);
}

.hz-mag__title {
	display: block;
	margin-top: .35rem;
	font-family: var(--hz-display);
	font-size: clamp(1.1rem, 2.8vw, 1.5rem);
	line-height: 1.5;
	color: var(--hz-ink);
	transition: color .3s var(--hz-ease);
}

.hz-mag__link:hover .hz-mag__title {
	color: var(--hz-green);
}

.hz-mag__ex {
	display: block;
	margin-top: .25rem;
	font-size: .9rem;
	line-height: 1.95;
	color: var(--hz-ash);
}

@media (max-width: 699px) {
	.hz-mag__link {
		grid-template-columns: 90px minmax(0, 1fr);
	}

	.hz-mag__link .hz-prow__go {
		display: none;
	}

	.hz-mag__ex {
		display: none;
	}
}

/* -------------------------------------------------------------- article */

.hz-art {
	padding-block: clamp(2rem, 5vw, 3.4rem) clamp(3rem, 8vw, 6rem);
}

.hz-art__head {
	max-width: 72ch;
	margin-inline: auto;
	text-align: start;
}

.hz-art__cat {
	margin: 0;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--hz-green);
}

.hz-art__cat a {
	color: inherit;
	text-decoration: none;
}

.hz-art__title {
	margin: .6rem 0 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 5.6vw, 3.4rem);
	line-height: 1.28;
	color: var(--hz-ink);
}

.hz-art__lede {
	margin: .9rem 0 0;
	font-size: 1.1rem;
	line-height: 2;
	color: var(--hz-ash);
}

.hz-art__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .9rem;
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0 0 1.2rem;
	border-bottom: 1px solid var(--hz-line);
	font-size: .8rem;
	color: var(--hz-ash);
}

.hz-art__meta li + li::before {
	content: "·";
	margin-inline-end: .9rem;
	opacity: .6;
}

.hz-art__hero {
	max-width: var(--hz-max);
	margin: clamp(1.6rem, 4vw, 2.6rem) auto;
	overflow: hidden;
}

.hz-art__hero img {
	width: 100%;
	height: auto;
	display: block;
}

.hz-art__body {
	max-width: var(--hz-max);
	margin-inline: auto;
	display: grid;
	gap: clamp(1.6rem, 4vw, 3rem);
}

@media (min-width: 900px) {
	.hz-art__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, .3fr);
		align-items: start;
	}

	.hz-art__side {
		position: sticky;
		top: 100px;
		display: grid;
		gap: 1.2rem;
	}
}

.hz-prose--article {
	max-width: 68ch;
	font-size: 1.06rem;
	line-height: 2.2;
}

.hz-prose--center {
	margin-inline: auto;
}

.hz-prose--small {
	font-size: .95rem;
	line-height: 2;
	color: var(--hz-ash);
}

.hz-art__soon {
	padding: 1.2rem;
	background: var(--hz-paper-2);
	border-inline-start: 2px solid var(--hz-ochre);
	color: var(--hz-ash);
}

.hz-art__more {
	max-width: var(--hz-max);
	margin: clamp(2.6rem, 6vw, 4.4rem) auto 0;
}

/* -------------------------------------------------------------- courses */

.hz-learn--page .hz-learn__grid,
.hz-courses {
	max-width: var(--hz-max);
	margin-inline: auto;
}

.hz-courses {
	margin-top: clamp(2.4rem, 6vw, 4rem);
}

.hz-courses__grid {
	display: grid;
	gap: clamp(1.2rem, 3vw, 2rem);
	list-style: none;
	padding: 0;
	margin: 0;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.hz-course__link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
	border: 1px solid var(--hz-line);
	background: var(--hz-paper-2);
	transition: border-color .35s var(--hz-ease), transform .35s var(--hz-ease);
}

.hz-course__link:hover {
	border-color: var(--hz-forest);
	transform: translateY(-3px);
}

.hz-course__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--hz-mint);
}

.hz-course__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--hz-ease);
}

.hz-course__link:hover .hz-course__img {
	transform: scale(1.06);
}

.hz-course__body {
	display: block;
	padding: clamp(.9rem, 2.4vw, 1.3rem);
}

.hz-course__cat {
	display: inline-block;
	font-size: .72rem;
	letter-spacing: .08em;
	color: var(--hz-ochre);
	margin-bottom: .35rem;
}

.hz-course__title {
	display: block;
	font-family: var(--hz-display);
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--hz-ink);
}

.hz-course__ex {
	display: block;
	margin-top: .35rem;
	font-size: .88rem;
	line-height: 1.95;
	color: var(--hz-ash);
}

.hz-course1__grid {
	max-width: var(--hz-max);
	margin-inline: auto;
	display: grid;
	gap: clamp(1.6rem, 4vw, 3rem);
}

@media (min-width: 900px) {
	.hz-course1__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, .38fr);
		align-items: start;
	}

	.hz-course1__side {
		position: sticky;
		top: 100px;
	}
}

.hz-buybox {
	padding: clamp(1.1rem, 3vw, 1.6rem);
	background: var(--hz-paper-2);
	border: 1px solid var(--hz-line);
}

.hz-buybox__k {
	margin: 0 0 .8rem;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--hz-ochre);
}

.hz-buybox .hz-btn {
	width: 100%;
	margin-top: .4rem;
}

.hz-buybox__note {
	margin: .8rem 0 0;
	font-size: .8rem;
	line-height: 1.9;
	color: var(--hz-ash);
}

.hz-speclist {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: .9rem;
}

.hz-speclist li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .55rem;
	border-bottom: 1px solid var(--hz-line);
}

.hz-speclist span {
	color: var(--hz-ash);
}

.hz-speclist b {
	font-weight: 600;
}

/* ----------------------------------------------------------------- shop */

.hz-pfeature {
	max-width: var(--hz-max);
	margin: 0 auto clamp(2rem, 5vw, 3.4rem);
	padding-bottom: clamp(2rem, 5vw, 3.4rem);
	border-bottom: 1px solid var(--hz-line);
	display: grid;
	gap: clamp(1.2rem, 3vw, 2.6rem);
	align-items: center;
}

@media (min-width: 900px) {
	.hz-pfeature {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.hz-pfeature__media {
	display: block;
	overflow: hidden;
	background: var(--hz-paper-2);
	aspect-ratio: 4 / 3;
}

.hz-pfeature__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(1rem, 3vw, 2.2rem);
	transition: transform .9s var(--hz-ease);
}

.hz-pfeature__media:hover img {
	transform: scale(1.04);
}

.hz-pfeature__title {
	margin: .7rem 0 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 4vw, 2.4rem);
	line-height: 1.35;
}

.hz-pfeature__title a {
	color: inherit;
	text-decoration: none;
}

.hz-pfeature__title a:hover {
	color: var(--hz-green);
}

.hz-pfeature__ex {
	margin-top: .6rem;
	font-size: .96rem;
	line-height: 2;
	color: var(--hz-ash);
	max-width: 46ch;
}

.hz-pfeature__ex p {
	margin: 0;
}

.hz-pfeature__price {
	margin: .9rem 0 0;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--hz-forest);
}

.hz-pfeature__acts {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	align-items: center;
	margin-top: 1.2rem;
}

.hz-pgrid {
	max-width: var(--hz-max);
	margin-inline: auto;
	list-style: none;
	padding: 0;
	display: grid;
	gap: clamp(1.2rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.hz-pcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hz-line);
	background: var(--hz-paper-2);
	transition: border-color .35s var(--hz-ease);
}

.hz-pcard:hover {
	border-color: var(--hz-forest);
}

.hz-pcard__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
}

.hz-pcard__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1rem;
	transition: transform .8s var(--hz-ease);
}

.hz-pcard:hover .hz-pcard__img {
	transform: scale(1.05);
}

.hz-pcard__body {
	padding: clamp(.9rem, 2vw, 1.2rem);
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1;
}

.hz-pcard__cat {
	font-size: .72rem;
	letter-spacing: .08em;
	color: var(--hz-ochre);
}

.hz-pcard__title {
	margin: 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.55;
}

.hz-pcard__title a {
	color: inherit;
	text-decoration: none;
}

.hz-pcard__title a:hover {
	color: var(--hz-green);
}

.hz-pcard__price {
	margin: 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--hz-forest);
}

.hz-pcard__price del,
.hz-pfeature__price del {
	display: inline;
	font-weight: 400;
	opacity: .45;
	font-size: .85em;
}

.hz-pcard__price ins,
.hz-pfeature__price ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

/* WooCommerce loop buttons, in the site's own clothes */
.hz .button,
.hz a.button,
.hz button.button,
.hz .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: auto;
	padding: .6rem 1.3rem;
	background: var(--hz-forest);
	color: var(--hz-paper);
	border: 1px solid var(--hz-forest);
	border-radius: 2px;
	font-family: var(--hz-ui);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s var(--hz-ease), color .3s var(--hz-ease);
}

.hz .button:hover,
.hz a.button:hover,
.hz button.button:hover,
.hz .added_to_cart:hover {
	background: transparent;
	color: var(--hz-forest);
}

.hz .added_to_cart {
	margin-inline-start: .5rem;
	background: transparent;
	color: var(--hz-green);
	border-color: var(--hz-line);
}

/* --------------------------------------------------------------- search */

.hz-sform {
	display: flex;
	gap: .5rem;
	width: min(100%, 560px);
}

.hz-sform__in {
	flex: 1;
	min-height: 52px;
	padding: 0 1rem;
	background: rgba(246, 242, 234, .07);
	border: 1px solid var(--hz-line-light);
	border-radius: 2px;
	color: var(--hz-paper);
	font-family: var(--hz-ui);
	font-size: 1rem;
}

.hz-sform__in::placeholder {
	color: rgba(246, 242, 234, .4);
}

.hz-sform__in:focus {
	outline: none;
	border-color: var(--hz-ochre);
	background: rgba(246, 242, 234, .12);
}

.hz-sform__go {
	min-height: 52px;
	padding: 0 1.5rem;
	background: var(--hz-paper);
	color: var(--hz-forest);
	border: 1px solid var(--hz-paper);
	border-radius: 2px;
	font-family: var(--hz-ui);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .3s var(--hz-ease), color .3s var(--hz-ease);
}

.hz-sform__go:hover {
	background: transparent;
	color: var(--hz-paper);
}

.hz-search__group + .hz-search__group {
	margin-top: clamp(2.4rem, 6vw, 4rem);
}

.hz-search .hz-index {
	max-width: var(--hz-max);
	margin-inline: auto;
	border-top: 1px solid var(--hz-line);
}

/* ------------------------------------------------------------------ 404 */

.hz-404 {
	background: var(--hz-ink);
	color: var(--hz-paper);
	min-height: min(88svh, 900px);
	display: grid;
	place-items: center;
	text-align: center;
}

.hz-404__inner {
	position: relative;
	z-index: 2;
	max-width: 640px;
	display: grid;
	justify-items: center;
	gap: .2rem;
}

.hz-404__n {
	margin: 0;
	font-family: var(--hz-display);
	font-size: clamp(5rem, 22vw, 12rem);
	line-height: .9;
	color: transparent;
	-webkit-text-stroke: 1px rgba(246, 242, 234, .28);
}

.hz-404__title {
	margin: .4rem 0 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 5vw, 2.6rem);
}

.hz-404__p {
	margin: .7rem 0 0;
	color: rgba(246, 242, 234, .6);
	line-height: 2;
	max-width: 44ch;
}

.hz-404__verse {
	margin: 1.6rem 0 0;
	padding-block: 1.2rem;
	border-block: 1px solid var(--hz-line-light);
}

.hz-404__verse p {
	margin: 0;
	font-family: var(--hz-verse);
	font-size: clamp(1.05rem, 3vw, 1.5rem);
	line-height: 2;
	color: var(--hz-mint);
}

.hz-404__verse cite {
	display: block;
	margin-top: .5rem;
	font-style: normal;
	font-size: .78rem;
	color: rgba(246, 242, 234, .45);
}

.hz-404__verse cite a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.hz-404__search {
	margin-top: 1.6rem;
	width: 100%;
	display: flex;
	justify-content: center;
}

.hz-404__acts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem;
	margin-top: 1.4rem;
}

/* ------------------------------------------------------------ page shell */

.hz-page1 {
	padding-block: clamp(2.4rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem);
}

/* --------------------------------------- WooCommerce single, restyled */

.hz-wc .woocommerce-breadcrumb {
	font-size: .78rem;
	color: var(--hz-ash);
}

.hz-wc .product_title,
.hz-wc h1.product_title {
	font-family: var(--hz-display) !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
}

.hz-wc .price,
.hz-wc .woocommerce-Price-amount {
	font-family: var(--hz-ui);
	color: var(--hz-forest);
}

.hz-wc .quantity input {
	min-height: 46px;
	border: 1px solid var(--hz-line);
	border-radius: 2px;
	font-family: var(--hz-ui);
	padding-inline: .5rem;
}

.hz-wc .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 1.4rem;
	border-bottom: 1px solid var(--hz-line);
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
}

.hz-wc .woocommerce-tabs ul.tabs::before,
.hz-wc .woocommerce-tabs ul.tabs li::before,
.hz-wc .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.hz-wc .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.hz-wc .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	font-family: var(--hz-ui);
	font-size: .9rem;
	font-weight: 600;
	color: var(--hz-ash);
	border-bottom: 2px solid transparent;
	text-decoration: none;
}

.hz-wc .woocommerce-tabs ul.tabs li.active a {
	color: var(--hz-ink);
	border-bottom-color: var(--hz-ochre);
}

.hz-wc .woocommerce-Tabs-panel h2 {
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: 1.3rem;
}

.hz-wc .woocommerce-product-gallery {
	background: var(--hz-paper-2);
}

/* sticky buy bar on phones */
@media (max-width: 899px) {
	body.single-product .hz-stickybuy {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 950;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: .7rem clamp(.9rem, 4vw, 1.2rem);
		background: var(--hz-paper);
		border-top: 1px solid var(--hz-line);
		box-shadow: 0 -8px 30px rgba(14, 22, 19, .1);
		transform: translateY(110%);
		transition: transform .4s var(--hz-ease);
	}

	body.single-product.hz-scrolled .hz-stickybuy {
		transform: none;
	}

	.hz-stickybuy__price {
		font-weight: 600;
		color: var(--hz-forest);
	}

	.hz-stickybuy .hz-btn {
		flex: 0 0 auto;
	}
}

@media (min-width: 900px) {
	.hz-stickybuy {
		display: none;
	}
}

/* =========================================================================
   BUTTON COLOUR — specificity repair.
   `.hz a { color: inherit }` (0,1,1) outranks `.hz-btn--solid` (0,1,0), so
   every button that is a link took the section's text colour instead of its
   own: dark ink on dark green, unreadable until hover. These selectors are
   element+class, so they tie on specificity and win by order.
   ====================================================================== */

a.hz-btn--solid,
button.hz-btn--solid {
	color: var(--hz-paper);
}

a.hz-btn--solid:hover,
button.hz-btn--solid:hover {
	color: var(--hz-forest);
}

a.hz-btn--ghost,
button.hz-btn--ghost {
	color: var(--hz-ink);
}

a.hz-btn--ghost:hover,
button.hz-btn--ghost:hover {
	color: var(--hz-paper);
}

a.hz-btn--light.hz-btn--solid,
button.hz-btn--light.hz-btn--solid {
	color: var(--hz-forest);
}

a.hz-btn--light.hz-btn--solid:hover,
button.hz-btn--light.hz-btn--solid:hover {
	color: var(--hz-paper);
}

a.hz-btn--light.hz-btn--ghost,
button.hz-btn--light.hz-btn--ghost {
	color: var(--hz-paper);
}

a.hz-btn--light.hz-btn--ghost:hover,
button.hz-btn--light.hz-btn--ghost:hover {
	color: var(--hz-forest);
}

/* keyboard focus must not fall back to the inherited colour either */
a.hz-btn--solid:focus-visible {
	color: var(--hz-paper);
}

/* =========================================================================
   ACADEMY — the learning side of هافز.
   Same tokens as the rest of the site, but a colder, more instrumental
   rhythm: discovery is editorial, learning is a workshop.
   ====================================================================== */

.hz-academy,
.hz-clanding,
.hz-mycourses {
	background: var(--hz-paper);
}

/* ------------------------------------------------------------- price */

.hz-price {
	display: inline-flex;
	align-items: baseline;
	gap: .35rem;
	font-family: var(--hz-ui);
	font-size: 1rem;
	color: var(--hz-forest);
}

.hz-price b {
	font-size: 1.25em;
	font-weight: 700;
}

.hz-price i {
	font-style: normal;
	font-size: .8em;
	opacity: .7;
}

.hz-price del {
	font-size: .82em;
	opacity: .45;
}

.hz-price--free {
	color: var(--hz-green);
	font-weight: 700;
	letter-spacing: .04em;
}

/* -------------------------------------------------------- course grid */

.hz-cgrid {
	max-width: var(--hz-max);
	margin-inline: auto;
	list-style: none;
	padding: 0;
	display: grid;
	gap: clamp(1.2rem, 3vw, 2.2rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* the first card takes the room a featured course deserves */
@media (min-width: 900px) {
	.hz-cgrid {
		grid-template-columns: repeat(6, 1fr);
	}

	.hz-cgrid > .hz-ccard--large {
		grid-column: span 6;
	}

	.hz-cgrid > .hz-ccard--sm {
		grid-column: span 3;
	}

	.hz-cgrid > .hz-ccard--sm:nth-child(3n + 3),
	.hz-cgrid > .hz-ccard--sm:nth-child(3n + 4) {
		grid-column: span 3;
	}

	.hz-cgrid--flat > .hz-ccard--sm {
		grid-column: span 2;
	}
}

/* -------------------------------------------------------- course card */

.hz-ccard__link {
	display: grid;
	gap: clamp(.9rem, 2vw, 1.6rem);
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.hz-ccard__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--hz-forest);
}

.hz-ccard--large .hz-ccard__media {
	aspect-ratio: 16 / 9;
}

.hz-ccard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.92);
	transform: scale(1.001);
	transition: transform 1.1s var(--hz-ease), filter .6s var(--hz-ease);
}

.hz-ccard__link:hover .hz-ccard__img,
.hz-ccard__link:focus-visible .hz-ccard__img {
	transform: scale(1.05);
	filter: saturate(1);
}

.hz-ccard__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 22, 19, .78) 0%, rgba(14, 22, 19, .12) 46%, transparent 74%);
	opacity: .85;
	transition: opacity .5s var(--hz-ease);
}

.hz-ccard__link:hover .hz-ccard__veil {
	opacity: 1;
}

.hz-ccard__cat {
	position: absolute;
	inset-block-start: .9rem;
	inset-inline-start: .9rem;
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 .8rem;
	border-radius: 999px;
	background: var(--hz-paper);
	color: var(--hz-forest);
	font-size: .74rem;
	font-weight: 600;
}

/* the reveal strip that slides up on hover */
.hz-ccard__peek {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .9rem 1rem;
	color: var(--hz-paper);
	font-size: .84rem;
	font-weight: 600;
	transform: translateY(100%);
	opacity: 0;
	transition: transform .45s var(--hz-ease), opacity .35s var(--hz-ease);
}

.hz-ccard__peekline {
	display: block;
	width: 26px;
	height: 1px;
	background: var(--hz-ochre);
}

.hz-ccard__link:hover .hz-ccard__peek,
.hz-ccard__link:focus-visible .hz-ccard__peek {
	transform: none;
	opacity: 1;
}

.hz-ccard__body {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	flex: 1;
}

.hz-ccard__title {
	font-family: var(--hz-display);
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	line-height: 1.45;
	color: var(--hz-ink);
	transition: color .3s var(--hz-ease);
}

.hz-ccard--large .hz-ccard__title {
	font-size: clamp(1.5rem, 4vw, 2.4rem);
}

.hz-ccard__link:hover .hz-ccard__title {
	color: var(--hz-green);
}

.hz-ccard__ex {
	font-size: .92rem;
	line-height: 1.95;
	color: var(--hz-ash);
	max-width: 54ch;
}

.hz-ccard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: .78rem;
	color: var(--hz-ash);
	letter-spacing: .03em;
}

.hz-ccard__meta > * + *::before {
	content: "·";
	margin-inline-end: .5rem;
	opacity: .6;
}

.hz-ccard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: .7rem;
	border-top: 1px solid var(--hz-line);
}

.hz-ccard__go {
	width: 22px;
	height: 1px;
	background: var(--hz-ochre);
	transition: width .34s var(--hz-ease);
}

.hz-ccard__link:hover .hz-ccard__go {
	width: 42px;
}

@media (min-width: 900px) {
	.hz-ccard--large .hz-ccard__link {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(1.6rem, 4vw, 3rem);
	}
}

/* ------------------------------------------------------ progress bar */

.hz-prog {
	display: grid;
	gap: .4rem;
}

.hz-prog__bar {
	position: relative;
	height: 2px;
	background: var(--hz-line);
	overflow: hidden;
}

.hz-prog__bar span {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--p, 0%);
	background: var(--hz-ochre);
	transform-origin: right;
	transform: scaleX(0);
	transition: transform 1.1s var(--hz-ease);
}

.hz-prog.is-in .hz-prog__bar span,
.hz-js .hz-prog.is-in .hz-prog__bar span {
	transform: scaleX(1);
}

.hz-prog__t {
	margin: 0;
	font-size: .76rem;
	color: var(--hz-ash);
	letter-spacing: .04em;
}

.hz-prog--lg .hz-prog__bar {
	height: 3px;
	background: var(--hz-line-light);
}

.hz-prog--lg .hz-prog__t {
	color: rgba(246, 242, 234, .7);
	font-size: .9rem;
}

/* no script, no animation — show the real width straight away */
html:not(.hz-js) .hz-prog__bar span {
	transform: scaleX(1);
}

/* ------------------------------------------------------ course landing */

.hz-clanding {
	padding-block: clamp(2rem, 5vw, 3.4rem) clamp(3rem, 8vw, 6rem);
}

.hz-clanding__hero {
	position: relative;
	z-index: 2;
	max-width: var(--hz-max);
	margin-inline: auto;
	display: grid;
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: start;
	padding-bottom: clamp(2rem, 5vw, 3.4rem);
	border-bottom: 1px solid var(--hz-line);
}

@media (min-width: 900px) {
	.hz-clanding__hero {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
		gap: clamp(2rem, 5vw, 4rem);
	}
}

.hz-clanding__title {
	margin: .5rem 0 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(2rem, 6vw, 3.9rem);
	line-height: 1.22;
	color: var(--hz-ink);
}

.hz-clanding__lede {
	margin: 1rem 0 0;
	max-width: 52ch;
	font-size: 1.05rem;
	line-height: 2.05;
	color: var(--hz-ash);
}

.hz-clanding__facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.2rem, 4vw, 2.6rem);
	margin: clamp(1.4rem, 3.4vw, 2.2rem) 0 0;
	padding-top: clamp(1rem, 2.4vw, 1.5rem);
	border-top: 1px solid var(--hz-line);
}

.hz-clanding__facts .hz-fact__n {
	color: var(--hz-ink);
	font-size: clamp(1.2rem, 3vw, 1.7rem);
}

.hz-clanding__facts .hz-fact__l {
	color: var(--hz-ash);
}

.hz-clanding__panel {
	position: relative;
	display: grid;
	gap: 0;
	border: 1px solid var(--hz-line);
	background: var(--hz-paper-2);
}

@media (min-width: 900px) {
	.hz-clanding__panel {
		position: sticky;
		top: 96px;
	}
}

.hz-clanding__shot {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	will-change: transform;
}

.hz-clanding__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hz-clanding__buy {
	display: grid;
	gap: .9rem;
	padding: clamp(1.1rem, 3vw, 1.6rem);
}

.hz-clanding__cta {
	width: 100%;
}

.hz-clanding__note {
	margin: 0;
	font-size: .82rem;
	line-height: 1.9;
	color: var(--hz-ash);
}

.hz-speclist--buy {
	margin: 0;
}

.hz-clanding__about,
.hz-curric,
.hz-clanding__more {
	max-width: var(--hz-max);
	margin: clamp(2.4rem, 6vw, 4rem) auto 0;
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------- the learning path */

.hz-path {
	position: relative;
}

.hz-path__group + .hz-path__group {
	margin-top: clamp(1.8rem, 4vw, 2.8rem);
}

.hz-path__ghead {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .3rem .9rem;
	align-items: baseline;
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--hz-line);
}

.hz-path__gidx {
	font-family: var(--hz-display);
	font-size: 1.1rem;
	color: var(--hz-ochre);
}

.hz-path__gtitle {
	margin: 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.2rem, 3vw, 1.6rem);
	line-height: 1.4;
}

.hz-path__gmeta {
	grid-column: 2;
	font-size: .78rem;
	color: var(--hz-ash);
}

.hz-path__gdesc {
	grid-column: 2;
	margin: .3rem 0 0;
	font-size: .9rem;
	line-height: 1.9;
	color: var(--hz-ash);
	max-width: 60ch;
}

.hz-path__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* the thin editorial spine the lessons hang from */
.hz-path__list::before {
	content: "";
	position: absolute;
	inset-block: 1.4rem;
	inset-inline-start: 5px;
	width: 1px;
	background: var(--hz-line);
}

.hz-path__link {
	position: relative;
	display: grid;
	grid-template-columns: 12px auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(.6rem, 2vw, 1.1rem);
	padding-block: clamp(.75rem, 2vw, 1.05rem);
	color: inherit;
	text-decoration: none;
	transition: padding-inline-start .32s var(--hz-ease);
}

a.hz-path__link:hover {
	padding-inline-start: .5rem;
}

.hz-path__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid var(--hz-line);
	background: var(--hz-paper);
	transition: background-color .3s var(--hz-ease), border-color .3s var(--hz-ease), transform .3s var(--hz-ease);
}

a.hz-path__link:hover .hz-path__dot {
	border-color: var(--hz-ochre);
	transform: scale(1.2);
}

.hz-path__item.is-done .hz-path__dot {
	background: var(--hz-green);
	border-color: var(--hz-green);
}

.hz-path__n {
	font-family: var(--hz-display);
	font-size: .9rem;
	color: var(--hz-ochre);
	opacity: .8;
}

.hz-path__title {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.65;
	transition: color .3s var(--hz-ease);
}

a.hz-path__link:hover .hz-path__title {
	color: var(--hz-green);
}

.hz-path__meta {
	display: block;
	margin-top: .15rem;
	font-size: .76rem;
	color: var(--hz-ash);
}

.hz-path__item.is-locked .hz-path__title,
.hz-path__item.is-locked .hz-path__meta {
	opacity: .55;
}

.hz-path__item + .hz-path__item {
	border-top: 1px solid var(--hz-line);
}

.hz-path__tag {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 .65rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .03em;
	white-space: nowrap;
}

.hz-path__tag--done {
	background: rgba(30, 111, 92, .12);
	color: var(--hz-green);
}

.hz-path__tag--free {
	background: rgba(180, 134, 47, .16);
	color: #8a6520;
}

.hz-path__tag--lock {
	background: transparent;
	border: 1px solid var(--hz-line);
	color: var(--hz-ash);
}

.hz-gate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(1.4rem, 3vw, 2rem);
	padding: clamp(1.1rem, 3vw, 1.6rem);
	background: var(--hz-paper-2);
	border-inline-start: 2px solid var(--hz-ochre);
}

.hz-gate__t {
	margin: 0;
	font-size: .98rem;
	color: var(--hz-ink);
}

/* ------------------------------------------------------- my courses */

.hz-resume {
	max-width: var(--hz-max);
	margin: 0 auto clamp(2rem, 5vw, 3.2rem);
	display: grid;
	gap: clamp(1.2rem, 3vw, 2.4rem);
	align-items: center;
	padding: clamp(1.4rem, 4vw, 2.6rem);
	background: var(--hz-ink);
	color: var(--hz-paper);
	overflow: hidden;
}

@media (min-width: 900px) {
	.hz-resume {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
	}
}

.hz-resume .hz-eyebrow {
	color: rgba(246, 242, 234, .6);
}

.hz-resume__title {
	margin: .6rem 0 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 4.4vw, 2.6rem);
	line-height: 1.3;
}

.hz-resume__last {
	margin: .5rem 0 1.2rem;
	font-size: .95rem;
	color: rgba(246, 242, 234, .66);
}

.hz-resume__last b {
	color: var(--hz-paper);
	font-weight: 600;
}

.hz-resume .hz-btn {
	margin-top: 1.2rem;
}

.hz-resume__shot {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	will-change: transform;
}

.hz-resume__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hz-mylist {
	max-width: var(--hz-max);
	margin-inline: auto;
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--hz-line);
}

.hz-mycard {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	padding-block: clamp(1rem, 2.4vw, 1.5rem);
	border-bottom: 1px solid var(--hz-line);
}

@media (min-width: 760px) {
	.hz-mycard {
		grid-template-columns: 140px minmax(0, 1fr) auto;
		gap: 1.4rem;
	}
}

.hz-mycard__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--hz-paper-2);
}

.hz-mycard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--hz-ease);
}

.hz-mycard__media:hover img {
	transform: scale(1.06);
}

.hz-mycard__title {
	margin: 0 0 .25rem;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.1rem, 2.6vw, 1.4rem);
}

.hz-mycard__title a {
	color: inherit;
	text-decoration: none;
}

.hz-mycard__title a:hover {
	color: var(--hz-green);
}

.hz-mycard__meta {
	margin: 0 0 .6rem;
	font-size: .82rem;
	color: var(--hz-ash);
}

.hz-mycard__act {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: .6rem;
}

@media (min-width: 760px) {
	.hz-mycard__act {
		grid-column: auto;
		flex-direction: column;
		align-items: flex-end;
	}
}

.hz-mycard.is-complete .hz-prog__bar span {
	background: var(--hz-green);
}

/* =========================================================================
   PARS LMS — reskin. The plugin keeps its markup, its player, its progress
   and its access checks; only the surface is ours.
   ====================================================================== */

.parslms-wrapper,
.parslms-panel-wrapper,
.parslms-course-content-wrapper {
	background: var(--hz-paper);
	font-family: var(--hz-ui);
	color: var(--hz-ink);
}

:root {
	--pars-primary-color: #1e6f5c;
	--pars-primary-hover-color: #17594a;
	--pars-primary-active-color: #113529;
}

.parslms-course-content-title,
.parslms-panel-title,
.parslms-panel-list-item-title {
	font-family: var(--hz-display) !important;
	font-weight: 400 !important;
	color: var(--hz-ink);
}

.parslms-course-content-stage {
	background: var(--hz-paper);
}

/* the lock screen a guest meets on a paid lesson */
.course-content-lock-wrapper {
	background: var(--hz-ink) !important;
	color: var(--hz-paper);
}

.course-content-lock-message {
	font-family: var(--hz-display) !important;
	font-size: clamp(1.15rem, 3.4vw, 1.7rem) !important;
	color: var(--hz-paper) !important;
	line-height: 1.7;
}

.course-content-lock-btn,
.course-start-learning-btn,
.parslms-course-content-btn,
.parslms-panel-head-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: .6rem 1.5rem !important;
	border-radius: 2px !important;
	background: var(--hz-paper) !important;
	color: var(--hz-forest) !important;
	border: 1px solid var(--hz-paper) !important;
	font-family: var(--hz-ui) !important;
	font-weight: 600 !important;
	transition: background-color .3s var(--hz-ease), color .3s var(--hz-ease);
}

.course-content-lock-btn:hover,
.course-start-learning-btn:hover {
	background: transparent !important;
	color: var(--hz-paper) !important;
}

.parslms-panel-head-btn {
	background: var(--hz-forest) !important;
	color: var(--hz-paper) !important;
	border-color: var(--hz-forest) !important;
}

/* panel shell */
.parslms-panel-sidebar {
	background: var(--hz-paper-2);
	border: 1px solid var(--hz-line);
}

.parslms-panel-sidebar-user-name {
	font-family: var(--hz-display) !important;
	font-size: 1.15rem !important;
	color: var(--hz-ink);
}

.parslms-panel-new-sidebar-item-title,
.parslms-panel-new-sidebar-item .item-title {
	font-family: var(--hz-ui) !important;
	font-size: .95rem !important;
}

.parslms-panel-list-item {
	border: 1px solid var(--hz-line) !important;
	border-radius: 0 !important;
	background: var(--hz-paper) !important;
	transition: border-color .3s var(--hz-ease);
}

.parslms-panel-list-item:hover {
	border-color: var(--hz-forest) !important;
}

.parslms-panel-contents {
	background: transparent;
}

/* progress rings and bars the plugin draws */
.parslms-progress-bar,
.parslms-course-progress-bar {
	background: var(--hz-ochre) !important;
}

/* ------------------------------------------------------------------ cart */

.hz-cart {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-width: 44px;
	min-height: 44px;
	padding-inline: .35rem;
	color: var(--hz-ink);
	text-decoration: none;
	position: relative;
	transition: color .3s var(--hz-ease);
}

.hz-cart:hover {
	color: var(--hz-green);
}

.hz-cart__i {
	display: grid;
	place-items: center;
}

.hz-cart__n {
	min-width: 19px;
	height: 19px;
	padding-inline: 4px;
	display: inline-grid;
	place-items: center;
	border-radius: 999px;
	background: var(--hz-line);
	color: var(--hz-ink);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
	transition: background-color .3s var(--hz-ease), color .3s var(--hz-ease);
}

.hz-cart__n.is-on {
	background: var(--hz-ochre);
	color: var(--hz-ink);
}

/* the mobile bar keeps burger, cart and mark evenly spaced */
.elementor-location-header .hz-cart-widget {
	display: flex;
	align-items: center;
}

/* =========================================================================
   WooCommerce pages — cart, checkout, account. The plugin keeps its markup
   and its logic; only the surface is ours.
   ====================================================================== */

body.hz-wc-page .woocommerce {
	font-family: var(--hz-ui);
	color: var(--hz-ink);
}

body.hz-wc-page h1,
body.hz-wc-page h2,
body.hz-wc-page h3 {
	font-family: var(--hz-display) !important;
	font-weight: 400 !important;
	line-height: 1.35;
}

body.hz-wc-page table.shop_table,
body.hz-wc-page table.woocommerce-orders-table {
	border: 1px solid var(--hz-line);
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
	background: var(--hz-paper);
}

body.hz-wc-page table.shop_table th,
body.hz-wc-page table.woocommerce-orders-table th {
	font-family: var(--hz-ui);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--hz-ash);
	border-bottom: 1px solid var(--hz-line);
	padding: .9rem 1rem;
}

body.hz-wc-page table.shop_table td,
body.hz-wc-page table.woocommerce-orders-table td {
	border-top: 1px solid var(--hz-line);
	padding: 1rem;
	font-size: .95rem;
}

body.hz-wc-page .cart_totals h2,
body.hz-wc-page .cross-sells h2 {
	font-size: 1.3rem;
}

body.hz-wc-page .woocommerce-message,
body.hz-wc-page .woocommerce-info,
body.hz-wc-page .woocommerce-error {
	border-top: 0;
	border-inline-start: 2px solid var(--hz-ochre);
	background: var(--hz-paper-2);
	color: var(--hz-ink);
	border-radius: 0;
	font-size: .95rem;
}

body.hz-wc-page .woocommerce-message::before,
body.hz-wc-page .woocommerce-info::before {
	color: var(--hz-ochre);
}

body.hz-wc-page .button,
body.hz-wc-page button.button,
body.hz-wc-page input.button,
body.hz-wc-page a.button,
body.hz-wc-page .checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: .6rem 1.5rem;
	background: var(--hz-forest);
	color: var(--hz-paper);
	border: 1px solid var(--hz-forest);
	border-radius: 2px;
	font-family: var(--hz-ui);
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	transition: background-color .3s var(--hz-ease), color .3s var(--hz-ease);
}

body.hz-wc-page .button:hover,
body.hz-wc-page button.button:hover,
body.hz-wc-page a.button:hover,
body.hz-wc-page .checkout-button:hover {
	background: transparent;
	color: var(--hz-forest);
}

body.hz-wc-page input[type="text"],
body.hz-wc-page input[type="email"],
body.hz-wc-page input[type="tel"],
body.hz-wc-page input[type="password"],
body.hz-wc-page input[type="number"],
body.hz-wc-page textarea,
body.hz-wc-page select {
	min-height: 46px;
	padding: .5rem .8rem;
	border: 1px solid var(--hz-line);
	border-radius: 2px;
	background: var(--hz-paper);
	font-family: var(--hz-ui);
	font-size: .95rem;
	color: var(--hz-ink);
}

body.hz-wc-page input:focus,
body.hz-wc-page textarea:focus,
body.hz-wc-page select:focus {
	outline: none;
	border-color: var(--hz-green);
}

/* account navigation as an index, not a bullet list */
body.hz-wc-page .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hz-line);
}

body.hz-wc-page .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--hz-line);
}

body.hz-wc-page .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding-inline: .2rem;
	color: var(--hz-ink);
	text-decoration: none;
	font-size: .98rem;
	transition: padding-inline-start .3s var(--hz-ease), color .3s var(--hz-ease);
}

body.hz-wc-page .woocommerce-MyAccount-navigation li a:hover,
body.hz-wc-page .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--hz-green);
	padding-inline-start: .6rem;
}

body.hz-wc-page .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 600;
}

/* =========================================================================
   HEADER — the theme's own widgets, dressed in the design system.
   The markup belongs to Harika; only its surface and rhythm change here.
   ====================================================================== */

.elementor-location-header {
	background: var(--hz-paper);
	border-bottom: 1px solid var(--hz-line);
}

body.hz-scrolled .elementor-location-header {
	background: rgba(246, 242, 234, .93);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
}

/* ------------------------------------------------------------ main nav */

/* One row, always. The nine labels need ~610px of the 944px column, so there
   is room; what there must not be is `flex-wrap: wrap`, which broke the menu
   onto three lines and grew the header to 233px on every page. */
.elementor-location-header .harika-navigation ul.menu,
.elementor-location-header .harika-navigation > div > ul.menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}

/* sub-menus stay dropdowns — they must never join the row */
.elementor-location-header .harika-navigation ul.sub-menu {
	display: block;
	flex-wrap: nowrap;
}

/* No min-height here: the theme already pads each item 18px top and bottom,
   so a 42px minimum stacked on top of that made every row 80px and the header
   136px. The item is a comfortable ~60px tall as the theme has it. */
.elementor-location-header ul.menu > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-inline: .4rem;
	font-family: var(--hz-ui) !important;
	font-size: .92rem !important;
	font-weight: 500 !important;
	color: var(--hz-ink) !important;
	letter-spacing: 0;
	white-space: nowrap;
	transition: color .3s var(--hz-ease);
}

.elementor-location-header ul.menu > li > a::after {
	content: "";
	position: absolute;
	inset-inline: .4rem;
	bottom: 8px;
	height: 1px;
	background: var(--hz-ochre);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .34s var(--hz-ease);
}

.elementor-location-header ul.menu > li > a:hover::after,
.elementor-location-header ul.menu > li.current-menu-item > a::after,
.elementor-location-header ul.menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.elementor-location-header ul.menu > li > a:hover,
.elementor-location-header ul.menu > li.current-menu-item > a {
	color: var(--hz-green) !important;
}

/* --------------------------------------------------------- sub menus */

.elementor-location-header ul.sub-menu {
	min-width: 230px;
	padding: .5rem 0;
	background: var(--hz-paper);
	border: 1px solid var(--hz-line);
	border-radius: 0;
	box-shadow: 0 18px 50px rgba(14, 22, 19, .12);
}

.elementor-location-header ul.sub-menu li a {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 0 1.1rem;
	font-family: var(--hz-ui) !important;
	font-size: .9rem !important;
	color: var(--hz-ink) !important;
	border: 0 !important;
	transition: background-color .25s var(--hz-ease), color .25s var(--hz-ease), padding-inline-start .25s var(--hz-ease);
}

.elementor-location-header ul.sub-menu li a:hover {
	background: var(--hz-paper-2);
	color: var(--hz-green) !important;
	padding-inline-start: 1.35rem;
}

/* ---------------------------------------------------- search overlay */

.harika-search .back-shadow {
	background: rgba(14, 22, 19, .92) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.harika-search-box {
	max-width: min(92vw, 760px);
}

.harika-search-box .form-search {
	display: flex;
	gap: .6rem;
	align-items: stretch;
	border-bottom: 1px solid rgba(246, 242, 234, .25);
	padding-bottom: .6rem;
}

.harika-search-box input[type="search"],
.harika-search-box input[type="text"] {
	flex: 1;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--hz-paper) !important;
	font-family: var(--hz-display) !important;
	font-size: clamp(1.4rem, 5vw, 2.6rem) !important;
	line-height: 1.5 !important;
	padding: .3rem .2rem !important;
	box-shadow: none !important;
}

.harika-search-box input::placeholder {
	color: rgba(246, 242, 234, .35) !important;
}

.harika-search-box .btn,
.harika-search-box .btn-primary {
	background: var(--hz-paper) !important;
	color: var(--hz-forest) !important;
	border: 1px solid var(--hz-paper) !important;
	border-radius: 2px !important;
	min-height: 48px;
	padding-inline: 1.4rem !important;
	font-family: var(--hz-ui) !important;
	font-weight: 600 !important;
}

.harika-search .close {
	color: var(--hz-paper) !important;
	opacity: .8;
	font-size: 1.6rem;
	min-width: 44px;
	min-height: 44px;
}

/* the suggestion chips the script drops into the overlay */
.hz-sugg {
	margin-top: 1.6rem;
}

.hz-sugg__k {
	margin: 0 0 .7rem;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--hz-ochre);
}

.hz-sugg ul {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hz-sugg a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 .9rem;
	border: 1px solid rgba(246, 242, 234, .25);
	border-radius: 999px;
	font-family: var(--hz-ui);
	font-size: .85rem;
	color: rgba(246, 242, 234, .85);
	text-decoration: none;
	transition: background-color .3s var(--hz-ease), color .3s var(--hz-ease), border-color .3s var(--hz-ease);
}

.hz-sugg a:hover {
	background: var(--hz-paper);
	border-color: var(--hz-paper);
	color: var(--hz-forest);
}

/* ------------------------------------------------------- mobile menu */

.harika-navigation-toggle,
.toggle-search-box {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--hz-ink) !important;
	cursor: pointer;
}

.harika-navigation-dropdown .sidemenu-container {
	background: var(--hz-ink) !important;
	padding-top: clamp(3rem, 9vw, 5rem);
}

.harika-navigation-dropdown ul.menu.side > li > a {
	font-family: var(--hz-display) !important;
	font-size: clamp(1.25rem, 5vw, 1.7rem) !important;
	color: var(--hz-paper) !important;
	min-height: 56px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--hz-line-light);
}

.harika-navigation-dropdown ul.sub-menu {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-inline-start: .8rem;
}

.harika-navigation-dropdown ul.sub-menu li a {
	font-family: var(--hz-ui) !important;
	font-size: .95rem !important;
	color: rgba(246, 242, 234, .72) !important;
	min-height: 46px;
	background: transparent !important;
}

.harika-navigation-dropdown ul.sub-menu li a:hover {
	color: var(--hz-paper) !important;
	background: transparent !important;
}

.harika-navigation-dropdown .closebtn {
	color: var(--hz-paper) !important;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* the logo keeps its own proportions on every breakpoint */
.elementor-location-header img.wp-image-345 {
	height: auto;
	max-height: 54px;
	width: auto;
}

/* ------------------------------------------------- phone header repair */

/* On phones the header template collapses the whole column chain that holds
   the logo to zero width, so the bar renders empty apart from the burger and
   a leftover «جایگه لوگو شما» placeholder from the theme demo. Give the chain
   a real size back and drop the placeholder. */
@media (max-width: 767px) {
	.elementor-location-header .elementor-element-30eb584e img.wp-image-345 {
		max-height: 40px;
	}

	/* the theme's demo text that stands in for a logo */
	.elementor-location-header .elementor-element-664dccbd {
		display: none !important;
	}
}

/* The theme leaves closed dropdowns and the off-canvas overlay parked outside
   the right edge, which makes the whole document scroll sideways on RTL. Clip
   the axis rather than hide it: `clip` does not break `position: sticky`, and
   open menus still drop downwards. */
.elementor-location-header {
	overflow-x: clip;
}

body.hz-site {
	overflow-x: clip;
}

/* Cart and search share the left column — side by side, not stacked, or the
   header gains a row's worth of height. */
.elementor-location-header .elementor-element-ebd930c > .elementor-widget-wrap {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: .1rem;
}

.elementor-location-header .elementor-element-ebd930c > .elementor-widget-wrap > .elementor-widget {
	width: auto;
	margin-bottom: 0;
}

/* =========================================================================
   TOUCH — last in the cascade on purpose, so it wins over every component.
   ====================================================================== */

/* Touch targets — every breakpoint below the desktop grid, phones included.
   These have to sit in their own `max-width` block: folded into the tablet
   range they silently stop applying on a phone. */
@media (max-width: 899px) {
	.hz .hz-shead__link,
	.hz .hz-link,
	.hz .hz-shelf__title a,
	.hz .hz-foot__col a,
	.hz .hz-crumbs a,
	.hz-mast .hz-crumbs a,
	.hz .hz-poem__cardn,
	.hz .hz-poem__meta a,
	.hz .hz-art__meta a,
	.hz .hz-poem__poet a,
	.hz .hz-pcard__title a,
	.hz .hz-404__verse cite a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-block: .45rem;
	}

	.hz-foot__col li + li {
		margin-top: 0;
	}

	.hz-foot__tags a,
	.hz-chip,
	.hz-pill {
		min-height: 40px;
	}

	.hz-dot {
		width: 44px;
		height: 44px;
	}

	.hz-vbtn {
		width: 48px;
		height: 48px;
	}

	.hz-index__link,
	.hz-prow__link,
	.hz-rail__item a,
	.hz-mag__link {
		min-height: 56px;
	}
}


/* ---- 20260817: theme blockquote neutraliser ---- */
.hz blockquote {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.hz blockquote::before,
.hz blockquote::after {
	content: none;
	display: none;
}

.hz blockquote cite {
	position: static;
	inset: auto;
	background: none;
	padding: 0;
	height: auto;
	display: block;
}

.hz blockquote cite em {
	background: none;
	border-radius: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.hz blockquote p {
	margin: 0;
}


/* ================================================================== 02 live
   «اتاقِ شعر» — the landing section that sells the live rooms.
   Replaces the old verse carousel in the same slot on page 41. */

.hz-live {
	position: relative;
	background: var(--hz-forest);
	color: var(--hz-paper);
	padding: clamp(3rem, 8vw, 6.5rem) var(--hz-pad);
	overflow: hidden;
}

/* a single warm light behind the demo, so the panel reads as lit rather than
   pasted onto the ground */
.hz-live__glow {
	position: absolute;
	inset-block-start: -18%;
	inset-inline-start: -10%;
	width: min(70vw, 780px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(47, 141, 115, .38), rgba(17, 53, 41, 0) 68%);
	pointer-events: none;
}

.hz-live__top {
	position: relative;
	z-index: 2;
	max-width: var(--hz-max);
	margin-inline: auto;
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 960px) {
	.hz-live__top {
		grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	}
}

/* ------------------------------------------------------------ the pitch */

.hz-live__title {
	margin: clamp(.6rem, 1.6vw, 1rem) 0 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(2.4rem, 7.5vw, 4.6rem);
	line-height: 1.15;
	letter-spacing: -.01em;
	/* ends light: on the forest ground a mid-green last glyph goes muddy */
	background: linear-gradient(200deg, #ffffff 4%, var(--hz-mint) 46%, #a8cec0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-block-end: .06em;
}

.hz-live__lede {
	margin: clamp(.9rem, 2vw, 1.3rem) 0 0;
	max-width: 46ch;
	font-size: clamp(1rem, 1.9vw, 1.12rem);
	line-height: 2.1;
	color: rgba(246, 242, 234, .78);
}

.hz-live__feats {
	list-style: none;
	margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(.8rem, 1.8vw, 1.15rem);
}

.hz-feat {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	gap: .9rem;
	align-items: start;
}

.hz-feat__i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 10px;
	border: 1px solid rgba(180, 134, 47, .45);
	background: rgba(180, 134, 47, .12);
	color: #e5c07a;
}

.hz-feat__i svg {
	width: 1.25rem;
	height: 1.25rem;
}

.hz-feat__t {
	display: grid;
	gap: .2rem;
}

.hz-feat__t b {
	font-weight: 600;
	font-size: 1rem;
	color: var(--hz-paper);
}

.hz-feat__t i {
	font-style: normal;
	font-size: .89rem;
	line-height: 1.95;
	color: rgba(246, 242, 234, .62);
}

.hz-live__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.hz-live__note {
	margin: .9rem 0 0;
	font-size: .82rem;
	color: rgba(246, 242, 234, .5);
}

/* ------------------------------------------------------- the demo panel */

.hz-live__demo {
	perspective: 1400px;
}

.hz-demo {
	border: 1px solid var(--hz-line-light);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(246, 242, 234, .085), rgba(246, 242, 234, .035));
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65);
	padding: clamp(.9rem, 2vw, 1.3rem);
	display: grid;
	gap: .9rem;
	/* the tilt is a desktop flourish; on a phone the panel fills the column and
	   a rotation just skews the verse */
	transform: none;
	transition: transform .7s var(--hz-ease);
}

@media (min-width: 960px) {
	.hz-demo {
		transform: rotateY(2.5deg) rotateX(1.5deg);
	}
}

@media (min-width: 960px) {
	.hz-live__demo:hover .hz-demo {
		transform: rotateY(0) rotateX(0) translateY(-4px);
	}
}

.hz-demo__bar {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--hz-line-light);
}

.hz-demo__live {
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	padding: .22rem .6rem;
	border-radius: 999px;
	background: rgba(214, 90, 70, .18);
	border: 1px solid rgba(224, 122, 100, .55);
	color: #f0b09c;
	font-size: .72rem;
	letter-spacing: .04em;
}

.hz-demo__live i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e07a64;
	animation: hz-live-pulse 1.8s ease-in-out infinite;
}

@keyframes hz-live-pulse {
	0%, 100% { opacity: 1;  transform: scale(1); }
	50%      { opacity: .35; transform: scale(.78); }
}

.hz-demo__name {
	font-size: .82rem;
	color: rgba(246, 242, 234, .75);
}

.hz-demo__cams {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .78rem;
	color: rgba(246, 242, 234, .6);
}

.hz-demo__cams svg {
	width: 1rem;
	height: 1rem;
}

/* three camera tiles — the video half of the promise, in one glance */
.hz-demo__cams-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
}

.hz-demo__cam {
	aspect-ratio: 4 / 3;
	border-radius: 9px;
	border: 1px solid var(--hz-line-light);
	background:
		radial-gradient(circle at 50% 38%, rgba(246, 242, 234, .30) 0 17%, rgba(246, 242, 234, 0) 18%),
		radial-gradient(ellipse at 50% 108%, rgba(246, 242, 234, .26) 0 34%, rgba(246, 242, 234, 0) 35%),
		rgba(9, 26, 20, .55);
}

.hz-demo__cam--2 { background-color: rgba(12, 34, 26, .55); }
.hz-demo__cam--3 { background-color: rgba(7, 22, 17, .55); }

.hz-demo__chain {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.hz-demo__move {
	padding: .7rem .85rem;
	border: 1px solid var(--hz-line-light);
	border-radius: 11px;
	background: rgba(246, 242, 234, .04);
	animation: hz-demo-in .7s var(--hz-ease) both;
	animation-delay: calc(var(--i) * 180ms + 250ms);
}

.hz-demo__move:last-child {
	border-color: rgba(180, 134, 47, .5);
	background: rgba(180, 134, 47, .1);
}

@keyframes hz-demo-in {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: none; }
}

.hz-demo__beyt {
	margin: 0;
	font-family: var(--hz-verse);
	font-size: clamp(.98rem, 1.7vw, 1.12rem);
	line-height: 1.85;
	color: var(--hz-paper);
}

.hz-demo__poet {
	display: block;
	margin-top: .3rem;
	font-size: .72rem;
	color: rgba(246, 242, 234, .5);
}

.hz-demo__turn {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding-top: .8rem;
	border-top: 1px solid var(--hz-line-light);
}

.hz-demo__turnlabel {
	font-size: .76rem;
	color: rgba(246, 242, 234, .55);
}

.hz-demo__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	height: 2.1rem;
	padding: 0 .5rem;
	border-radius: 8px;
	background: var(--hz-ochre);
	color: #1c1405;
	font-family: var(--hz-display);
	font-size: 1.15rem;
	line-height: 1;
}

.hz-demo__field {
	flex: 1 1 6rem;
	min-width: 0;
	padding: .5rem .7rem;
	border: 1px dashed var(--hz-line-light);
	border-radius: 8px;
	font-size: .8rem;
	color: rgba(246, 242, 234, .38);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ------------------------------------------------------- the workshops */

.hz-live__shop {
	position: relative;
	z-index: 2;
	max-width: var(--hz-max);
	margin: clamp(2.6rem, 6vw, 4.5rem) auto 0;
}

.hz-live__shead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: clamp(.9rem, 2vw, 1.3rem);
	border-bottom: 1px solid var(--hz-line-light);
}

.hz-live__shead h3 {
	margin: 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.3rem, 3.4vw, 2rem);
	color: var(--hz-paper);
}

.hz-live__shead .hz-link {
	color: var(--hz-paper);
}

.hz-live__grid {
	list-style: none;
	margin: clamp(1.1rem, 2.6vw, 1.7rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(.8rem, 1.8vw, 1.2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}

.hz-lcard a {
	display: grid;
	gap: .55rem;
	align-content: start;
	height: 100%;
	padding: clamp(1rem, 2.2vw, 1.4rem);
	border: 1px solid var(--hz-line-light);
	border-radius: 14px;
	background: rgba(246, 242, 234, .045);
	color: var(--hz-paper);
	transition: transform .4s var(--hz-ease), border-color .4s var(--hz-ease), background-color .4s var(--hz-ease);
}

.hz-lcard a:hover {
	transform: translateY(-4px);
	border-color: rgba(180, 134, 47, .6);
	background: rgba(246, 242, 234, .075);
}

.hz-lcard__flag {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	justify-self: start;
	padding: .2rem .55rem;
	border-radius: 999px;
	border: 1px solid rgba(224, 122, 100, .5);
	background: rgba(214, 90, 70, .15);
	color: #f0b09c;
	font-size: .68rem;
}

.hz-lcard__flag i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #e07a64;
	animation: hz-live-pulse 1.8s ease-in-out infinite;
}

.hz-lcard__title {
	margin: 0;
	font-family: var(--hz-display);
	font-weight: 400;
	font-size: clamp(1.15rem, 2.6vw, 1.45rem);
	line-height: 1.5;
	color: var(--hz-paper);
}

.hz-lcard__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: .78rem;
	color: rgba(246, 242, 234, .55);
}

.hz-lcard__facts li + li::before {
	content: "·";
	margin-inline-end: .5rem;
}

.hz-lcard__foot {
	margin-top: .35rem;
	padding-top: .7rem;
	border-top: 1px solid var(--hz-line-light);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}

/* .hz-price sets `color: var(--hz-forest)` for light grounds; this card is dark */
.hz-lcard .hz-price {
	color: rgba(246, 242, 234, .7);
}

/* No display face here. MaktabRita is a hairline — elegant at heading sizes,
   but at 19px on a dark ground the digits of a price all but vanish. The rest
   of the site prices in the UI face for exactly this reason. */
.hz-lcard .hz-price b {
	font-size: 1.32em;
	font-weight: 700;
	color: #e5c07a;
}

.hz-lcard .hz-price i,
.hz-lcard .hz-price del {
	font-style: normal;
	font-size: .76rem;
	color: rgba(246, 242, 234, .5);
}

.hz-lcard__go {
	font-size: .8rem;
	color: rgba(246, 242, 234, .72);
}

/* ------------------------------------------------------------- the tally */

.hz-live__facts {
	position: relative;
	z-index: 2;
	max-width: var(--hz-max);
	margin: clamp(2.2rem, 5vw, 3.6rem) auto 0;
	padding-top: clamp(1.2rem, 2.6vw, 1.8rem);
	border-top: 1px solid var(--hz-line-light);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.6rem, 6vw, 4.5rem);
}

/* The shared .hz-fact__n is set in the display face, whose numerals are
   hairlines — fine as a flourish in the hero, too faint for figures that are
   meant to be read as proof. Same call as the price: UI face, real weight. */
.hz-live__facts .hz-fact__n {
	font-family: var(--hz-ui);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 700;
	color: var(--hz-paper);
}

.hz-live__facts .hz-fact__l {
	color: rgba(246, 242, 234, .55);
}

@media (prefers-reduced-motion: reduce) {
	.hz-demo,
	.hz-demo__move,
	.hz-demo__live i,
	.hz-lcard__flag i {
		animation: none;
		transition: none;
		transform: none;
	}
}