/* =====================================================================
   Henni Records / Hendrick Valera — Site Tokens
   Single source of truth. Imported by every page.
   Date: 2026-05-10
   ===================================================================== */

:root {
  /* ---------- Color ---------- */
  --hv-klein:        #002FA7;
  --hv-klein-deep:   #001F73;
  --hv-pink:         #F766AA;
  --hv-cream:        #F7EAC4;
  --hv-lemon:        #FFE500;
  --hv-ink:          #0a0a0a;
  --hv-paper:        #ffffff;
  --hv-mute:         rgba(0, 0, 0, 0.55);
  --hv-mute-cream:   rgba(247, 234, 196, 0.65);
  --hv-rule:         rgba(0, 0, 0, 0.12);
  --hv-rule-cream:   rgba(247, 234, 196, 0.20);

  /* Legacy aliases. Press page used --pink/--klein/--cream/--lemon/--ink.
     Keep aliases so old templates compile while we migrate. Do NOT use
     these in new code. They will be removed once every page imports tokens.css. */
  --pink:  var(--hv-pink);
  --klein: var(--hv-klein);
  --cream: var(--hv-cream);
  --lemon: var(--hv-lemon);
  --ink:   var(--hv-ink);

  /* ---------- Typography ---------- */
  --hv-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hv-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale. Hero is the loudest beat. Display-md is the new mid-tier so
     other sections can also go loud (manifesto trigger, page titles like
     PRESS. and FULL DISCOGRAPHY) without competing with the hero. */
  --hv-fs-hero:        clamp(72px, 12vw, 168px);
  --hv-fs-display-md:  clamp(48px, 6.4vw, 88px);
  --hv-fs-display-sm:  clamp(28px, 3.2vw, 44px);
  --hv-fs-h1:          clamp(28px, 3vw, 40px);
  --hv-fs-h2:          clamp(22px, 2.4vw, 30px);
  --hv-fs-h3:          18px;
  --hv-fs-body-lg:     17px;
  --hv-fs-body:        15px;
  --hv-fs-small:       13px;
  --hv-fs-kicker:      12px;

  --hv-lh-hero:        0.92;
  --hv-lh-display:     1.02;
  --hv-lh-tight:       1.15;
  --hv-lh-body:        1.5;

  --hv-tracking-hero:    -0.045em;
  --hv-tracking-display: -0.03em;
  --hv-tracking-tight:   -0.01em;
  --hv-tracking-body:    0;
  --hv-tracking-kicker:  0.18em;

  --hv-fw-regular: 400;
  --hv-fw-medium:  500;
  --hv-fw-semi:    600;
  --hv-fw-bold:    700;
  --hv-fw-black:   900;

  /* ---------- Spacing ---------- */
  --hv-pad-section:  clamp(3.5rem, 7vw, 6rem);
  --hv-pad-page-x:   clamp(1.25rem, 4vw, 3rem);
  --hv-gap-xs:       6px;
  --hv-gap-sm:       12px;
  --hv-gap-md:       20px;
  --hv-gap-lg:       32px;
  --hv-gap-xl:       56px;

  /* ---------- Layout ---------- */
  --hv-max:          1280px;
  --hv-max-narrow:   880px;
  --hv-max-wide:     1440px;

  /* ---------- Border / radii ---------- */
  --hv-radius-pill:  999px;
  --hv-radius-md:    14px;
  --hv-radius-sm:    8px;
  --hv-border-thin:  1px;
  --hv-border-bold:  2px;

  /* ---------- Motion ---------- */
  --hv-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hv-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --hv-ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --hv-dur-fast:      160ms;
  --hv-dur-base:      240ms;
  --hv-dur-slow:      420ms;
  --hv-dur-stagger:   80ms;

  /* ---------- z-index ---------- */
  --hv-z-base:    0;
  --hv-z-sticky:  10;
  --hv-z-nav:     50;
  --hv-z-overlay: 100;
  --hv-z-modal:   200;
  --hv-z-toast:   300;
}

/* =====================================================================
   The // motif. One token. Three positions only:
     1) kicker prefix    (e.g.  // SELECTS)
     2) divider mark     (between section labels)
     3) list separator   (between artist names)
   Pink, weight 900, tight tracking. Never cream, never klein.
   ===================================================================== */
.hv-slash {
  display: inline-block;
  color: var(--hv-pink);
  font-weight: var(--hv-fw-black);
  letter-spacing: -0.05em;
  font-feature-settings: "ss01" on;
  line-height: 1;
}
.hv-slash--kicker  { margin-right: 0.5ch; }
.hv-slash--divider { margin: 0 0.6ch; }
.hv-slash--sep     { margin: 0 0.4ch; opacity: 0.85; }

/* =====================================================================
   Kicker. The eyebrow label that sits above section headlines.
   Always paired with .hv-slash--kicker as its prefix.
   ===================================================================== */
.hv-kicker {
  font-family: var(--hv-font-sans);
  font-size: var(--hv-fs-kicker);
  font-weight: var(--hv-fw-semi);
  letter-spacing: var(--hv-tracking-kicker);
  text-transform: uppercase;
  color: var(--hv-ink);
  display: inline-flex;
  align-items: baseline;
}
.hv-kicker--on-klein { color: var(--hv-cream); }
.hv-kicker--on-cream { color: var(--hv-ink); }

/* =====================================================================
   Display-medium type tier. Use exactly once per page on the section
   carrying that page's biggest claim:
     - homepage: the manifesto trigger line in the hero
     - portfolio: FULL DISCOGRAPHY masthead
     - press: PRESS. masthead
   ===================================================================== */
.hv-display-md {
  font-family: var(--hv-font-sans);
  font-size: var(--hv-fs-display-md);
  font-weight: var(--hv-fw-black);
  line-height: var(--hv-lh-display);
  letter-spacing: var(--hv-tracking-display);
}

.hv-display-sm {
  font-family: var(--hv-font-sans);
  font-size: var(--hv-fs-display-sm);
  font-weight: var(--hv-fw-bold);
  line-height: var(--hv-lh-display);
  letter-spacing: var(--hv-tracking-tight);
}

/* =====================================================================
   CTA pill. One shape (rounded). Three fills.
   The press-page square block is retired by adopting these everywhere.
   ===================================================================== */
.hv-pill {
  --pill-fg: var(--hv-paper);
  --pill-bg: var(--hv-pink);
  --pill-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6ch;
  padding: 14px 26px;
  border-radius: var(--hv-radius-pill);
  font-family: var(--hv-font-sans);
  font-size: var(--hv-fs-body);
  font-weight: var(--hv-fw-semi);
  letter-spacing: 0.01em;
  color: var(--pill-fg);
  background: var(--pill-bg);
  border: var(--hv-border-thin) solid var(--pill-border);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--hv-dur-fast) var(--hv-ease-standard),
    background var(--hv-dur-fast) var(--hv-ease-standard),
    color var(--hv-dur-fast) var(--hv-ease-standard);
  white-space: nowrap;
}
.hv-pill:hover  { transform: translateY(-1px); }
.hv-pill:active { transform: translateY(0); }
.hv-pill:focus-visible {
  outline: 2px solid var(--hv-lemon);
  outline-offset: 3px;
}

.hv-pill--pink   { --pill-bg: var(--hv-pink);  --pill-fg: var(--hv-paper); }
.hv-pill--cream  { --pill-bg: var(--hv-cream); --pill-fg: var(--hv-ink); }
.hv-pill--ghost  {
  --pill-bg: transparent;
  --pill-fg: var(--hv-cream);
  --pill-border: var(--hv-cream);
}
.hv-pill--ghost-ink {
  --pill-bg: transparent;
  --pill-fg: var(--hv-ink);
  --pill-border: var(--hv-ink);
}

/* =====================================================================
   Filter bar. Press top-bar style with lemon underline. Adopted as the
   single filter pattern across portfolio AND press.
   ===================================================================== */
.hv-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hv-gap-md) var(--hv-gap-lg);
  padding: 18px 0;
  border-bottom: 1px solid var(--hv-rule);
  font-family: var(--hv-font-sans);
  font-size: var(--hv-fs-body);
}
.hv-filter-bar__label {
  font-size: var(--hv-fs-kicker);
  letter-spacing: var(--hv-tracking-kicker);
  text-transform: uppercase;
  font-weight: var(--hv-fw-semi);
  color: var(--hv-mute);
  margin-right: var(--hv-gap-sm);
}
.hv-filter-bar__btn {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(0, 47, 167, 0.25);
  border-radius: var(--hv-radius-pill);
  padding: 8px 16px;
  font: inherit;
  font-size: var(--hv-fs-small);
  color: var(--hv-ink);
  cursor: pointer;
  transition: background var(--hv-dur-fast) var(--hv-ease-standard),
              color var(--hv-dur-fast) var(--hv-ease-standard),
              border-color var(--hv-dur-fast) var(--hv-ease-standard);
}
.hv-filter-bar__btn:hover {
  border-color: var(--hv-klein);
  color: var(--hv-klein);
}
.hv-filter-bar__btn[aria-pressed="true"] {
  background: var(--hv-klein);
  color: var(--hv-cream);
  border-color: var(--hv-klein);
  font-weight: var(--hv-fw-semi);
}

/* =====================================================================
   Modal. Klein header + cream body + pink kicker + pink X.
   The single modal pattern. Press flip cards are retired.
   ===================================================================== */
.hv-modal {
  position: fixed;
  inset: 0;
  z-index: var(--hv-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  background: rgba(0, 0, 0, 0.55);
}
.hv-modal[aria-hidden="false"] { display: flex; }

.hv-modal__panel {
  width: min(960px, 100%);
  max-height: 92vh;
  background: var(--hv-cream);
  color: var(--hv-ink);
  border-radius: var(--hv-radius-md);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.hv-modal__header {
  background: var(--hv-klein);
  color: var(--hv-cream);
  padding: 20px clamp(20px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hv-gap-md);
}
.hv-modal__kicker { color: var(--hv-pink); }
.hv-modal__title  {
  /* Force cream — Squarespace's site styles can override otherwise. */
  color: var(--hv-cream) !important;
  font-size: var(--hv-fs-h2);
  font-weight: var(--hv-fw-bold);
  letter-spacing: var(--hv-tracking-tight);
  line-height: var(--hv-lh-tight);
}
.hv-modal__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--hv-pink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.hv-modal__close:focus-visible {
  outline: 2px solid var(--hv-lemon);
  outline-offset: 3px;
}
.hv-modal__body {
  padding: clamp(20px, 3vw, 32px);
  overflow: auto;
  font-size: var(--hv-fs-body-lg);
  line-height: var(--hv-lh-body);
}

/* =====================================================================
   Section helpers
   ===================================================================== */
.hv-section {
  padding-top: var(--hv-pad-section);
  padding-bottom: var(--hv-pad-section);
  padding-left: var(--hv-pad-page-x);
  padding-right: var(--hv-pad-page-x);
}
.hv-container { max-width: var(--hv-max); margin: 0 auto; }
.hv-container--narrow { max-width: var(--hv-max-narrow); }

/* =====================================================================
   Manifesto popup. Full-screen, typewriter, sized to fit without scroll.
   Triggered from the homepage hero only.
   ===================================================================== */
.hv-manifesto {
  position: fixed;
  inset: 0;
  z-index: var(--hv-z-modal);
  display: none;
  background: var(--hv-klein);
  color: var(--hv-cream);
}
.hv-manifesto[aria-hidden="false"] { display: block; }
.hv-manifesto__inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 4vw, 56px);
  max-width: var(--hv-max);
  margin: 0 auto;
}
/* Header now holds kicker (left), actions (centered), close (right) all on
   one row. Stacks on narrow screens. */
.hv-manifesto__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--hv-gap-md);
}
.hv-manifesto__actions {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 720px) {
  .hv-manifesto__head {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "kicker close"
      "actions actions";
    row-gap: 14px;
  }
  .hv-manifesto__kicker  { grid-area: kicker; }
  .hv-manifesto__close   { grid-area: close; }
  .hv-manifesto__actions { grid-area: actions; display: none; }
  /* On phones the manifesto frequently runs taller than the viewport.
     Let the inner container scroll instead of clipping the closing
     lines off the bottom. Anchor the body to the top so users see the
     first paragraph immediately and can scroll down to the rest. */
  .hv-manifesto__inner {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hv-manifesto__body { justify-content: flex-start; }
}
.hv-manifesto__kicker {
  font-family: var(--hv-font-sans);
  font-size: var(--hv-fs-kicker);
  font-weight: var(--hv-fw-semi);
  letter-spacing: var(--hv-tracking-kicker);
  text-transform: uppercase;
  color: var(--hv-cream);
  opacity: 0.75;
}
.hv-manifesto__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--hv-pink);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
}
.hv-manifesto__close:focus-visible {
  outline: 2px solid var(--hv-lemon);
  outline-offset: 3px;
}
.hv-manifesto__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--hv-font-sans);
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: var(--hv-fw-medium);
  line-height: 1.35;
  letter-spacing: var(--hv-tracking-tight);
  color: var(--hv-cream);
}
.hv-manifesto__body p {
  min-height: 1em;
  margin: 0;
}
.hv-manifesto__body em {
  font-style: italic;
  font-weight: var(--hv-fw-medium);
}
/* The pivot line ("The records I work on tend to live in their own universe.")
   is the only paragraph set apart with a line space before and after. */
.hv-manifesto__body p.hv-manifesto__pivot {
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}
.hv-manifesto__caret {
  display: inline-block;
  width: 0.5ch;
  background: var(--hv-pink);
  margin-left: 2px;
  animation: hv-caret-blink 1s steps(1) infinite;
}
@keyframes hv-caret-blink {
  50% { opacity: 0; }
}
.hv-manifesto__foot {
  text-align: center;
  font-size: var(--hv-fs-small);
  color: var(--hv-cream);
  opacity: 0.7;
}
.hv-manifesto__skip,
.hv-manifesto__enter {
  appearance: none;
  padding: 10px 18px;
  border-radius: var(--hv-radius-pill);
  font: inherit;
  cursor: pointer;
  letter-spacing: var(--hv-tracking-kicker);
  text-transform: uppercase;
  font-size: var(--hv-fs-kicker);
  font-weight: var(--hv-fw-semi);
  transition: background var(--hv-dur-fast) var(--hv-ease-standard),
              color var(--hv-dur-fast) var(--hv-ease-standard),
              transform var(--hv-dur-fast) var(--hv-ease-standard);
}
.hv-manifesto__skip {
  background: transparent;
  border: 1px solid var(--hv-cream);
  color: var(--hv-cream);
}
.hv-manifesto__skip:hover { background: var(--hv-cream); color: var(--hv-klein); }
.hv-manifesto__enter {
  background: var(--hv-pink);
  border: 1px solid var(--hv-pink);
  color: var(--hv-paper);
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}
.hv-manifesto__enter:hover { transform: translateY(-1px); }

/* Button stagger fade-in. Fires whenever the manifesto becomes visible
   (aria-hidden=false). Skip lands at 2.0s. Enter lands later AND uses a
   longer duration so its pink intensity ramps in gradually instead of
   popping abruptly. */
.hv-manifesto[aria-hidden="false"] .hv-manifesto__skip,
.hv-manifesto[aria-hidden="false"] .hv-manifesto__enter {
  opacity: 0;
  transform: translateY(6px);
  animation: hvManifestoBtnFade 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hv-manifesto[aria-hidden="false"] .hv-manifesto__skip  { animation-delay: 2.00s; }
.hv-manifesto[aria-hidden="false"] .hv-manifesto__enter {
  animation-delay: 2.40s;
  animation-duration: 1.10s;
}
@keyframes hvManifestoBtnFade { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hv-manifesto[aria-hidden="false"] .hv-manifesto__skip,
  .hv-manifesto[aria-hidden="false"] .hv-manifesto__enter {
    opacity: 1; transform: none; animation: none;
  }
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .hv-manifesto__caret { animation: none; }
}

/* =====================================================================
   Site nav. Replaces the Squarespace header after the move to Netlify.
   White bar so the homepage hero's white-to-Klein ramp still blends
   into it without a seam. Name + tagline left, links right, Contact
   as the pink pill (the header CTA treatment the live site used).
   ===================================================================== */
.hv-sitenav {
  background: var(--hv-paper);
  border-bottom: var(--hv-border-thin) solid var(--hv-rule);
  position: relative;
  z-index: var(--hv-z-nav);
  font-family: var(--hv-font-sans);
}
.hv-sitenav__inner {
  max-width: var(--hv-max);
  margin: 0 auto;
  padding: 16px var(--hv-pad-page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hv-gap-md);
  flex-wrap: wrap;
}
.hv-sitenav__brand {
  text-decoration: none;
  color: var(--hv-ink);
  display: grid;
  gap: 3px;
}
.hv-sitenav__name {
  font-size: var(--hv-fs-h3);
  font-weight: var(--hv-fw-black);
  letter-spacing: var(--hv-tracking-tight);
  line-height: 1;
}
.hv-sitenav__tag {
  font-size: var(--hv-fs-kicker);
  font-weight: var(--hv-fw-semi);
  letter-spacing: var(--hv-tracking-kicker);
  text-transform: uppercase;
  color: var(--hv-mute);
}
.hv-sitenav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
  flex-wrap: wrap;
}
.hv-sitenav__link {
  text-decoration: none;
  color: var(--hv-ink);
  font-size: var(--hv-fs-small);
  font-weight: var(--hv-fw-semi);
  padding-bottom: 3px;
  border-bottom: var(--hv-border-bold) solid transparent;
  transition: color var(--hv-dur-fast) var(--hv-ease-standard);
}
.hv-sitenav__link:hover { color: var(--hv-klein); }
.hv-sitenav__link[aria-current="page"] { border-bottom-color: var(--hv-lemon); }
.hv-sitenav__link:focus-visible {
  outline: 2px solid var(--hv-lemon);
  outline-offset: 3px;
}
.hv-sitenav .hv-pill {
  padding: 10px 20px;
  font-size: var(--hv-fs-small);
}

/* =====================================================================
   Site footer. Replaces the Squarespace footer. Ink background,
   name + label line, socials, copyright.
   ===================================================================== */
.hv-sitefoot {
  background: var(--hv-ink);
  color: var(--hv-cream);
  font-family: var(--hv-font-sans);
}
.hv-sitefoot__inner {
  max-width: var(--hv-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--hv-pad-page-x) 1.6rem;
  display: grid;
  gap: var(--hv-gap-lg);
}
.hv-sitefoot__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hv-gap-md);
  flex-wrap: wrap;
}
.hv-sitefoot__name {
  font-size: var(--hv-fs-h3);
  font-weight: var(--hv-fw-black);
  letter-spacing: var(--hv-tracking-tight);
}
.hv-sitefoot__label { color: var(--hv-mute-cream); font-weight: var(--hv-fw-semi); }
.hv-sitefoot__social {
  display: flex;
  gap: var(--hv-gap-md);
}
.hv-sitefoot__social a {
  color: var(--hv-cream);
  text-decoration: none;
  font-size: var(--hv-fs-small);
  font-weight: var(--hv-fw-semi);
  transition: color var(--hv-dur-fast) var(--hv-ease-standard);
}
.hv-sitefoot__social a:hover { color: var(--hv-pink); }
.hv-sitefoot__social a:focus-visible {
  outline: 2px solid var(--hv-lemon);
  outline-offset: 3px;
}
.hv-sitefoot__legal {
  font-size: var(--hv-fs-small);
  color: var(--hv-mute-cream);
  border-top: var(--hv-border-thin) solid var(--hv-rule-cream);
  padding-top: 16px;
}

/* =====================================================================
   Contact form. Netlify Forms backend. Inputs sit on paper with ink
   rules; focus is the lemon outline used everywhere else. The
   "I'm looking for" choices reuse the pill-checkbox pattern.
   ===================================================================== */
.hv-form { display: grid; gap: var(--hv-gap-lg); }
.hv-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hv-gap-md);
}
@media (max-width: 640px) { .hv-form__row { grid-template-columns: 1fr; } }
.hv-form__field { display: grid; gap: 8px; }
.hv-form__label {
  font-size: var(--hv-fs-kicker);
  font-weight: var(--hv-fw-semi);
  letter-spacing: var(--hv-tracking-kicker);
  text-transform: uppercase;
  color: var(--hv-ink);
}
.hv-form__label small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--hv-fw-regular);
  color: var(--hv-mute);
}
.hv-form__input,
.hv-form__textarea {
  appearance: none;
  width: 100%;
  font: inherit;
  font-size: var(--hv-fs-body-lg);
  color: var(--hv-ink);
  background: var(--hv-paper);
  border: var(--hv-border-thin) solid rgba(0, 0, 0, 0.35);
  border-radius: var(--hv-radius-sm);
  padding: 14px 16px;
  transition: border-color var(--hv-dur-fast) var(--hv-ease-standard);
}
.hv-form__input:hover, .hv-form__textarea:hover { border-color: var(--hv-ink); }
.hv-form__input:focus-visible, .hv-form__textarea:focus-visible {
  outline: 2px solid var(--hv-lemon);
  outline-offset: 2px;
  border-color: var(--hv-ink);
}
.hv-form__textarea { min-height: 180px; resize: vertical; }
.hv-form__choices { display: flex; gap: var(--hv-gap-sm); flex-wrap: wrap; }
.hv-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hv-choice span {
  display: inline-block;
  padding: 10px 20px;
  border: var(--hv-border-thin) solid rgba(0, 47, 167, 0.25);
  border-radius: var(--hv-radius-pill);
  font-size: var(--hv-fs-small);
  font-weight: var(--hv-fw-semi);
  color: var(--hv-ink);
  cursor: pointer;
  transition: background var(--hv-dur-fast) var(--hv-ease-standard),
              color var(--hv-dur-fast) var(--hv-ease-standard),
              border-color var(--hv-dur-fast) var(--hv-ease-standard);
}
.hv-choice:hover span { border-color: var(--hv-klein); color: var(--hv-klein); }
.hv-choice input:checked + span {
  background: var(--hv-klein);
  color: var(--hv-cream);
  border-color: var(--hv-klein);
}
.hv-choice input:focus-visible + span {
  outline: 2px solid var(--hv-lemon);
  outline-offset: 2px;
}
.hv-form__note {
  font-size: var(--hv-fs-small);
  color: var(--hv-mute);
}
.hv-form__hp { display: none; }

/* =====================================================================
   Newsletter block. Cream band at the end of blog pages. The form
   itself is a Sender (sender.net) embed dropped into __form.
   ===================================================================== */
.hv-newsletter { background: var(--hv-cream); }
.hv-newsletter__inner {
  max-width: var(--hv-max-narrow);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--hv-pad-page-x);
  display: grid;
  gap: 14px;
}
.hv-newsletter__title {
  font-size: var(--hv-fs-h1);
  font-weight: var(--hv-fw-black);
  letter-spacing: var(--hv-tracking-tight);
  line-height: var(--hv-lh-tight);
}
.hv-newsletter__sub {
  font-size: var(--hv-fs-body);
  color: var(--hv-mute);
}
.hv-newsletter__form { margin-top: 8px; }