/* ===========================================================================
   House of Samida — 0.8.0
   Tokens first, then chrome, then content, then WooCommerce. One stylesheet so
   there is one cascade to reason about and one request to make.

   0.7.0 implements DESIGN.md: one type system across both registers (DS1), a
   named night token set (DS2), the accessibility fix to --hos-muted (DS3), one
   shared rail (DS5), the single-product archive state (DS9), the mobile product
   page (DS10-DS12), the purchase path (DS13), page blocks (DS14), the material
   archive (DS15) and the header (DS16). The parallax Threshold is gone.
   ========================================================================= */

:root {
	/* Ground: a paper neutral biased green, not cream. */
	--hos-paper:        #EFF1EB;
	--hos-paper-2:      #F7F8F4;
	--hos-raise:        #FFFFFF;

	/* Ink: deep forest, never pure black. */
	--hos-ink:          #141A14;
	--hos-ink-2:        #3C453A;

	/* DS3. Was #6B7567, which measured 4.23:1 on paper and failed AA on the
	   card proposition, the meta lines and the out-of-stock flag. 4.99:1. */
	--hos-muted:        #5F6A5B;

	/* Leaf carries interaction. Resin carries money and provenance. */
	--hos-leaf:         #2B5636;
	--hos-leaf-deep:    #1B3A23;
	--hos-leaf-soft:    #DFE7DC;
	--hos-resin:        #8C5310;
	--hos-resin-soft:   #F1E5D3;

	--hos-rule:         #D4D9CC;
	--hos-rule-soft:    #E3E7DC;

	/* DS2 — the night register. These are journey.css's own values, named, so
	   the Journey and any later full-bleed chapter change in one place. */
	--hos-night:        #142722;
	--hos-night-2:      #10201B;
	--hos-night-ink:    #FAF9DD;
	--hos-night-ink-2:  #D0D3BF;
	--hos-night-muted:  #9FAF9F;
	--hos-night-leaf:   #C3CDAE;
	--hos-night-resin:  #E2D3A0;
	--hos-night-rule:   rgba(161, 172, 144, 0.33);

	/* DS1 — one type system. The Journey uses these too. */
	--hos-display:      "Petrona", Georgia, "Times New Roman", serif;
	--hos-ui:           "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

	--hos-step--1:      0.8125rem;
	--hos-step-0:       1rem;
	--hos-step-1:       1.1875rem;
	--hos-step-2:       clamp(1.35rem, 2.4vw, 1.6rem);
	--hos-step-3:       clamp(1.7rem, 3.6vw, 2.35rem);
	--hos-step-4:       clamp(2.2rem, 6vw, 3.6rem);
	--hos-step-5:       clamp(3.2rem, 8vw, 5.5rem);
	--hos-step-6:       clamp(4rem, 11vw, 7.5rem);

	/* DS5 — one rail. The site header, the Journey chrome and every content
	   band resolve to the same box, so the brand mark never jumps. */
	--hos-gutter:       clamp(18px, 5vw, 48px);
	--hos-measure:      66ch;
	--hos-max:          1240px;

	/* 4px scale. Nothing outside it. */
	--hos-1:  4px;
	--hos-2:  8px;
	--hos-3:  12px;
	--hos-4:  16px;
	--hos-6:  24px;
	--hos-8:  32px;
	--hos-12: 48px;
	--hos-16: 64px;
	--hos-24: 96px;
	--hos-32: 128px;

	--hos-radius:       2px;
	--hos-radius-pill:  100px;   /* night register only — DS4 */
	--hos-shadow:       0 1px 2px rgba(20, 26, 20, 0.07);

	--hos-header-h:     64px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--hos-paper);
	color: var(--hos-ink);
	font-family: var(--hos-ui);
	font-size: var(--hos-step-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--hos-leaf); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--hos-resin);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--hos-display);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
	letter-spacing: -0.01em;
}

p { margin: 0; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.hos-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--hos-ink); color: var(--hos-paper); padding: 10px 16px;
}
.hos-skip:focus { left: 0; }

.hos-anchor { display: block; height: 1px; }

.hos-rail {
	max-width: var(--hos-max);
	margin-inline: auto;
	padding-inline: var(--hos-gutter);
}

.hos-eyebrow {
	font-family: var(--hos-ui);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--hos-resin);
	margin: 0;
}

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

.hos-header {
	position: sticky; top: 0; z-index: 100;
	background: color-mix(in srgb, var(--hos-paper) 92%, transparent);
	backdrop-filter: saturate(1.2) blur(8px);
	border-bottom: 1px solid var(--hos-rule);
}

.hos-header__inner {
	max-width: var(--hos-max);
	margin: 0 auto;
	padding-inline: var(--hos-gutter);
	padding-block: var(--hos-3);
	display: flex;
	align-items: center;
	gap: var(--hos-6);
}

.hos-wordmark {
	display: flex; align-items: center; line-height: 1;
	text-decoration: none; color: var(--hos-ink);
}
.hos-mark { width: 40px; height: 40px; flex: none; display: block; color: var(--hos-leaf-deep); }
.custom-logo-link { display: block; text-decoration: none; }
.custom-logo { display: block; width: auto; height: auto; max-height: 44px; }

.hos-nav { flex: 1; min-width: 0; }
.hos-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: var(--hos-6); align-items: center; justify-content: flex-end;
}
.hos-nav__list a {
	color: var(--hos-ink); text-decoration: none;
	font-size: 0.9375rem; font-weight: 500;
	padding-block: 6px;
	border-bottom: 1px solid transparent;
}
.hos-nav__list a:hover,
.hos-nav__list .current-menu-item > a,
.hos-nav__list .current_page_parent > a { border-bottom-color: var(--hos-leaf); }

.hos-header__utils { display: flex; align-items: center; gap: var(--hos-2); margin-inline-start: auto; }

/* DS16 — a drawn cart, not a bullet glyph; a count that is silent at zero. */
.hos-cart {
	display: inline-flex; align-items: center; gap: 6px;
	text-decoration: none; color: var(--hos-ink);
	min-height: 44px; min-width: 44px; justify-content: center;
}
.hos-cart__icon { width: 21px; height: 21px; color: var(--hos-leaf); display: block; }
.hos-cart__count {
	font-size: 0.75rem; font-weight: 600;
	min-width: 20px; height: 20px; border-radius: 10px;
	display: none; align-items: center; justify-content: center;
	padding-inline: 6px;
	background: var(--hos-leaf); color: var(--hos-paper);
	font-variant-numeric: tabular-nums;
}
.hos-cart__count.is-filled { display: inline-flex; }

.hos-burger { display: none; }
	.hos-burger__bar,
	.hos-burger__bar::before,
	.hos-burger__bar::after {
		content: ""; display: block; width: 18px; height: 1.5px;
		background: var(--hos-ink); position: relative;
	}
	.hos-burger__bar::before { position: absolute; top: -5px; }
	.hos-burger__bar::after { position: absolute; top: 5px; }

/* DS19 + DS20 subset: state and scroll lock; the menu remains in its header. */
.hos-burger__bar::before, .hos-burger__bar::after { transition: transform 180ms ease; }
.hos-nav-open .hos-burger__bar { background: transparent; }
.hos-nav-open .hos-burger__bar::before { transform: translateY(5px) rotate(45deg); }
.hos-nav-open .hos-burger__bar::after { transform: translateY(-5px) rotate(-45deg); }
html.hos-nav-lock, body.hos-nav-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.hos-burger__bar::before, .hos-burger__bar::after { transition: none; }
}


@media (max-width: 899px) {
	.hos-burger {
		display: inline-flex; align-items: center; justify-content: center;

		width: 44px; height: 44px; padding: 0;
		background: none; border: 1px solid var(--hos-rule); border-radius: var(--hos-radius);
		cursor: pointer;
	}

	.hos-header__inner { flex-wrap: wrap; }
	.hos-header__utils { order: 2; }

	.hos-nav {
		order: 4; flex: 0 0 100%; margin: 0;
		display: none;
		border-top: 1px solid var(--hos-rule);
		padding-top: var(--hos-3); margin-top: var(--hos-3);
	}
	.hos-nav-open .hos-nav { display: block; }
	.hos-nav__list { flex-direction: column; align-items: flex-start; gap: 2px; }
	.hos-nav__list a { display: block; padding-block: var(--hos-3); font-size: 1.0625rem; }
}

/* ---- generic page ------------------------------------------------------ */

.site-main { min-height: 50vh; }

.hos-flow {
	max-width: var(--hos-max);
	margin: 0 auto;
	padding-inline: var(--hos-gutter);
	padding-block: var(--hos-12) var(--hos-24);
}

.hos-pagehead { margin-bottom: var(--hos-8); padding-bottom: var(--hos-4); border-bottom: 1px solid var(--hos-rule); }
.hos-pagehead__title { font-size: var(--hos-step-3); }
.hos-botanical { color: var(--hos-muted); font-family: var(--hos-display); font-size: var(--hos-step-1); margin-top: 6px; }
.hos-pagehead__meta { font-size: var(--hos-step--1); color: var(--hos-muted); margin-top: 6px; }

.hos-prose { max-width: var(--hos-measure); display: flex; flex-direction: column; gap: 1.1em; color: var(--hos-ink-2); }
.hos-prose h2 { font-size: var(--hos-step-2); margin-top: 0.6em; color: var(--hos-ink); }
.hos-prose h3 { font-size: var(--hos-step-1); color: var(--hos-ink); }
.hos-prose ul, .hos-prose ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 0.4em; }
.hos-prose blockquote {
	margin: var(--hos-2) 0; padding-left: var(--hos-6);
	border-left: 2px solid var(--hos-leaf);
	font-family: var(--hos-display); font-size: var(--hos-step-2); line-height: 1.35;
	color: var(--hos-ink); max-width: 40ch;
}
.hos-prose blockquote cite { display: block; margin-top: var(--hos-3); font-family: var(--hos-ui); font-size: var(--hos-step--1); font-style: normal; color: var(--hos-muted); }

/* DS14 — page blocks. Editor-native classes, no builder. */
.hos-prose > p:first-of-type,
.hos-lead {
	font-family: var(--hos-display);
	font-size: var(--hos-step-2);
	line-height: 1.45;
	color: var(--hos-ink);
}
.hos-page--plain .hos-prose > p:first-of-type { font-family: var(--hos-ui); font-size: var(--hos-step-0); line-height: 1.6; color: var(--hos-ink-2); }

.hos-figure { margin: var(--hos-8) 0; }
.hos-figure figcaption,
.hos-prose figcaption { font-size: var(--hos-step--1); color: var(--hos-muted); margin-top: var(--hos-2); }
.hos-prose .alignfull,
.hos-prose .alignwide {
	max-width: none;
	width: min(100%, var(--hos-max));
	margin-inline: calc(50% - 50vw + var(--hos-gutter));
	width: calc(100vw - (var(--hos-gutter) * 2));
	max-width: var(--hos-max);
}

.hos-datatable { margin-top: var(--hos-12); border-top: 1px solid var(--hos-ink); }
.hos-datatable dl { margin: 0; display: grid; grid-template-columns: minmax(140px, 220px) 1fr; }
.hos-datatable dt {
	padding: var(--hos-3) var(--hos-4) var(--hos-3) 0; border-bottom: 1px solid var(--hos-rule-soft);
	font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--hos-muted); font-weight: 600;
}
.hos-datatable dd {
	margin: 0; padding: var(--hos-3) 0; border-bottom: 1px solid var(--hos-rule-soft);
	color: var(--hos-ink-2);
}

/* Closing band — every brand page ends with a way onward. */
.hos-onward {
	margin-top: var(--hos-24);
	border-top: 1px solid var(--hos-ink);
	padding-top: var(--hos-6);
	display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--hos-4) var(--hos-8);
}
.hos-onward__title { font-size: var(--hos-step-2); margin-right: auto; }
.hos-onward__links { display: flex; flex-wrap: wrap; gap: var(--hos-3); }

/* ---- articles ---------------------------------------------------------- */

.hos-list { display: flex; flex-direction: column; gap: var(--hos-8); max-width: var(--hos-measure); }
.hos-list__item { padding-bottom: var(--hos-8); border-bottom: 1px solid var(--hos-rule-soft); }
.hos-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.hos-list__title { font-size: var(--hos-step-2); }
.hos-list__title a { color: inherit; text-decoration: none; }
.hos-list__title a:hover { color: var(--hos-leaf); }
.hos-list__meta { font-size: var(--hos-step--1); color: var(--hos-muted); margin-top: 4px; }
.hos-list__excerpt { margin-top: var(--hos-3); color: var(--hos-ink-2); }
.hos-list__excerpt p { margin: 0; }
.hos-list__media { margin-bottom: var(--hos-4); }
.hos-list__media img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.hos-list__more { display: inline-block; margin-top: var(--hos-3); font-weight: 600; font-size: var(--hos-step--1); }

.hos-article { max-width: var(--hos-measure); }
.hos-article__foot {
	margin-top: var(--hos-16); padding-top: var(--hos-6);
	border-top: 1px solid var(--hos-rule);
	display: flex; flex-wrap: wrap; gap: var(--hos-4) var(--hos-8);
	font-size: var(--hos-step--1); color: var(--hos-muted);
}

.hos-pagination { margin-top: var(--hos-16); }
.hos-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--hos-2); }
.hos-pagination .page-numbers {
	min-width: 44px; min-height: 44px; display: grid; place-items: center;
	border: 1px solid var(--hos-rule); background: var(--hos-paper-2);
	color: var(--hos-leaf); text-decoration: none; padding-inline: var(--hos-2);
}
.hos-pagination .page-numbers.current,
.hos-pagination a.page-numbers:hover { background: var(--hos-leaf); color: var(--hos-paper); border-color: var(--hos-leaf); }

/* ---- material archive — DS15 ------------------------------------------- */

.hos-materials-grid {
	list-style: none; margin: var(--hos-8) 0 0; padding: 0;
	display: grid; gap: var(--hos-6);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.hos-materials-grid li { margin: 0; }
.hos-materials-grid a {
	display: flex; flex-direction: column; gap: var(--hos-2);
	border: 1px solid var(--hos-rule); border-radius: var(--hos-radius);
	background: var(--hos-paper-2); padding: var(--hos-4);
	text-decoration: none; min-height: 100%;
}
.hos-materials-grid a:hover { border-color: var(--hos-leaf); }
.hos-materials-grid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: var(--hos-2); }
.hos-materials-grid__name { font-family: var(--hos-ui); font-weight: 600; color: var(--hos-ink); }
.hos-materials-grid__botanical { font-family: var(--hos-display); font-style: italic; color: var(--hos-muted); font-size: var(--hos-step--1); }

.hos-empty { max-width: var(--hos-measure); display: flex; flex-direction: column; gap: var(--hos-4); align-items: flex-start; }

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

.hos-button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px;
	background: var(--hos-leaf); color: var(--hos-paper);
	padding: var(--hos-3) 26px; border-radius: var(--hos-radius);
	font-weight: 600; font-size: 0.9375rem; text-decoration: none;
	border: 1px solid var(--hos-leaf);
	transition: background 0.15s ease;
}
.hos-button:hover { background: var(--hos-leaf-deep); border-color: var(--hos-leaf-deep); color: var(--hos-paper); }
.hos-button--ghost { background: transparent; color: var(--hos-leaf); }
.hos-button--ghost:hover { background: var(--hos-leaf-soft); color: var(--hos-leaf-deep); }

/* ---- homepage fallback (paper register) — DS7 -------------------------- */
/* front-page.php renders only when the front page has no template assigned.
   At launch the Journey is the homepage; this is the recovery path. */

.hos-hero {
	background: var(--hos-leaf-deep); color: var(--hos-paper);
	padding-block: var(--hos-32) var(--hos-24);
}
.hos-hero__inner { max-width: var(--hos-max); margin-inline: auto; padding-inline: var(--hos-gutter); max-width: min(var(--hos-max), 100%); }
.hos-hero__title { font-size: var(--hos-step-4); color: var(--hos-paper); max-width: 16ch; }
.hos-hero__line { font-family: var(--hos-display); font-style: italic; font-size: var(--hos-step-2); line-height: 1.45; margin-top: var(--hos-6); max-width: 46ch; color: color-mix(in srgb, var(--hos-paper) 88%, transparent); }
.hos-hero__actions { display: flex; flex-wrap: wrap; gap: var(--hos-3); margin-top: var(--hos-8); }
.hos-hero .hos-button { background: var(--hos-paper); color: var(--hos-leaf-deep); border-color: var(--hos-paper); }
.hos-hero .hos-button:hover { background: #FFFFFF; color: var(--hos-leaf-deep); }
.hos-hero .hos-button--ghost { background: transparent; color: var(--hos-paper); border-color: rgba(239, 241, 235, 0.45); }
.hos-hero .hos-button--ghost:hover { background: rgba(239, 241, 235, 0.12); color: var(--hos-paper); }
.hos-hero .hos-eyebrow { color: var(--hos-resin-soft); margin-bottom: var(--hos-6); }

.hos-heroes, .hos-categories {
	max-width: var(--hos-max); margin: 0 auto;
	padding-inline: var(--hos-gutter); padding-block: var(--hos-24) 0;
}
.hos-categories { padding-block: var(--hos-24); }

.hos-sectionhead {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--hos-4); flex-wrap: wrap;
	padding-bottom: var(--hos-3); margin-bottom: var(--hos-8);
	border-bottom: 1px solid var(--hos-ink);
}
.hos-sectionhead h2 { font-size: var(--hos-step-3); }
.hos-sectionhead__eyebrow { color: var(--hos-resin); font-family: var(--hos-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--hos-3); }
.hos-sectionhead--display h2 { font-size: var(--hos-step-5); line-height: 1; letter-spacing: -.035em; }
.hos-sectionhead__link { font-size: 0.875rem; font-weight: 600; }

.hos-leuweung, .hos-echoes { padding-block: var(--hos-24); padding-inline: var(--hos-gutter); }
.hos-leuweung { background: var(--hos-leaf-soft); }
.hos-echoes { background: var(--hos-ink); color: var(--hos-paper); }
.hos-echoes h2 { color: var(--hos-paper); }
.hos-echoes .hos-prose { color: color-mix(in srgb, var(--hos-paper) 82%, transparent); }
.hos-echoes .hos-eyebrow { color: var(--hos-resin-soft); }

.hos-leuweung__inner, .hos-echoes__inner {
	max-width: var(--hos-measure); margin: 0 auto;
	display: flex; flex-direction: column; gap: var(--hos-4); align-items: flex-start;
}
.hos-leuweung h2, .hos-echoes h2 { font-size: var(--hos-step-3); }
.hos-echoes__date {
	font-family: var(--hos-ui); font-weight: 600; letter-spacing: 0.06em;
	color: var(--hos-resin-soft); font-variant-numeric: tabular-nums;
}
.hos-echoes__actions { display: flex; flex-wrap: wrap; gap: var(--hos-3); margin-top: var(--hos-2); }
.hos-echoes .hos-button--ghost { color: var(--hos-paper); border-color: rgba(239, 241, 235, 0.4); }
.hos-echoes .hos-button--ghost:hover { background: rgba(239, 241, 235, 0.12); color: var(--hos-paper); }

/* ---- WooCommerce: shell ------------------------------------------------ */

.site-main--shop {
	max-width: var(--hos-max); margin: 0 auto;
	padding-inline: var(--hos-gutter); padding-block: var(--hos-12) var(--hos-24);
	overflow-wrap: anywhere;
}

.woocommerce .woocommerce-breadcrumb { font-size: 0.8125rem; color: var(--hos-muted); margin-bottom: var(--hos-6); }

.site-main--shop .hos-shop-heading {
	padding-block: var(--hos-3) var(--hos-8); margin-bottom: var(--hos-6);
	border-bottom: 1px solid var(--hos-ink);
}
.site-main--shop .woocommerce-products-header__title { font-size: var(--hos-step-4); }
.site-main--shop .term-description,
.site-main--shop .hos-shop-intro { max-width: var(--hos-measure); color: var(--hos-ink-2); margin-top: var(--hos-4); }
.site-main--shop .hos-shop-intro p + p { margin-top: 0.9em; }

.site-main--shop .hos-shop-tools {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--hos-4); margin-bottom: var(--hos-8);
}
.site-main--shop .hos-shop-tools:empty { display: none; }
.site-main--shop .hos-shop-tools > .woocommerce-notices-wrapper { flex-basis: 100%; }
.site-main--shop .hos-shop-tools > .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce .site-main--shop .woocommerce-result-count,
.woocommerce .site-main--shop .woocommerce-ordering { float: none; margin: 0; font-size: var(--hos-step--1); color: var(--hos-muted); }

.site-main--shop :is(select, input.input-text, input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], textarea) {
	max-width: 100%; min-height: 48px; padding: var(--hos-3);
	border: 1px solid var(--hos-rule); border-radius: var(--hos-radius);
	background: var(--hos-raise); color: var(--hos-ink);
	font-family: var(--hos-ui); font-size: var(--hos-step-0);
}

.woocommerce .site-main--shop :is(a.button, button.button, input.button, #respond input#submit) {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
	padding: var(--hos-3) var(--hos-6); border: 1px solid var(--hos-leaf); border-radius: var(--hos-radius);
	background: var(--hos-leaf); color: var(--hos-paper); box-shadow: none; text-shadow: none;
	font-family: var(--hos-ui); font-size: var(--hos-step-0); font-weight: 600; line-height: 1.4;
	text-align: center; text-decoration: none; white-space: normal; cursor: pointer;
}
.woocommerce .site-main--shop :is(a.button, button.button, input.button, #respond input#submit):hover {
	background: var(--hos-leaf-deep); border-color: var(--hos-leaf-deep); color: var(--hos-paper);
}
.woocommerce .site-main--shop :is(button.button:disabled, button.button.disabled) { opacity: .5; cursor: not-allowed; }
.woocommerce .site-main--shop a.added_to_cart { font-size: var(--hos-step--1); padding-block: var(--hos-2); }

.site-main--shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	background: var(--hos-paper-2); color: var(--hos-ink); border-top-color: var(--hos-leaf);
	border-radius: var(--hos-radius); font-size: var(--hos-step-0);
}
.site-main--shop .woocommerce-error { border-top-color: var(--hos-resin); }
.site-main--shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { color: var(--hos-leaf); }

/* ---- WooCommerce: product grid ---------------------------------------- */

.woocommerce ul.products {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--hos-12) var(--hos-6);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
/* WooCommerce's own `li.product { width: 30.75% }` ties on specificity, so the
   scope class has to stay or the card keeps a three-column width inside a
   one-column layout. */
.woocommerce .site-main--shop ul.products li.product,
.woocommerce .hos-shop--few ul.products li.product { float: none; width: auto; min-width: 0; margin: 0; }

.hos-card { display: flex; flex-direction: column; gap: var(--hos-2); margin: 0; width: auto; float: none; }
.hos-card__link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--hos-3); }
.hos-card__media {
	position: relative; background: var(--hos-paper-2); aspect-ratio: 4 / 5;
	max-width: 100%; overflow: hidden;
	border: 1px solid var(--hos-rule); border-radius: var(--hos-radius);
}
.hos-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.hos-card__link:hover .hos-card__media img { transform: scale(1.03); }

.hos-card__flag {
	position: absolute; left: 10px; top: 10px;
	background: var(--hos-resin); color: var(--hos-paper);
	font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
	padding: 3px 8px; border-radius: var(--hos-radius);
}
.hos-card__flag--out { background: var(--hos-muted); }

.hos-card__name { font-size: var(--hos-step-1); }
.hos-card__proposition { font-size: var(--hos-step--1); color: var(--hos-muted); line-height: 1.5; }
.hos-card__sourcing {
	font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--hos-resin); font-weight: 600;
}
/* DS3 — one price colour, both registers. */
.hos-card__price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hos-resin); }
.hos-card__price del { color: var(--hos-muted); font-weight: 400; margin-right: 6px; }
.hos-card__price ins { text-decoration: none; color: var(--hos-resin); }

.woocommerce ul.products li.product .button { margin-top: auto; font-size: var(--hos-step--1); padding-inline: var(--hos-3); }

/* DS9 — the few state. One or two products do not get a grid. */
.woocommerce .hos-shop--few ul.products { display: block; }
.hos-shop--few .hos-card {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--hos-12); align-items: center;
	padding-block: var(--hos-8);
	border-bottom: 1px solid var(--hos-rule-soft);
}
.hos-shop--few ul.products li.product:last-child .hos-card { border-bottom: 0; }
.hos-shop--few .hos-card__link { display: contents; }
/* Explicit placement: the media owns column one for the whole row, everything
   else stacks in column two. Auto-placement guessed wrong as soon as a card
   gained or lost its sourcing line. */
.hos-shop--few .hos-card > *,
.hos-shop--few .hos-card__link > * { grid-column: 2; }
.hos-shop--few .hos-card__media { grid-column: 1; grid-row: 1 / span 20; align-self: start; }
.hos-shop--few .hos-card__name { font-size: var(--hos-step-3); align-self: end; }
.hos-shop--few .hos-card__proposition { font-size: var(--hos-step-1); color: var(--hos-ink-2); max-width: 46ch; }
.hos-shop--few .hos-card__price { font-size: var(--hos-step-2); }
.hos-shop--few .hos-card > .button,
.hos-shop--few .hos-card > .added_to_cart { grid-column: 2; justify-self: start; margin-top: var(--hos-4); }

.woocommerce .site-main--shop nav.woocommerce-pagination { margin-top: var(--hos-12); }
.woocommerce .site-main--shop nav.woocommerce-pagination ul { display: inline-flex; flex-wrap: wrap; gap: var(--hos-2); border: 0; }
.woocommerce .site-main--shop nav.woocommerce-pagination ul li { border: 0; }
.woocommerce .site-main--shop nav.woocommerce-pagination ul li :is(a, span) {
	min-width: 44px; min-height: 44px; display: grid; place-items: center;
	border: 1px solid var(--hos-rule); background: var(--hos-paper-2); color: var(--hos-leaf);
}
.woocommerce .site-main--shop nav.woocommerce-pagination ul li :is(.current, a:hover) { background: var(--hos-leaf); color: var(--hos-paper); }

/* ---- WooCommerce: product page ---------------------------------------- */

.hos-product__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--hos-12); align-items: start; }
.woocommerce .site-main--shop div.hos-product :is(div.images, div.summary) { float: none; width: 100%; min-width: 0; margin: 0; }

/* DS11 — the product is white and the packaging is white. Give it a plate. */
.woocommerce .site-main--shop div.hos-product div.images {
	background: var(--hos-paper-2);
	border: 1px solid var(--hos-rule);
	border-radius: var(--hos-radius);
	padding: var(--hos-2);
}
.woocommerce .site-main--shop div.hos-product div.images .woocommerce-product-gallery__trigger {
	background: var(--hos-paper-2); border: 1px solid var(--hos-rule); border-radius: var(--hos-radius);
}
.woocommerce .site-main--shop div.hos-product div.images .woocommerce-product-gallery__trigger::before { border-color: var(--hos-leaf); }
.woocommerce .site-main--shop div.hos-product div.images .woocommerce-product-gallery__trigger::after { background: var(--hos-leaf); }
.woocommerce .site-main--shop div.hos-product div.images .flex-control-thumbs { display: flex; gap: var(--hos-2); padding: var(--hos-2) 0 0; margin: 0; }
.woocommerce .site-main--shop div.hos-product div.images .flex-control-thumbs li { float: none; width: auto; flex: 0 1 25%; }

.woocommerce .site-main--shop div.hos-product div.summary > * + * { margin-top: var(--hos-6); }
.woocommerce .site-main--shop div.hos-product .product_title { margin: 0; font-family: var(--hos-display); font-size: var(--hos-step-3); }
.woocommerce .site-main--shop div.hos-product :is(p.price, span.price) {
	color: var(--hos-resin); font-size: var(--hos-step-2); line-height: 1.4;
	font-family: var(--hos-ui); font-weight: 600; font-variant-numeric: tabular-nums;
}
.woocommerce .site-main--shop div.hos-product .price del { color: var(--hos-muted); font-size: var(--hos-step-0); opacity: 1; margin-right: var(--hos-2); font-weight: 400; }
.woocommerce .site-main--shop div.hos-product .price ins { text-decoration: none; font-weight: 600; }
.woocommerce div.product .woocommerce-product-details__short-description {
	font-family: var(--hos-display); font-size: var(--hos-step-1); line-height: 1.5;
	color: var(--hos-ink-2); max-width: 44ch;
}
.woocommerce .site-main--shop div.hos-product .stock { color: var(--hos-leaf); font-size: var(--hos-step--1); }
.woocommerce .site-main--shop div.hos-product .out-of-stock { color: var(--hos-resin); }
.woocommerce .site-main--shop div.hos-product form.cart { margin-bottom: var(--hos-6); }
.woocommerce .site-main--shop div.hos-product form.cart:not(.variations_form):not(.grouped_form),
.site-main--shop .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hos-3); }
.woocommerce .site-main--shop div.hos-product form.cart :is(div.quantity, .button) { float: none; margin: 0; }
.woocommerce .site-main--shop .quantity .qty { width: 84px; min-height: 48px; text-align: center; }

/* DS12 — variations read as a decision, not a floating control. */
.site-main--shop .variations { width: 100%; margin-bottom: var(--hos-3); border: 0; }
.site-main--shop .variations tbody, .site-main--shop .variations tr, .site-main--shop .variations td, .site-main--shop .variations th { display: block; width: 100%; padding: 0; border: 0; text-align: left; }
.site-main--shop .variations th.label { font-size: var(--hos-step--1); font-weight: 600; color: var(--hos-ink-2); margin-bottom: var(--hos-1); }
.site-main--shop .variations select { width: 100%; min-height: 48px; }
.site-main--shop .reset_variations { display: inline-block; padding-block: var(--hos-2); font-size: var(--hos-step--1); }

.site-main--shop .samida-sourcing { max-width: 100%; }
.samida-sourcing {
	display: inline-flex; align-items: center; gap: var(--hos-2);
	background: var(--hos-resin-soft); color: var(--hos-resin);
	padding: 6px var(--hos-3); border-radius: var(--hos-radius);
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
	margin-block: 6px var(--hos-4);
}
.samida-sourcing__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.samida-sourcing--grown-at-leuweung { background: var(--hos-leaf-soft); color: var(--hos-leaf-deep); }

/* DS12 — provenance still reaches the page when no term is set. */
.hos-provenance {
	margin-top: var(--hos-8);
	border: 1px solid var(--hos-rule);
	border-left: 2px solid var(--hos-leaf);
	border-radius: var(--hos-radius);
	background: var(--hos-paper-2);
	padding: var(--hos-4) var(--hos-6);
	max-width: var(--hos-measure);
}
.hos-provenance__title { font-size: var(--hos-step-1); margin-bottom: var(--hos-2); }
.hos-provenance p { color: var(--hos-ink-2); font-size: 0.9375rem; }

/* DS30 — short facts remain visible; narrative attributes remain disclosures. */
.hos-specs dl { margin: 0; }
.hos-specs dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hos-4); padding-block: var(--hos-3); border-bottom: 1px solid var(--hos-rule); }
.hos-specs dt { color: var(--hos-muted); font-size: var(--hos-step--1); }
.hos-specs dd { margin: 0; overflow-wrap: anywhere; }
.hos-accordions { margin-top: var(--hos-6); border-top: 1px solid var(--hos-rule); }
.site-main--shop .hos-accordions { max-width: none; }
.hos-accordion { border-bottom: 1px solid var(--hos-rule); }
.hos-accordion__summary {
	cursor: pointer; padding: var(--hos-4) 0; font-weight: 600; font-size: 0.9375rem;
	list-style: none; display: flex; justify-content: space-between; align-items: center;
	min-height: 48px;
}
.hos-accordion__summary::-webkit-details-marker { display: none; }
.hos-accordion__summary::after { content: "+"; color: var(--hos-muted); font-weight: 400; font-size: 1.125rem; }
.hos-accordion[open] .hos-accordion__summary::after { content: "\2013"; }
.hos-accordion__body { padding-bottom: var(--hos-4); color: var(--hos-ink-2); font-size: 0.9375rem; }
.hos-accordion__body p { margin-bottom: 0.7em; }

.site-main--shop .product_meta {
	display: flex; flex-wrap: wrap; gap: 6px var(--hos-6);
	font-size: var(--hos-step--1); color: var(--hos-muted);
	margin-top: var(--hos-6); padding-top: var(--hos-4);
	border-top: 1px solid var(--hos-rule-soft);
}
.site-main--shop .hos-anchor { display: block; scroll-margin-top: calc(var(--hos-header-h) + 24px); }

.samida-materials { margin-top: var(--hos-16); padding-top: var(--hos-6); border-top: 1px solid var(--hos-ink); }
.samida-materials__title { font-size: var(--hos-step-2); margin-bottom: var(--hos-4); }
.samida-materials__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--hos-3); }
.samida-materials__item a {
	display: inline-flex; flex-direction: column; gap: 1px;
	border: 1px solid var(--hos-rule); border-radius: var(--hos-radius);
	padding: var(--hos-3) var(--hos-4); text-decoration: none; background: var(--hos-paper-2);
	min-height: 48px; justify-content: center;
}
.samida-materials__item a:hover { border-color: var(--hos-leaf); }
.samida-materials__name { color: var(--hos-ink); font-weight: 600; font-size: 0.9375rem; }
.samida-materials__botanical { color: var(--hos-muted); font-size: 0.75rem; font-family: var(--hos-display); font-style: italic; }

.site-main--shop .hos-product-section,
.site-main--shop .hos-product > :is(.related, .upsells) {
	margin-top: var(--hos-16); padding-top: var(--hos-6); border-top: 1px solid var(--hos-ink);
}
.site-main--shop .hos-product-section > :is(p, ul, ol) { max-width: var(--hos-measure); margin-block: var(--hos-4); color: var(--hos-ink-2); }
.site-main--shop .hos-product-section h2,
.site-main--shop .hos-product > :is(.related, .upsells) > h2 { font-size: var(--hos-step-2); margin-bottom: var(--hos-6); }

.hos-relatedproducts { margin-top: var(--hos-16); padding-top: var(--hos-6); border-top: 1px solid var(--hos-ink); }
.hos-relatedproducts__list {
	list-style: none; margin: var(--hos-6) 0 0; padding: 0;
	display: grid; gap: var(--hos-6); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.hos-relatedproducts__list a { text-decoration: none; color: var(--hos-ink); display: flex; flex-direction: column; gap: var(--hos-2); font-weight: 600; font-size: 0.9375rem; }

.woocommerce .site-main--shop #reviews #comments ol.commentlist { padding: 0; }
.woocommerce .site-main--shop #reviews #comments ol.commentlist li .comment-text { border-color: var(--hos-rule); border-radius: var(--hos-radius); }
.site-main--shop #review_form_wrapper { max-width: var(--hos-measure); margin-top: var(--hos-8); }
.site-main--shop #review_form label { display: block; }
.site-main--shop #review_form :is(input:not([type=checkbox]), textarea) { max-width: 100%; }

/* DS12 — the sticky bar is always on for a phone product page. */
.hos-sticky-atc {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
	display: none;
	align-items: center; justify-content: space-between; gap: var(--hos-4);
	padding: var(--hos-2) var(--hos-gutter);
	padding-bottom: calc(var(--hos-2) + env(safe-area-inset-bottom, 0px));
	background: var(--hos-raise);
	border-top: 1px solid var(--hos-rule);
	box-shadow: 0 -2px 12px rgba(20, 26, 20, 0.09);
}
.hos-sticky-atc__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hos-sticky-atc__name {
	font-size: 0.8125rem; color: var(--hos-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hos-sticky-atc__price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hos-resin); }
.hos-sticky-atc__price del { display: none; }
.hos-sticky-atc__button {
	flex: 0 1 55%;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px;
	background: var(--hos-leaf); color: var(--hos-paper);
	padding: var(--hos-3) var(--hos-4); border-radius: var(--hos-radius);
	font-weight: 600; text-decoration: none; font-size: 0.9375rem; text-align: center;
}
.hos-sticky-atc__button--out { background: var(--hos-muted); }

@media (max-width: 899px) {
	.single-product .hos-sticky-atc { display: flex; }
	.single-product .hos-footer { padding-bottom: 96px; }
}

/* ---- DS13 · cart, checkout, account, order ---------------------------- */

.woocommerce-cart .site-main--shop,
.woocommerce-checkout .site-main--shop,
.woocommerce-account .site-main--shop,
.woocommerce-order-received .site-main--shop { max-width: 1080px; }

.woocommerce table.shop_table {
	border: 1px solid var(--hos-rule); border-radius: var(--hos-radius);
	background: var(--hos-paper-2); border-collapse: collapse; width: 100%;
}
.woocommerce table.shop_table th {
	font-family: var(--hos-ui); font-size: 0.75rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--hos-muted); font-weight: 600;
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 1px solid var(--hos-rule-soft); padding: var(--hos-3); }
.woocommerce table.shop_table .product-thumbnail img { width: 64px; border-radius: var(--hos-radius); }

.woocommerce-cart .cart-collaterals { margin-top: var(--hos-12); }
.woocommerce-cart .cart_totals { max-width: 420px; margin-left: auto; }
.woocommerce-cart .cart_totals h2 { font-size: var(--hos-step-2); margin-bottom: var(--hos-4); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; }

.hos-cart-empty { display: grid; gap: var(--hos-12); }
.hos-cart-empty__lead { max-width: var(--hos-measure); color: var(--hos-ink-2); }
.hos-cart-empty__offer { border-top: 1px solid var(--hos-ink); padding-top: var(--hos-6); }
.hos-cart-empty__offer h2 { font-size: var(--hos-step-2); margin-bottom: var(--hos-6); }

/* DS35: live at 900px was 158.734px/420px, not 342px/420px: prose capped the form. */
.woocommerce-checkout .hos-prose { max-width: none; }

/* checkout — laid out from WooCommerce's own structure, so form-checkout.php
   stays un-overridden and survives plugin updates. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	grid-template-rows: auto 1fr;
	column-gap: var(--hos-12);
	align-items: start;
}
.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
.woocommerce-checkout form.checkout > #order_review {
	grid-column: 2; grid-row: 2;
	position: sticky; top: calc(var(--hos-header-h) + 24px);
}
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce .checkout .col2-set, .woocommerce .checkout .col-1, .woocommerce .checkout .col-2 { float: none; width: 100%; }
.woocommerce .checkout .col-1 + .col-2 { margin-top: var(--hos-8); }
.woocommerce-checkout h3 { font-size: var(--hos-step-2); margin-bottom: var(--hos-4); }
.woocommerce form .form-row { padding: 0; margin: 0 0 var(--hos-4); display: flex; flex-direction: column; gap: var(--hos-1); }
.woocommerce form .form-row label {
	font-size: 0.8125rem; font-weight: 600; color: var(--hos-ink-2);
	display: block; margin: 0;
}
.woocommerce form .form-row .required { color: var(--hos-resin); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--hos-rule); border-radius: var(--hos-radius);
	padding: var(--hos-3); min-height: 48px;
	font-family: var(--hos-ui); font-size: 1rem;
	background: var(--hos-raise); color: var(--hos-ink); width: 100%;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--hos-resin); }
.woocommerce form .form-row .hos-field-error,
.woocommerce form .form-row.woocommerce-invalid::after {
	font-size: var(--hos-step--1); color: var(--hos-resin);
}
.woocommerce form .form-row-first, .woocommerce form .form-row-last { float: none; width: 100%; }
@media (min-width: 600px) {
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { display: inline-flex; width: calc(50% - 8px); vertical-align: top; }
	.woocommerce form .form-row-first { margin-right: 12px; }
}

/* shipping: a list of decisions, not a select */
.woocommerce ul#shipping_method { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.woocommerce ul#shipping_method li {
	margin: 0; padding: var(--hos-3); min-height: 56px;
	display: flex; align-items: center; gap: var(--hos-3);
	border: 1px solid var(--hos-rule-soft); border-bottom: 0; background: var(--hos-raise);
}
.woocommerce ul#shipping_method li:last-child { border-bottom: 1px solid var(--hos-rule-soft); }
.woocommerce ul#shipping_method li:first-child { border-top-left-radius: var(--hos-radius); border-top-right-radius: var(--hos-radius); }
.woocommerce ul#shipping_method label { flex: 1; font-size: 0.9375rem; color: var(--hos-ink); }
.woocommerce ul#shipping_method .amount { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hos-resin); margin-left: auto; }
.woocommerce ul#shipping_method input[type=radio] { width: 20px; height: 20px; accent-color: var(--hos-leaf); flex: none; }

/* payment */
.woocommerce-checkout #payment {
	background: var(--hos-paper-2); border: 1px solid var(--hos-rule);
	border-radius: var(--hos-radius); padding: var(--hos-4);
}
.woocommerce-checkout #payment ul.payment_methods { padding: 0; border-bottom: 1px solid var(--hos-rule-soft); }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; padding-block: var(--hos-2); }
.woocommerce-checkout #payment ul.payment_methods label { font-weight: 600; font-size: 0.9375rem; }
.woocommerce-checkout #payment div.payment_box {
	background: var(--hos-raise); border-radius: var(--hos-radius);
	color: var(--hos-ink-2); font-size: 0.9375rem;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--hos-raise); }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-block: var(--hos-4); font-size: 0.9375rem; }
.woocommerce-checkout #place_order { width: 100%; font-size: var(--hos-step-1) !important; min-height: 56px; }

/* DS36 — the whole rate/payment choice shows selection, including keyboard focus. */
.woocommerce ul#shipping_method li,
.woocommerce-checkout #payment ul.payment_methods > li {
	border: 1px solid var(--hos-muted);
	padding: var(--hos-3);
	margin-bottom: var(--hos-2);
}
.woocommerce ul#shipping_method li:last-child { border-bottom-color: var(--hos-muted); }
.woocommerce ul#shipping_method li:hover,
.woocommerce-checkout #payment ul.payment_methods > li:hover { border-color: var(--hos-leaf); }
.woocommerce ul#shipping_method li:has(input:checked),
.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) {
	border-color: var(--hos-leaf);
	background: var(--hos-leaf-soft);
	box-shadow: inset 2px 0 0 var(--hos-leaf);
}
.woocommerce ul#shipping_method label,
.woocommerce-checkout #payment ul.payment_methods > li > label {
	display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--hos-2); min-height: 48px;
	cursor: pointer;
}
.woocommerce ul#shipping_method li:focus-within,
.woocommerce-checkout #payment ul.payment_methods > li:focus-within {
	outline: 2px solid var(--hos-resin); outline-offset: 2px;
}

/* the phone and tablet summary strip */
.hos-review-toggle { display: none; }
@media (max-width: 1079px) {
	.woocommerce-checkout form.checkout { display: block; }
	.woocommerce-checkout form.checkout > #order_review { position: static; }
	.woocommerce-checkout form.checkout > #order_review_heading { display: none; }
	.hos-review-toggle {
		display: flex; align-items: center; justify-content: space-between; gap: var(--hos-3);
		width: 100%; min-height: 56px; padding: var(--hos-3) var(--hos-4);
		background: var(--hos-paper-2); border: 1px solid var(--hos-rule);
		border-radius: var(--hos-radius); font-family: var(--hos-ui); font-size: 0.9375rem;
		color: var(--hos-ink); cursor: pointer; margin-bottom: var(--hos-4);
	}
	.hos-review-toggle__total { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hos-resin); }
	.hos-review-toggle[aria-expanded="false"] + .hos-review-body { display: none; }
}

/* order received */
.woocommerce-order { display: grid; gap: var(--hos-8); }
.woocommerce ul.order_details {
	list-style: none; margin: 0; padding: var(--hos-6); display: grid; gap: var(--hos-4);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: var(--hos-paper-2); border: 1px solid var(--hos-rule); border-radius: var(--hos-radius);
}
.woocommerce ul.order_details li { border: 0; padding: 0; margin: 0; float: none; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hos-muted); font-weight: 600; }
.woocommerce ul.order_details li strong { display: block; margin-top: var(--hos-1); font-size: var(--hos-step-0); letter-spacing: 0; text-transform: none; color: var(--hos-ink); font-weight: 600; }
.hos-next-steps { border-left: 2px solid var(--hos-leaf); padding-left: var(--hos-4); color: var(--hos-ink-2); max-width: var(--hos-measure); }

/* account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: var(--hos-3) 0; min-height: 44px;
	border-bottom: 1px solid var(--hos-rule-soft); text-decoration: none; color: var(--hos-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--hos-leaf); font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-content { margin: 0; }
@media (min-width: 900px) {
	.woocommerce-account.logged-in .site-main--shop .woocommerce {
		display: grid; grid-template-columns: 220px minmax(0, 1fr);
		gap: var(--hos-12); align-items: start;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; }
	.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
	.woocommerce-account .site-main--shop .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
}
.woocommerce-account:not(.logged-in) .site-main--shop .woocommerce { max-width: 460px; margin-inline: auto; }
.woocommerce-account .woocommerce-form-login__rememberme { font-size: 0.9375rem; }

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

.hos-footer { background: var(--hos-ink); color: var(--hos-paper); margin-top: 0; }
.hos-footer__inner {
	max-width: var(--hos-max); margin: 0 auto;
	padding-inline: var(--hos-gutter); padding-block: var(--hos-16) var(--hos-12);
	display: flex; flex-direction: column; gap: var(--hos-8);
}
.hos-footer__mark { display: block; width: 44px; color: var(--hos-paper); }
.hos-footer__mark .hos-mark { width: 44px; height: 44px; color: inherit; }
.hos-footer__system { display: flex; flex-direction: column; gap: 3px; }
.hos-footer__line { font-family: var(--hos-display); font-size: var(--hos-step-1); color: color-mix(in srgb, var(--hos-paper) 76%, transparent); }
.hos-footer__line span { color: var(--hos-resin-soft); font-family: var(--hos-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 10px; }
.hos-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--hos-3) 26px; }
.hos-footer__list a { color: color-mix(in srgb, var(--hos-paper) 84%, transparent); text-decoration: none; font-size: 0.875rem; display: inline-block; padding-block: var(--hos-2); }
.hos-footer__list a:hover { color: var(--hos-paper); }
.hos-footer__legal { font-size: 0.8125rem; color: color-mix(in srgb, var(--hos-paper) 70%, transparent); }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 899px) {
	.hos-footer__inner {
		padding-inline: 24px;
		padding-inline:
			max(24px, calc(env(safe-area-inset-left, 0px) + 20px))
			max(24px, calc(env(safe-area-inset-right, 0px) + 20px));
	}

	.hos-product__intro { grid-template-columns: minmax(0, 1fr); gap: var(--hos-8); }
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hos-8) var(--hos-4); }

	/* DS10 — the gallery does not own the first screen. */
	.woocommerce .site-main--shop div.hos-product div.images .woocommerce-product-gallery__wrapper,
	.woocommerce .site-main--shop div.hos-product div.images .flex-viewport {
		max-height: 58svh;
	}
	.woocommerce .site-main--shop div.hos-product div.images .woocommerce-product-gallery__image img {
		max-height: 58svh; width: 100%; object-fit: contain;
	}
	.woocommerce .site-main--shop div.hos-product div.images .flex-control-thumbs {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce .site-main--shop div.hos-product div.images .flex-control-thumbs li { flex: 0 0 64px; }

	.hos-shop--few .hos-card { grid-template-columns: minmax(0, 1fr); gap: var(--hos-4); }
	.hos-shop--few .hos-card > *,
	.hos-shop--few .hos-card__link > * { grid-column: 1; }
	.hos-shop--few .hos-card__media { grid-column: 1; grid-row: auto; }
	.hos-shop--few .hos-card > .button,
	.hos-shop--few .hos-card > .added_to_cart { grid-column: 1; }
	.hos-shop--few .hos-card__name { font-size: var(--hos-step-2); }
}

@media (max-width: 599px) {
	.hos-datatable dl { grid-template-columns: 1fr; }
	.hos-datatable dt { border-bottom: 0; padding-bottom: 2px; }
	.woocommerce ul.products { gap: var(--hos-8) var(--hos-3); }
	.hos-card__name, .woocommerce .site-main--shop .hos-card__name { font-size: var(--hos-step-0); }
	.hos-mark { width: 34px; height: 34px; }
	.site-main--shop .hos-card__flag { left: 6px; top: 6px; max-width: calc(100% - 12px); letter-spacing: 0; }
	.site-main--shop .hos-shop-tools { align-items: stretch; }
	.site-main--shop .woocommerce-ordering,
	.site-main--shop .woocommerce-ordering select { width: 100%; }
	.hos-onward { flex-direction: column; align-items: flex-start; }
}

/* 320px — the narrow floor the previous QA never checked. */
@media (max-width: 359px) {
	.woocommerce ul.products { grid-template-columns: minmax(0, 1fr); }
	.hos-sticky-atc { gap: var(--hos-2); }
	.hos-sticky-atc__button { flex-basis: 50%; font-size: var(--hos-step--1); padding-inline: var(--hos-2); }
}

@media (prefers-reduced-motion: reduce) {
	.site-main--shop .hos-card__media img { transition: none; }
	.site-main--shop .hos-card__link:hover .hos-card__media img { transform: none; }
	.hos-button { transition: none; }
}

/* DS22–24 — reusable paper and night composition vocabulary. */
.hos-band {
	margin-inline: calc(50% - 50vw);
	padding: var(--hos-16) max(var(--hos-gutter), calc((100vw - var(--hos-max)) / 2 + var(--hos-gutter)));
	background: var(--hos-paper-2);
}
.hos-band__inner { max-width: calc(var(--hos-max) - 2 * var(--hos-gutter)); margin-inline: auto; }
.hos-band--ink { background: var(--hos-night); color: var(--hos-night-ink); }
.hos-band--ink a { color: var(--hos-night-leaf); }
.hos-band--ink .hos-sectionhead__eyebrow { color: var(--hos-night-resin); }
.hos-band--ink :focus-visible { outline-color: var(--hos-night-resin); }
.hos-plate { background: var(--hos-paper-2); border: 1px solid var(--hos-rule); padding: var(--hos-2); }

/* DS26 — the existing approved shop lead becomes the catalogue's moment. */
.site-main--shop .hos-shop-heading { padding: 0; border: 0; }
.hos-catalog-header { margin-bottom: var(--hos-8); padding-top: var(--hos-8); }
.hos-catalog-header .hos-sectionhead__eyebrow { font-weight: 600; line-height: 1.6; }
.site-main--shop .hos-catalog-header .hos-shop-intro { max-width: none; }
.hos-catalog-header .hos-shop-intro > p:first-child {
	font-family: var(--hos-display); font-size: var(--hos-step-5); line-height: 1;
	letter-spacing: -.035em; color: var(--hos-ink); max-width: 20ch; margin-bottom: var(--hos-8);
	text-wrap: balance;
}
.hos-catalog-header .hos-shop-intro > p:not(:first-child), .hos-catalog-header .term-description { max-width: var(--hos-measure); }
.hos-shop-intro__display { display: block; }
.hos-shop-intro__display em { font-weight: 400; }
.hos-shop-intro__continuation { display: block; margin-top: var(--hos-6); max-width: 36ch; font-size: var(--hos-step-2); line-height: 1.4; letter-spacing: 0; color: var(--hos-ink-2); }
.hos-category-rail { display: flex; flex-wrap: wrap; gap: var(--hos-2) var(--hos-6); margin-top: var(--hos-8); }
.hos-category-rail a { display: inline-flex; align-items: center; gap: var(--hos-2); min-height: 48px; border-bottom: 1px solid var(--hos-rule); color: var(--hos-ink-2); text-decoration: none; }
.hos-category-rail a[aria-current], .hos-category-rail a:hover { color: var(--hos-leaf); border-bottom-color: var(--hos-leaf); }
.hos-category-rail a[aria-current] { font-weight: 600; }
.hos-category-rail span { font-size: var(--hos-step--1); color: var(--hos-muted); }
@media (min-width: 1080px) {
	.hos-catalog-header .hos-shop-intro { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--hos-12); align-items: end; }
	.hos-catalog-header .hos-shop-intro > p:first-child { margin-bottom: 0; }
	.hos-catalog-header .hos-shop-intro > p:not(:first-child) { margin-bottom: 0; padding-bottom: var(--hos-2); }
	.hos-category-rail { margin-top: var(--hos-12); }
}

/* DS22–24, 18 Sep review: carry the Journey's hierarchy into paper surfaces.
   The forest scene, chapters and motion remain independent and unchanged. */
.hos-page:not(.hos-page--plain) .hos-pagehead { padding-bottom: var(--hos-8); margin-bottom: var(--hos-12); }
.hos-page:not(.hos-page--plain) .hos-pagehead__title { font-size: var(--hos-step-6); max-width: 16ch; line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.hos-page:not(.hos-page--plain) .hos-prose { max-width: none; gap: var(--hos-6); }
.hos-page:not(.hos-page--plain) .hos-prose > * { max-width: var(--hos-measure); }
.hos-page:not(.hos-page--plain) .hos-prose > p:first-of-type { font-size: var(--hos-step-4); line-height: 1.15; letter-spacing: -.025em; max-width: 30ch; margin-bottom: var(--hos-8); }
.hos-page:not(.hos-page--plain) .hos-prose h2 { font-size: var(--hos-step-3); margin-top: var(--hos-12); }
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .hos-pagehead__title { font-size: var(--hos-step-4); line-height: 1.05; letter-spacing: -.035em; }
.woocommerce .site-main--shop div.hos-product .product_title { font-size: var(--hos-step-4); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }

/* DS29 — the plate gives each product an edge; unavailable media recedes. */
.hos-card__media.hos-plate { padding: var(--hos-2); border: 1px solid var(--hos-rule); }
.hos-card.outofstock .hos-card__media img { filter: saturate(.55) opacity(.75); }
.hos-card__link:hover .hos-card__name, .hos-card__link:focus-visible .hos-card__name {
	text-decoration: underline; text-decoration-color: var(--hos-leaf); text-decoration-thickness: 1px; text-underline-offset: .15em;
}
@media (prefers-reduced-motion: reduce) {
	.hos-card__media img { transition: none; }
	.hos-card__link:hover .hos-card__media img { transform: none; }
}

/* DS40 — dashboard content only; the account rail and login keep their register. */
.woocommerce-account.logged-in .hos-prose { max-width: none; }
.hos-account-dashboard { display: grid; gap: var(--hos-6); min-width: 0; }
.hos-account-greeting { font-family: var(--hos-display); font-size: var(--hos-step-2); color: var(--hos-ink); }
.hos-account-order { display: grid; justify-items: start; gap: var(--hos-3); padding: var(--hos-6); }
.hos-account-order h2 { margin: 0; }
.hos-account-order__total { color: var(--hos-resin); font-variant-numeric: tabular-nums; }
.hos-account-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--hos-4); }
.hos-account-tiles a { display: flex; align-items: center; min-height: 48px; padding: var(--hos-4); text-decoration: none; }
.hos-account-tiles a:hover { border-color: var(--hos-leaf); text-decoration: underline; }


/* ---------------------------------------------------------------------------
 * Sorotan — the Echoes portal's lead band.
 *
 * Night register, borrowed from the Journey (DS2) so the portal's first band
 * reads as the same brand as the front door rather than a green rectangle.
 * A hairline frame inset from the edge, the Samida mark bleeding off the
 * bottom-right at low opacity, Petrona for the title, Karla for the labels.
 *
 * Sticky posts land here. One item renders as a single band; two or three
 * become a swipeable row on a phone and a plated row on a desktop. Nothing
 * moves on its own: no carousel, no timer, no autoplay.
 * ------------------------------------------------------------------------ */

.hos-sorotan {
	max-width: var(--hos-max); margin-inline: auto;
	padding-inline: var(--hos-gutter); padding-block: var(--hos-8);
}
.hos-sorotan__label {
	display: flex; align-items: center; gap: var(--hos-3);
	font-family: var(--hos-ui); font-size: 11px; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--hos-muted); margin: 0 0 var(--hos-3);
}
.hos-sorotan__label::after { content: ""; flex: 1; height: 1px; background: var(--hos-rule); }

.hos-sorotan__track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hos-3); }
.hos-sorotan--many .hos-sorotan__track {
	grid-auto-flow: column; grid-auto-columns: minmax(86%, 1fr);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: var(--hos-gutter);
	padding-bottom: var(--hos-3); scrollbar-width: none;
}
.hos-sorotan--many .hos-sorotan__track::-webkit-scrollbar { display: none; }
.hos-sorotan--many .hos-sorotan__item { scroll-snap-align: start; }

.hos-sorotan__card {
	position: relative; display: block; overflow: hidden;
	height: 100%; min-height: 250px;
	padding: var(--hos-8) var(--hos-6);
	color: var(--hos-night-ink); text-decoration: none;
	background:
		radial-gradient(130% 150% at 8% 0%, color-mix(in srgb, var(--hos-night-leaf) 14%, transparent) 0%, transparent 60%),
		linear-gradient(158deg, var(--hos-night) 0%, var(--hos-night-2) 100%);
	transition: transform .35s ease;
}
.hos-sorotan__frame {
	position: absolute; inset: 10px; pointer-events: none;
	border: 1px solid var(--hos-night-rule);
	transition: border-color .35s ease;
}
.hos-sorotan__mark {
	position: absolute; right: -10%; bottom: -22%; width: min(62%, 300px);
	color: var(--hos-night-leaf); opacity: .11; pointer-events: none;
}
.hos-sorotan__mark svg { display: block; width: 100%; height: auto; }

.hos-sorotan__body {
	position: relative; display: flex; flex-direction: column;
	gap: var(--hos-2); height: 100%;
}
.hos-sorotan__eyebrow {
	display: flex; align-items: center; gap: var(--hos-2);
	font-family: var(--hos-ui); font-size: 11px; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--hos-night-resin); margin: 0;
}
.hos-sorotan__eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .75; }
.hos-sorotan__title {
	font-family: var(--hos-display); font-size: var(--hos-step-4); font-weight: 400;
	line-height: 1.08; text-wrap: balance;
	color: var(--hos-night-ink); margin: 0; max-width: 18ch;
}
.hos-sorotan__line {
	font-family: var(--hos-display); font-style: italic;
	font-size: var(--hos-step-1); line-height: 1.5;
	color: var(--hos-night-ink-2); margin: 0; max-width: 44ch;
}
.hos-sorotan__more {
	margin-top: auto; padding-top: var(--hos-6);
	display: inline-flex; align-items: center; gap: .45em;
	font-family: var(--hos-ui); font-size: var(--hos-step--1);
	font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--hos-night-ink);
}
.hos-sorotan__more span { transition: transform .35s ease; }

.hos-sorotan__card:hover { transform: translateY(-2px); }
.hos-sorotan__card:hover .hos-sorotan__frame,
.hos-sorotan__card:focus-visible .hos-sorotan__frame {
	border-color: color-mix(in srgb, var(--hos-night-resin) 55%, transparent);
}
.hos-sorotan__card:hover .hos-sorotan__more { text-decoration: underline; text-underline-offset: .4em; }
.hos-sorotan__card:hover .hos-sorotan__more span { transform: translate(2px, -2px); }
.hos-sorotan__card:focus-visible { outline: 2px solid var(--hos-night-resin); outline-offset: 3px; }

.hos-pagehead__intro { margin-top: var(--hos-4); max-width: var(--hos-measure); }
.hos-pagehead__intro > p:last-child { margin-bottom: 0; }

@media (max-width: 899px) {
	.hos-sorotan--many .hos-sorotan__title { font-size: var(--hos-step-3); max-width: 22ch; }
	.hos-sorotan--many .hos-sorotan__card { min-height: 230px; }
}

@media (min-width: 900px) {
	.hos-sorotan--single .hos-sorotan__card { min-height: 340px; padding: var(--hos-24) 3rem; }
	.hos-sorotan--single .hos-sorotan__frame { inset: 14px; }
	.hos-sorotan--single .hos-sorotan__title { font-size: var(--hos-step-5); max-width: 15ch; }
	.hos-sorotan--single .hos-sorotan__line { font-size: var(--hos-step-2); }
	.hos-sorotan--single .hos-sorotan__mark { right: -3%; bottom: -16%; width: min(40%, 420px); opacity: .13; }
	.hos-sorotan--many .hos-sorotan__track {
		grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
		overflow: visible; padding-bottom: 0;
	}
	.hos-sorotan__card { min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
	.hos-sorotan__card, .hos-sorotan__more span { transition: none; }
	.hos-sorotan__card:hover { transform: none; }
	.hos-sorotan__card:hover .hos-sorotan__more span { transform: none; }
}


/* ---------------------------------------------------------------------------
 * Echoes portal — magazine layout, night register.
 *
 * The index reads as a poster and the articles stay on paper, the same split
 * the Journey already makes. Sections are categories: a lead card and a ruled
 * column beside it, chips for the department, numerals where a magazine would
 * put a photograph. There is no photography in the archive yet, so none is
 * pretended: the cards are built from type.
 * ------------------------------------------------------------------------ */

body.hos-night-page { background: var(--hos-night); color: var(--hos-night-ink); }
.hos-night-page .hos-header {
	background: color-mix(in srgb, var(--hos-night) 90%, transparent);
	border-bottom-color: var(--hos-night-rule);
}
.hos-night-page .hos-wordmark,
.hos-night-page .hos-mark { color: var(--hos-night-leaf); }
.hos-night-page .hos-nav__list a { color: var(--hos-night-ink); }
.hos-night-page .hos-nav__list a:hover,
.hos-night-page .hos-nav__list .current-menu-item > a,
.hos-night-page .hos-nav__list .current_page_parent > a { border-bottom-color: var(--hos-night-resin); }
.hos-night-page .hos-cart,
.hos-night-page .hos-burger { color: var(--hos-night-ink); border-color: var(--hos-night-rule); }
.hos-night-page .hos-footer {
	background: var(--hos-night-2); color: var(--hos-night-ink-2);
	border-top: 1px solid var(--hos-night-rule);
}
.hos-night-page .hos-footer a { color: var(--hos-night-ink-2); }
.hos-night-page .hos-footer a:hover { color: var(--hos-night-resin); }
.hos-night-page .hos-eyebrow { color: var(--hos-night-resin); }
.hos-night-page .hos-empty { color: var(--hos-night-ink-2); }

/* On a night page the Sorotan flips to paper: the brightest block on the
   screen, which is what a lead is for. */
.hos-night-page .hos-sorotan__label { color: var(--hos-night-muted); }
.hos-night-page .hos-sorotan__label::after { background: var(--hos-night-rule); }
.hos-night-page .hos-sorotan__card {
	background:
		radial-gradient(130% 150% at 8% 0%, color-mix(in srgb, var(--hos-leaf-soft) 55%, transparent) 0%, transparent 62%),
		var(--hos-paper);
	color: var(--hos-ink);
}
.hos-night-page .hos-sorotan__frame { border-color: color-mix(in srgb, var(--hos-leaf-deep) 20%, transparent); }
.hos-night-page .hos-sorotan__mark { color: var(--hos-leaf-deep); opacity: .10; }
.hos-night-page .hos-sorotan__eyebrow { color: var(--hos-resin); }
.hos-night-page .hos-sorotan__title { color: var(--hos-ink); }
.hos-night-page .hos-sorotan__line { color: var(--hos-ink-2); }
.hos-night-page .hos-sorotan__more { color: var(--hos-ink); }
.hos-night-page .hos-sorotan__card:hover .hos-sorotan__frame,
.hos-night-page .hos-sorotan__card:focus-visible .hos-sorotan__frame { border-color: var(--hos-resin); }
.hos-night-page .hos-sorotan__card:focus-visible { outline-color: var(--hos-resin); }

/* Masthead */
.hos-mag__masthead {
	max-width: var(--hos-max); margin-inline: auto;
	padding-inline: var(--hos-gutter); padding-block: var(--hos-8);
	border-bottom: 1px solid var(--hos-night-rule);
}
.hos-mag__wordmark {
	font-family: var(--hos-display); font-weight: 400;
	font-size: clamp(2.5rem, 8.5vw, 5.25rem); line-height: .95; letter-spacing: -.015em;
	color: var(--hos-night-ink); margin: var(--hos-2) 0 0;
}
.hos-mag__intro {
	margin-top: var(--hos-4); max-width: 54ch;
	font-family: var(--hos-display); font-size: var(--hos-step-1); line-height: 1.55;
	color: var(--hos-night-ink-2);
}
.hos-mag__intro p { margin: 0; }

/* Sections */
.hos-mag__section {
	max-width: var(--hos-max); margin-inline: auto;
	padding-inline: var(--hos-gutter); padding-block: var(--hos-8);
}
.hos-mag__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--hos-4); flex-wrap: wrap;
	padding-bottom: var(--hos-3); margin-bottom: var(--hos-6);
	border-bottom: 1px solid var(--hos-night-rule);
}
.hos-mag__heading {
	font-family: var(--hos-display); font-weight: 400;
	font-size: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1;
	text-transform: uppercase; letter-spacing: .012em;
	color: var(--hos-night-ink); margin: 0;
}
.hos-mag__all {
	font-family: var(--hos-ui); font-size: var(--hos-step--1); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--hos-night-resin); text-decoration: none; white-space: nowrap;
}
.hos-mag__all:hover { text-decoration: underline; text-underline-offset: .35em; }

.hos-mag__grid { display: grid; gap: var(--hos-6); }
.hos-mag__link { position: relative; text-decoration: none; color: inherit; display: block; }

/* Lead */
.hos-mag__lead .hos-mag__link {
	display: flex; flex-direction: column; gap: var(--hos-3); height: 100%;
	padding: var(--hos-8) var(--hos-6);
	border: 1px solid var(--hos-night-rule);
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--hos-night-leaf) 9%, transparent) 0%, transparent 68%),
		var(--hos-night-2);
	transition: border-color .3s ease;
}
.hos-mag__lead .hos-mag__link:hover,
.hos-mag__lead .hos-mag__link:focus-visible { border-color: color-mix(in srgb, var(--hos-night-resin) 55%, transparent); }
.hos-mag__chip {
	align-self: flex-start;
	font-family: var(--hos-ui); font-size: 10px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--hos-night); background: var(--hos-night-resin);
	padding: 4px 8px;
}
.hos-mag__leadtitle {
	font-family: var(--hos-display); font-weight: 400;
	font-size: var(--hos-step-3); line-height: 1.12; text-wrap: balance;
	color: var(--hos-night-ink); margin: 0; max-width: 24ch;
}
.hos-mag__excerpt { margin: 0; color: var(--hos-night-ink-2); max-width: 48ch; }
.hos-mag__num {
	position: absolute; top: 0; right: 0;
	font-family: var(--hos-display); font-size: var(--hos-step-3); line-height: 1;
	color: color-mix(in srgb, var(--hos-night-ink) 24%, transparent);
}
.hos-mag__meta {
	margin-top: auto; padding-top: var(--hos-4);
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--hos-3);
	font-family: var(--hos-ui); font-size: var(--hos-step--1); letter-spacing: .06em;
	color: var(--hos-night-muted);
}
.hos-mag__read { text-transform: uppercase; font-weight: 600; color: var(--hos-night-ink); }
.hos-mag__link:hover .hos-mag__read { text-decoration: underline; text-underline-offset: .35em; }

/* Ruled column */
.hos-mag__column { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hos-mag__item { border-top: 1px solid var(--hos-night-rule); }
.hos-mag__item:first-child { border-top: 0; }
.hos-mag__item .hos-mag__link { padding-block: var(--hos-4); }
.hos-mag__item .hos-mag__num { position: static; float: right; margin-left: var(--hos-3); font-size: var(--hos-step-0); }
.hos-mag__itemtitle {
	font-family: var(--hos-display); font-weight: 400;
	font-size: var(--hos-step-1); line-height: 1.25; margin: 0; max-width: 32ch;
	color: var(--hos-night-ink); transition: color .25s ease;
}
.hos-mag__item .hos-mag__link:hover .hos-mag__itemtitle { color: var(--hos-night-resin); }
.hos-mag__item .hos-mag__meta { margin-top: 6px; padding-top: 0; }

.hos-mag__link:focus-visible { outline: 2px solid var(--hos-night-resin); outline-offset: 4px; }

@media (min-width: 900px) {
	.hos-mag__masthead { padding-block: var(--hos-24) var(--hos-8); }
	.hos-mag__grid { grid-template-columns: 1.25fr 1fr; gap: var(--hos-8); align-items: start; }
	.hos-mag__grid--solo { grid-template-columns: 1fr; }
	.hos-mag__lead .hos-mag__link { padding: var(--hos-8); min-height: 280px; }
	.hos-mag__num { font-size: var(--hos-step-4); }
}

@media (min-width: 1200px) {
	.hos-mag__leadtitle { font-size: var(--hos-step-4); max-width: 20ch; }
}

@media (prefers-reduced-motion: reduce) {
	.hos-mag__lead .hos-mag__link, .hos-mag__itemtitle { transition: none; }
}

.hos-eyebrow__link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.hos-eyebrow__link:hover { border-bottom-color: currentColor; }


/* Header furniture on the night page: these draw themselves with paper-register
   values, so they need naming, not inheriting. */
.hos-night-page .hos-burger__bar,
.hos-night-page .hos-burger__bar::before,
.hos-night-page .hos-burger__bar::after { background: var(--hos-night-ink); }
.hos-night-page.hos-nav-open .hos-burger__bar { background: transparent; }
.hos-night-page .hos-cart__icon { color: var(--hos-night-leaf); }
.hos-night-page .hos-cart__count { background: var(--hos-night-leaf); color: var(--hos-night); }
.hos-night-page .hos-skip { background: var(--hos-night-ink); color: var(--hos-night); }

@media (max-width: 899px) {
	.hos-night-page .hos-nav {
		background: var(--hos-night);
		border-color: var(--hos-night-rule);
	}
	.hos-night-page .hos-nav__list a { color: var(--hos-night-ink); }
	.hos-night-page .hos-nav__list li { border-color: var(--hos-night-rule); }
}