/* ==========================================================================
   HiFi "Liner Notes" — design-preview system stylesheet
   Source of truth: warm-vinyl-design-brief-2026-08.md (the brief is the law).

   REVISION 1 (08.12.2026, owner feedback round 1) — two changes:
   A. The monospace register is RETIRED. No blueprint/terminal type anywhere.
      Numbers that must be trusted are set in Montserrat with tabular figures
      (.hifi-num) — aligned and scannable, but warm. The de-clinical pass also
      pulled the wide uppercase tracking off stamps, chips, crumbs and the
      announcement bar.
   B. The chrome is WARM LIGHT. Announcement bar, nav, heroes and footer now
      sit on paper board tones (.hifi-chrome), not dusk. The only dark left on
      any page is the photo plate — the well the black-field product shots
      live in.

   The rule now: everything is paper; the dark is inside the sleeve.
   Breakpoints: 375px baseline, 680px, 900px. Content 1320px, text 860px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS (self-hosted on BunnyCDN — the only external requests allowed)
   Montserrat carries everything, including the numbers (Revision 1). Josefin
   Sans keeps one job: the small caps eyebrow / spine label. No third family
   is loaded, and none is needed — which also removes the pre-revision launch
   blocker of self-hosting a JetBrains Mono woff2.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  src: url('https://hifico.shop/wp-content/themes/astra-child/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900; /* variable font */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('https://hifico.shop/wp-content/themes/astra-child/fonts/josefin-sans-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks (r9 split, 2026-08-23): the fold paints before the webfonts
   land, so the swap must not move text. Overrides computed from the shipped woff2 files
   against Arial with frequency-weighted glyph widths. */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto');
  size-adjust: 110.99%;
  ascent-override: 87.22%;
  descent-override: 22.62%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Josefin Sans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto');
  size-adjust: 109.33%;
  ascent-override: 68.60%;
  descent-override: 22.87%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. TOKENS (brief §3). Base tokens ARE the paper context.
   -------------------------------------------------------------------------- */
:root {
  /* paper (base) */
  --hifi-bg:#f6efe3;            /* cream sheet */
  --hifi-bg-2:#efe4d0;          /* kraft band — section rhythm */
  --hifi-surface:#fbf7ee;       /* cards, panels */
  --hifi-surface-2:#fffdf6;     /* hover / elevated */
  --hifi-text:#2b140a;          /* THE ink */
  --hifi-text-soft:#4a3626;
  --hifi-muted:#6f5c46;         /* 5.58:1 on bg */
  --hifi-line:rgba(43,20,10,.14);
  --hifi-line-strong:rgba(43,20,10,.28);
  --hifi-line-control:#7a6a58;  /* interactive boundaries — 4.87:1 on surface,
                                   4.56:1 on the sheet. A form control's edge is
                                   information, so it clears 3:1, unlike a rule. */

  /* gold — stage light or button fill, never ink on paper */
  --hifi-gold:#FEDE00;
  --hifi-gold-soft:rgba(254,222,0,.35);
  --hifi-gold-hover:#f2cf00;
  --hifi-gold-active:#e5c200;
  --hifi-gold-ink:#6b5500;      /* gold as TEXT on paper — 6.28:1 */

  /* chrome board tones — REVISION 1. The warm-light replacement for the dusk
     bookends: nav + announcement bar, heroes, footer. */
  --hifi-board:#e7d8bf;         /* nav + hero field */
  --hifi-board-deep:#dccaad;    /* announcement strip + footer field */

  /* dusk constants. The plate still uses them; the .hifi-dusk scope is kept
     defined but UNUSED after Revision 1 so a dark hero can be restored by
     swapping one class back on one section. */
  --hifi-dusk:#2b140a;          --hifi-dusk-2:#220f07;
  --hifi-dusk-surface:#3b2313;  --hifi-dusk-surface-2:#48301c;
  --hifi-dusk-text:#f6efe3;     --hifi-dusk-text-soft:#e3d5bd;
  --hifi-dusk-muted:#c0a98c;    /* 7.70:1 on dusk */
  --hifi-dusk-line:rgba(246,239,227,.14);
  --hifi-dusk-line-strong:rgba(246,239,227,.28);

  /* objects & semantics */
  --hifi-plate:#1a0c05;         /* photo sleeve wells */
  --hifi-stamp:#5d4a33;         /* dated-stamp ink — 7.37:1 on cream */
  --hifi-positive:#4d5326;      /* in-stock sage — 7.12:1 on cream */
  --hifi-negative:#8c2b20;      /* error brick — 7.40:1 on cream */
  --hifi-wine:#421e21;          /* editorial accent */

  /* fonts */
  --hifi-f-head:'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
  --hifi-f-body:'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
  --hifi-f-accent:'Josefin Sans', 'Josefin Sans Fallback', system-ui, sans-serif;
  /* RETIRED in Revision 1 — kept aliased to the body stack so any stray
     var(--hifi-f-mono) still renders warm instead of reintroducing terminal
     type. Nothing in this stylesheet references it. */
  --hifi-f-mono:'Montserrat', system-ui, sans-serif;

  /* layout constants */
  --hifi-radius:14px;           /* cards */
  --hifi-radius-plate:10px;     /* plate inside card */
  --hifi-radius-pill:99px;      /* buttons */
  --hifi-pad-x:18px;            /* mobile gutter */
}

/* THE CHROME SCOPE (Revision 1). Applied to the nav wrapper, the heroes and
   the footer — the regions that used to be dusk. Same mechanism as before:
   re-declare the surface/text/line names, component CSS never forks. Muted and
   gold-ink are darkened here because the board tones are deeper than paper
   (keeps every label at AA on #e7d8bf and #dccaad). */
.hifi-chrome {
  --hifi-bg:#e7d8bf;
  --hifi-bg-2:#dccaad;
  --hifi-surface:#f2e8d6;
  --hifi-surface-2:#f8f1e3;
  --hifi-text:#2b140a;
  --hifi-text-soft:#4a3626;
  --hifi-muted:#5d4a33;              /* 6.01:1 on board, 5.25:1 on board-deep */
  --hifi-gold-ink:#5c4900;           /* 6.22:1 on board, 5.44:1 on board-deep */
  --hifi-line:rgba(43,20,10,.16);
  --hifi-line-strong:rgba(43,20,10,.30);
  background: var(--hifi-bg);
  color: var(--hifi-text);
}

/* The dusk scope — UNUSED after Revision 1, kept intact so a dark hero is a
   one-class change (hifi-chrome → hifi-dusk on that one <section>). */
.hifi-dusk {
  --hifi-bg:#2b140a;
  --hifi-bg-2:#220f07;
  --hifi-surface:#3b2313;
  --hifi-surface-2:#48301c;
  --hifi-text:#f6efe3;
  --hifi-text-soft:#e3d5bd;
  --hifi-muted:#c0a98c;
  --hifi-line:rgba(246,239,227,.14);
  --hifi-line-strong:rgba(246,239,227,.28);
  background: var(--hifi-bg);
  color: var(--hifi-text);
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hifi-bg);
  color: var(--hifi-text);
  font-family: var(--hifi-f-body);
  font-size: 17px;            /* body floor 16px at 375 — we sit above it */
  line-height: 1.6;
  font-weight: 450;           /* a hair heavier than 400 — warmer on cream */
}
img, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--hifi-line); margin: 24px 0; }
::selection { background: var(--hifi-gold-soft); }

/* Focus rings: always visible. Gold-ink on paper, gold on dusk. */
:focus-visible { outline: 2px solid var(--hifi-gold-ink); outline-offset: 2px; }
.hifi-dusk :focus-visible { outline-color: var(--hifi-gold); }

/* Reduced motion: nothing spins anyway, but respect it fully. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   4. TYPE SCALE (brief §6)
   -------------------------------------------------------------------------- */
h1, .hifi-h1 { font-family: var(--hifi-f-head); font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .5em; }
h2, .hifi-h2 { font-family: var(--hifi-f-head); font-size: 26px; line-height: 1.2;  font-weight: 650; margin: 0 0 .5em; }
h3, .hifi-h3 { font-family: var(--hifi-f-head); font-size: 21px; line-height: 1.3;  font-weight: 600; margin: 0 0 .5em; }
p { margin: 0 0 1em; }

/* Hero display — dusk heroes only (dancehall-poster weight) */
.hifi-display {
  font-family: var(--hifi-f-head);
  font-size: clamp(34px, 8vw, 52px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 .4em;
}

/* small / meta */
/* Revision 1: fine print is still body copy, so it sits at the 16px mobile
   floor. The set no longer whispers the locked facts in a smaller grey tier —
   that tiering was itself part of the datasheet feel. */
.hifi-meta { font-size: 14.5px; line-height: 1.5; font-weight: 500; }
.hifi-fine { font-size: 16px; line-height: 1.55; font-weight: 500; }
.hifi-fine { color: var(--hifi-muted); }

/* Josefin's ONE job: small-caps eyebrows / section labels.
   Revision 1: tracking eased .14em → .09em and the size lifted a half-step —
   the tight-tracked micro-caps were half of what read as "spec sheet". */
.hifi-eyebrow {
  display: block;
  font-family: var(--hifi-f-accent);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hifi-muted);
  margin: 0 0 10px;
}

/* Number utility (Revision 1, replaces .hifi-mono).
   Trusted numbers stay aligned and scannable through tabular figures, not
   through a typewriter face. Weight carries the emphasis mono used to carry. */
.hifi-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 600;
  letter-spacing: 0;
}

/* Catalog-spine section label ("Side A — Drinks") — Josefin, the sleeve voice */
.hifi-spine {
  font-family: var(--hifi-f-accent);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hifi-muted);
}

/* Effect-word marker wash (vibe H2s): searched word gets the gold-soft wash */
.hifi-marker {
  background: linear-gradient(180deg, transparent 58%, var(--hifi-gold-soft) 58%);
  padding: 0 2px;
}

/* --------------------------------------------------------------------------
   5. LAYOUT — containers, bands, grid
   -------------------------------------------------------------------------- */
.hifi-container { max-width: 1320px; margin-inline: auto; padding-inline: var(--hifi-pad-x); }
.hifi-container--text { max-width: 860px; }
@media (min-width: 680px) { :root { --hifi-pad-x: 24px; } }

/* Section bands. One kind of dark/light boundary: full-bleed band edge. */
.hifi-band { padding: 40px 0; }
.hifi-band--kraft { background: var(--hifi-bg-2); }
@media (min-width: 900px) { .hifi-band { padding: 56px 0; } }

/* Product grid */
.hifi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
@media (min-width: 900px) { .hifi-grid { gap: 20px; } }

/* --------------------------------------------------------------------------
   6. PREVIEW RIBBON — slim fixed top-corner tag (preview chrome, not design)
   -------------------------------------------------------------------------- */
.hifi-preview-ribbon {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
  background: var(--hifi-dusk);
  color: var(--hifi-dusk-text);
  font-family: var(--hifi-f-accent);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-top-left-radius: 8px;
  box-shadow: inset 0 2px 0 var(--hifi-gold);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. CHROME — announcement bar + nav (warm board, Revision 1)
   Markup contract: assets/chrome-header.html — paste verbatim.
   The masthead is one warm field: a deeper board strip for the announcement,
   the board itself behind the nav, a single warm hairline closing it.
   -------------------------------------------------------------------------- */
.hifi-announce {
  margin: 0;
  background: var(--hifi-bg-2);            /* #dccaad inside .hifi-chrome */
  color: var(--hifi-text-soft);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  padding: 9px var(--hifi-pad-x);
}
@media (min-width: 900px) { .hifi-announce { text-align: center; } }

/* Rev 3.1: the masthead closes on the same 2px ink rule the footer opens
   with, so the page is bookended by hardware instead of fading in.
   Rev 3.2: the nav row is PINNED (markup: it now sits as its own
   .hifi-nav.hifi-chrome block directly after </header>, so sticky is not
   trapped inside the header's box). Announcement + trust bar scroll away;
   only this slim row rides along. Slightly translucent over a blur where
   supported, solid board where not. */
.hifi-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 2px solid var(--hifi-text);
  box-shadow: 0 6px 18px rgba(43,20,10,.07);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hifi-nav {
    background: rgba(231,216,191,.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
.hifi-nav__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 8px var(--hifi-pad-x) 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 18px;
}
/* Wordmark: ink on board, sitting on the gold label stripe. Gold stays in the
   masthead as a mark, never as text — #FEDE00 type on any paper tone is 1.05:1
   and unreadable. The stripe is the brand's one gold note up here. */
.hifi-nav__brand {
  order: 1;
  position: relative;
  font-family: var(--hifi-f-head);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--hifi-text);
  text-decoration: none;
  padding: 14px 0 16px;
}
.hifi-nav__brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 5px;
  border-radius: 3px;
  background: var(--hifi-gold);
}
.hifi-nav__cart {
  order: 2;
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  color: var(--hifi-text);
  text-decoration: none;
}
.hifi-nav__cart-count {
  position: absolute;
  top: 1px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 3px;
  border-radius: var(--hifi-radius-pill);
  background: var(--hifi-text);            /* ink dot — gold stays on the mark */
  color: var(--hifi-bg);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 20px;
  text-align: center;
}
/* Mobile: simple horizontal scroll row (mockup — no JS hamburger).
   Scroll affordance: scrollbar is hidden on mobile, so a right-edge fade
   signals that more links sit offscreen; the row's right padding lets the
   last link scroll clear of the fade. */
.hifi-nav__links {
  order: 3;
  width: 100%;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 899.98px) {
  .hifi-nav__links {
    scrollbar-width: none;
    padding-right: 32px;
    padding-block: 6px;              /* the focus ring paints inside the scrollport */
    scroll-padding-inline: 6px 34px; /* focus never lands under the edge fade */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .hifi-nav__links::-webkit-scrollbar { display: none; }
}
.hifi-nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: var(--hifi-text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
/* Active/hover = the needle-drop tick, never a color change */
.hifi-nav__links a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 2px;
  background: transparent;
}
/* On board, ink reads the tick cleanly and keeps gold to the mark + CTAs */
.hifi-nav__links a:hover::after,
.hifi-nav__links a.is-active::after { background: var(--hifi-text); }
@media (min-width: 900px) {
  .hifi-nav__inner { padding-top: 0; }
  .hifi-nav__links { order: 2; width: auto; overflow: visible; }
  .hifi-nav__cart { order: 3; }
}

/* --------------------------------------------------------------------------
   8. FOOTER (warm board, Revision 1 — the deepest paper on the page)
   Markup contract: assets/chrome-footer.html — paste verbatim.
   It anchors by tone and by one ink rule, not by going dark.
   -------------------------------------------------------------------------- */
/* Rev 3.4 (owner: giant, poorly spaced, redundant): compacted. Link rows
   sit at ~34px; WCAG 2.5.8's 24px floor is cleared, and the 48px floor
   stays a shopping-surface rule, traded here for density on the owner's
   call. The flower signoff and both trust notes left the markup; the
   brand sentence rides in the copyright row now. */
.hifi-footer {
  background: var(--hifi-bg-2);            /* #dccaad inside .hifi-chrome */
  border-top: 2px solid var(--hifi-text);
  color: var(--hifi-text-soft);
  font-size: 15px;
  margin-top: 40px;
}
.hifi-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;          /* link columns pair up on mobile */
  gap: 22px 20px;
  padding-top: 36px;
  padding-bottom: 26px;
}
.hifi-footer__col--visit,
.hifi-footer__col--connect { grid-column: 1 / -1; }
@media (min-width: 680px) { .hifi-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.hifi-footer .hifi-eyebrow { color: var(--hifi-muted); margin-bottom: 4px; }
.hifi-footer__col p { margin: 0 0 .5em; }
.hifi-footer__links { list-style: none; margin: 0; padding: 0; display: grid; }
.hifi-footer__links a {
  display: block;
  padding: 7px 0;
  color: var(--hifi-text-soft);
  text-decoration: none;
}
.hifi-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hifi-footer__addr { font-style: normal; }
.hifi-footer__legal {
  border-top: 1px solid var(--hifi-line-strong);
  padding-top: 18px;
  padding-bottom: 32px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hifi-muted);
}
.hifi-footer__compliance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  color: var(--hifi-text-soft);
}

/* --------------------------------------------------------------------------
   9. BUTTONS & LINKS (brief §4, §7)
   Discipline: ONE primary gold element per view.
   -------------------------------------------------------------------------- */
.hifi-btn-primary,
.hifi-btn-secondary,
.hifi-btn-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;                        /* touch floor at 375px */
  padding: 12px 26px;
  border-radius: var(--hifi-radius-pill);
  font-family: var(--hifi-f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
/* Primary: the gold hype-sticker — fill + ink text + 1px solid ink border */
.hifi-btn-primary {
  background: var(--hifi-gold);
  color: var(--hifi-dusk);
  border: 1px solid var(--hifi-dusk);
}
.hifi-btn-primary:hover  { background: var(--hifi-gold-hover); }
.hifi-btn-primary:active { background: var(--hifi-gold-active); }
/* Secondary: quiet outline in the current ink */
.hifi-btn-secondary {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
}
.hifi-btn-secondary:hover { background: var(--hifi-surface-2); }
/* Tertiary / text link: gold-ink — darkened automatically inside .hifi-chrome */
.hifi-link {
  color: var(--hifi-gold-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hifi-link:hover { text-decoration-thickness: 2px; }
/* A .hifi-link that IS the line (not a word inside a sentence) carries a real
   touch target: padding grows it, negative margins cancel it visually. */
.hifi-link--cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 4px;
  margin: -12px -4px;
}
.hifi-dusk .hifi-link { color: var(--hifi-gold); }

/* Light form base (qty, newsletter fields) */
.hifi-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--hifi-line-control);
  border-radius: 10px;
  background: var(--hifi-surface);
  color: var(--hifi-text);
}
.hifi-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--hifi-line-control);   /* a control edge is information */
  border-radius: var(--hifi-radius-pill);
  background: var(--hifi-surface);
}                                              /* no overflow:hidden — it clipped the focus ring */
.hifi-qty button {
  min-width: 48px;
  min-height: 48px;                        /* touch floor — the button itself, not just the bordered pill */
  border: 0;
  background: transparent;
  color: var(--hifi-text);
  font-size: 18px;
}
.hifi-qty input {
  width: 48px;
  border: 0;
  text-align: center;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------------
   10. CARDS + PLATES (brief §7, §8)
   Photos never touch paper: every image sits in a dusk sleeve well.
   -------------------------------------------------------------------------- */
.hifi-card {
  display: flex;
  flex-direction: column;
  background: var(--hifi-surface);
  border: 1px solid var(--hifi-line);
  border-radius: var(--hifi-radius);
  /* Revision 1: a whisper of warm shadow. Rev 3.2: lifted to a light
     float, cards hover just off the sheet and rise 2px on hover. */
  box-shadow: 0 2px 4px rgba(43,20,10,.06), 0 12px 26px rgba(43,20,10,.07);
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}
.hifi-card:hover {
  background: var(--hifi-surface-2);
  border-color: var(--hifi-line-strong);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(43,20,10,.07), 0 18px 34px rgba(43,20,10,.09);
}
.hifi-card > .hifi-plate { margin: 8px 8px 0; }
.hifi-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 14px 16px 16px; }
.hifi-card__title { font-size: 21px; line-height: 1.3; font-weight: 600; margin: 0; }
.hifi-card__title a { text-decoration: none; }
.hifi-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hifi-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  font-weight: 550;
  font-variant-numeric: tabular-nums lining-nums;
}
.hifi-card__price { font-weight: 700; }
.hifi-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* The plate: dusk in miniature — groove ring, warm top light, edge vignette */
.hifi-plate {
  position: relative;
  background: var(--hifi-plate);
  border-radius: var(--hifi-radius-plate);
  overflow: hidden;
  aspect-ratio: 1 / 1;                      /* grid crop */
}
.hifi-plate--4x5 { aspect-ratio: 4 / 5; }   /* PDP gallery crop */
.hifi-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hifi-plate::before {                        /* faint warm top-light */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(141,103,73,.12), transparent 55%);
  pointer-events: none;
}
.hifi-plate::after {                         /* groove ring + edge vignette.
                                                Rev 3.2: a top inner shadow
                                                sinks the well into the card. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(246,239,227,.08),
              inset 0 3px 8px rgba(0,0,0,.38),
              inset 0 0 26px rgba(43,20,10,.35);
  pointer-events: none;
}

/* Out-of-stock state: plate dims, honest chip */
.hifi-card.is-oos .hifi-plate img { opacity: .6; }
.hifi-plate > .hifi-chip { position: absolute; left: 10px; bottom: 10px; z-index: 1; }

/* Chips (sale sticker, OOS note, quiet tags) */
.hifi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  padding: 7px 11px;
  border-radius: var(--hifi-radius-pill);   /* Revision 1: rounded, not ruled */
  color: var(--hifi-text-soft);
  border: 1px solid var(--hifi-line-strong);
  background: var(--hifi-surface);
  white-space: nowrap;                      /* a chip never breaks across lines */
}
.hifi-chip--sale {                           /* the only gold allowed on a card */
  background: var(--hifi-gold);
  color: var(--hifi-dusk);
  border-color: var(--hifi-dusk);
}
.hifi-chip--oos { color: var(--hifi-text-soft); }

/* --------------------------------------------------------------------------
   11. FACTS BLOCK — pure paper, zero motif (brief §7)
   Row order: mg/serving, total mg, servings, cannabinoid type, flavor,
   ingredients (collapsible), Vibe, COA link.
   PLACEMENT DECISION (08.12.2026): the dated-stamp pair lives at the FOOT of
   the availability block (content-briefs.md block 6), NOT as a final facts
   row — the brief's "final row" wording is superseded for this preview so
   the facts block ends on the COA link, its most trustable element. Both
   PDPs follow this; the old .hifi-facts__row--stamps hook was removed.
   -------------------------------------------------------------------------- */
.hifi-facts {
  background: var(--hifi-surface-2);
  border: 1px solid var(--hifi-line);
  border-radius: var(--hifi-radius);
  box-shadow: 0 1px 2px rgba(43,20,10,.05), 0 6px 14px rgba(43,20,10,.035);
  padding: 6px 18px;
}
.hifi-facts__row {
  display: grid;
  grid-template-columns: minmax(112px, 36%) 1fr;
  gap: 6px 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--hifi-line);
}
.hifi-facts__row:first-child { border-top: 0; }
.hifi-facts__label {
  font-family: var(--hifi-f-accent);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hifi-muted);
}
/* Revision 1: the values are the credits on a sleeve, not cells in a datasheet
   — Montserrat with tabular figures, a size up from the old mono setting. */
.hifi-facts__value {
  font-size: 16px;
  font-weight: 550;
  line-height: 1.55;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hifi-text);
  overflow-wrap: anywhere;
}
/* Collapsible ingredients inside a value cell */
.hifi-facts details > summary {
  list-style: none;
  cursor: pointer;
  display: inline;
  color: var(--hifi-gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hifi-facts details > summary::-webkit-details-marker { display: none; }
.hifi-facts details[open] > summary { margin-bottom: 6px; display: inline-block; }
/* COA row — deliberately the most trustable-looking element on the page */
.hifi-facts__row--coa .hifi-facts__value a {
  color: var(--hifi-gold-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* --------------------------------------------------------------------------
   12. DATED STAMP — the trust machinery. Never gold, never bold, no glyphs.
   Revision 1: the ruled uppercase box was the most blueprint-looking element
   on the site. Same job, warmer clothes — sentence case, no tracking, a soft
   ink wash instead of a border.
   -------------------------------------------------------------------------- */
.hifi-stamp {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hifi-stamp);
  background: rgba(43,20,10,.055);
  border: 0;
  border-radius: var(--hifi-radius-pill);
  padding: 7px 13px;
  white-space: nowrap;
}
.hifi-chrome .hifi-stamp { color: var(--hifi-muted); background: rgba(43,20,10,.07); }
.hifi-dusk .hifi-stamp { color: var(--hifi-muted); background: rgba(246,239,227,.10); }

/* --------------------------------------------------------------------------
   13. FULFILLMENT MODULE — Side A / Side B lanes (brief §7)
   No delivery language exists anywhere in this pattern.
   -------------------------------------------------------------------------- */
.hifi-fulfillment { display: grid; gap: 12px; }
@media (min-width: 680px) { .hifi-fulfillment { grid-template-columns: 1fr 1fr; } }
.hifi-fulfillment__lane {
  background: var(--hifi-surface);
  border: 1px solid var(--hifi-line);
  border-radius: var(--hifi-radius);
  padding: 16px 18px;
}
.hifi-fulfillment__lane .hifi-eyebrow { margin-bottom: 8px; }
.hifi-fulfillment__lane p { margin: 0 0 .4em; }
.hifi-fulfillment__lane.is-active {         /* gold-soft wash behind ink */
  background: linear-gradient(var(--hifi-gold-soft), var(--hifi-gold-soft)), var(--hifi-surface);
  border-color: var(--hifi-line-strong);
}
/* status dot (pairs with words — never color alone) */
.hifi-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.hifi-dot--ok  { background: var(--hifi-positive); }
.hifi-dot--out { background: var(--hifi-negative); }

/* --------------------------------------------------------------------------
   14. MG LADDER — a fader, not a chart (brief §7)
   -------------------------------------------------------------------------- */
.hifi-ladder { max-width: 560px; }
.hifi-ladder__track {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.hifi-ladder__track::before {               /* the one 1px groove line */
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 20px;
  height: 1px;
  background: var(--hifi-line-strong);
}
.hifi-ladder__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  min-height: 48px;                          /* touch floor */
  padding: 12px 10px 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hifi-muted);
}
.hifi-ladder__stop::before {                 /* the stop dot */
  content: "";
  width: 10px;
  height: 10px;
  margin: 4px 0 10px;
  border-radius: 50%;
  background: var(--hifi-surface);
  border: 1px solid var(--hifi-line-strong);
}
.hifi-ladder__stop.is-active { color: var(--hifi-text); font-weight: 700; }
.hifi-ladder__stop.is-active::before {       /* the needle: gold dot, ink ring */
  width: 14px;
  height: 14px;
  margin: 2px 0 8px;
  background: var(--hifi-gold);
  border: 0;
  box-shadow: 0 0 0 2px var(--hifi-text);
}
.hifi-ladder__caption {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--hifi-muted);
}

/* --------------------------------------------------------------------------
   15. FAQ — liner notes on the kraft band. <details>-based, zero JS.
   -------------------------------------------------------------------------- */
.hifi-faq {
  background: var(--hifi-bg-2);
  border-radius: var(--hifi-radius);
  padding: 10px 18px;
}
.hifi-faq__item { border-top: 1px solid var(--hifi-line); }
.hifi-faq__item:first-of-type { border-top: 0; }
.hifi-faq__item > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;                          /* row floor */
  padding: 12px 0;
  cursor: pointer;
  font-family: var(--hifi-f-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hifi-text);
}
.hifi-faq__item > summary::-webkit-details-marker { display: none; }
.hifi-faq__num {                             /* track numbers, liner-note style */
  font-family: var(--hifi-f-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hifi-muted);
}
.hifi-faq__item > summary::after {           /* toggle in gold-ink */
  content: "+";
  margin-left: auto;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--hifi-gold-ink);
}
.hifi-faq__item[open] > summary::after { content: "\2212"; } /* minus */
.hifi-faq__a {
  padding: 0 28px 18px 0;
  max-width: 70ch;
  font-weight: 450;
  color: var(--hifi-text-soft);
}
.hifi-faq__a p { margin: 0 0 .6em; }

/* --------------------------------------------------------------------------
   16. VIBE PILLS — printed genre labels, not glowing badges (brief §5)
   Pills always carry their word — never color alone.
   -------------------------------------------------------------------------- */
.hifi-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--hifi-radius-pill);
  padding: 4px 12px;
  font-family: var(--hifi-f-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.hifi-pill--energizing  { background: #f0dfa6; color: #635d04; border-color: rgba(99,93,4,.25); }
.hifi-pill--uplifting   { background: #ecd3bd; color: #7c4526; border-color: rgba(124,69,38,.25); }
.hifi-pill--balancing   { background: #dde0c6; color: #535928; border-color: rgba(83,89,40,.25); }
.hifi-pill--relaxing    { background: #dde3e6; color: #37444b; border-color: rgba(55,68,75,.25); }
.hifi-pill--restorative { background: #e6d5e2; color: #5f2356; border-color: rgba(95,35,86,.25); }

/* --------------------------------------------------------------------------
   17. HERO — warm board band (Revision 1). Homepage + collection/hub tops ONLY.
   Use class pair: <section class="hifi-hero hifi-chrome">. It shares the
   masthead's board tone, so the top of the page reads as one warm cover
   instead of a dark slab. Swap hifi-chrome → hifi-dusk on this one section to
   put the dark hero back.
   Corner grooves: concentric 1px ink arcs at 7% opacity, never behind text.
   -------------------------------------------------------------------------- */
.hifi-hero { position: relative; overflow: hidden; }
.hifi-hero::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0 24px,
    rgba(43,20,10,.07) 24px 25px
  );
  pointer-events: none;
}
.hifi-dusk.hifi-hero::before {
  background: repeating-radial-gradient(
    circle,
    transparent 0 24px,
    rgba(246,239,227,.06) 24px 25px
  );
}
.hifi-hero__inner {
  position: relative;
  max-width: 1320px;
  margin-inline: auto;
  padding: 52px var(--hifi-pad-x) 56px;
}
.hifi-hero__inner > * { max-width: 640px; }  /* keeps text clear of the arcs */
.hifi-hero .hifi-eyebrow { color: var(--hifi-muted); }
.hifi-hero__lede { font-size: 18px; color: var(--hifi-text-soft); }
.hifi-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
@media (min-width: 900px) { .hifi-hero__inner { padding-top: 76px; padding-bottom: 84px; } }

/* --------------------------------------------------------------------------
   18. ENCORE BLOCK — reorders are gold (the sentence, not the color)
   -------------------------------------------------------------------------- */
.hifi-encore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  background: var(--hifi-surface);
  border: 1px solid var(--hifi-line-strong);
  border-radius: var(--hifi-radius);
  box-shadow: 0 1px 2px rgba(43,20,10,.05), 0 6px 14px rgba(43,20,10,.035);
  padding: 20px 22px;
}
.hifi-encore__copy { flex: 1 1 300px; }
.hifi-encore__copy .hifi-eyebrow { margin-bottom: 6px; }
.hifi-encore__copy p { margin: 0; }

/* --------------------------------------------------------------------------
   19. BREADCRUMBS — quiet paper trail
   -------------------------------------------------------------------------- */
.hifi-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--hifi-muted);
  padding: 16px 0 4px;
}
.hifi-crumbs a {
  color: inherit;
  text-decoration: none;
  /* hit area without layout shift: padding grows the target, negative
     margins cancel it visually (~45px effective target) */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 4px;
  margin: -12px -4px;
}
.hifi-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hifi-crumbs [aria-current="page"] { color: var(--hifi-text); }

/* --------------------------------------------------------------------------
   20. SMALL UTILITIES
   -------------------------------------------------------------------------- */
.hifi-stack-sm > * + * { margin-top: 10px; }
.hifi-stack    > * + * { margin-top: 20px; }
.hifi-center { text-align: center; }
.hifi-muted-text { color: var(--hifi-muted); }
.hifi-soft-text { color: var(--hifi-text-soft); }
.hifi-positive-text { color: var(--hifi-positive); }
.hifi-negative-text { color: var(--hifi-negative); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   Revision 2 — live-site structural sync
   Trust bar, 5-column footer, Vibe spec grid, quality tiers.
   ============================================================ */

/* --- header trust bar (live: below the announcement bar) --- */
.hifi-trustbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 18px;
  margin: 0;
  padding: 8px var(--hifi-pad-x);
  list-style: none;
  background: var(--hifi-bg);
  border-top: 1px solid var(--hifi-line);
  color: var(--hifi-muted);
  font-family: var(--hifi-f-accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow-x: auto;
  scrollbar-width: none;
}
.hifi-trustbar::-webkit-scrollbar { display: none; }
.hifi-trustbar li { flex: 0 0 auto; }
.hifi-trustbar li + li::before { content: "\00b7"; margin-right: 18px; }
@media (min-width: 900px) {
  .hifi-trustbar { justify-content: center; overflow-x: visible; }
}

/* --- footer: five live columns (Rev 3.4: spans release at 900px) --- */
@media (min-width: 900px) {
  .hifi-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr; }
  .hifi-footer__col--visit,
  .hifi-footer__col--connect { grid-column: auto; }
}
.hifi-footer__copy {
  margin: 0;
  color: var(--hifi-muted);
  font-size: 14px;
}

/* --- vibe spec cards --- */
.vibe-spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
}
@media (min-width: 620px)  { .vibe-spec-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .vibe-spec-grid { grid-template-columns: repeat(5, 1fr); } }
.vibe-spec {
  padding: 20px 18px;
  background: var(--hifi-bg);
  border: 1px solid var(--hifi-line);
  border-radius: var(--hifi-radius, 4px);
}
.vibe-spec__code {
  margin: 0 0 .5em;
  font-family: var(--hifi-f-accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hifi-muted);
}
.vibe-spec__name { margin: 0 0 .35em; font-size: 20px; line-height: 1.25; }
.vibe-spec__desc { margin: 0 0 .8em; font-size: 16px; color: var(--hifi-text-soft); }
.vibe-spec__terps {
  margin: 0;
  padding-top: .8em;
  border-top: 1px solid var(--hifi-line);
  font-size: 14px;
  color: var(--hifi-muted);
}

/* --- quality tiers --- */
.vibe-tier-head { margin-top: 56px; }
.vibe-tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
}
@media (min-width: 780px) { .vibe-tier-grid { grid-template-columns: repeat(3, 1fr); } }
.vibe-tier {
  padding: 20px 18px;
  background: var(--hifi-bg);
  border: 1px solid var(--hifi-line);
  border-radius: var(--hifi-radius, 4px);
}
.vibe-tier__name { margin: 0 0 .25em; font-size: 20px; line-height: 1.25; }
.vibe-tier__sub {
  margin: 0 0 .6em;
  font-family: var(--hifi-f-accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hifi-muted);
}
.vibe-tier__desc { margin: 0; font-size: 16px; color: var(--hifi-text-soft); }

/* --- home story band --- */
.home-story p { max-width: 60ch; }


/* ============================================================
   Revision 3 (08.14.2026) - the flatness fix, part one
   Source: hifico-mockup-triage-2026-08-14.md section 3.
   Four layers: photo slots (reserved frames carrying the exact
   shot spec to source), a warm grade so mixed stock reads as one
   shoot, per-Vibe accent tokens, and an inline-SVG icon layer.
   Stock galleries only, no AI generation. Quote slots hold REAL
   review text the owner picks, never invented copy.
   ============================================================ */

/* --- photo slot: a reserved frame for a shot not yet sourced ---
   Empty, it reads as intentional: kraft field, dashed groove ring, a spec
   label naming the shot to buy. Filled (add .is-filled, drop the <img> in,
   remove the placeholder children), it becomes the frame: cover-cropped,
   warm-graded. Packshots never go here, plates own those. */
.hifi-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 3 / 2;                        /* default lifestyle crop */
  background: var(--hifi-bg-2);
  border: 1px solid var(--hifi-line);
  border-radius: var(--hifi-radius);
  overflow: hidden;
  padding: 18px;
  text-align: center;
  /* Rev 3.2: slots read slightly inset, pressed into the sheet the way
     plates are pressed into cards. Photos sink, cards float. */
  box-shadow: inset 0 2px 10px rgba(43,20,10,.10),
              inset 0 -1px 4px rgba(43,20,10,.05);
}
.hifi-slot--16x9 { aspect-ratio: 16 / 9; }
.hifi-slot--21x9 { aspect-ratio: 21 / 9; }    /* full-width band crop */
.hifi-slot--1x1  { aspect-ratio: 1 / 1; }
.hifi-slot--4x5  { aspect-ratio: 4 / 5; }     /* portrait: PDP gallery, split hero */
.hifi-slot::after {                           /* dashed ring, the "shot goes here" mark */
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--hifi-radius) - 6px);
  border: 1px dashed var(--hifi-line-strong);
  pointer-events: none;
}
.hifi-slot__icon { color: var(--hifi-muted); }
.hifi-slot__label {
  margin: 0;
  font-family: var(--hifi-f-accent);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hifi-muted);
}
.hifi-slot__spec {
  margin: 0;
  max-width: 36ch;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--hifi-text-soft);
}
/* Filled state: the img takes the frame, the ring goes solid and faint. */
.hifi-slot.is-filled { padding: 0; }
.hifi-slot.is-filled::after {
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(43,20,10,.18);
}
.hifi-slot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- warm grade: one shoot out of mixed stock ---
   Automatic inside slots; .hifi-grade for any other lifestyle img.
   A touch of sepia and saturation, never a wash that reads as a filter. */
.hifi-slot > img,
.hifi-grade { filter: sepia(.14) saturate(1.05) contrast(.98); }

/* --- quote slot: review display, empty until the owner picks quotes ---
   Real quotes only (Google / Trustpilot / on-site). Text-shaped, so the
   aspect ratio yields to a min-height. */
.hifi-slot--quote { aspect-ratio: auto; min-height: 172px; }

/* --- per-Vibe accent tokens (the VIIA color-as-effect lesson) ---
   A scope class on a section or card sets the pair; ink and wash come
   straight from the pill palette so nothing new enters the room. The
   word always rides with the color, never color alone. */
.hifi-vibe--energizing  { --hifi-vibe-ink:#635d04; --hifi-vibe-wash:#f0dfa6; }
.hifi-vibe--uplifting   { --hifi-vibe-ink:#7c4526; --hifi-vibe-wash:#ecd3bd; }
.hifi-vibe--balancing   { --hifi-vibe-ink:#535928; --hifi-vibe-wash:#dde0c6; }
.hifi-vibe--relaxing    { --hifi-vibe-ink:#37444b; --hifi-vibe-wash:#dde3e6; }
.hifi-vibe--restorative { --hifi-vibe-ink:#5f2356; --hifi-vibe-wash:#e6d5e2; }
.hifi-vibe-rule { border-top: 4px solid var(--hifi-vibe-ink, var(--hifi-gold)); }
.hifi-vibe-washband {                          /* wash knocked back to paper strength */
  background: linear-gradient(rgba(251,247,238,.55), rgba(251,247,238,.55)),
              var(--hifi-vibe-wash, var(--hifi-bg-2));
}
.hifi-vibe-ink-text { color: var(--hifi-vibe-ink, var(--hifi-text)); }

/* --- icon layer: inline SVG, stroke currentColor, warm by inheritance ---
   Vibe effect icons, mg/onset/COA/pickup/shipping marks, ingredient cards.
   The SVGs live in the markup; this is the layout half. */
.hifi-icon { width: 26px; height: 26px; flex: 0 0 auto; }
.hifi-icon--lg { width: 34px; height: 34px; }
.hifi-iconrow {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
}
.hifi-iconcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px 14px;
  text-align: center;
  background: var(--hifi-surface);
  border: 1px solid var(--hifi-line);
  border-radius: var(--hifi-radius);
  color: var(--hifi-vibe-ink, var(--hifi-text-soft));
}
.hifi-iconcard__word { font-size: 15px; font-weight: 600; color: var(--hifi-text); }
.hifi-iconcard__note { font-size: 14px; font-weight: 500; color: var(--hifi-muted); }

/* --- split hero: copy left, photo slot right at 900px --- */
.hifi-hero--split .hifi-hero__inner { display: grid; gap: 28px; }
.hifi-hero--split .hifi-hero__media { width: 100%; max-width: 520px; }
@media (min-width: 900px) {
  .hifi-hero--split .hifi-hero__inner { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .hifi-hero--split .hifi-hero__media { justify-self: end; }
}

/* ============================================================
   Revision 3.1 (08.14.2026) - ink hardware, owner: "more weight"
   The set read light with nothing pushing back. Four weights:
   hard groove dividers between bands, one dusk slab per page
   (the B-Side rule: the story band goes dark), an ink-fill
   button, and vinyl-disc marks on section eyebrows. The
   masthead also picked up the footer's 2px ink rule (section 7).
   ============================================================ */

/* --- groove divider: RETIRED (Rev 3.3, owner call: messy). Band depth
   (Revision 3.2 block) carries every seam now; no divider component
   exists. If a page truly needs a rule, use a plain 1px border on the
   band, not a component. --- */

/* --- ink button: the heavy secondary. Shares the base box with the other
   buttons (section 9 selector list). One gold primary per view still
   holds; this is the weight below the fold. --- */
.hifi-btn-ink {
  background: var(--hifi-text);
  color: var(--hifi-bg);
  border: 1px solid var(--hifi-text);
}
.hifi-btn-ink:hover  { background: var(--hifi-dusk-surface); }
.hifi-btn-ink:active { background: var(--hifi-dusk-2); }
/* On a dusk slab the ink button would vanish; it flips to cream. */
.hifi-dusk .hifi-btn-ink {
  background: var(--hifi-dusk-text);
  color: var(--hifi-dusk);
  border-color: var(--hifi-dusk-text);
}

/* --- vinyl mark: the disc that sits on a section eyebrow. Inline SVG in
   the markup (grooves in currentColor, gold label dot); this is the
   layout half. Pair the eyebrow with .hifi-eyebrow--marked. --- */
.hifi-mark { width: 20px; height: 20px; flex: 0 0 auto; color: var(--hifi-text); }
.hifi-eyebrow--marked { display: flex; align-items: center; gap: 8px; }
.hifi-dusk .hifi-mark { color: var(--hifi-dusk-text); }

/* ============================================================
   Revision 3.2 (08.14.2026) - depth, owner: warm rises, light sinks
   The elevation logic: kraft bands POP UP off the sheet (cast
   shadow, above the stack), plain paper bands sink slightly
   (inset edges), the dusk slab is the deepest well on the page.
   Cards float (section 10), photos and slots press in (sections
   10 and the slot block). Dividers thinned to 1px, one per page
   at most. The nav row is pinned + translucent (section 7).
   ============================================================ */
.hifi-band {
  box-shadow: inset 0 12px 20px -14px rgba(43,20,10,.16),
              inset 0 -12px 20px -14px rgba(43,20,10,.16);
}
.hifi-band--kraft {
  position: relative;
  z-index: 1;
  box-shadow: 0 5px 16px rgba(43,20,10,.09), 0 -5px 16px rgba(43,20,10,.09);
}
.hifi-band.hifi-dusk {
  box-shadow: inset 0 14px 26px -12px rgba(0,0,0,.55),
              inset 0 -14px 26px -12px rgba(0,0,0,.55);
}

/* ================================================================
   ORNAMENT KIT (rev9): the living-room layer.
   Sleeve-print flourishes scattered on the paper: groove arcs,
   line swirls, soundwave rules, sparkle bursts, a note pair, a
   label ring. All thin ink lines at print strength; they decorate
   the margins and corners, never sit behind running text, and
   never intercept a click. Usage, inside any .hifi-band:
     <div class="hifi-orn hifi-orn--groove hifi-orn--tr" aria-hidden="true"></div>
   Two to four per page. More is a doily, not a living room.
   ================================================================ */
.hifi-band { position: relative; }
.hifi-orn {
  position: absolute;
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: .13;
}
/* gold accent variant: gold-ink strokes, still whisper-quiet */
.hifi-orn--gold { opacity: .20; }

/* motifs */
.hifi-orn--groove {                          /* record-groove corner arcs */
  width: 150px; height: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%232b140a' stroke-width='2'%3E%3Ccircle cx='160' cy='0' r='44'/%3E%3Ccircle cx='160' cy='0' r='72'/%3E%3Ccircle cx='160' cy='0' r='100'/%3E%3Ccircle cx='160' cy='0' r='128'/%3E%3C/svg%3E");
}
.hifi-orn--swirl {                           /* loose hand-drawn curl with a tail */
  width: 120px; height: 90px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' fill='none' stroke='%232b140a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 78 C30 66 44 44 42 28 C40 14 26 10 20 20 C14 30 24 40 36 38 C56 34 68 18 92 14 C102 12 112 16 114 24'/%3E%3C/svg%3E");
}
.hifi-orn--wave {                            /* soundwave rule */
  width: 220px; height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 36' fill='none' stroke='%232b140a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 18 Q 15 4 29 18 T 56 18 T 83 18 T 110 18 T 137 18 T 164 18 T 191 18 T 218 18'/%3E%3C/svg%3E");
}
.hifi-orn--burst {                           /* vintage sleeve sparkle */
  width: 56px; height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232b140a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M32 6 V20 M32 44 V58 M6 32 H20 M44 32 H58 M14 14 L24 24 M40 40 L50 50 M50 14 L40 24 M24 40 L14 50'/%3E%3C/svg%3E");
}
.hifi-orn--notes {                           /* beamed eighth-note pair */
  width: 72px; height: 62px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 64'%3E%3Cpath d='M24 46 V12 L60 6 V40' fill='none' stroke='%232b140a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='18' cy='47' rx='7' ry='5' fill='%232b140a'/%3E%3Cellipse cx='54' cy='41' rx='7' ry='5' fill='%232b140a'/%3E%3C/svg%3E");
}
.hifi-orn--ring {                            /* dashed vinyl-label ring */
  width: 84px; height: 84px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90' fill='none' stroke='%232b140a' stroke-width='2' stroke-dasharray='2 7' stroke-linecap='round'%3E%3Ccircle cx='45' cy='45' r='40'/%3E%3Ccircle cx='45' cy='45' r='4' fill='%232b140a' stroke='none'/%3E%3C/svg%3E");
}
/* gold-ink redraws for the --gold variant */
.hifi-orn--gold.hifi-orn--burst {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%236b5500' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M32 6 V20 M32 44 V58 M6 32 H20 M44 32 H58 M14 14 L24 24 M40 40 L50 50 M50 14 L40 24 M24 40 L14 50'/%3E%3C/svg%3E");
}
.hifi-orn--gold.hifi-orn--ring {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90' fill='none' stroke='%236b5500' stroke-width='2' stroke-dasharray='2 7' stroke-linecap='round'%3E%3Ccircle cx='45' cy='45' r='40'/%3E%3Ccircle cx='45' cy='45' r='4' fill='%236b5500' stroke='none'/%3E%3C/svg%3E");
}

/* placement helpers: corners and margins only */
.hifi-orn--tr { top: 16px; right: 18px; }
.hifi-orn--tl { top: 16px; left: 18px; }
.hifi-orn--br { bottom: 16px; right: 18px; }
.hifi-orn--bl { bottom: 16px; left: 18px; }
.hifi-orn--flip-x { transform: scaleX(-1); }
.hifi-orn--flip-y { transform: scaleY(-1); }
.hifi-orn--flip-xy { transform: scale(-1); }

/* Ornaments never ride on dusk bands: ink lines drown in the dark. */
.hifi-dusk .hifi-orn { display: none; }
/* Phone width: the big corner pieces yield the room; small marks stay. */
@media (max-width: 680px) {
  .hifi-orn--groove, .hifi-orn--wave { display: none; }
}


/* ==========================================================================
   REVISION 10 (08.16.2026) - FLOURISH LAYER, ported verbatim from the
   HiFi Design System tokens/flourish.css (work orders 1-5, 7, 11, 13-15):
   fulfillment stamps, COA pressing certificate, paper grain, tracklist
   numbering, catalog numbers, VU meter, ticket-stub age gate, hype
   sticker, credits + barcode, motion vocabulary.
   ========================================================================== */

/* Flourish layer, work orders 1 + 2 (design-recommendations 2026-08).
   COA "Pressing Certificate" + fulfillment stamp pair. Tokens only from
   base/hifi-liner-notes.css; no new hues. */

/* --- fulfillment stamps: postal-style chips, single-color ink, slight tilt.
   Pickup = stamp brown, ships = positive sage. Legible at 18px tall. --- */
.hifi-fstamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hifi-f-accent);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 9px 4px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background: transparent;
  white-space: nowrap;
  transform: rotate(-2deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Crect width='60' height='24' fill='%23fff'/%3E%3Ccircle cx='9' cy='5' r='.7' fill='%23000'/%3E%3Ccircle cx='31' cy='16' r='.8' fill='%23000'/%3E%3Ccircle cx='48' cy='8' r='.6' fill='%23000'/%3E%3Ccircle cx='19' cy='20' r='.6' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Crect width='60' height='24' fill='%23fff'/%3E%3Ccircle cx='9' cy='5' r='.7' fill='%23000'/%3E%3Ccircle cx='31' cy='16' r='.8' fill='%23000'/%3E%3Ccircle cx='48' cy='8' r='.6' fill='%23000'/%3E%3Ccircle cx='19' cy='20' r='.6' fill='%23000'/%3E%3C/svg%3E");
}
.hifi-fstamp--pickup { color: var(--hifi-stamp); }
.hifi-fstamp--ships  { color: var(--hifi-positive); transform: rotate(2deg); }
.hifi-fstamp .hifi-icon { width: 13px; height: 13px; }
/* inline variant for cart lines / sticky bars: no tilt, no distress */
.hifi-fstamp--inline { transform: none; -webkit-mask-image: none; mask-image: none; }

/* --- COA Pressing Certificate: the trust block that replaces the bare link.
   Whole block is one <a> to the hosted PDF. --- */
.hifi-coa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--hifi-surface);
  border: 1px solid var(--hifi-line-strong);
  border-radius: var(--hifi-radius-plate);
  text-decoration: none;
  color: var(--hifi-text);
  transition: background-color .15s ease, border-color .15s ease;
}
.hifi-coa:hover { background: var(--hifi-surface-2); border-color: var(--hifi-stamp); }
.hifi-coa__seal {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  color: var(--hifi-stamp);
  transform: rotate(-4deg);
}
.hifi-coa__fields { display: grid; gap: 2px; min-width: 0; }
.hifi-coa__lab {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}
.hifi-coa__meta {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hifi-stamp);
  font-variant-numeric: tabular-nums lining-nums;
}
.hifi-coa__link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hifi-gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hifi-coa__page {
  width: 34px;
  height: 44px;
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid var(--hifi-line-strong);
  border-radius: 2px;
  position: relative;
  box-shadow: 1px 2px 4px rgba(43,20,10,.14);
}
.hifi-coa__page::before {
  content: "";
  position: absolute;
  inset: 7px 6px auto;
  height: 2px;
  background: var(--hifi-line-strong);
  box-shadow: 0 6px 0 var(--hifi-line), 0 12px 0 var(--hifi-line), 0 18px 0 var(--hifi-line), 0 24px 0 var(--hifi-line);
}
/* compact single-line variant (cards, cart) */
.hifi-coa--compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--hifi-radius-pill);
}
.hifi-coa--compact .hifi-coa__seal { width: 20px; height: 20px; }
.hifi-coa--compact .hifi-coa__meta { color: var(--hifi-stamp); }

/* ============================================================
   Flourish layer, round 2 (work orders 3, 4/13, 11, 5/15, 14, 9, 16).
   Loaded AFTER the base sheet so texture layers on top of the
   base background shorthands.
   ============================================================ */

/* --- paper-grain texture: site ground 5% ink noise, kraft bands a step
   heavier. Never on body text elements, never above 5% alpha. --- */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .08 0 0 0 0 .04 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
.hifi-band--kraft {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .08 0 0 0 0 .04 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* --- tracklist numbering: "01 · Label" eyebrows --- */
.hifi-eyebrow__num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: .06em; margin-right: 6px; }

/* --- catalog number: the runout etching --- */
.hifi-catnum {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hifi-muted);
  opacity: .85;
}
.hifi-card .hifi-catnum { text-align: right; margin-top: 2px; }

/* --- VU meter: free-shipping progress as audio hardware --- */
.hifi-vu__track {
  position: relative;
  height: 14px;
  border: 1px solid var(--hifi-line-strong);
  border-radius: var(--hifi-radius-pill);
  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--hifi-line) 9px 10px), var(--hifi-bg);
  overflow: hidden;
}
.hifi-vu__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--hifi-positive), var(--hifi-gold) 85%);
  border-right: 2px solid var(--hifi-text);   /* the needle */
  transition: width .3s ease;
}
.hifi-vu__label { display: block; margin-top: 6px; }
.hifi-vu__unlocked {
  display: inline-block;
  font-family: var(--hifi-f-accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hifi-positive);
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: 4px 8px 3px;
  transform: rotate(-2deg);
}

/* --- ticket-stub age gate --- */
.hifi-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(239,228,208,.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hifi-gate[hidden] { display: none; }
.hifi-gate__ticket {
  width: min(440px, 100%);
  background: var(--hifi-surface);
  border: 2px solid var(--hifi-text);
  border-radius: 16px;
  padding: 34px 34px 26px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(43,20,10,.28);
}
.hifi-gate__ticket h2 { margin: 14px 0 6px; font-size: 24px; }
.hifi-gate__tear {
  position: relative;
  border: 0;
  border-top: 2px dashed var(--hifi-line-strong);
  margin: 22px -34px 20px;
}
.hifi-gate__tear::before, .hifi-gate__tear::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--hifi-bg-2);
  border: 2px solid var(--hifi-text);
}
.hifi-gate__tear::before { left: -15px; }
.hifi-gate__tear::after { right: -15px; }
.hifi-gate__remember {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  color: var(--hifi-text-soft);
  margin: 14px 0 6px;
}
.hifi-gate__remember input { width: 18px; height: 18px; accent-color: var(--hifi-text); }

/* --- hype sticker --- */
.hifi-sticker {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hifi-gold);
  color: var(--hifi-dusk);
  transform: rotate(-6deg);
  box-shadow: 0 4px 12px rgba(43,20,10,.2);
  outline: 2px dashed rgba(43,20,10,.4);
  outline-offset: -7px;
}

/* --- credits block + decorative barcode (footer) --- */
.hifi-credits {
  text-align: center;
  max-width: 640px;
  margin: 34px auto 0;
  padding: 0 var(--hifi-pad-x);
  font-size: 15.5px;
  color: var(--hifi-text-soft);
}
.hifi-barcode { display: inline-block; color: var(--hifi-text-soft); }

/* --- motion vocabulary: five signatures, all under 250ms wall-feel,
   fully disabled under prefers-reduced-motion (base sheet zeroes all
   animation/transition durations there). --- */
@keyframes hifi-needle-drop { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hifi-nav__cart svg { animation: hifi-needle-drop .5s ease; }          /* (d) needle drop on count change (remount) */
.hifi-eyebrow--marked .hifi-mark { animation: hifi-needle-drop 1.1s ease .15s backwards; } /* (a) mark rotates once on enter */
.hifi-card__title a {                                                   /* (b) gold stylus sweep on card hover */
  background-image: linear-gradient(var(--hifi-gold), var(--hifi-gold));
  background-repeat: no-repeat;
  background-size: 0% 3px;
  background-position: 0 100%;
  transition: background-size .22s ease;
}
.hifi-card:hover .hifi-card__title a { background-size: 100% 3px; }
.hifi-card__title a:hover { text-decoration: none; }
.hifi-btn-primary, .hifi-btn-secondary, .hifi-btn-ink { transition: background-color .15s ease, border-color .15s ease, transform .1s ease; }
.hifi-btn-primary:active, .hifi-btn-secondary:active, .hifi-btn-ink:active { transform: translateY(1px); } /* (c) piano-key press */
.hifi-faq__item > summary::after { transition: transform .22s cubic-bezier(.34,1.56,.64,1); } /* (e) toggle overshoot */
.hifi-faq__item[open] > summary::after { transform: rotate(180deg); }

/* parity pages drop Astra/Woo sheets; restore the a11y clip utility */
.screen-reader-text,.hifi-ln .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;clip:auto;clip-path:none;white-space:normal;margin:0;padding:8px 12px;background:#ffe600;color:#2a1a0e}