/* ==========================================================================
   HERBARIUM
   A light, type-led treatment for a strain reference. Loaded only when the site
   sets data-palette="herbarium".

   The directory theme opens with a dark hero and a quote form, which is right
   for a site selling a callback and wrong for a site that is 297 reference
   pages. Here the index is the hero: the names are the subject's own
   vernacular, and putting them on the page is more useful and more
   characteristic than any headline about distribution.

   Colour is information. Each of the three types carries its own hue, used on
   the index, the page rule, and the category word. Nothing else is coloured.
   ========================================================================== */

body[data-family="reference"] {
	--hb-paper: #e4e7e1;
	--hb-paper-2: #edefe9;
	--hb-ink: #191c18;
	--hb-ink-2: #4a4f47;
	--hb-ink-3: #767c72;
	--hb-rule: #c8ccc2;

	--hb-indica: #5b3a8c;
	--hb-sativa: #c25e00;
	--hb-hybrid: #1f6f5c;
	--hb-type: var(--hb-ink);

	--hb-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--hb-narrow: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;

	background: var(--hb-paper);
	color: var(--hb-ink);
	font-family: var(--hb-serif);
	font-size: 1.125rem;
	line-height: 1.62;
}

body[data-family="reference"].dp-type-indica { --hb-type: var(--hb-indica); }
body[data-family="reference"].dp-type-sativa { --hb-type: var(--hb-sativa); }
body[data-family="reference"].dp-type-hybrid { --hb-type: var(--hb-hybrid); }

/* --- Chrome from the directory theme that does not belong here ----------- */

body[data-family="reference"] .dp-hero,
body[data-family="reference"] .dp-steps,
body[data-family="reference"] .dp-sticky,
body[data-family="reference"] .dp-quote,
body[data-family="reference"] .dp-cta-band,
body[data-family="reference"] .dp-related,
body[data-family="reference"] .dp-motif {
	display: none;
}

body[data-family="reference"] .dp-header {
	background: transparent;
	border-bottom: 1px solid var(--hb-rule);
}

body[data-family="reference"] .dp-brand__mark {
	background: var(--hb-ink);
	border-radius: 0;
	font-family: var(--hb-narrow);
}

body[data-family="reference"] .dp-brand__name,
body[data-family="reference"] .dp-nav a,
body[data-family="reference"] .dp-brand__tag {
	font-family: var(--hb-narrow);
	color: var(--hb-ink);
}

body[data-family="reference"] .dp-brand__tag {
	color: var(--hb-ink-3);
}

body[data-family="reference"] .dp-footer {
	background: transparent;
	border-top: 1px solid var(--hb-rule);
	color: var(--hb-ink-2);
	margin-top: 96px;
}

body[data-family="reference"] .dp-footer h2,
body[data-family="reference"] .dp-footer a,
body[data-family="reference"] .dp-footer p {
	font-family: var(--hb-narrow);
	color: var(--hb-ink-2);
}

body[data-family="reference"] .dp-footer a:hover {
	color: var(--hb-ink);
}

/* --- The index ----------------------------------------------------------- */

.hb-masthead {
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 24px 0;
}

.hb-masthead h1 {
	font-family: var(--hb-serif);
	font-size: clamp(2.6rem, 7vw, 5.2rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 16ch;
	text-wrap: balance;
}

.hb-masthead p {
	font-family: var(--hb-serif);
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--hb-ink-2);
	max-width: 52ch;
	margin: 20px 0 0;
}

.hb-filters {
	max-width: 1240px;
	margin: 40px auto 0;
	padding: 0 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	border-bottom: 1px solid var(--hb-rule);
	padding-bottom: 14px;
}

.hb-filter {
	font-family: var(--hb-narrow);
	font-size: 1rem;
	letter-spacing: 0.01em;
	color: var(--hb-ink-2);
	text-decoration: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.hb-filter b {
	font-weight: 400;
	color: var(--hb-ink-3);
	font-variant-numeric: tabular-nums;
	margin-left: 6px;
}

.hb-filter[aria-pressed="true"] {
	color: var(--hb-ink);
	border-bottom-color: currentColor;
}

.hb-filter[data-type="indica"][aria-pressed="true"] { color: var(--hb-indica); }
.hb-filter[data-type="sativa"][aria-pressed="true"] { color: var(--hb-sativa); }
.hb-filter[data-type="hybrid"][aria-pressed="true"] { color: var(--hb-hybrid); }

.hb-index {
	max-width: 1240px;
	margin: 0 auto;
	padding: 36px 24px 80px;
}

.hb-letter {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--hb-rule);
}

.hb-letter__mark {
	font-family: var(--hb-serif);
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1;
	color: var(--hb-ink-3);
	position: sticky;
	top: 16px;
	align-self: start;
}

.hb-letter__names {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 32px;
}

@media (min-width: 700px) {
	.hb-letter__names { columns: 3; }
}

@media (min-width: 1000px) {
	.hb-letter__names { columns: 4; }
}

.hb-letter__names li {
	break-inside: avoid;
	margin: 0 0 6px;
}

.hb-name {
	font-family: var(--hb-narrow);
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--hb-ink);
	text-decoration: none;
	display: inline-block;
	border-bottom: 1px solid transparent;
}

.hb-name::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 9px;
	vertical-align: 2px;
	background: var(--hb-ink-3);
}

.hb-name[data-type="indica"]::before { background: var(--hb-indica); }
.hb-name[data-type="sativa"]::before { background: var(--hb-sativa); }
.hb-name[data-type="hybrid"]::before { background: var(--hb-hybrid); }

.hb-name:hover {
	border-bottom-color: currentColor;
	color: var(--hb-ink);
}

.hb-name.is-hidden { display: none; }

.hb-letter.is-empty { display: none; }

/* --- A strain page ------------------------------------------------------- */

.hb-specimen {
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 24px 0;
}

.hb-specimen__type {
	font-family: var(--hb-narrow);
	font-size: 1rem;
	color: var(--hb-type);
	margin: 0 0 10px;
}

.hb-specimen h1 {
	font-family: var(--hb-serif);
	font-size: clamp(2.6rem, 8vw, 5.6rem);
	font-weight: 500;
	line-height: 0.96;
	letter-spacing: -0.03em;
	margin: 0;
	max-width: 14ch;
}

.hb-specimen__rule {
	height: 4px;
	background: var(--hb-type);
	margin: 28px 0 0;
	max-width: 160px;
}

.hb-contents {
	max-width: 1240px;
	margin: 32px auto 0;
	padding: 0 24px;
}

/* The contents sit on one line where they fit and stack cleanly where they do
   not, rather than wrapping into ragged rows. */
.hb-contents ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px 32px;
	grid-template-columns: repeat(auto-fit, minmax(190px, max-content));
}

.hb-contents a {
	font-family: var(--hb-narrow);
	font-size: 0.9375rem;
	color: var(--hb-ink-2);
	text-decoration: none;
	border-bottom: 1px solid var(--hb-rule);
}

.hb-contents a:hover {
	color: var(--hb-ink);
	border-bottom-color: var(--hb-type);
}

body[data-family="reference"] .dp-main {
	padding-block: 40px 0;
}

body[data-family="reference"] .dp-prose {
	max-width: 66ch;
	margin-inline: 0;
}

body[data-family="reference"] .dp-prose p,
body[data-family="reference"] .entry-content p {
	font-family: var(--hb-serif);
	font-size: 1.1875rem;
	line-height: 1.68;
	color: var(--hb-ink);
	margin: 0 0 1.15em;
}

body[data-family="reference"] .dp-prose h2,
body[data-family="reference"] .entry-content h2 {
	font-family: var(--hb-serif);
	font-size: 1.9rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--hb-ink);
	margin: 2.2em 0 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid var(--hb-rule);
	max-width: 26ch;
}

body[data-family="reference"] .dp-prose h3,
body[data-family="reference"] .entry-content h3 {
	font-family: var(--hb-narrow);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--hb-ink-2);
	margin: 1.8em 0 0.4em;
}

body[data-family="reference"] .dp-crumbs,
body[data-family="reference"] .dp-crumbs a {
	font-family: var(--hb-narrow);
	color: var(--hb-ink-3);
}

body[data-family="reference"] .dp-silo-index a {
	font-family: var(--hb-narrow);
	background: transparent;
	border: 1px solid var(--hb-rule);
	border-left: 3px solid var(--hb-type);
	border-radius: 0;
	color: var(--hb-ink);
}

body[data-family="reference"] .dp-silo-index a:hover {
	background: var(--hb-paper-2);
}

body[data-family="reference"] .dp-silo-index h2 {
	font-family: var(--hb-serif);
	font-weight: 500;
	border-top: 1px solid var(--hb-rule);
	padding-top: 0.5em;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* --- The home page sections ---------------------------------------------- */
/* One rhythm for all four: a serif heading over a hairline rule, then content
   in Archivo Narrow. Same grid as .hb-letter so the page reads as one system. */

.hb-section {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.hb-section > h2 {
	font-family: var(--hb-serif);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--hb-ink);
	margin: 64px 0 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hb-rule);
}

/* Three types ------------------------------------------------------------- */

.hb-types__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.hb-types__list > li {
	--hb-row: var(--hb-ink);
	padding: 26px 0;
	border-bottom: 1px solid var(--hb-rule);
	display: grid;
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	gap: 8px 40px;
	align-items: baseline;
}

.hb-types__list > li[data-type="indica"] { --hb-row: var(--hb-indica); }
.hb-types__list > li[data-type="sativa"] { --hb-row: var(--hb-sativa); }
.hb-types__list > li[data-type="hybrid"] { --hb-row: var(--hb-hybrid); }

.hb-types__list a {
	text-decoration: none;
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}

.hb-types__name {
	font-family: var(--hb-serif);
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--hb-row);
	border-bottom: 2px solid transparent;
}

.hb-types__list a:hover .hb-types__name { border-bottom-color: currentColor; }

.hb-types__count {
	font-family: var(--hb-narrow);
	font-size: 1rem;
	color: var(--hb-ink-3);
	font-variant-numeric: tabular-nums;
}

.hb-types__list p {
	font-family: var(--hb-serif);
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--hb-ink-2);
	margin: 0;
	max-width: 54ch;
}

/* The range --------------------------------------------------------------- */

.hb-products__list {
	list-style: none;
	margin: 0;
	padding: 26px 0 0;
	columns: 2;
	column-gap: 44px;
}

@media (min-width: 900px) {
	.hb-products__list { columns: 3; }
}

.hb-products__list > li {
	break-inside: avoid;
	margin: 0 0 22px;
}

.hb-products__name {
	font-family: var(--hb-serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--hb-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.hb-products__name:hover { border-bottom-color: var(--hb-hybrid); }

.hb-products__list ul {
	list-style: none;
	margin: 6px 0 0;
	padding: 0 0 0 14px;
	border-left: 1px solid var(--hb-rule);
}

.hb-products__list ul li { margin: 0 0 3px; }

.hb-products__list ul a {
	font-family: var(--hb-narrow);
	font-size: 1rem;
	color: var(--hb-ink-2);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.hb-products__list ul a:hover {
	color: var(--hb-ink);
	border-bottom-color: currentColor;
}

/* The buyer guide --------------------------------------------------------- */

.hb-guide {
	margin-top: 72px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	background: var(--hb-paper-2);
	border-top: 3px solid var(--hb-hybrid);
	padding: 36px 24px 40px;
	max-width: 1192px;
}

@media (min-width: 860px) {
	.hb-guide {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 56px;
		align-items: start;
		padding: 44px 40px 48px;
	}
}

.hb-guide > h2 { display: none; }

.hb-guide__copy h2 {
	font-family: var(--hb-serif);
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--hb-ink);
	margin: 0;
	max-width: 16ch;
}

.hb-guide__copy p {
	font-family: var(--hb-serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--hb-ink-2);
	margin: 14px 0 0;
	max-width: 46ch;
}

body[data-family="reference"] .hb-guide__form label,
body[data-family="reference"] .hb-guide__form .ff-el-input--label label {
	font-family: var(--hb-narrow);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--hb-ink-2);
}

body[data-family="reference"] .hb-guide__form input[type="text"],
body[data-family="reference"] .hb-guide__form input[type="email"],
body[data-family="reference"] .hb-guide__form input[type="tel"],
body[data-family="reference"] .hb-guide__form select,
body[data-family="reference"] .hb-guide__form textarea {
	font-family: var(--hb-narrow);
	font-size: 1rem;
	width: 100%;
	background: var(--hb-paper);
	border: 1px solid var(--hb-rule);
	border-radius: 0;
	color: var(--hb-ink);
	padding: 10px 12px;
	box-shadow: none;
}

body[data-family="reference"] .hb-guide__form input:focus,
body[data-family="reference"] .hb-guide__form select:focus,
body[data-family="reference"] .hb-guide__form textarea:focus {
	outline: 2px solid var(--hb-hybrid);
	outline-offset: 1px;
	border-color: var(--hb-hybrid);
}

body[data-family="reference"] .hb-guide__form button,
body[data-family="reference"] .hb-guide__form input[type="submit"] {
	font-family: var(--hb-narrow);
	font-size: 1rem;
	background: var(--hb-ink);
	color: var(--hb-paper);
	border: 0;
	border-radius: 0;
	padding: 12px 26px;
	cursor: pointer;
}

body[data-family="reference"] .hb-guide__form button:hover,
body[data-family="reference"] .hb-guide__form input[type="submit"]:hover {
	background: var(--hb-hybrid);
}

/* The index, now a section rather than the whole page --------------------- */

.hb-index-section > h2 { margin-bottom: 0; border-bottom: 0; }

body[data-family="reference"] .hb-filters { margin-top: 14px; }