/*
 * Hemptex® site chrome — announcement bar, header, logo band, footer.
 *
 * The design is Niek's, lifted from "Hemptex Product Template.html": the same
 * tokens, the same forest-to-oat header that lightens once the announcement bar
 * scrolls away and slides out of the way when you scroll down, the same footer
 * that turns its lights off when it comes fully into view. Only the STYLING is
 * new — every link, label and line of copy in the components is the site's own.
 *
 * Two things here are NOT in the template, because the template is a single
 * product page and this is a whole site:
 *   1. a responsive scale — the header shrinks continuously instead of folding,
 *      and only collapses to a menu at phone widths (see the bottom of the file);
 *   2. a mobile menu, which the template simply does without (below 900px it
 *      hides its links and offers nothing in their place).
 *
 * Class names are all `ht-` prefixed. That is not decoration: the three Webflow
 * stylesheets are still linked and still style every page's body, and they own
 * bare `.faq`, `.hide`, `.light`, `.wrap` and 2,000 other class names. Nothing
 * here may collide with them, and nothing here may reach page content — every
 * selector below is a chrome class or a descendant of one.
 */

:root {
  --ht-oat: #f4e9dc;
  --ht-paper: #fbf5ec;
  --ht-card: #fffdf9;
  --ht-forest: #29320c;
  --ht-forest-soft: #3b4413;
  --ht-olive: #75742c;
  --ht-sage: #8c9a7e;
  --ht-apricot: #febc71;
  --ht-apricot-deep: #e89d4c;
  --ht-terra: #c66339;
  --ht-ink: #29320c;
  --ht-body-ink: #41451f;
  --ht-muted: #7a7756;
  --ht-line: rgba(41, 50, 12, 0.16);
  --ht-shadow: 0 10px 26px rgba(41, 50, 12, 0.1), 0 2px 6px rgba(41, 50, 12, 0.06);
  --ht-font-display: "Tilt Warp", system-ui, sans-serif;
  --ht-font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --ht-pill: 999px;
  --ht-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
 * Shared: the pill button and the mark
 * ------------------------------------------------------------------------- */

.ht-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid var(--ht-forest);
  border-radius: var(--ht-pill);
  background: var(--ht-apricot);
  color: var(--ht-forest);
  font-family: var(--ht-font-display);
  font-size: 1rem;
  line-height: 1;
  padding: 16px 30px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s var(--ht-ease), background 0.15s var(--ht-ease);
}
.ht-pill:hover {
  transform: translateY(-2px);
  background: var(--ht-apricot-deep);
  text-decoration: none;
  color: var(--ht-forest);
}
.ht-mark {
  flex: none;
  display: block;
}

/* ---------------------------------------------------------------------------
 * Loading screen
 *
 * The template's opening: a forest field, the mark assembling itself tick by
 * tick smallest-segment-first, then the whole thing turning from dark to light
 * before it fades away. Declarations are the template's own.
 *
 * Reduced motion hides it in CSS rather than in JS, so those users never see it
 * flash before a script can remove it.
 * ------------------------------------------------------------------------- */

.ht-loader {
  position: fixed;
  inset: 0;
  /* Above the consent banner (`.hemptex-consent`, z-index 1100 in
     app/globals.css) — a curtain with a hole in it is not a curtain. The
     template's own 1000 only had to beat its own chrome. */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  background: var(--ht-forest);
  font-family: var(--ht-font-body);
  transition: background 0.7s var(--ht-ease), opacity 0.55s var(--ht-ease);
}
.ht-loader .ht-loader-ring {
  width: clamp(110px, 15vw, 200px);
  height: auto;
  color: var(--ht-apricot);
  transition: color 0.7s var(--ht-ease);
}
/* Each segment fades in on its own delay, set by the component. */
.ht-loader .ht-loader-ring path {
  opacity: 0;
  transition: opacity 0.22s var(--ht-ease);
}
.ht-loader.ht-ticks .ht-loader-ring path {
  opacity: 1;
}
.ht-loader .ht-loader-word {
  font-family: var(--ht-font-display);
  font-size: clamp(3rem, 10vw, 9rem);
  line-height: 0.95;
  color: var(--ht-oat);
  white-space: nowrap;
  transition: color 0.7s var(--ht-ease);
}
.ht-loader .ht-loader-word sup {
  font-size: 0.4em;
}
.ht-loader .ht-loader-sub {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-sage);
  text-align: center;
  padding: 0 20px;
  transition: color 0.7s var(--ht-ease);
}
.ht-loader.ht-light {
  background: var(--ht-oat);
}
.ht-loader.ht-light .ht-loader-ring {
  color: var(--ht-terra);
}
.ht-loader.ht-light .ht-loader-word {
  color: var(--ht-forest);
}
.ht-loader.ht-light .ht-loader-sub {
  color: var(--ht-muted);
}
.ht-loader.ht-done {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ht-loader {
    display: none;
  }
}
/* Already seen this session. The attribute is set by a beforeInteractive script
   in the layout, which runs before the body is parsed, so a repeat load never
   paints the loader even for a frame — a flash of loader on every refresh would
   be worse than the loader itself.

   An ATTRIBUTE, not a class: the Google WebFont loader assigns
   `document.documentElement.className` outright as fonts resolve, which wiped a
   class off <html> a few hundred milliseconds in. It does not touch data-*. */
[data-ht-loader="seen"] .ht-loader {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Announcement bar
 *
 * In normal flow, above the sticky header, exactly as the template has it: it
 * scrolls away and the header lightens the moment it goes.
 * ------------------------------------------------------------------------- */

.ht-announce {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ht-apricot);
  color: var(--ht-forest);
  font-family: var(--ht-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  padding: 9px 48px;
}
.ht-announce a {
  color: var(--ht-terra);
  font-weight: 800;
  text-decoration: underline;
}
.ht-announce-x {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ht-forest);
  background: transparent;
  color: var(--ht-forest);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ht-announce-x:hover {
  background: var(--ht-forest);
  color: var(--ht-apricot);
}

/* ---------------------------------------------------------------------------
 * Header
 *
 * `--ht-nav-*` are the colour roles the header swaps between its two states:
 * forest with oat type at the top of the page, oat with forest type once you
 * are past the announcement bar.
 * ------------------------------------------------------------------------- */

.ht-nav {
  --ht-nav-bg: var(--ht-forest);
  --ht-nav-text: var(--ht-oat);
  --ht-nav-dim: rgba(244, 233, 220, 0.85);
  --ht-nav-key: var(--ht-apricot);

  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 28px);
  height: clamp(56px, 5.4vw, 66px);
  padding: 0 clamp(16px, 2.5vw, 48px);
  background: var(--ht-nav-bg);
  border-bottom: 1px solid transparent;
  font-family: var(--ht-font-body);
  transition: background-color 0.5s var(--ht-ease), border-color 0.5s var(--ht-ease),
    transform 0.35s var(--ht-ease), height 0.35s var(--ht-ease);
}
.ht-nav.ht-lit {
  --ht-nav-bg: var(--ht-oat);
  --ht-nav-text: var(--ht-forest);
  --ht-nav-dim: var(--ht-body-ink);
  --ht-nav-key: var(--ht-terra);
  border-bottom-color: var(--ht-line);
  height: clamp(52px, 4.8vw, 58px);
}
/* Slides away while you scroll down, comes back the moment you scroll up. */
.ht-nav.ht-tucked {
  transform: translateY(-102%);
}

.ht-nav a,
.ht-nav .ht-word,
.ht-nav svg {
  transition: color 0.5s var(--ht-ease);
}

.ht-logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 0.9vw, 12px);
  color: var(--ht-nav-text);
  text-decoration: none;
  flex: none;
}
.ht-logo:hover {
  text-decoration: none;
}
.ht-logo .ht-mark {
  width: clamp(28px, 3.2vw, 40px);
  height: clamp(28px, 3.2vw, 40px);
  color: var(--ht-nav-key);
  transition: width 0.35s var(--ht-ease), height 0.35s var(--ht-ease),
    color 0.5s var(--ht-ease);
}
.ht-nav.ht-lit .ht-logo .ht-mark {
  width: clamp(26px, 2.8vw, 32px);
  height: clamp(26px, 2.8vw, 32px);
}
.ht-logo .ht-word {
  font-family: var(--ht-font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  line-height: 1;
  color: var(--ht-nav-text);
  transition: font-size 0.35s var(--ht-ease), color 0.5s var(--ht-ease);
}
.ht-nav.ht-lit .ht-logo .ht-word {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}
.ht-logo .ht-word sup {
  font-size: 0.55em;
}

.ht-navlinks {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 24px);
  margin-left: auto;
  min-width: 0;
  font-weight: 600;
  font-size: clamp(0.66rem, 0.95vw, 0.95rem);
  /* Safety valve. The clamps above are sized to fit all seven labels down to
     roughly 800px; below that, and on any viewport where a translation runs
     longer, the row scrolls rather than colliding with the logo or the buttons.
     The padding/margin pair gives the focus ring somewhere to land — `overflow-x`
     makes the other axis `auto` too, and would otherwise clip it. */
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0;
  margin-top: -8px;
  margin-bottom: -8px;
}
.ht-navlinks::-webkit-scrollbar {
  display: none;
}
.ht-navlinks a {
  color: var(--ht-nav-dim);
  text-decoration: none;
  white-space: nowrap;
}
.ht-navlinks a:hover {
  color: var(--ht-nav-text);
  text-decoration: none;
}
.ht-navlinks a.ht-current {
  color: var(--ht-nav-key);
  font-weight: 800;
}

.ht-nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.9vw, 14px);
  flex: none;
}
.ht-nav .ht-pill {
  padding: clamp(8px, 1.1vw, 11px) clamp(11px, 1.5vw, 22px);
  font-size: clamp(0.72rem, 0.9vw, 0.9rem);
  transition: padding 0.35s var(--ht-ease), font-size 0.35s var(--ht-ease),
    transform 0.15s var(--ht-ease), background 0.15s var(--ht-ease);
}
.ht-nav.ht-lit .ht-pill {
  padding: clamp(7px, 0.9vw, 8px) clamp(12px, 1.6vw, 18px);
  font-size: clamp(0.73rem, 0.9vw, 0.85rem);
}

/* The cart trigger keeps its Webflow markup (and its modal), but not its
   Webflow skin: no container, no pill, no fill — just the icon, inheriting the
   header's ink so it flips with everything else. The count rides on it as a
   small apricot dot. */
.ht-cart .w-commerce-commercecartopenlink {
  background: transparent;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--ht-nav-text);
  padding: 6px;
  margin: 0;
  min-height: 0;
  box-shadow: none;
  transition: color 0.5s var(--ht-ease), opacity 0.15s var(--ht-ease);
}
.ht-cart .w-commerce-commercecartopenlink:hover {
  background: transparent;
  opacity: 0.7;
}
.ht-cart .w-commerce-commercecartopenlinkicon {
  width: 20px;
  height: 20px;
  margin: 0;
}
.ht-cart .w-commerce-commercecartopenlinkcount {
  background: var(--ht-nav-key);
  color: var(--ht-forest);
  font-family: var(--ht-font-body);
  font-weight: 800;
  font-size: 10px;
  line-height: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  /* Webflow's own `.cart-quantity-2` adds a 20px bottom margin, which shunts the
     badge out of line in a flex row. Set all four sides, not just the one. */
  margin: 0 0 0 4px;
  border-radius: var(--ht-pill);
  transition: background-color 0.5s var(--ht-ease);
}

/* ---------------------------------------------------------------------------
 * Mobile menu — phones only. Not in the template; see the file header.
 * ------------------------------------------------------------------------- */

.ht-burger {
  display: none;
  width: 42px;
  height: 42px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: var(--ht-pill);
  background: transparent;
  color: var(--ht-nav-text);
  cursor: pointer;
  padding: 0;
  transition: color 0.5s var(--ht-ease);
}
.ht-burger span {
  position: relative;
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ht-ease), background 0.15s var(--ht-ease);
}
.ht-burger span::before,
.ht-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ht-ease), top 0.25s var(--ht-ease);
}
.ht-burger span::before {
  top: -5px;
}
.ht-burger span::after {
  top: 5px;
}
.ht-burger[aria-expanded="true"] span {
  background: transparent;
}
.ht-burger[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}
.ht-burger[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

.ht-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 79;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: calc(clamp(56px, 5.4vw, 66px) + 28px) 24px 32px;
  background: var(--ht-forest);
  overflow-y: auto;
  animation: ht-menu-in 0.25s var(--ht-ease);
}
@keyframes ht-menu-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}
.ht-mobile-menu a {
  font-family: var(--ht-font-display);
  font-size: 1.5rem;
  color: var(--ht-oat);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(244, 233, 220, 0.18);
}
.ht-mobile-menu a.ht-current {
  color: var(--ht-apricot);
}
.ht-mobile-menu .ht-pill {
  margin-top: 22px;
  align-self: flex-start;
  font-size: 1rem;
  padding: 14px 26px;
}

/* ---------------------------------------------------------------------------
 * Logo band — the brand's sign-off, and the light half of the footer's flip
 * ------------------------------------------------------------------------- */

.ht-logoband {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(48px, 7vw, 90px) 20px;
  background: var(--ht-forest);
  font-family: var(--ht-font-body);
  transition: background-color 0.9s var(--ht-ease);
}
.ht-logoband .ht-mark {
  width: clamp(56px, 6vw, 84px);
  height: auto;
  color: var(--ht-apricot);
  transition: color 0.9s var(--ht-ease);
}
.ht-logoband .ht-word {
  font-family: var(--ht-font-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--ht-oat);
  transition: color 0.9s var(--ht-ease);
}
.ht-logoband .ht-word sup {
  font-size: 0.45em;
}
.ht-logoband .ht-sub {
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-sage);
  transition: color 0.9s var(--ht-ease);
}
.ht-logoband.ht-lit {
  background: var(--ht-oat);
}
.ht-logoband.ht-lit .ht-mark {
  color: var(--ht-terra);
}
.ht-logoband.ht-lit .ht-word {
  color: var(--ht-forest);
}
.ht-logoband.ht-lit .ht-sub {
  color: var(--ht-muted);
}

/* ---------------------------------------------------------------------------
 * Footer — the lights go off when it is fully in view
 * ------------------------------------------------------------------------- */

.ht-footer {
  --ht-f-bg: var(--ht-oat);
  --ht-f-text: var(--ht-forest);
  --ht-f-dim: rgba(41, 50, 12, 0.78);
  --ht-f-faint: rgba(41, 50, 12, 0.55);
  --ht-f-line: rgba(41, 50, 12, 0.5);
  --ht-f-mark: var(--ht-terra);

  background: var(--ht-f-bg);
  color: var(--ht-f-text);
  overflow: hidden;
  border-top: 2px solid var(--ht-line);
  font-family: var(--ht-font-body);
  transition: background-color 0.9s var(--ht-ease), border-color 0.9s var(--ht-ease);
}
.ht-footer.ht-dark {
  --ht-f-bg: var(--ht-forest);
  --ht-f-text: var(--ht-oat);
  --ht-f-dim: rgba(244, 233, 220, 0.78);
  --ht-f-faint: rgba(244, 233, 220, 0.55);
  --ht-f-line: rgba(244, 233, 220, 0.6);
  --ht-f-mark: var(--ht-apricot);
  border-top-color: transparent;
}
.ht-footer a,
.ht-footer p,
.ht-footer span,
.ht-footer h4,
.ht-footer input,
.ht-footer svg,
.ht-footer .ht-watermark {
  transition: color 0.9s var(--ht-ease), border-color 0.9s var(--ht-ease);
}

.ht-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 48px) 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.ht-foot .ht-logo,
.ht-foot .ht-logo .ht-word {
  color: var(--ht-f-text);
}
.ht-foot .ht-logo .ht-mark {
  width: 40px;
  height: 40px;
  color: var(--ht-f-mark);
}
.ht-foot p {
  color: var(--ht-f-dim);
  font-size: 0.92rem;
  max-width: 36ch;
  margin: 16px 0 0;
}
.ht-foot .ht-foot-fine {
  font-size: 0.78rem;
  margin: 10px 0 0;
}

.ht-footcols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.ht-footcols h4 {
  font-family: var(--ht-font-body);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ht-sage);
  margin: 0 0 16px;
  line-height: 1.4;
}
.ht-footcols nav {
  display: grid;
  gap: 12px;
  font-size: 0.95rem;
}
.ht-footcols nav a {
  color: var(--ht-f-dim);
  text-decoration: none;
}
.ht-footcols nav a:hover {
  color: var(--ht-f-text);
  text-decoration: none;
}

/* The 1% for the Planet mark, drawn as a mask so it takes the footer's ink and
   recolours itself when the lights go out. */
.ht-opfp {
  display: block;
  width: 150px;
  aspect-ratio: 480 / 200;
  margin-top: 10px;
  background: var(--ht-f-text);
  transition: background-color 0.9s var(--ht-ease);
  -webkit-mask: url("/images/one-percent-for-the-planet.png") no-repeat left center / contain;
  mask: url("/images/one-percent-for-the-planet.png") no-repeat left center / contain;
}

.ht-newsrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 10px;
}
.ht-newsrow input {
  flex: 1;
  min-width: 180px;
  height: 52px;
  padding: 0 16px;
  border: 2px solid var(--ht-f-line);
  background: transparent;
  color: var(--ht-f-text);
  border-radius: var(--ht-pill);
  font-family: var(--ht-font-body);
  font-size: 0.95rem;
  margin: 0;
}
.ht-newsrow input::placeholder {
  color: var(--ht-f-faint);
}
.ht-newsrow button {
  height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: var(--ht-pill);
  background: var(--ht-apricot);
  color: var(--ht-forest);
  font-family: var(--ht-font-display);
  font-size: 0.92rem;
  cursor: pointer;
}
.ht-newsrow button:hover {
  background: var(--ht-apricot-deep);
}
.ht-newsrow button[disabled] {
  opacity: 0.6;
  cursor: default;
}
.ht-foot-msg {
  margin: 10px 0 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ht-f-text);
}
.ht-foot-msg.ht-error {
  color: var(--ht-terra);
}

.ht-foot-legal {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px) 8px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--ht-f-faint);
}
.ht-foot-legal a {
  color: var(--ht-f-faint);
  text-decoration: none;
}
.ht-foot-legal a:hover {
  color: var(--ht-f-text);
}
.ht-foot-legal-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ht-watermark {
  font-family: var(--ht-font-display);
  font-size: clamp(72px, 15vw, 220px);
  line-height: 0.8;
  color: var(--ht-f-mark);
  opacity: 0.9;
  white-space: nowrap;
  padding: 0 clamp(20px, 4vw, 48px);
  transform: translateY(0.16em);
  user-select: none;
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * The header RESIZES rather than folds: the clamp()s above shrink the mark, the
 * wordmark, the link type, the gaps and the button continuously with the
 * viewport, so the full menu survives all the way down to phone widths. Only
 * two things step, and only to buy the links more room:
 * ------------------------------------------------------------------------- */

/* Below 1180px the wordmark goes and the mark carries the brand alone — roughly
   110px handed straight to the links. The mark stays, so the brand never does. */
@media (max-width: 1180px) {
  .ht-logo .ht-word {
    display: none;
  }
}

/* Phones only: the links become a menu. Everything above this width keeps the
   full row — that is the point of the scale above. */
@media (max-width: 767px) {
  .ht-navlinks {
    display: none;
  }
  .ht-burger {
    display: inline-flex;
  }
  .ht-nav {
    gap: 12px;
  }
  .ht-nav-actions {
    margin-left: auto;
  }
  .ht-foot {
    grid-template-columns: 1fr;
  }
}

/* Very small phones: the pill would crowd the burger, so it drops into the menu
   (where it is the first thing under the links) and the bar keeps logo + cart. */
@media (max-width: 419px) {
  .ht-nav .ht-nav-cta {
    display: none;
  }
  .ht-announce {
    font-size: 0.8rem;
    padding: 9px 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ht-nav,
  .ht-logoband,
  .ht-footer,
  .ht-mobile-menu {
    transition: none;
    animation: none;
  }
  .ht-nav.ht-tucked {
    transform: none;
  }
  /* Without the observer's animation the footer should simply be dark, as the
     template resolves it. */
  .ht-footer {
    --ht-f-bg: var(--ht-forest);
    --ht-f-text: var(--ht-oat);
    --ht-f-dim: rgba(244, 233, 220, 0.78);
    --ht-f-faint: rgba(244, 233, 220, 0.55);
    --ht-f-line: rgba(244, 233, 220, 0.6);
    --ht-f-mark: var(--ht-apricot);
  }
  .ht-logoband {
    background: var(--ht-oat);
  }
  .ht-logoband .ht-mark {
    color: var(--ht-terra);
  }
  .ht-logoband .ht-word {
    color: var(--ht-forest);
  }
  .ht-logoband .ht-sub {
    color: var(--ht-muted);
  }
}