/** Shopify CDN: Minification failed

Line 2106:13 Expected identifier but found whitespace
Line 2106:14 Unexpected "var("

**/
/* ============================================================
   ALVARA HOME - design system + section styles
   Ported from the approved prototype (2026-07-31).
   Scoped notes: nav/menu/cart/drawer styles removed (Horizon owns
   those); everything else is the prototype system verbatim.
   ============================================================ */
/* ============================================================
   ALVARA HOMEPAGE  ·  DESIGN SYSTEM
   Material: dark bark + raw honey gold + cream paper
   ============================================================ */

:root {
  /* Ground */
  --bg:        #0B0906;
  --bg-2:      #100C07;
  --bg-3:      #17110A;
  --bg-card:   #14100A;
  --bg-deep:   #070502;

  /* Ink on dark */
  --ink:       #F5EEE1;
  --ink-mute:  #B7AD98;
  --ink-faint: #7A7161;

  /* Honey metal */
  --gold:      #C8860A;
  --gold-hi:   #E8A830;
  --gold-lo:   #8C5D06;
  --gold-lite: #FFE6B2;
  --gold-soft: #C9A84C;
  --rule:      rgba(200,134,10,.18);
  --rule-2:    rgba(200,134,10,.34);

  /* Cream paper */
  --paper:     #FDF5E4;
  --paper-2:   #FFFDF6;
  --p-ink:     #201809;
  --p-body:    #4C4230;
  --p-mute:    #6B5E45;
  --p-rule:    #E5D8BA;
  /* gold text/borders on the cream surfaces. #9A6708 measured 4.48:1 on --paper
     (#FDF5E4), just under the 4.5 AA floor. #93620A measures 4.88:1 and is
     visually indistinguishable. Button gradients use --gold-hi/--gold/--gold-lo
     and are unaffected. */
  --p-gold:    #93620A;

  /* Type */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:  'DM Mono', ui-monospace, 'SF Mono', monospace;

  /* Fluid scale */
  --t-display: clamp(3.1rem, 1.4rem + 6.4vw, 6.4rem);
  --t-h2:      clamp(2.15rem, 1.25rem + 3.4vw, 3.7rem);
  --t-h3:      clamp(1.28rem, 1.05rem + .75vw, 1.6rem);
  --t-lead:    clamp(1.02rem, .95rem + .42vw, 1.22rem);
  --t-body:    clamp(.94rem, .9rem + .22vw, 1.03rem);

  /* Rhythm */
  --sec:       clamp(72px, 8.2vw, 132px);
  --gut:       clamp(22px, 3.6vw, 48px);
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 34px;

  /* Motion */
  --ease: cubic-bezier(.22,.68,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z' fill='none' stroke='rgba(200,134,10,0.06)'/%3E%3C/svg%3E");
  --hex-p: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z' fill='none' stroke='rgba(154,103,8,0.09)'/%3E%3C/svg%3E");
}
/* Explicit display values (e.g. .dw-sum {display:flex}
) outrank the UA
   [hidden] {display:none}
, so enforce it. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:where(section, .band)[id] { scroll-margin-top: 92px; }
/* Focus discipline */
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 3px; }
.cream :focus-visible { outline-color: var(--p-gold); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); position: relative; }
@media (min-width: 1800px) {
.wrap { max-width: 1440px; }
}
/* ---------- Typography primitives ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .26em; color: var(--gold-hi); display: flex; align-items: center; gap: 9px;
}
.cream .eyebrow { color: var(--p-gold); }
.h-serif {
  font-family: var(--serif); font-weight: 350; letter-spacing: -0.018em; line-height: 1.05;
  font-variation-settings: 'SOFT' 18, 'WONK' 0, 'opsz' 120;
  text-wrap: balance;
}
.h-serif em { font-style: italic; color: var(--gold-hi); font-weight: 300; font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120; }
.cream .h-serif em { color: var(--p-gold); }
.sec-head { max-width: 740px; margin-bottom: clamp(40px, 5vw, 66px); }
.sec-head h2 { font-size: var(--t-h2); margin-top: 20px; }
.sec-head p { font-size: var(--t-lead); color: var(--ink-mute); margin-top: 20px; max-width: 56ch; font-weight: 300; text-wrap: pretty; }
.cream .sec-head p { color: var(--p-mute); }
@media (min-width: 1080px) {
.sec-head.split { max-width: none; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 64px; align-items: end; }
.sec-head.split .eyebrow { grid-column: 1 / -1; }
.sec-head.split h2 { margin-top: 0; }
.sec-head.split p { margin: 0 0 6px; }
}
section { padding: var(--sec) 0; position: relative; }
/* ---------- Reveal choreography ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.stagger > .reveal:nth-child(2) { transition-delay: .09s; }
.stagger > .reveal:nth-child(3) { transition-delay: .18s; }
.stagger > .reveal:nth-child(4) { transition-delay: .27s; }
.stagger > .reveal:nth-child(5) { transition-delay: .36s; }
/* ---------- Glyphs ---------- */
.ic { display: inline-block; width: .8em; height: .8em; background-color: currentColor; vertical-align: -.04em; flex: none; }
.ic-hex { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l9 5.25v10.5l-9 5.25-9-5.25V6.75z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l9 5.25v10.5l-9 5.25-9-5.25V6.75z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-star { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.stars { display: inline-block; height: 14px; width: 84px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") left center/16.8px 14px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") left center/16.8px 14px repeat-x; }
/* ---------- Buttons: gold as metal ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; border: none; cursor: pointer; font-family: var(--sans); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; }
.btn-gold {
  font-weight: 600; font-size: 16px; color: #17110A;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 62%, var(--gold-lo));
  padding: 17px 34px; border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255,236,190,.6), inset 0 -1px 0 rgba(0,0,0,.22), 0 2px 14px rgba(200,134,10,.16);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,236,190,.6), 0 12px 34px rgba(232,168,48,.3); }
.btn-gold:active { transform: translateY(0); }
.btn-gold::after, .satc-cta::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-170%) skewX(-12deg); transition: transform .7s var(--ease); pointer-events: none;
}
.btn-gold:hover::after, .satc-cta:hover::after { transform: translateX(300%) skewX(-12deg); }
.btn-ghost {
  font-weight: 500; font-size: 15px; color: var(--gold-hi); padding: 15px 4px; text-decoration: none;
  background: linear-gradient(var(--gold-hi), var(--gold-hi)) no-repeat 0 100% / 100% 1px;
  transition: background-size .35s var(--ease), color .25s; display: inline-block;
}
.btn-ghost:hover { background-size: 0 1px; }
.cream .btn-ghost { color: var(--p-gold); background-image: linear-gradient(var(--p-gold), var(--p-gold)); }
.btn-outline {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-hi); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 15px 26px;
  text-decoration: none; background: rgba(200,134,10,.04);
}
.btn-outline:hover { border-color: var(--gold); transform: translateY(-2px); background: rgba(200,134,10,.09); }
/* ---------- Honey scroll rail ---------- */
.rail { position: fixed; left: 0; top: 0; height: 100vh; width: 3px; z-index: 88; background: rgba(200,134,10,.08); pointer-events: none; }
.rail i { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--gold-lite), var(--gold-hi) 30%, var(--gold)); box-shadow: 0 0 14px rgba(232,168,48,.5); }
@media (max-width: 860px) {
.rail { display: none; }
}
/* ---------- Announce ---------- */
.announce {
  position: relative; z-index: 92;
  background: linear-gradient(90deg, var(--bg-3), #271C09 50%, var(--bg-3));
  border-bottom: 1px solid var(--rule); text-align: center; padding: 10px 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-mute);
}
.announce button {
  background: none; border: none; cursor: pointer; color: var(--gold-hi); font: inherit; font-weight: 500;
  border-bottom: 1px solid var(--rule-2); padding: 0 0 2px; transition: border-color .25s;
}
.announce button:hover { border-color: var(--gold-hi); }
/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 130; background: rgba(11,9,6,.78); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--rule); transition: background .3s, border-color .3s; }

@keyframes bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.14); } }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ---------- HERO ---------- */
.hero { position: relative; min-height: min(calc(100svh - 110px), 1000px); display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: sepia(.18) saturate(.82) brightness(.54) contrast(1.04); z-index: 0; }
.hero-veil { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(11,9,6,.95) 0%, rgba(11,9,6,.8) 34%, rgba(11,9,6,.28) 64%, rgba(11,9,6,.55) 100%),
  linear-gradient(180deg, rgba(11,9,6,.82), transparent 26%, transparent 66%, rgba(11,9,6,.98)); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 2; background-image: var(--hex); opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 58% 70% at 66% 50%, #000 26%, transparent 78%);
  mask-image: radial-gradient(ellipse 58% 70% at 66% 50%, #000 26%, transparent 78%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
  radial-gradient(ellipse 58% 50% at 68% 50%, rgba(200,134,10,.17), transparent 66%),
  radial-gradient(ellipse 40% 56% at 70% 52%, rgba(8,6,3,.5), transparent 72%); }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 40px; align-items: center; width: 100%; padding: 48px 0 66px; position: relative; z-index: 3; }
@media (max-width: 940px) {
.hero-grid { grid-template-columns: 1fr; padding: 36px 0 60px; }
.hero { min-height: 0; }
}
.hero h1 { font-size: var(--t-display); margin: 24px 0 26px; max-width: 11ch; }
.hero-deck { font-size: clamp(1.02rem, .94rem + .5vw, 1.19rem); font-weight: 300; color: var(--ink-mute); max-width: 50ch; margin-bottom: 34px; text-wrap: pretty; }
.hero-deck strong { color: var(--ink); font-weight: 500; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 30px; }
.hero-proof { display: flex; gap: clamp(16px, 2.4vw, 28px); flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; }
.hero-proof b { color: var(--gold-hi); font-weight: 500; }
.hero-jar { position: relative; display: flex; justify-content: center; }
.hero-halo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero-halo svg { width: min(660px, 98%); height: auto; animation: haloPulse 8s ease-in-out infinite; }
.jar-wrap { position: relative; }
/* The product PNG ships on an opaque dark plate. This radial mask feathers
   that plate into the page so the jar reads as a floating object. */
.jar-mask {
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
}
.jar-img { filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg); }
.hero-jar img { width: min(470px, 82%); position: relative; z-index: 2; filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg) drop-shadow(0 50px 60px rgba(0,0,0,.68));
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%); }
.jar-shadow { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); width: 46%; height: 26px; background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%); filter: blur(7px); z-index: 1; pointer-events: none; }
@media (min-width: 1800px) {
.hero-jar img { width: min(520px, 84%); }
}


@keyframes jarFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@keyframes haloPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } }

@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@keyframes drawHex { to { stroke-dashoffset: 0; } }

@keyframes jarIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.hero .eyebrow { animation: riseIn .8s var(--ease-out) both; }
.hero h1 { animation: riseIn .9s var(--ease-out) .1s both; }
.hero-deck { animation: riseIn .9s var(--ease-out) .22s both; }
.hero-ctas { animation: riseIn .9s var(--ease-out) .34s both; }
.hero-proof { animation: riseIn .9s var(--ease-out) .46s both; }
.hero-halo polygon { stroke-dasharray: 1100; stroke-dashoffset: 1100; animation: drawHex 1.9s ease-out .3s forwards; }
.hero-halo circle { stroke-dasharray: 950; stroke-dashoffset: 950; animation: drawHex 2.1s ease-out .7s forwards; }
.hero-jar img { animation: jarIn 1s .4s both, jarFloat 9s 1.5s ease-in-out infinite; }
/* Pollen drift */
.pollen { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.pollen i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,214,140,.55); box-shadow: 0 0 8px rgba(232,168,48,.6); animation: drift linear infinite; }

@keyframes drift { 0% { transform: translate3d(0,110%,0) scale(.6); opacity: 0; } 12% { opacity: .8; } 88% { opacity: .5; } 100% { transform: translate3d(28px,-14%,0) scale(1); opacity: 0; } }
/* ---------- Trust bar ---------- */
/* Bottom edge dissolves into the overture's darkness so the drop
   reads as a held breath. */
.trustbar { border-top: 1px solid var(--rule); background: var(--bg-2); position: relative; z-index: 4; }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-cell { padding: 26px 16px; text-align: center; border-left: 1px solid var(--rule); }
.trust-cell:first-child { border-left: none; }
.trust-cell .t-big { font-family: var(--serif); font-size: clamp(18px, 2vw, 23px); color: var(--gold-hi); font-weight: 400; }
.trust-cell .t-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; line-height: 1.6; }
@media (max-width: 880px) {
.trust-row { grid-template-columns: repeat(2, 1fr); }
.trust-cell:nth-child(3) { border-left: none; }
.trust-cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--bg-deep); padding: 15px 0; position: relative; z-index: 4; }
.marquee-track { display: flex; gap: 0; width: max-content; animation: slide 46s linear infinite; }
.marquee span { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-faint); padding: 0 30px; white-space: nowrap; display: flex; align-items: center; gap: 30px; }
.marquee span i { color: var(--gold); }

@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* ============================================================
   SECTIONS
   ============================================================ */

/* Cream paper sheets layered over the dark field */
.cream { background: var(--paper); color: var(--p-ink); border-radius: var(--r-xl); margin-top: -34px; margin-bottom: -34px; position: relative; z-index: 3; }
.cream::before { content: ''; position: absolute; inset: 0; background-image: var(--hex-p); opacity: .5; border-radius: inherit; pointer-events: none; }
.cream > .wrap { position: relative; z-index: 1; }
.cream p { color: var(--p-body); }
.big-hex { position: absolute; width: 430px; height: 430px; pointer-events: none; }
.big-hex svg { width: 100%; height: 100%; }
/* ---------- Overture: the hum ----------
   Emotional detonation directly below the fold. Scroll-scrubbed:
   the reader paces the bell line themselves. All draw amounts are
   pathLength fractions (never pixels); the scrub runs on a
   persistent rAF loop that is NEVER gated behind scroll events. */
.overture { --stag: 110ms; position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, var(--bg) 0, #070502 16%, #070502 100%);
  padding: 15vh 0 9vh; padding: 15svh 0 9svh; }
.overture::before { content: ''; position: absolute; inset: 0; opacity: .04; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.ov-thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ov-thread path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-opacity: .32; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
/* Mycelial hierarchy: depth reads through stroke weight, so the
   network stays atmospheric behind the type. */
.ov-thread .ov-b1 { stroke-width: 1.3; stroke-opacity: .32; }
.ov-thread .ov-b2 { stroke-width: 1; stroke-opacity: .2; }
.ov-tip { fill: var(--gold-lite); opacity: 0; }
.overture.ov-live #ovThreadMain, .overture.ov-live #ovThreadTail { stroke-dashoffset: 1; }
.ov-col { position: relative; z-index: 2; max-width: 62rem; }
.ov-eyebrow { display: flex; flex-direction: column; align-items: center; gap: 14px; letter-spacing: .34em; color: var(--ink-mute); }
.ov-rule { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, transparent, rgba(200,134,10,.5)); }
.ov-line1 { font-family: var(--serif); font-weight: 350; font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 110; color: var(--ink);
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4.2rem); line-height: 1.14; margin: 9vh auto 0; margin-top: 9svh; max-width: 20ch; text-wrap: balance; }
.ov-line2 { font-family: var(--serif); font-weight: 350; color: var(--ink);
  font-size: clamp(2.5rem, 1.3rem + 5vw, 5.7rem); line-height: 1.08; margin: 13vh auto 0; margin-top: 13svh; max-width: 14ch; }
.wline .w { display: inline-block;
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out);
  transition-delay: calc(var(--i) * var(--stag)); }
/* Hidden start state is opt-in (.ov-anim set by the live script): without it the words paint by default. */
.overture.ov-anim .wline .w { opacity: 0; transform: translateY(.6em); filter: blur(6px); }
.overture.ov-anim .wline.in .w { opacity: 1; transform: none; filter: blur(0); }
.ov-gold { font-style: italic; font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-hi) 38%, var(--gold-lite) 50%, var(--gold-hi) 62%, var(--gold) 100%);
  background-size: 240% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.wline.in .ov-gold { animation: ovSheen 1.4s ease-in-out 2.1s 1 both; }

@keyframes ovSheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.ov-silence { height: 24vh; height: 24svh; }
.ov-bell { font-family: var(--serif); font-weight: 350; color: var(--ink); white-space: nowrap;
  font-size: clamp(3rem, 1.2rem + 9.4vw, 8.4rem); line-height: 1.02; letter-spacing: .005em; margin: 0 auto; position: relative; }
.overture.ov-live .ov-bell { opacity: 0; will-change: opacity, transform; }
.ov-you { position: relative; display: inline-block; }
.ov-you em { font-style: italic; position: relative; z-index: 2;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-hi) 45%, var(--gold-lite) 80%, var(--gold-hi) 100%);
  background-size: 240% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.ov-you.rung em { animation: ovSheen 1.6s ease-in-out .1s 1 both; }
.ov-hex { position: absolute; left: 50%; top: 50%; width: 1.5em; height: 1.5em; transform: translate(-50%, -54%); z-index: 1; }
.ov-hex polygon { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-opacity: .35; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.overture.ov-live .ov-hex polygon { stroke-dashoffset: 1; }
.ov-exhale { margin: 12vh auto 0; margin-top: 12svh; font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.7rem); color: var(--ink-mute); max-width: 34ch; line-height: 1.5; text-wrap: balance; }
.ov-exhale b { font-style: normal; font-weight: 400; color: var(--gold-hi); }
.ov-meet { display: inline-block; margin-top: 5vh; margin-top: 5svh; font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-hi); text-decoration: none; padding-bottom: 6px;
  background: linear-gradient(var(--gold-hi), var(--gold-hi)) no-repeat 50% 100% / 28px 1px; transition: background-size .35s var(--ease); }
.ov-meet:hover { background-size: 100% 1px; }
@media (max-width: 640px) {
.overture { --stag: 80ms; padding: 11svh 0 8svh; }
.ov-line1 { margin-top: 7svh; }
.ov-line2 { margin-top: 10svh; }
.ov-silence { height: 15svh; }
.ov-exhale { margin-top: 9svh; }
/* Small screens keep the secondaries, drop the fine filaments */
  .ov-b2, .ov-tip { display: none; }
}
/* ---------- The Jar Ledger: AEO answer as artifact ----------
   The key-facts block, kept verbatim in the DOM for answer engines
   (speakable selectors .aeo-answer / .aeo-facts preserved), dressed
   as an heirloom apothecary label lit from within the dark. */
.ledger { background: linear-gradient(180deg, #070502, var(--bg)); padding: 0 0 clamp(70px, 8vw, 110px); }
.ov-drop { width: 1px; height: 44px; margin: 0 auto 26px; background: linear-gradient(180deg, rgba(200,134,10,.4), transparent); }
/* Meet the jar: the thread lands on the jar itself, standing in the
   dark above its ledger card. */
.ledger-jar { position: relative; width: min(250px, 58vw); margin: 0 auto 34px; }
.ledger-jar::before { content: ''; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(200,134,10,.15), transparent 64%); pointer-events: none; }
.ledger-jar img { position: relative; z-index: 1;
  filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg) drop-shadow(0 34px 44px rgba(0,0,0,.62));
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%); }
.ledger-card { position: relative; max-width: 660px; margin: 0 auto; background: var(--paper); color: var(--p-ink); border-radius: 6px;
  padding: clamp(34px, 5vw, 54px) clamp(24px, 4.5vw, 50px); text-align: center;
  box-shadow: 0 0 90px rgba(232,168,48,.09), 0 34px 80px rgba(0,0,0,.5); }
.ledger-card::before { content: ''; position: absolute; inset: 11px; border: 1px solid rgba(154,103,8,.38); border-radius: 3px; pointer-events: none; }
.ledger-card::after { content: ''; position: absolute; right: 18px; bottom: 14px; width: 120px; height: 120px; opacity: .05; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l9 5.25v10.5l-9 5.25-9-5.25V6.75z' fill='none' stroke='%23201809' stroke-width='.7'/%3E%3C/svg%3E") center/contain no-repeat; }
.ledger-mark { width: 30px; height: 30px; margin: 0 auto 14px; color: var(--gold); display: block; }
.ledger-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--p-gold); margin-bottom: 18px; }
.ledger .aeo-answer h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.2rem); letter-spacing: -.015em; color: var(--p-ink); margin-bottom: 14px; }
.ledger .aeo-answer p { font-size: 15px; color: var(--p-body); line-height: 1.72; max-width: 52ch; margin: 0 auto 10px; text-wrap: pretty; }
.ledger .aeo-answer strong { color: var(--p-ink); font-weight: 600; }
.ledger-dl { margin: 26px 0 0; text-align: left; }
.ledger-dl .lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 2px;
  border-bottom: 1px dotted rgba(11,9,6,.28); opacity: 0; transition: opacity .7s var(--ease-out); transition-delay: calc(var(--i) * 80ms + .25s); }
.ledger-card.in .lrow { opacity: 1; }
.ledger-dl dt { font-family: var(--serif); font-weight: 500; font-size: 15.5px; color: var(--p-ink); }
.ledger-dl dd { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--p-mute); text-align: right; }
.ledger-stars { width: 62px; height: 10px; background-color: var(--gold); vertical-align: -1px; margin-right: 6px;
  -webkit-mask-size: 12.4px 10px !important; mask-size: 12.4px 10px !important; }
.ledger-cta { margin-top: 28px; display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ledger-ghost { color: var(--p-gold); background-image: linear-gradient(var(--p-gold), var(--p-gold)); font-size: 14px; }
@media (max-width: 480px) {
.ledger-dl .lrow { flex-direction: column; gap: 3px; align-items: flex-start; }
.ledger-dl dd { text-align: left; }
}
/* ---------- The Root Map ----------
   Six scattered complaints draw themselves down six mycelial threads
   into one glowing root hexagon: the diagnosis completes itself in
   front of the reader at reading pace. Scroll-scrubbed on desktop
   (sticky pin), timed draw-on-enter on mobile and small screens.
   All strokes are pathLength=1 fractions with non-scaling widths. */
.rootmap { background: #070502; position: relative; }
.rm-wrap { position: relative; }
.rootmap.rm-pinmode .rm-wrap { height: 205vh; height: 205svh; }
.rootmap.rm-pinmode .rm-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rm-pin { padding: 0; }
.rm-eyebrow { position: absolute; top: clamp(26px, 5svh, 54px); left: var(--gut); z-index: 3; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rm-pin.p-eye .rm-eyebrow { opacity: 1; transform: none; }
.rm-field { position: absolute; inset: 0; }
/* Clear the sticky nav: the constellation starts below it, so the
   top row of complaint labels is never hidden. */
.rootmap.rm-pinmode .rm-field { top: 84px; }
.rm-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rm-svg path { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.rm-svg .rm-glow { stroke: var(--gold); stroke-width: 6; stroke-opacity: .14; }
.rm-svg .rm-core { stroke: var(--gold-hi); stroke-width: 1.5; stroke-opacity: .85; transition: stroke .25s, stroke-width .25s; }
.rm-svg .rm-core.hot { stroke: var(--gold-lite); stroke-width: 2.2; }
.rm-node { position: absolute; transform: translate(-50%, -100%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: .0; cursor: default; padding: 10px; }
.rm-node i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; }
.rm-node.hot { color: var(--gold-lite); }
.rm-node.hot i { background: var(--gold-lite); border-color: var(--gold-lite); }
.rm-mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-lite); box-shadow: 0 0 10px rgba(232,168,48,.8); transform: translate(-50%,-50%) scale(0); opacity: 0; z-index: 2; pointer-events: none; }
.rm-mote.go { animation: moteFlash .38s ease-out both; }

@keyframes moteFlash { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0; } 45% { transform: translate(-50%,-50%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(.4); opacity: 0; } }
.rm-root { position: absolute; left: 34%; top: 66%; width: 46px; height: 52px; transform: translate(-50%,-50%); z-index: 2; }
.rm-root svg { width: 100%; height: 100%; overflow: visible; }
.rm-root polygon { fill: none; stroke: var(--gold-hi); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.rm-halo { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232,168,48,.3), rgba(200,134,10,.1) 45%, transparent 70%); opacity: 0; }
.rm-root.pulse { animation: rootPulse .45s var(--ease) 1; }

@keyframes rootPulse { 50% { transform: translate(-50%,-50%) scale(1.06); } }
.rm-copy { position: absolute; left: 46%; right: 5%; top: 40%; z-index: 3; }
.rm-h2 { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.3rem); max-width: 17ch; }
.rm-h2 .w { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(7px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(var(--i) * 90ms); }
.rm-pin.p-s1 .rm-s1 .w { opacity: 1; transform: none; filter: blur(0); }
.rm-s2 { display: inline-block; font-style: italic; opacity: 0; transform: translateY(.4em); filter: blur(7px); transition: opacity .9s var(--ease-out) .1s, transform .9s var(--ease-out) .1s, filter .9s var(--ease-out) .1s;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-hi) 38%, var(--gold-lite) 50%, var(--gold-hi) 62%, var(--gold) 100%);
  background-size: 240% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-pin.p-s2 .rm-s2 { opacity: 1; transform: none; filter: blur(0); animation: ovSheen 1.3s ease-in-out 1.1s 1 both; }
.rm-flow { margin-top: 22px; font-size: 14.5px; color: var(--ink-mute); font-weight: 300; max-width: 44ch; opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rm-pin.p-fl .rm-flow { opacity: 1; transform: none; }
.rm-couplet { margin-top: 16px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(19px, 1rem + 1.1vw, 26px); color: var(--gold-hi); line-height: 1.36; max-width: 30ch; opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rm-pin.p-cp .rm-couplet { opacity: 1; transform: none; }
.rm-ctaP { margin-top: 26px; opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rm-pin.p-cta .rm-ctaP { opacity: 1; transform: none; }
.rm-cta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi);
  background: rgba(200,134,10,.05); border: 1px solid var(--rule-2); border-radius: var(--r-sm); padding: 15px 26px; cursor: pointer; transition: background .25s, border-color .25s, transform .22s var(--ease); }
.rm-cta:hover { background: rgba(200,134,10,.13); border-color: var(--gold); transform: translateY(-2px); }
/* Dawn seam: the darkness warms just before the paper arrives */
.rm-dawn { position: absolute; left: 50%; bottom: -12%; width: 130%; height: 44%; transform: translateX(-50%); pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 60% 90% at 50% 100%, rgba(253,244,228,.14), rgba(232,168,48,.07) 45%, transparent 72%); opacity: 0; }
/* Flow mode (small screens / no pin): constellation block, then copy */
.rootmap.rm-flowmode .rm-pin { position: relative; height: auto; padding: 70px 0 40px; }
.rootmap.rm-flowmode .rm-eyebrow { position: static; margin: 0 0 26px; padding: 0 var(--gut); }
.rootmap.rm-flowmode .rm-field { position: relative; inset: auto; height: min(118vw, 560px); }
.rootmap.rm-flowmode .rm-copy { position: static; padding: 34px var(--gut) 0; }
.rootmap.rm-flowmode .rm-dawn { display: none; }
.rootmap.rm-flowmode .rm-pin.in .rm-eyebrow, .rootmap.rm-flowmode .rm-pin.in .rm-node { opacity: 1; transform: translate(-50%,-100%); }
.rootmap.rm-flowmode .rm-pin.in .rm-eyebrow { transform: none; }
.rootmap.rm-flowmode .rm-node { transition: opacity .8s var(--ease-out); transition-delay: calc(var(--ni) * 120ms); }
.rootmap.rm-flowmode .rm-pin.in .rm-svg path { animation: rmDash 1.5s var(--ease-out) forwards; animation-delay: calc(var(--pi) * .16s + .4s); }
.rootmap.rm-flowmode .rm-pin.in .rm-root polygon { animation: rmDash .9s var(--ease-out) 2s forwards; }
.rootmap.rm-flowmode .rm-pin.in .rm-halo { animation: haloOn 1s ease-out 2.5s forwards; }
.rootmap.rm-flowmode .rm-pin.in .rm-h2 .w, .rootmap.rm-flowmode .rm-pin.in .rm-s2 { opacity: 1; transform: none; filter: blur(0); }
.rootmap.rm-flowmode .rm-pin.in .rm-flow, .rootmap.rm-flowmode .rm-pin.in .rm-couplet, .rootmap.rm-flowmode .rm-pin.in .rm-ctaP { opacity: 1; transform: none; }

@keyframes rmDash { to { stroke-dashoffset: 0; } }

@keyframes haloOn { to { opacity: 1; } }
/* ---------- Coherence: four stations on the spine ----------
   The light from the root map crosses onto paper and becomes ink:
   a drawn spine runs down the sheet's center gutter, the four claim
   cards dock onto it as stations, and a fine bridge line joins the
   word Reishi in cards 01 and 04: Symbiotic Stacking drawn, not
   claimed. Station fractions are computed at runtime from layout, never hardcoded. */
.sp-wrap { position: relative; }
.sp-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.sp-svg path { fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.sp-anim .sp-svg path { stroke-dashoffset: 1; }
.sp-spine { stroke: var(--p-gold); stroke-width: 1.5; stroke-opacity: .55; }
.sp-bridge { stroke: var(--p-gold); stroke-width: 1.2; stroke-opacity: .7; stroke-dasharray: 1; }
.sp-bridge.go { transition: stroke-dashoffset 1.25s var(--ease); stroke-dashoffset: 0 !important; }
.sp-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) clamp(56px, 7vw, 96px) minmax(0,1fr); z-index: 2; }
.sp-colL, .sp-colR { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.sp-colL { grid-column: 1; }
.sp-colR { grid-column: 3; padding-top: clamp(120px, 16vw, 210px); }
.coh-card { background: var(--paper-2); border: 1px solid var(--p-rule); border-radius: var(--r-md); padding: 34px 32px; position: relative;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow .8s var(--ease-out); }
/* 2026-08-19: hidden start state is opt-in (.sp-anim on #coherence, set only while the reveal
   script is live). Content paints by default when the script is absent, dead, or reduced-motion. */
.sp-anim .coh-card { opacity: 0; transform: translateY(16px); }
/* 2026-08-19: the Judge.me list widget ships near-black text for light grounds and the PDP is
   dark. Lift the review list to parchment. Scoped to the review widget so the write-a-review
   modal, which lives in its own container on a light ground, is untouched. */
.jdgm-review-widget .jm-review-widget-minimal-header__title { color: #F2E8D8 !important; }
.jdgm-review-widget .jm-review-item__body { color: rgba(242, 232, 216, .85) !important; }
.jdgm-review-widget .jm-review-content__title { color: #F2E8D8 !important; }
.jdgm-review-widget .jm-reviewer-info__name { color: #F2E8D8 !important; }
.jdgm-review-widget .jm-reviewer-info .jm-text { color: rgba(242, 232, 216, .62) !important; }
.coh-card.st-on { opacity: 1; transform: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 14px 34px rgba(34,26,14,.1); }
/* Station branch: a short ink line from the spine to the card edge */
.coh-card::before { content: ''; position: absolute; top: 46px; width: clamp(28px, 3.5vw, 48px); height: 1.5px; background: var(--p-gold); opacity: .55;
  transition: transform .5s var(--ease) .15s; }
.sp-anim .coh-card::before { transform: scaleX(0); }
.sp-colL .coh-card::before { right: calc(clamp(28px, 3.5vw, 48px) * -1); transform-origin: right center; }
.sp-colR .coh-card::before { left: calc(clamp(28px, 3.5vw, 48px) * -1); transform-origin: left center; }
.coh-card.st-on::before { transform: scaleX(1); }
/* Compound cross-highlight: hover or tap any compound and every
   occurrence lights across all four cards */
.cmp { cursor: pointer; border-bottom: 1px dotted transparent; transition: color .22s, border-color .22s, background .22s; padding: 1px 2px; margin: -1px -2px; border-radius: 3px; }
.cmp.hotc { color: var(--p-gold); background: rgba(200,134,10,.1); border-bottom-color: var(--p-gold); }
/* Reishi bridge lighting: underline sheen fired the frame the bridge completes */
.rei { position: relative; }
.rei::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: linear-gradient(90deg, var(--p-gold), var(--gold-hi), var(--p-gold)); transform-origin: left center; transition: transform .6s var(--ease); }
.sp-anim .rei::after { transform: scaleX(0); }
.rei.lit::after { transform: scaleX(1); }
.sp-caption { display: table; margin: 30px auto 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--p-gold); background: var(--paper); border: 1px dotted rgba(154,103,8,.45); border-radius: 99px; padding: 8px 16px;
  transition: opacity .7s var(--ease-out) .5s; }
.sp-anim .sp-caption { opacity: 0; }
.sp-caption.on { opacity: 1; }
/* Gold-leaf seal: the spine terminus stamps the sheet closed */
.sp-seal { display: flex; justify-content: center; margin-top: 40px; }
.sp-seal svg { width: 44px; height: 50px; filter: drop-shadow(0 2px 6px rgba(154,103,8,.3)); }
@media (max-width: 880px) {
.sp-grid { grid-template-columns: 1fr; padding-left: 34px; }
.sp-svg { left: 0; }
.sp-colL, .sp-colR { grid-column: 1; padding-top: 0; gap: 28px; }
.sp-colR { margin-top: 28px; }
.coh-card::before { display: none; }
.sp-caption { position: static; transform: none; display: inline-block; margin: 22px 0 0 0; white-space: normal; }
}
.coh-num { width: 40px; height: 45px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--p-gold); margin-bottom: 16px;
  background: rgba(200,134,10,.09);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.coh-card h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-h3); margin-bottom: 12px; color: var(--p-ink); }
.coh-card p { font-size: 15px; line-height: 1.72; }
.coh-card .ing { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--p-rule); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--p-gold); text-transform: uppercase; }
.fda-note { margin-top: 32px; font-size: 12px; color: var(--p-mute); border-top: 1px solid var(--p-rule); padding-top: 18px; }
/* ---------- Ingredients ---------- */
.ing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 60px); align-items: center; }
@media (max-width: 920px) {
.ing-grid { grid-template-columns: 1fr; }
}
.ing-photo { border-radius: 300px 300px var(--r-md) var(--r-md); overflow: hidden; position: relative; aspect-ratio: 4/5; box-shadow: 0 30px 60px rgba(34,26,14,.2); }
.ing-photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.84) contrast(1.04) brightness(.97); }
.ing-photo::after { content: ''; position: absolute; inset: 0; background: rgba(200,134,10,.08); mix-blend-mode: multiply; }
.ing-row { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--p-rule); align-items: baseline; }
.ing-row .nm { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--p-ink); transition: color .25s; }
.ing-row:hover .nm { color: var(--p-gold); }
.ing-row .role { font-size: 14px; color: var(--p-body); }
.ing-row .role i { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--p-mute); letter-spacing: .08em; text-transform: uppercase; display: block; margin-top: 2px; }
@media (max-width: 480px) {
.ing-row { grid-template-columns: 1fr; gap: 3px; }
}
.ing-more-d summary { cursor: pointer; list-style: none; padding: 18px 0 0; }
.ing-more-d summary::-webkit-details-marker { display: none; }
.ing-more { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--p-gold); display: flex; align-items: center; gap: 9px; }
.ing-more-d[open] summary .ing-more .pm { transform: rotate(45deg); }
.ing-more .pm { transition: transform .25s; display: inline-block; }
.ing-note { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-mute); }
/* ---------- The Ritual ---------- */
.ritual { background: var(--bg); }
.ritual::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .45; pointer-events: none; }
.ritual .wrap { position: relative; z-index: 1; }
.rit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
@media (max-width: 880px) {
.rit-grid { grid-template-columns: 1fr; }
}
.rit-grid::before { content: ''; position: absolute; top: 34px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--rule-2) 15%, var(--rule-2) 85%, transparent); }
@media (max-width: 880px) {
.rit-grid::before { display: none; }
}
.rit-card { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 30px 28px 32px; position: relative; overflow: hidden; transition: transform .35s var(--ease), border-color .35s; }
.rit-card:hover { transform: translateY(-4px); border-color: var(--rule-2); }
.rit-step { width: 46px; height: 52px; display: grid; place-items: center; font-family: var(--mono); font-size: 15px; color: var(--gold-hi); background: linear-gradient(160deg, rgba(200,134,10,.24), rgba(200,134,10,.07)); margin-bottom: 20px; position: relative; z-index: 2;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.rit-card h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); margin-bottom: 10px; }
.rit-card p { font-size: 14.5px; color: var(--ink-mute); font-weight: 300; }
.rit-card p b { color: var(--gold-hi); font-weight: 500; }
/* Full-width rule (Jason, 2026-07-31): a line of copy below
   full-width elements is never clamped to a narrow column. */
.rit-note { margin-top: 30px; font-size: 14px; color: var(--ink-mute); font-weight: 300; }
.rit-note b { color: var(--ink); font-weight: 500; }
/* ---------- BUY ---------- */
.buy { background: var(--bg-2); overflow: hidden; }
.buy::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .6; }
.buy::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 28% 50%, rgba(200,134,10,.13), transparent 62%); pointer-events: none; }
.buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 70px); align-items: center; position: relative; z-index: 2; }
@media (max-width: 980px) {
.buy-grid { grid-template-columns: 1fr; gap: 40px; }
}
.buy-left img { width: min(420px, 84%); margin: 0 auto; filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg) drop-shadow(0 40px 50px rgba(0,0,0,.62));
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%); }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 36px; }
@media (max-width: 620px) {
.stat-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 8px; }
}
.stat-strip .v { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px); color: var(--gold-hi); text-align: center; font-weight: 400; }
.stat-strip .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; line-height: 1.55; text-align: center; }
.buybox { background: var(--paper); color: var(--p-ink); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 40px); box-shadow: 0 44px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(232,168,48,.24); position: relative; overflow: hidden; }
.buybox::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 5px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 30%, var(--gold-lite) 50%, var(--gold-hi) 70%, var(--gold-lo)); }
.buybox::after { content: ''; position: absolute; right: -30px; bottom: -36px; width: 190px; height: 190px; opacity: .07; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l9 5.25v10.5l-9 5.25-9-5.25V6.75z' fill='none' stroke='%23201809' stroke-width='.6'/%3E%3C/svg%3E") center/contain no-repeat; }
.buybox > * { position: relative; z-index: 1; }
.bb-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--p-gold); margin-bottom: 10px; }
.buybox h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 36px); letter-spacing: -.01em; }
.buybox .tm { font-size: .42em; vertical-align: .7em; letter-spacing: 0; }
.bb-stars { display: flex; align-items: center; gap: 10px; margin: 12px 0 22px; font-size: 14px; color: var(--p-mute); flex-wrap: wrap; }
.bb-stars .st { color: var(--p-gold); display: flex; }
.bb-stars b { color: var(--p-ink); }
.bb-stars a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--p-rule); }
.bb-stars a:hover { color: var(--p-gold); }
.opt { display: block; border: 1.5px solid var(--p-rule); border-radius: var(--r-md); padding: 17px 20px; margin-bottom: 11px; cursor: pointer; transition: border-color .22s, background .22s, box-shadow .22s; position: relative; }
.opt:hover { border-color: rgba(200,134,10,.5); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .o-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.opt .o-name { font-weight: 600; font-size: 15.5px; display: flex; align-items: center; gap: 11px; }
.opt .o-name::before { content: ''; display: inline-block; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--p-rule); transition: box-shadow .25s; flex: none; }
.opt.sel { border-color: var(--gold); background: var(--paper-2); box-shadow: 0 4px 18px rgba(200,134,10,.13); }
.opt.sel .o-name::before { box-shadow: inset 0 0 0 5.5px var(--gold); }
.opt .o-price { font-family: var(--serif); font-size: 24px; font-weight: 500; white-space: nowrap; }
.opt .o-price .cur { font-size: .58em; vertical-align: .42em; }
.opt .o-price small { font-family: var(--sans); font-size: 13px; color: var(--p-mute); font-weight: 400; }
.opt .o-sub { font-size: 13px; color: var(--p-mute); margin-top: 5px; padding-left: 28px; }
.opt .o-badge { position: absolute; top: -10px; right: 16px; background: var(--gold); color: #17110A; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 11px; border-radius: 99px; }
.bb-cta { display: flex; width: 100%; text-align: center; font-weight: 600; font-size: 17px; color: #17110A; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 62%, var(--gold-lo)); padding: 19px; border-radius: var(--r-sm); margin-top: 20px; box-shadow: inset 0 1px 0 rgba(255,236,190,.6); }
.bb-fine { display: flex; justify-content: center; gap: 20px; margin-top: 15px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-mute); flex-wrap: wrap; }
.bb-fine span { display: flex; align-items: center; gap: 6px; }
.bb-fine a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--p-rule); }
.bb-fine a:hover { color: var(--p-gold); }
.bb-unlock { margin-top: 18px; border: 1px dashed rgba(200,134,10,.5); background: rgba(232,168,48,.08); border-radius: var(--r-sm); padding: 14px 16px; font-size: 13.5px; color: var(--p-body); }
.bb-unlock b { color: var(--p-gold); font-weight: 600; }
.bb-unlock button { background: none; border: none; padding: 0; cursor: pointer; color: var(--p-gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bb-unlock .fine { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); margin-top: 7px; }
.bb-vets { margin-top: 12px; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.bb-vets a { color: var(--p-gold); text-decoration: none; border-bottom: 1px solid var(--p-rule); }
.bb-pay { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; opacity: .55; flex-wrap: wrap; }
.bb-pay span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-mute); border: 1px solid var(--p-rule); border-radius: 4px; padding: 4px 8px; }
/* ---------- Reviews ---------- */
.rev-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--p-rule); }
.rev-score { font-family: var(--serif); font-size: 46px; color: var(--p-ink); line-height: 1; font-weight: 400; }
.rev-meta .st { color: var(--p-gold); display: flex; }
.rev-meta small { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-mute); display: block; margin-top: 6px; }
.rev-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.rev-actions a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--p-gold); text-decoration: none; border: 1px solid var(--p-rule); border-radius: var(--r-sm); padding: 12px 18px; transition: border-color .25s, transform .25s; }
.rev-actions a:hover { border-color: var(--p-gold); transform: translateY(-2px); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) {
.rev-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.rev-grid { grid-template-columns: 1fr; }
}
.rev-card { background: var(--paper-2); border: 1px solid var(--p-rule); border-radius: var(--r-md); padding: 28px 26px; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.rev-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(34,26,14,.12); }
.rev-card .st { color: var(--p-gold); margin-bottom: 13px; display: flex; }
.rev-card h3 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin-bottom: 10px; color: var(--p-ink); }
.rev-card p { font-size: 14.5px; line-height: 1.72; flex: 1; }
.rev-card .who { margin-top: 17px; font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--p-mute); display: flex; align-items: center; gap: 8px; }
.rev-card .who .vf { color: var(--p-gold); }
.rev-typ { margin-top: 26px; font-size: 12px; color: var(--p-mute); }
/* ---------- HUM manifesto ---------- */
.hum { background: var(--bg-deep) url('/cdn/shop/files/brand-story-bg.webp?v=1785341608&width=1400') center/cover no-repeat; }
.hum::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,9,6,.95), rgba(11,9,6,.74) 50%, rgba(11,9,6,.95)); }
.hum .wrap { position: relative; z-index: 2; }
.hum-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (max-width: 920px) {
.hum-grid { grid-template-columns: 1fr; gap: 46px; }
}
.hum-lockup { text-align: center; }
.hum-lockup img { width: min(320px, 78%); margin: 0 auto 20px; }
.hum-lockup p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 19px; color: var(--ink-mute); }
.hum-lockup p b { color: var(--gold-hi); font-weight: 500; }
.hum-copy p { font-size: clamp(15px, .9rem + .3vw, 16.5px); font-weight: 300; color: var(--ink-mute); margin-bottom: 22px; line-height: 1.82; max-width: 58ch; }
.hum-copy p strong { font-family: var(--serif); font-weight: 400; font-size: 1.16em; color: var(--gold-hi); }
/* ---------- Video wall ---------- */
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) {
.vid-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.vid-grid { grid-template-columns: 1fr; }
}
.vid-card { position: relative; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--bg-card); cursor: pointer; text-align: left; padding: 0; width: 100%; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; display: block; }
.vid-card:hover { transform: translateY(-4px); border-color: var(--rule-2); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.vid-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3); }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.14) saturate(.88) brightness(.86); transition: transform .7s var(--ease), filter .4s; }
.vid-card:hover .vid-thumb img { transform: scale(1.05); filter: sepia(.1) saturate(1) brightness(.95); }
.vid-play { position: absolute; inset: 0; display: grid; place-items: center; }
.vid-play i { width: 56px; height: 56px; border-radius: 50%; background: rgba(11,9,6,.72); backdrop-filter: blur(6px); border: 1px solid rgba(232,168,48,.5); display: grid; place-items: center; transition: transform .3s var(--ease), background .3s; }
.vid-play i::after { content: ''; width: 0; height: 0; border-left: 13px solid var(--gold-hi); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.vid-card:hover .vid-play i { transform: scale(1.1); background: rgba(232,168,48,.2); }
.vid-body { padding: 20px 22px 22px; }
.vid-body h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.32; color: var(--ink); }
.vid-body span { display: block; margin-top: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.vid-foot { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* ---------- Devotion ---------- */
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 880px) {
.dev-grid { grid-template-columns: 1fr; }
}
.dev-card { position: relative; border-radius: var(--r-md); overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; text-decoration: none; }
.dev-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); filter: sepia(.18) saturate(.84) contrast(1.04) brightness(.95); }
.dev-card:hover img { transform: scale(1.05); }
.dev-card .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,9,6,.08) 28%, rgba(11,9,6,.94)); }
.dev-card .dc-body { position: relative; z-index: 2; padding: 34px; }
.dev-card .dc-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.dev-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 30px); margin: 10px 0; }
.dev-card p { font-size: 14.5px; color: var(--ink-mute); max-width: 46ch; }
.dev-card .more { display: inline-block; margin-top: 15px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
/* ---------- Full-bleed bands ---------- */
.band { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; padding: 0; }
.band img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.84) contrast(1.04) brightness(.95); }
.band .veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,9,6,.94) 18%, rgba(11,9,6,.3)); }
.band.alt .veil { background: linear-gradient(270deg, rgba(11,9,6,.94) 18%, rgba(11,9,6,.3)); }
.band .wrap { position: relative; z-index: 2; padding-top: clamp(80px,9vw,120px); padding-bottom: clamp(80px,9vw,120px); }
.band h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); max-width: 14ch; margin-top: 18px; }
.band p { margin-top: 18px; max-width: 48ch; color: var(--ink-mute); font-weight: 300; font-size: var(--t-lead); }
.band .more { display: inline-block; margin-top: 24px; }
.band.alt .band-copy { margin-left: auto; text-align: right; max-width: 580px; }
.band.alt .band-copy p, .band.alt .band-copy h2 { margin-left: auto; }
.band.alt .band-copy .eyebrow { justify-content: flex-end; }
@media (max-width: 780px) {
.band.alt .band-copy { margin-left: 0; text-align: left; max-width: none; }
.band.alt .band-copy p, .band.alt .band-copy h2 { margin-left: 0; }
.band.alt .band-copy .eyebrow { justify-content: flex-start; }
}
/* ============================================================
   EVENTS · PARTNERS · HIVE · FAQ · FOOTER · CART
   ============================================================ */

/* ---------- Events ---------- */
.ev-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-bottom: 48px; }
.ev-head .sec-head { margin-bottom: 0; }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) {
.event-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.event-grid { grid-template-columns: 1fr; }
}
.event-card { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.event-card:hover { transform: translateY(-4px); border-color: var(--rule-2); box-shadow: 0 18px 44px rgba(0,0,0,.42); }
.ev-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.ev-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.84) contrast(1.04) brightness(.94); transition: transform .8s var(--ease); }
.event-card:hover .ev-img img { transform: scale(1.05); }
.ev-badge { position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; background: rgba(11,9,6,.78); backdrop-filter: blur(6px); border: 1px solid var(--rule); color: var(--ink-mute); }
.ev-badge.live { color: var(--gold-hi); border-color: rgba(232,168,48,.45); }
.ev-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.ev-date { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-mute); }
.ev-venue { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 6px 0 10px; }
.ev-body h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin-bottom: 8px; }
.ev-body p { font-size: 14px; color: var(--ink-mute); flex: 1; font-weight: 300; }
.ev-body .more { display: inline-block; margin-top: 15px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); border-bottom: 1px solid var(--rule); padding-bottom: 3px; width: fit-content; }
/* ---------- Affiliate band ---------- */
.affil { background: linear-gradient(140deg, var(--bg-3), var(--bg-deep) 62%); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.affil::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .7; pointer-events: none; }
.affil::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 70% at 78% 50%, rgba(200,134,10,.15), transparent 66%); pointer-events: none; }
.affil .wrap { position: relative; z-index: 2; }
.affil-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(34px,4.5vw,70px); align-items: center; }
@media (max-width: 940px) {
.affil-grid { grid-template-columns: 1fr; }
}
.affil h2 { font-size: var(--t-h2); margin-top: 18px; max-width: 15ch; }
.affil p { margin-top: 18px; color: var(--ink-mute); font-weight: 300; font-size: var(--t-lead); max-width: 50ch; }
.affil-terms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 520px) {
.affil-terms { grid-template-columns: 1fr; }
}
.affil-term { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 22px 22px; background: rgba(20,16,10,.55); }
.affil-term .v { font-family: var(--serif); font-size: 27px; color: var(--gold-hi); font-weight: 400; }
.affil-term .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; line-height: 1.6; }
/* ---------- Partner ladder ---------- */
.pt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1120px) {
.pt-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.pt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
.pt-grid { grid-template-columns: 1fr; }
}
.pt-card { border: 1px solid var(--p-rule); border-radius: var(--r-md); padding: 26px 22px 28px; background: var(--paper-2); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pt-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi), var(--gold-lo)); opacity: 0; transition: opacity .3s; }
.pt-card:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(34,26,14,.14); }
.pt-card:hover::before { opacity: 1; }
.pt-k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--p-gold); }
.pt-card h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 10px 0 8px; color: var(--p-ink); }
.pt-rate { font-family: var(--serif); font-size: 22px; color: var(--p-gold); margin-bottom: 8px; font-weight: 500; }
.pt-card p { font-size: 13.5px; color: var(--p-body); flex: 1; line-height: 1.65; }
.pt-cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.pt-cta .btn-dark { font-weight: 600; font-size: 15px; color: var(--paper); background: var(--p-ink); padding: 16px 30px; border-radius: var(--r-sm); text-decoration: none; transition: transform .22s, background .22s; display: inline-flex; align-items: center; }
.pt-cta .btn-dark:hover { transform: translateY(-2px); background: #3A2C13; }
.pt-cta .btn-line { font-weight: 600; font-size: 15px; color: var(--p-ink); border: 1px solid var(--p-rule); padding: 16px 30px; border-radius: var(--r-sm); text-decoration: none; transition: transform .22s, border-color .22s; display: inline-flex; align-items: center; }
.pt-cta .btn-line:hover { transform: translateY(-2px); border-color: var(--p-gold); }
/* ---------- Join the Hive ---------- */
.hive { background: var(--bg); }
.hive::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .7; pointer-events: none; }
.hive::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 66% at 50% 45%, rgba(200,134,10,.13), transparent 64%); pointer-events: none; }
.hive .wrap { position: relative; z-index: 2; }
.hive-box { max-width: 780px; margin: 0 auto; text-align: center; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(34px, 4.5vw, 58px); background: linear-gradient(170deg, rgba(23,17,10,.9), rgba(11,9,6,.9)); box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.hive-box .eyebrow { justify-content: center; }
.hive-box h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin: 18px 0 16px; }
.hive-box > p { color: var(--ink-mute); font-weight: 300; max-width: 52ch; margin: 0 auto 12px; font-size: var(--t-lead); }
.hive-perks { display: flex; gap: 10px 22px; flex-wrap: wrap; justify-content: center; margin: 24px 0 28px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.hive-perks span { display: flex; align-items: center; gap: 7px; }
.hive-perks i.ic { color: var(--gold); }
.hive-form { display: flex; gap: 10px; max-width: 500px; margin: 0 auto; flex-wrap: wrap; }
.hive-form input { flex: 1 1 240px; background: rgba(11,9,6,.7); border: 1px solid var(--rule); border-radius: var(--r-sm); color: var(--ink); font-family: var(--sans); font-size: 15px; padding: 16px 18px; outline: none; transition: border-color .25s; }
.hive-form input:focus { border-color: var(--gold-hi); }
.hive-form input::placeholder { color: var(--ink-faint); }
.hive-form button { flex: 0 0 auto; }
.hive-fine { margin-top: 16px; font-size: 11.5px; color: var(--ink-faint); max-width: 54ch; margin-left: auto; margin-right: auto; }
.hive-fine a { color: var(--ink-mute); }
.form-ok { display: none; margin-top: 18px; font-size: 14.5px; color: var(--gold-hi); font-weight: 500; }
.form-ok.on { display: block; animation: riseIn .5s var(--ease-out) both; }
/* ---------- FAQ ---------- */
#faq .sec-head { margin-left: auto; margin-right: auto; text-align: center; }
#faq .sec-head .eyebrow { justify-content: center; }
.faq-list { max-width: 840px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--p-rule); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 23px 0; font-family: var(--serif); font-weight: 500; font-size: clamp(16px, 1rem + .35vw, 19px); color: var(--p-ink); transition: color .25s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--p-gold); }
.faq-item summary .pm { font-family: var(--mono); color: var(--p-gold); font-size: 18px; flex-shrink: 0; transition: transform .28s var(--ease); }
.faq-item[open] summary .pm { transform: rotate(45deg); }
.faq-item .fa-body { padding: 0 0 24px; font-size: 15px; color: var(--p-body); line-height: 1.78; }
.faq-item .fa-body a { color: var(--p-gold); }
.faq-foot { max-width: 840px; margin: 34px auto 0; text-align: center; font-size: 14px; color: var(--p-mute); }
.faq-foot a { color: var(--p-gold); }
/* ---------- Final CTA ---------- */
.final { background: var(--bg); text-align: center; padding: clamp(96px,10vw,150px) 0 clamp(84px,9vw,130px); }
.final::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 42%, #000 28%, transparent 80%);
  mask-image: radial-gradient(ellipse 50% 70% at 50% 42%, #000 28%, transparent 80%); }
.final::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 65% at 50% 45%, rgba(200,134,10,.15), transparent 64%); pointer-events: none; }
.final .wrap { position: relative; z-index: 2; }
.final .jar-wrap { width: 220px; margin: 0 auto 32px; }
.final img.jar { filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg) drop-shadow(0 30px 40px rgba(0,0,0,.6));
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%); }
.final h2 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); max-width: 16ch; margin: 0 auto 18px; }
.final p { color: var(--ink-mute); max-width: 50ch; margin: 0 auto 34px; font-weight: 300; font-size: var(--t-lead); }
.final .final-fine { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 22px; }
/* ---------- Footer ---------- */
footer { background: var(--bg-deep); border-top: 1px solid var(--rule); padding: 72px 0 40px; position: relative; overflow: hidden; }
footer::before { content: 'ALVARA'; position: absolute; left: 50%; bottom: -.18em; transform: translateX(-50%); font-family: var(--serif); font-weight: 300; font-size: clamp(110px, 17vw, 250px); letter-spacing: .06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(200,134,10,.09); pointer-events: none; white-space: nowrap; }
footer .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 46px; }
@media (max-width: 880px) {
.foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
.foot-grid { grid-template-columns: 1fr; }
}
.foot-grid h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; font-weight: 400; }
.foot-grid ul { list-style: none; }
.foot-grid li { margin-bottom: 10px; }
.foot-grid a { color: var(--ink-mute); text-decoration: none; font-size: 14px; transition: color .2s; }
.foot-grid a:hover { color: var(--gold-hi); }
.foot-brand img { height: 22px; margin-bottom: 16px; }
.foot-brand p { font-size: 13.5px; color: var(--ink-faint); max-width: 34ch; font-weight: 300; }
.foot-contact { margin-top: 15px; font-family: var(--mono); font-size: 12px; color: var(--ink-mute); line-height: 2; }
.foot-contact a { text-decoration: none; }
.foot-social { margin-top: 16px; display: flex; gap: 12px; }
.foot-social a { border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.frule { border: none; border-top: 1px solid var(--rule); margin: 0 0 24px; }
.fda { font-size: 11.5px; color: var(--ink-faint); line-height: 1.7; }
.legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-faint); }
.legal a { color: var(--ink-faint); text-decoration: none; margin-right: 16px; }
.legal a:hover { color: var(--gold-hi); }
/* ---------- Sticky ATC ---------- */
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: rgba(11,9,6,.94); backdrop-filter: blur(16px); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform .38s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
.sticky-atc.show { transform: translateY(0); }
.satc-row { display: flex; align-items: center; gap: 16px; padding: 11px 0; }
.satc-row img { height: 50px; width: auto; filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg); border-radius: 4px; }
.satc-name { font-family: var(--serif); font-size: 17px; }
.satc-name small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.satc-spacer { flex: 1; }
.satc-price { font-family: var(--serif); font-size: 20px; color: var(--gold-hi); white-space: nowrap; }
.satc-price small { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); }
.satc-cta { position: relative; overflow: hidden; font-weight: 600; font-size: 14.5px; color: #17110A; background: linear-gradient(135deg, var(--gold-hi), var(--gold)); padding: 14px 26px; border-radius: var(--r-sm); border: none; cursor: pointer; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,236,190,.55); }
@media (max-width: 720px) {
.satc-name { display: none; }
.satc-row img { height: 40px; }
.satc-price { font-size: 16px; }
}
/* ============================================================
   CART DRAWER
   ============================================================ */
.scrim { position: fixed; inset: 0; z-index: 190; background: rgba(4,3,2,.68); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.scrim.on { opacity: 1; visibility: visible; }
/* ---------- Modal (opt-in) ---------- */
.modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.modal.on { opacity: 1; visibility: visible; }
.modal-card { position: relative; width: min(540px, 100%); max-height: 90vh; overflow-y: auto; background: var(--paper); color: var(--p-ink); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 46px); box-shadow: 0 50px 110px rgba(0,0,0,.6); transform: translateY(18px) scale(.98); transition: transform .38s var(--ease-out); }
.modal.on .modal-card { transform: none; }
.modal-card::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 5px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 30%, var(--gold-lite) 50%, var(--gold-hi) 70%, var(--gold-lo)); }
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: 1px solid var(--p-rule); border-radius: var(--r-sm); width: 34px; height: 34px; cursor: pointer; color: var(--p-mute); display: grid; place-items: center; font-size: 16px; transition: border-color .25s, color .25s; }
.modal-close:hover { border-color: var(--p-gold); color: var(--p-gold); }
.modal-card .eyebrow { color: var(--p-gold); }
.modal-card h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3vw, 32px); margin: 14px 0 12px; letter-spacing: -.01em; }
.modal-card > p { font-size: 15px; color: var(--p-body); max-width: 46ch; }
.modal-form { display: flex; gap: 9px; margin-top: 22px; flex-wrap: wrap; }
.modal-form input { flex: 1 1 220px; background: var(--paper-2); border: 1.5px solid var(--p-rule); border-radius: var(--r-sm); color: var(--p-ink); font-family: var(--sans); font-size: 15px; padding: 16px 18px; outline: none; transition: border-color .25s; }
.modal-form input:focus { border-color: var(--gold); }
.modal-form button { flex: 0 0 auto; }
.modal-fine { margin-top: 15px; font-size: 11.5px; color: var(--p-mute); }
.modal-fine a { color: var(--p-gold); }
.modal-reveal { display: none; margin-top: 22px; border: 1px dashed rgba(200,134,10,.55); background: rgba(232,168,48,.1); border-radius: var(--r-md); padding: 20px; text-align: center; }
.modal-reveal.on { display: block; animation: riseIn .5s var(--ease-out) both; }
.modal-reveal .lab { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--p-mute); }
.modal-reveal .code { font-family: var(--mono); font-size: 24px; letter-spacing: .2em; color: var(--p-gold); margin: 9px 0 4px; font-weight: 500; }
.modal-reveal .note { font-size: 12.5px; color: var(--p-mute); }
.modal-reveal .copy { margin-top: 14px; background: var(--p-ink); color: var(--paper); border: none; border-radius: var(--r-sm); padding: 12px 24px; cursor: pointer; font-weight: 600; font-size: 14px; }
/* ---------- Video lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s; }
.lightbox.on { opacity: 1; visibility: visible; }
.lb-frame { width: min(1000px, 100%); aspect-ratio: 16/9; background: #000; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); box-shadow: 0 40px 100px rgba(0,0,0,.7); }
.lb-frame iframe { width: 100%; height: 100%; border: 0; }
.lb-close { position: absolute; top: 20px; right: 20px; background: rgba(11,9,6,.8); border: 1px solid var(--rule); border-radius: var(--r-sm); width: 40px; height: 40px; cursor: pointer; color: var(--ink); display: grid; place-items: center; font-size: 18px; }
.lb-close:hover { color: var(--gold-hi); border-color: var(--gold); }
/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 130%); z-index: 220; background: var(--bg-card); border: 1px solid var(--rule-2); border-radius: var(--r-sm); padding: 14px 22px; font-size: 14px; color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.5); transition: transform .4s var(--ease-out); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 40px); }
.toast.on { transform: translate(-50%, 0); }
.toast i.ic { color: var(--gold-hi); }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero .eyebrow, .hero h1, .hero-deck, .hero-ctas, .hero-proof, .hero-jar img { animation: none; opacity: 1; transform: none; }
  .hero-halo polygon, .hero-halo circle { stroke-dashoffset: 0; }
  .pollen, .marquee-track { display: none; }
  .drawer, .modal-card { transition: none; }
  /* Overture: everything rests in its final state */
  .wline .w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ov-bell, .overture.ov-live .ov-bell { opacity: 1 !important; transform: none !important; letter-spacing: .005em !important; }
  .overture.ov-live #ovThreadMain, .overture.ov-live #ovThreadTail, .overture.ov-live .ov-hex polygon { stroke-dashoffset: 0 !important; }
  .ov-thread path { stroke-opacity: .22; stroke-dashoffset: 0 !important; }
  .ov-tip { opacity: .45 !important; }
  .ledger-dl .lrow { opacity: 1 !important; }
  /* Root map + spine: fully drawn, fully legible, no pin */
  .rootmap.rm-pinmode .rm-wrap { height: auto !important; }
  .rootmap.rm-pinmode .rm-pin { position: relative !important; height: auto !important; min-height: 100vh; }
  .rm-svg path, .rm-root polygon, .sp-svg path { stroke-dashoffset: 0 !important; animation: none !important; }
  .rm-node, .rm-eyebrow, .rm-h2 .w, .rm-s2, .rm-flow, .rm-couplet, .rm-ctaP { opacity: 1 !important; transform: none !important; filter: none !important; }
  .rm-node { transform: translate(-50%,-100%) !important; }
  .rm-halo { opacity: 1 !important; }
  .rm-mote { display: none; }
  .coh-card { opacity: 1 !important; transform: none !important; }
  .coh-card::before { transform: scaleX(1) !important; }
  .sp-caption { opacity: 1 !important; }
  .rei::after { transform: scaleX(1) !important; }
}
@media print {
.sticky-atc, .scrim, .modal, .rail, .announce, .lightbox { display: none !important; }
}
/* Cream sheets that host multiple sections */
  .cream.sheet { padding: 0; }
.cream .wrap { position: relative; z-index: 1; }
.cream.sheet > section + section { border-top: 1px solid var(--p-rule); }


/* ---------- Shopify commerce glue (draft build) ---------- */
.bb-form-hidden { display: none; }
.alvara-locked { overflow: hidden; }
.bb-form .add-to-cart-text { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.bb-form .bb-cta { width: 100%; display: flex; justify-content: center; }
.bb-form add-to-cart-component { display: block; }

/* ---------- Theme-context color roots ----------
   The prototype set color/font on <body>; inside Horizon each ALVARA
   dark section carries its own root so theme schemes never bleed in. */
.hero, .trustbar, .marquee, .overture, .ledger, .rootmap, .ritual, .buy,
.hum, .band, .affil, .hive, .final, .sticky-atc, .announce, footer.alvara-footer,
.alvara-dark {
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.hero h1, .hero .h-serif { color: var(--ink); }
.h-serif em { font-style: italic; }
.cream, .cream .h-serif, .ledger-card { color: var(--p-ink); }
.ledger-card { font-family: var(--sans); }
/* Horizon resets that fight the prototype look */
.hero h1 { margin: 24px 0 26px; }
.shopify-section { margin: 0; }

/* ============================================================
   MOBILE / RESPONSIVE POLISH LAYER (2026-08-01)
   Loaded last so it wins the cascade over both Horizon base
   styles and the ported prototype rules.
   ============================================================ */

/* 1. Media that must fill its box: Horizon's img{height:auto}
   collapses absolutely-positioned cover images. */
.hero-bg, .band img.bg, .dev-card > img, .ev-img img, .vid-thumb img,
.ing-photo img { height: 100% !important; width: 100% !important; object-fit: cover; }

/* 2. Composite wrappers must never zero the .wrap side padding:
   shorthand padding on the grid killed the inline padding. */
.wrap.hero-grid { padding: 48px 22px 66px !important; }
@media (min-width: 720px) { .wrap.hero-grid { padding: 48px 48px 66px !important; } }
@media (max-width: 940px) { .wrap.hero-grid { padding: 36px 22px 60px !important; } }
.wrap.satc-row { padding: 11px 22px !important; }
@media (min-width: 720px) { .wrap.satc-row { padding: 11px 48px !important; } }

/* 3. Word-split lines: the Liquid loop emits spans without
   whitespace; restore true inter-word rhythm. */
.wline .w, .rm-h2 .w { margin-right: .27em; }
.wline .w:last-child, .rm-h2 .w:last-child { margin-right: 0; }

/* 4. Touch targets: comfortable thumbs on every small link. */
.ov-meet, .bb-vets a, .announce button, .ledger-ghost, .btn-ghost,
.rev-actions a, .ev-body .more, .dev-card .more, .bb-stars a,
.faq-foot a, .hive-fine a { padding-top: 10px; padding-bottom: 10px; display: inline-block; }
.announce button { padding-top: 6px; padding-bottom: 6px; }
.bb-fine a, .legal a { padding: 8px 2px; display: inline-block; }

/* 5. Small-screen rhythm and scale */
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(44px, 12.5vw, 56px); }
  .trust-cell { padding: 18px 10px; }
  .trust-cell .t-sub { font-size: 9px; letter-spacing: .1em; }
  .buybox { padding: 26px 18px 30px; }
  .opt { padding: 15px 14px; }
  .opt .o-price { font-size: 21px; }
  .ledger-card { padding: 30px 20px; }
  .sec-head h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .rit-card, .coh-card { padding: 26px 22px; }
  .event-card .ev-body { padding: 18px 18px 20px; }
  .pt-card { padding: 22px 18px 24px; }
  .affil-term { padding: 18px 16px; }
  .hive-box { padding: 30px 20px; }
  .faq-item summary { padding: 19px 0; }
  .final h2 { font-size: clamp(2rem, 9.6vw, 2.6rem); }
  .marquee span { font-size: 10px; letter-spacing: .2em; }
  .satc-cta { padding: 12px 18px; font-size: 13.5px; }
  .rm-copy { padding: 30px 22px 0; }
  .rm-couplet { font-size: 19px; }
  .vid-body h3 { font-size: 16px; }
  .sp-caption { font-size: 9px; letter-spacing: .1em; }
}

/* 6. Tablet: keep the root map pinned only where it breathes */
@media (max-width: 880px) and (min-width: 760px) {
  .rm-copy { left: 42%; right: 4%; top: 44%; }
  .rm-h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); }
}

/* 7. Safe-area insets for notched phones */
.sticky-atc { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
.wrap { padding-left: max(22px, env(safe-area-inset-left));
        padding-right: max(22px, env(safe-area-inset-right)); }
@media (min-width: 720px) {
  .wrap { padding-left: max(48px, env(safe-area-inset-left));
          padding-right: max(48px, env(safe-area-inset-right)); }
}

/* 8. Overture proportions on phones: tighter silence, fuller bell */
@media (max-width: 640px) {
  .ov-line1 { font-size: clamp(1.7rem, 7.6vw, 2rem); max-width: 16ch; }
  .ov-line2 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .ov-bell { font-size: clamp(2.6rem, 13.5vw, 3.4rem); }
  .ov-exhale { font-size: 1.1rem; max-width: 30ch; }
}

/* 9. Horizon wraps every section in padding: 72px 0; ALVARA sections
   carry their own rhythm, so the wrapper contributes nothing. The
   homepage body also grounds dark so no seam can ever flash white. */
#MainContent .shopify-section[class*="section-alvara"] { padding: 0 !important; margin: 0 !important; }
body:has([class*="section-alvara"]) { background: #0B0906; }

/* 10. Buy options: Horizon styles label as flex, which splits the
   plan description into a clipped side column. Restore the stacked
   prototype layout at every width. */
.buybox .opt { display: block !important; }
.buybox .opt .o-row { display: flex !important; justify-content: space-between; align-items: baseline; gap: 14px; }
.buybox .opt .o-sub { display: block !important; margin-top: 6px; padding-left: 28px; }
@media (max-width: 640px) { .buybox .opt .o-sub { padding-left: 0; } }

/* 11. Footer logo at natural aspect: fixed height, never stretched */
.foot-brand img { height: 26px !important; width: auto !important; max-width: none !important; }

/* 12. Sections without a wrapper class ground themselves: dark bg,
   cream ink (headings were inheriting Horizon's dark scheme text). */
#events, #devotion, #field-guide { background: var(--bg); color: var(--ink); }
#events .h-serif, #devotion .h-serif, #field-guide .h-serif { color: var(--ink); }
/* ===== PDP LAYER ===== */
/* ===== alvara-pdp-hero ===== */
/* ==========================================================================
   ALVARA PDP Hero + Path Chooser  (prefix .pdh-)
   Two variants of one section: .pdh--hero and .pdh--chooser
   ========================================================================== */

.pdh{
  position:relative;
  background:var(--bg);
  color:var(--ink);
  padding:clamp(24px,5vw,60px) 0 clamp(36px,6vw,76px);
  overflow:hidden;
  isolation:isolate;
}
.pdh--chooser{
  background:var(--bg-2);
  padding-block:clamp(48px,8vw,104px);
  border-top:1px solid var(--rule);
}

/* faint hex field, masked so it never competes with the product */
.pdh-field{
  position:absolute;
  inset:0;
  background-image:var(--hex);
  opacity:.16;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,rgba(0,0,0,.35) 55%,transparent 85%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,rgba(0,0,0,.35) 55%,transparent 85%);
}
.pdh .wrap{position:relative;z-index:1}

/* ---------- HERO GRID ---------------------------------------------------- */

.pdh-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,5vw,48px);
  align-items:center;
}
@media (min-width:980px){
  .pdh-grid{
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    gap:clamp(36px,5vw,76px);
  }
}
@media (min-width:1280px){
  .pdh-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:88px}
}

/* ---------- MEDIA: jar, halo, glow, contact shadow ----------------------- */

.pdh-media{
  position:relative;
  display:grid;
  place-items:center;
  min-height:min(84vw,520px);
  padding:clamp(12px,3vw,28px) 0 clamp(18px,4vw,34px);
}
.pdh-glow{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  width:min(104%,620px);
  aspect-ratio:1;
  background:
    radial-gradient(closest-side,rgba(232,168,48,.22),rgba(232,168,48,.07) 52%,transparent 74%),
    radial-gradient(closest-side,rgba(200,134,10,.16),transparent 62%);
  filter:blur(6px);
  pointer-events:none;
}
.pdh-halo{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  width:min(96%,560px);
  aspect-ratio:1;
  overflow:visible;
  pointer-events:none;
}
.pdh-hex-out{opacity:.85}
.pdh-hex-dash{opacity:.55;transform-origin:50% 50%}
.pdh-hex-in{opacity:.9;transform-origin:50% 50%}

.pdh-jar{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
  width:100%;
}
.pdh-jar-img{
  display:block;
  width:min(66%,380px);
  height:auto;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(232,168,48,.14));
  will-change:transform;
}
@media (min-width:980px){.pdh-jar-img{width:min(60%,420px)}}

/* contact shadow / ground pool */
.pdh-contact{
  position:absolute;
  z-index:2;
  bottom:clamp(14px,4vw,30px);
  left:50%;
  transform:translateX(-50%);
  width:min(46%,260px);
  height:clamp(16px,3.6vw,30px);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 46%,transparent 72%),
    radial-gradient(ellipse at center,rgba(200,134,10,.20) 0%,transparent 68%);
  filter:blur(7px);
  pointer-events:none;
}

@media (prefers-reduced-motion:no-preference){
  .pdh-jar-img{animation:pdh-float 8s ease-in-out infinite}
  .pdh-contact{animation:pdh-pool 8s ease-in-out infinite}
  .pdh-hex-dash{animation:pdh-spin 120s linear infinite}
  .pdh-hex-in{animation:pdh-breathe 9s ease-in-out infinite}
  @keyframes pdh-float{0%,100%{transform:translateY(-7px)}50%{transform:translateY(8px)}}
  @keyframes pdh-pool{0%,100%{transform:translateX(-50%) scaleX(.94);opacity:.78}50%{transform:translateX(-50%) scaleX(1.04);opacity:1}}
  @keyframes pdh-spin{to{transform:rotate(360deg)}}
  @keyframes pdh-breathe{0%,100%{transform:scale(.985);opacity:.7}50%{transform:scale(1.015);opacity:1}}
}

/* ---------- BUY COLUMN --------------------------------------------------- */

.pdh-buy{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.pdh-buy .eyebrow{margin:0 0 10px}

.pdh-h1{
  margin:0;
  font-size:clamp(2.6rem,9vw,4.6rem);
  line-height:.98;
  letter-spacing:-.015em;
}
@media (min-width:980px){.pdh-h1{font-size:clamp(3.4rem,4.6vw,5.1rem)}}
.pdh-tm{
  font-family:var(--sans);
  font-size:.26em;
  font-weight:500;
  vertical-align:super;
  margin-left:.12em;
  color:var(--gold-hi);
  letter-spacing:.04em;
}

.pdh-rating{
  display:flex;
  align-items:center;
  gap:9px;
  margin:12px 0 0;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.pdh-rating .stars{color:var(--gold-hi);letter-spacing:.14em;font-size:.9rem;line-height:1}
.pdh-rating-v{color:var(--ink)}
.pdh-rating-l{
  color:var(--ink-mute);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.pdh-rating-l:hover{color:var(--gold-hi);border-color:var(--gold)}

.pdh-body{margin-top:clamp(14px,2.4vw,20px);max-width:56ch}
.pdh-body p{margin:0;font-size:var(--t-body);line-height:1.62;color:var(--ink-mute)}
.pdh-body p+p{margin-top:.7em}

/* stat chips */
.pdh-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
  margin-top:clamp(18px,3vw,24px);
}
.pdh-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:clamp(12px,2vw,16px) clamp(13px,2vw,18px);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008));
}
.pdh-stat-k{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.pdh-stat-n{
  font-family:var(--serif);
  font-size:clamp(1.9rem,5.6vw,2.5rem);
  line-height:1.05;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pdh-stat-c{
  font-family:var(--sans);
  font-size:.78rem;
  line-height:1.35;
  color:var(--ink-mute);
}

.pdh-paths-eyebrow{margin:clamp(22px,3.4vw,30px) 0 0}

/* ---------- CHOOSER VARIANT HEAD ---------------------------------------- */

.pdh-choose-head{
  text-align:center;
  max-width:62ch;
  margin:0 auto clamp(26px,4vw,42px);
}
.pdh-choose-head .eyebrow{justify-content:center;display:inline-flex;align-items:center}
.pdh-h2{
  margin:.35em 0 0;
  font-size:var(--t-h2);
  line-height:1.04;
  letter-spacing:-.01em;
}
.pdh-intro{
  margin:clamp(14px,2.2vw,20px) auto 0;
  font-size:var(--t-lead);
  line-height:1.55;
  color:var(--ink);
  max-width:44ch;
}
.pdh-shipnote{
  margin:12px auto 0;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.06em;
  color:var(--gold-lite);
  max-width:48ch;
}
.pdh-choose-body{max-width:1120px;margin:0 auto}

/* ---------- PATH SELECTOR ------------------------------------------------ */

.pdh-paths{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  width:100%;
  margin-top:clamp(14px,2.4vw,18px);
}
@media (min-width:880px){
  .pdh--chooser .pdh-paths{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(14px,1.6vw,20px);
    align-items:stretch;
  }
}

.pdh-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:clamp(14px,2.4vw,20px);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.030),rgba(255,255,255,.010));
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    border-color .38s var(--ease),
    background .38s var(--ease),
    box-shadow .38s var(--ease),
    transform .38s var(--ease);
}
.pdh--chooser .pdh-card{padding:clamp(18px,2.4vw,24px)}
@media (hover:hover){
  .pdh-card:hover{border-color:rgba(200,134,10,.45);transform:translateY(-2px)}
}
.pdh-card.sel,
.pdh-card:has(.pdh-radio:checked){
  border-color:var(--gold);
  background:linear-gradient(180deg,rgba(200,134,10,.15),rgba(200,134,10,.045));
  box-shadow:0 0 0 1px rgba(200,134,10,.34),0 22px 48px -30px rgba(232,168,48,.62);
}
.pdh-card:has(.pdh-radio:focus-visible){outline:2px solid var(--gold-hi);outline-offset:3px}

.pdh-radio{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

.pdh-card-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.pdh-dot{
  width:18px;height:18px;
  border-radius:50%;
  border:1px solid rgba(200,134,10,.5);
  background:rgba(255,255,255,.03);
  position:relative;
  flex:none;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.pdh-dot::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--gold-hi);
  transform:scale(0);
  opacity:0;
  transition:transform .3s var(--ease-out),opacity .3s var(--ease);
}
.pdh-card.sel .pdh-dot,
.pdh-card:has(.pdh-radio:checked) .pdh-dot{border-color:var(--gold-hi);background:rgba(232,168,48,.10)}
.pdh-card.sel .pdh-dot::after,
.pdh-card:has(.pdh-radio:checked) .pdh-dot::after{transform:scale(1);opacity:1}

.pdh-card-id{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.pdh-card-t{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  line-height:1.2;
}
.pdh-badge{
  font-family:var(--mono);
  font-size:.56rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
  color:var(--bg-deep);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  white-space:nowrap;
}
.pdh-badge--ship{
  color:var(--gold-lite);
  background:transparent;
  border:1px solid rgba(200,134,10,.5);
}

.pdh-card-price{display:flex;align-items:baseline;gap:7px;justify-self:end;white-space:nowrap}
.pdh-price{
  font-family:var(--serif);
  font-size:clamp(1.5rem,4.6vw,1.85rem);
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pdh-card.sel .pdh-price,
.pdh-card:has(.pdh-radio:checked) .pdh-price{color:var(--gold-lite)}
.pdh-per{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--ink-mute);
}
.pdh-was{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-faint,var(--ink-mute));
  text-decoration-color:rgba(200,134,10,.7);
  opacity:.8;
}

.pdh-meta,
.pdh-note{
  font-family:var(--sans);
  font-size:.8rem;
  line-height:1.45;
  color:var(--ink-mute);
  display:block;
}
.pdh-note{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.045em;
  color:var(--ink-faint,var(--ink-mute));
  opacity:.92;
}

/* perks */
.pdh-perks{display:flex;flex-direction:column;gap:6px}
.pdh-perk{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-family:var(--sans);
  font-size:.82rem;
  line-height:1.42;
  color:var(--ink-mute);
}
.pdh-perk .ic-hex{flex:none;color:var(--gold);margin-top:.35em;font-size:.62em;opacity:.9}
.pdh-card.sel .pdh-perk,
.pdh-card:has(.pdh-radio:checked) .pdh-perk{color:var(--ink)}

/* hero variant: perks reveal only on the selected path to protect the fold */
.pdh--hero .pdh-perkwrap{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .45s var(--ease-out),opacity .3s var(--ease);
}
.pdh--hero .pdh-perkwrap>.pdh-perks{overflow:hidden;min-height:0}
.pdh--hero .pdh-card.sel .pdh-perkwrap,
.pdh--hero .pdh-card:has(.pdh-radio:checked) .pdh-perkwrap{grid-template-rows:1fr;opacity:1;padding-top:2px}
.pdh--chooser .pdh-perkwrap{display:block;margin-top:2px}
@media (prefers-reduced-motion:reduce){
  .pdh--hero .pdh-perkwrap{transition:none}
}

.pdh-highlight{
  display:block;
  margin-top:2px;
  padding:8px 10px;
  border-radius:var(--r-sm);
  border:1px dashed rgba(200,134,10,.42);
  background:rgba(200,134,10,.07);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-lite);
  text-align:center;
}

.pdh-selected{
  position:absolute;
  top:10px;right:12px;
  font-family:var(--mono);
  font-size:.54rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-hi);
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .3s var(--ease),transform .3s var(--ease-out);
  pointer-events:none;
}
.pdh-card.sel .pdh-selected,
.pdh-card:has(.pdh-radio:checked) .pdh-selected{opacity:1;transform:none}
@media (max-width:479px){.pdh-selected{display:none}}

/* hidden add-to-cart forms */
.pdh-forms,
.pdh-forms[hidden]{display:none !important}

/* ---------- CTA + ASSURANCES -------------------------------------------- */

.pdh-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:58px;
  margin-top:clamp(14px,2.4vw,18px);
  border:0;
  cursor:pointer;
  font-family:var(--mono);
  font-size:clamp(.78rem,2.6vw,.86rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
}
.pdh--chooser .pdh-cta{max-width:520px;margin-left:auto;margin-right:auto;display:flex}
.pdh-cta-arrow{transition:transform .35s var(--ease-out);font-size:1.1em;line-height:1}
@media (hover:hover){.pdh-cta:hover .pdh-cta-arrow{transform:translateX(4px)}}

.pdh-assure{margin-top:14px;width:100%;text-align:center}
.pdh--hero .pdh-assure{text-align:left}
.pdh-trust,
.pdh-ship{
  margin:0;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--ink-mute);
}
.pdh-ship{margin-top:5px;color:var(--ink-faint,var(--ink-mute));opacity:.9}

.pdh-diet{
  list-style:none;
  margin:clamp(14px,2.4vw,18px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  width:100%;
}
.pdh--chooser .pdh-diet{justify-content:center}
.pdh-diet-chip{
  font-family:var(--mono);
  font-size:.56rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--rule);
  background:rgba(255,255,255,.02);
  white-space:nowrap;
}

/* ---------- FINE TUNING BY WIDTH ---------------------------------------- */

@media (max-width:479px){
  .pdh-card-top{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
  .pdh-card-price{grid-column:2;justify-self:start}
  .pdh-stats{grid-template-columns:1fr}
  .pdh-cta{min-height:56px;letter-spacing:.12em}
}
@media (min-width:768px) and (max-width:979px){
  .pdh-media{min-height:min(58vw,460px)}
  .pdh-jar-img{width:min(46%,340px)}
  .pdh-buy{max-width:660px}
  .pdh-stats{max-width:560px}
}
@media (min-width:1440px){
  .pdh-h1{font-size:5.4rem}
  .pdh-jar-img{width:min(58%,440px)}
}


/* ===== alvara-pdp-usebar ===== */
.pub { background: var(--bg-2); color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(48px, 6vw, 84px) 0; }
.pub-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 880px) { .pub-grid { grid-template-columns: 1fr; } }
.pub-h { font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2rem); margin-top: 16px; font-weight: 350; line-height: 1.3; max-width: 24ch; }
.pub-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .pub-duo { grid-template-columns: 1fr; } }
.pub-card { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 26px 24px; transition: transform .35s var(--ease), border-color .35s; }
.pub-card:hover { transform: translateY(-3px); border-color: var(--rule-2); }
.pub-glyph { width: 34px; height: 34px; color: var(--gold-hi); margin-bottom: 14px; }
.pub-card h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); font-weight: 400; margin-bottom: 10px; }
.pub-card p { font-size: 14px; color: var(--ink-mute); font-weight: 300; line-height: 1.7; }
.pub-coa { margin-top: 28px; font-size: 11.5px; color: var(--ink-faint); border-top: 1px solid var(--rule); padding-top: 16px; }


/* ===== alvara-pdp-breathe ===== */
/* ALVARA PDP — Breathe invocation (prefix: pbr-) */

.pbr-sec {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(72px, 12vw, 160px) 0;
  overflow: hidden;
}

.pbr-wrap {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(28px, 5vw, 48px);
}

.pbr-eyebrow {
  margin: 0;
}

/* Large invitation lines (word-reveal) */
.pbr-line1,
.pbr-line2 {
  margin: 0;
  font-size: var(--t-h2, clamp(28px, 5vw, 52px));
  line-height: 1.2;
  font-weight: 350;
  color: var(--ink);
  max-width: 18ch;
}

.pbr-line1 {
  max-width: 14ch;
}

/* Four questions, staggered, italic serif */
.pbr-questions {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vw, 22px);
  max-width: 46ch;
}

.pbr-question {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--ink-mute);
}

/* Transition couplet */
.pbr-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pbr-transition .pbr-line2 {
  font-size: var(--t-lead, clamp(20px, 3.4vw, 30px));
  max-width: 20ch;
}

/* Closing */
.pbr-closing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.pbr-closing-line {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.8vw, 26px);
  line-height: 1.4;
  color: var(--ink);
}

.pbr-closing-gold {
  color: var(--gold-hi);
}

@media (max-width: 480px) {
  .pbr-questions {
    max-width: 32ch;
  }
  .pbr-line1,
  .pbr-transition .pbr-line2 {
    max-width: 100%;
  }
}

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


/* ===== alvara-pdp-ingredients (live-design dark explorer) ===== */
.pin { background: var(--bg); color: var(--ink); padding: clamp(72px, 9vw, 130px) 0; position: relative; overflow: hidden; }
.pin::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .8; pointer-events: none; }
.pin .wrap { position: relative; z-index: 1; }
.pin-head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); }
.pin-eyebrow { justify-content: center; }
.pin-title { font-size: var(--t-h2); margin: 16px 0 14px; }
.pin-deck { color: var(--ink-mute); font-weight: 300; font-size: var(--t-lead); }
.pin-deck-accent { color: var(--gold-hi); font-size: 15px; margin-top: 6px; }
.pin-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(30px, 4vw, 46px); }
.pin-filter { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
  background: rgba(20, 16, 10, .5); border: 1px solid var(--rule); border-radius: 4px; padding: 12px 20px; cursor: pointer;
  transition: color .25s, border-color .25s, background .25s; }
.pin-filter:hover { color: var(--gold-hi); border-color: var(--rule-2); }
.pin-filter.is-on { color: var(--gold-hi); border-color: var(--gold); background: rgba(200, 134, 10, .1); }
.pin-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (max-width: 980px) { .pin-body { grid-template-columns: 1fr; } .pin-media { display: none; } }
.pin-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 700px) { .pin-list { grid-template-columns: 1fr; } }
.pin-row { background: rgba(18, 14, 9, .6); border: 1px solid var(--rule); border-radius: 8px; transition: border-color .3s, background .3s; }
.pin-row:hover { border-color: var(--rule-2); }
.pin-row.is-open { border-color: rgba(232, 168, 48, .55); background: rgba(24, 18, 10, .8); }
.pin-row-btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: none;
  padding: 14px 16px; cursor: pointer; color: inherit; }
.pin-thumb { flex: none; width: 52px; height: 52px; border-radius: 6px; overflow: hidden; background: #0a0805; }
.pin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pin-row-id { flex: 1; min-width: 0; }
.pin-cat { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.pin-name { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--ink); margin-top: 3px; }
.pin-benefit { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 12.5px; color: var(--gold-soft); margin-top: 2px; }
.pin-toggle { flex: none; width: 22px; height: 22px; position: relative; opacity: .7; }
.pin-toggle::before, .pin-toggle::after { content: ''; position: absolute; background: var(--gold-hi); transition: transform .3s var(--ease); }
.pin-toggle::before { left: 3px; right: 3px; top: 10px; height: 1.5px; }
.pin-toggle::after { top: 3px; bottom: 3px; left: 10px; width: 1.5px; }
.pin-row.is-open .pin-toggle::after { transform: scaleY(0); }
.pin-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.pin-row.is-open .pin-detail { grid-template-rows: 1fr; }
.pin-detail-inner { overflow: hidden; min-height: 0; margin: 0 16px; color: var(--ink-mute); font-weight: 300; font-size: 15px; line-height: 1.7; }
.pin-row.is-open .pin-detail-inner { border-top: 1px solid var(--rule); padding-top: 14px; padding-bottom: 18px; }
.pin-media { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.pin-media-jar, .pin-media-ing { border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); background: #0a0805; }
.pin-media-jar img { width: 100%; height: auto; display: block; }
.pin-media-ing img { width: 100%; height: auto; display: block; transition: opacity .35s var(--ease); }
.pin-media-ing.is-swapping img { opacity: 0; }
.pin-hint { text-align: center; margin-top: 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pin-diet { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; list-style: none; margin: 16px 0 0; padding: 0; }
.pin-diet li { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
  border: 1px solid var(--rule); border-radius: 99px; padding: 7px 14px; }
.pin-row.pin-hide { display: none; }

/* ===== alvara-pdp-ritualcard ===== */
.prc-sec{
  background: var(--bg);
  color: var(--ink);
  padding: clamp(64px, 9vw, 128px) 0;
  overflow: hidden;
}

.prc-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

.prc-media{
  display: flex;
  justify-content: center;
}

.prc-card-frame{
  position: relative;
  max-width: 340px;
  width: 72%;
  transform: rotate(-4deg);
  border-radius: var(--r-md);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.65),
    0 0 0 1px var(--rule),
    0 0 40px -6px rgba(200,134,10,.25);
  transition: transform .6s var(--ease-out);
}

.prc-card-frame::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(232,168,48,.35);
  pointer-events: none;
}

.prc-card-frame img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

@media (prefers-reduced-motion: no-preference){
  .prc-card-frame{
    animation: prc-float 7s ease-in-out infinite;
  }
}

@keyframes prc-float{
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-2.5deg) translateY(-10px); }
}

.prc-copy{
  text-align: left;
  max-width: 46ch;
  margin: 0 auto;
}

.prc-eyebrow{
  margin-bottom: 18px;
}

.prc-h2{
  font-size: var(--t-h2);
  line-height: 1.08;
  margin: 0 0 20px;
}

.prc-body{
  font-family: var(--sans);
  font-size: var(--t-lead);
  color: var(--ink-mute);
  line-height: 1.6;
  margin: 0 0 32px;
}

.prc-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--mono);
  font-size: 13px;
}

.prc-arrow{
  display: inline-block;
  transition: transform .3s var(--ease-out);
}

.prc-link:hover .prc-arrow{
  transform: translateX(4px);
}

@media (min-width: 768px){
  .prc-wrap{
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: clamp(48px, 7vw, 96px);
  }
  .prc-media{
    justify-content: flex-start;
  }
  .prc-card-frame{
    width: 100%;
    max-width: 420px;
  }
  .prc-copy{
    margin: 0;
  }
}

@media (min-width: 1024px){
  .prc-sec{
    padding: clamp(88px, 8vw, 140px) 0;
  }
}

@media (min-width: 1440px){
  .prc-wrap{
    grid-template-columns: minmax(320px, 460px) 1fr;
  }
}


/* ===== alvara-pdp-science ===== */
.psc {
  background: var(--paper, #FDF5E4);
  color: var(--p-ink, #201809);
  padding: clamp(56px, 9vw, 120px) 0;
}

.psc-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
}

.psc-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.psc-eyebrow {
  justify-content: center;
}

.psc-h2 {
  margin-top: 10px;
}

.psc-pull {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.3;
  color: var(--p-gold, #9A6708);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.psc-pull em {
  font-style: italic;
}

.psc-intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--t-lead, 19px);
  line-height: 1.6;
  color: var(--p-body, #4C4230);
}

.psc-intro p {
  margin: 0;
}

.psc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.psc-card {
  position: relative;
  background: var(--paper-2, #FFFDF6);
  border: 1px solid var(--p-rule, #E5D8BA);
  border-radius: var(--r-lg, 22px);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.psc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--p-gold, #9A6708);
  color: var(--p-gold, #9A6708);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.psc-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-gold, #9A6708);
  margin: 0;
}

.psc-card-h3 {
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.25;
  margin: 0;
  color: var(--p-ink, #201809);
}

.psc-body {
  font-family: var(--sans);
  font-size: var(--t-body, 16px);
  line-height: 1.65;
  color: var(--p-body, #4C4230);
}

.psc-body p {
  margin: 0;
}

.psc-closing {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.4;
  color: var(--p-ink, #201809);
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.psc-closing em {
  font-style: italic;
}

.psc-fda {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .psc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .psc-card {
    padding: 36px 30px 32px;
  }
}

@media (min-width: 1024px) {
  .psc-wrap {
    gap: 52px;
  }

  .psc-card {
    padding: 40px 32px 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .psc-card {
    transition: none;
  }
}

  background: var(--bg, #0B0906);
  color: var(--ink, #F5EEE1);
}

  background: var(--bg-card, #14100A);
  border-color: var(--rule, rgba(200,134,10,.18));
}

  color: var(--ink, #F5EEE1);
}

  color: var(--ink-mute, #B7AD98);
}

  color: var(--gold-hi, #E8A830);
}


/* ===== alvara-pdp-convergence ===== */
.pcv-sec {
  position: relative;
  padding: clamp(64px, 10vw, 128px) 0;
  overflow: hidden;
}

.pcv-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 72px);
}

.pcv-h {
  margin-top: 10px;
}

.pcv-intro {
  margin-top: 18px;
  color: var(--ink-mute);
}

.pcv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.pcv-col {
  position: relative;
  text-align: center;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pcv-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
}

.pcv-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Draw-on-scroll: line art starts fully hidden, reveals along its own path length */
.pcv-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: no-preference) {
  .pcv-col--solar .pcv-draw,
  .pcv-col--lunar .pcv-draw {
    transition: stroke-dashoffset 1.3s var(--ease-out, ease-out);
  }

  .pcv-col--solar.reveal.in .pcv-draw.pcv-ray {
    transition-delay: .5s;
  }

  .pcv-col--solar.reveal.in .pcv-draw:not(.pcv-ray),
  .pcv-col--lunar.reveal.in .pcv-draw {
    transition-delay: .1s;
  }

  .pcv-col.reveal.in .pcv-draw {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcv-draw {
    stroke-dashoffset: 0;
  }
}

.pcv-thread {
  position: relative;
  width: 1px;
  height: 76px;
  margin-bottom: 20px;
  background: linear-gradient(
    to bottom,
    var(--gold-hi) 0%,
    var(--rule) 50%,
    var(--gold-hi) 100%
  );
  opacity: .6;
}

.pcv-symbol {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--rule);
}

.pcv-eyebrow {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 6px;
}

.pcv-title {
  font-size: var(--t-h3, 1.6rem);
  margin-bottom: 14px;
}

.pcv-body {
  color: var(--ink-mute);
  max-width: 34ch;
  margin: 0 auto;
}

.pcv-col--union .pcv-body {
  max-width: 40ch;
}

.pcv-quote {
  margin: 22px auto 0;
  max-width: 38ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--gold-lite);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.pcv-quote p {
  margin: 0;
}

/* Tablet: three-up */
@media (min-width: 768px) {
  .pcv-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }

  .pcv-col--union {
    padding-top: 0;
  }
}

@media (min-width: 1024px) {
  .pcv-grid {
    gap: 56px;
  }

  .pcv-body {
    max-width: 30ch;
  }

  .pcv-col--union .pcv-body {
    max-width: 34ch;
  }
}

@media (min-width: 1440px) {
  .pcv-grid {
    max-width: 1280px;
    gap: 72px;
  }
}


/* ===== alvara-pdp-infusion ===== */
.pif-section {
  padding: clamp(56px, 9vw, 112px) 0;
  overflow: hidden;
}

.pif-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
}

.pif-head {
  max-width: 46ch;
}

.pif-heading {
  margin-top: 0.4em;
}

.pif-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .pif-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.pif-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

.pif-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 134, 10, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .pif-card:hover {
    transform: none;
  }
}

.pif-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.pif-glyph svg {
  width: 100%;
  height: 100%;
}

.pif-card-title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.pif-card-body {
  font-family: var(--sans);
  font-size: var(--t-body, 1rem);
  line-height: 1.6;
  color: var(--ink-mute);
}

.pif-card-body p {
  margin: 0;
}

.pif-credit {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint, var(--ink-mute));
  text-align: center;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin: 0;
}

@media (min-width: 1024px) {
  .pif-card {
    padding: 32px 28px;
  }
}

@media (min-width: 1440px) {
  .pif-wrap {
    max-width: 1320px;
    margin-inline: auto;
  }
}


/* ===== alvara-pdp-ty ===== */
.pty-sec {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(56px, 9vw, 120px) 0;
  overflow: hidden;
}

.pty-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
}

.pty-frame-col {
  display: flex;
  justify-content: center;
}

.pty-frame {
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pty-hex-bg {
  position: absolute;
  inset: -14%;
  background-image: var(--hex);
  background-size: 42px 48px;
  opacity: 0.14;
  border-radius: 50%;
  pointer-events: none;
}

.pty-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(232, 168, 48, 0.35), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

.pty-ring {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px var(--rule), 0 0 40px rgba(200, 134, 10, 0.25);
  pointer-events: none;
}

.pty-portrait {
  position: relative;
  width: 88%;
  height: 88%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--gold-hi);
  background: var(--bg-2);
  display: block;
}

.pty-copy-col {
  text-align: center;
}

.pty-eyebrow {
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pty-heading {
  margin: 14px 0 20px;
  font-size: var(--t-h2);
  line-height: 1.08;
}

.pty-body {
  max-width: 62ch;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.pty-body p {
  font-size: var(--t-body);
  color: var(--ink-mute);
  line-height: 1.65;
  margin: 0;
}

.pty-cta {
  margin-top: 28px;
  display: inline-flex;
}

@media (min-width: 768px) {
  .pty-wrap {
    grid-template-columns: minmax(260px, 380px) 1fr;
    text-align: left;
  }

  .pty-copy-col {
    text-align: left;
  }

  .pty-eyebrow {
    justify-content: flex-start;
  }

  .pty-body {
    margin: 0;
  }

  .pty-frame {
    width: min(380px, 100%);
  }
}

@media (min-width: 1024px) {
  .pty-wrap {
    grid-template-columns: 420px 1fr;
    gap: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pty-glow,
  .pty-hex-bg {
    transition: none;
  }
}


/* ===== alvara-pdp-stewardship ===== */
.pst-section {
  background: var(--paper);
  color: var(--p-ink);
  padding: clamp(56px, 8vw, 108px) 0;
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
}

.pst-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
}

/* Header */
.pst-head {
  max-width: 720px;
}

.pst-heading {
  margin-top: 10px;
  color: var(--p-ink);
}

.pst-intro {
  margin-top: 18px;
  color: var(--p-body);
  font-size: var(--t-lead, 1.15rem);
  line-height: 1.6;
}

.pst-intro p + p {
  margin-top: 14px;
}

/* Coming soon banner */
.pst-coming-soon {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: start;
  background: var(--paper-2);
  border: 1px solid var(--p-rule);
  border-radius: var(--r-md);
  padding: clamp(20px, 3vw, 32px);
}

.pst-cs-media {
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper);
}

.pst-cs-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.pst-cs-label {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  color: var(--p-gold);
  font-size: 0.8rem;
  margin: 0 0 6px;
}

.pst-cs-kicker {
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-mute, var(--p-body));
  font-size: 0.72rem;
  margin: 0 0 10px;
}

.pst-cs-heading {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--p-ink);
  margin: 0 0 12px;
}

.pst-cs-copy,
.pst-cs-reassurance {
  color: var(--p-body);
  line-height: 1.6;
  font-size: 0.98rem;
}

.pst-cs-reassurance {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--p-rule);
}

/* Stat cards */
.pst-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pst-card {
  background: var(--paper-2);
  border: 1px solid var(--p-rule);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
}

.pst-card-category {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--p-gold);
  margin: 0 0 14px;
}

.pst-card-number {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--p-ink);
  margin: 0;
}

.pst-card-stat-desc {
  margin: 10px 0 18px;
  color: var(--p-body);
  font-size: 0.92rem;
  line-height: 1.5;
}

.pst-card-product {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 1.15rem;
  color: var(--p-ink);
  margin: 0 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--p-rule);
}

.pst-card-body {
  color: var(--p-body);
  font-size: 0.92rem;
  line-height: 1.6;
  flex-grow: 1;
}

.pst-card-partner {
  margin-top: 16px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--p-mute, var(--p-body));
}

/* Close */
.pst-close {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pst-cta {
  display: inline-block;
}

.pst-close-line {
  color: var(--p-body);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
  .pst-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pst-coming-soon {
    grid-template-columns: 96px 1fr;
    gap: 16px;
  }
}

@media (max-width: 599px) {
  .pst-coming-soon {
    grid-template-columns: 1fr;
  }

  .pst-cs-media {
    max-width: 160px;
    margin: 0 auto;
  }

  .pst-cs-body {
    text-align: left;
  }

  .pst-cards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pst-card,
  .pst-coming-soon {
    transition: none;
  }
}


/* ===== alvara-pdp-validation ===== */
.pvl-sec {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(56px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}

.pvl-wrap { position: relative; z-index: 1; }

.pvl-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }

.pvl-h2 { margin-top: 10px; }

.pvl-intro {
  max-width: 780px;
  margin-bottom: clamp(40px, 6vw, 64px);
  display: grid;
  gap: 16px;
}

.pvl-lead {
  font: var(--t-lead);
  color: var(--ink);
}

.pvl-body {
  font: var(--t-body);
  color: var(--ink-mute);
}

.pvl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: clamp(56px, 8vw, 92px);
}

.pvl-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s var(--ease, ease), transform 0.3s var(--ease-out, ease);
}

.pvl-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.pvl-num {
  font: var(--t-h3, 600 24px/1 var(--serif));
  font-family: var(--serif);
  color: var(--gold);
  opacity: 0.85;
  font-size: 28px;
  line-height: 1;
}

.pvl-card-title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.pvl-card-body {
  font: var(--t-body);
  font-size: 15px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin: 0;
}

.pvl-scientist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 40px);
}

.pvl-scientist-media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.pvl-scientist-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pvl-scientist-copy { display: flex; flex-direction: column; gap: 14px; }

.pvl-scientist-name { margin: 2px 0 4px; }

.pvl-link { align-self: flex-start; margin-top: 6px; }

.pvl-chips { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }

.pvl-chips-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.pvl-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pvl-chip {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  background: transparent;
  white-space: nowrap;
}

@media (min-width: 560px) {
  .pvl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .pvl-grid { grid-template-columns: repeat(3, 1fr); }
  .pvl-scientist { grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
}

@media (min-width: 1440px) {
  .pvl-scientist { padding: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .pvl-card { transition: none; }
  .pvl-card:hover { transform: none; }
}


/* ===== alvara-pdp-amplify ===== */
.pam-sec{
  background: var(--bg);
  color: var(--ink);
  padding: clamp(64px, 8vw, 120px) 0;
}

.pam-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.pam-h{
  margin-top: 12px;
}

.pam-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px){
  .pam-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.pam-card{
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out);
}

@media (hover: hover){
  .pam-card:hover{
    transform: translateY(-4px);
    border-color: var(--gold);
  }
}

@media (prefers-reduced-motion: reduce){
  .pam-card{ transition: none; }
  .pam-card:hover{ transform: none; }
}

.pam-tag{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-hi);
  margin: 0;
}

.pam-card-h{
  font-family: var(--serif);
  font-size: var(--t-h3, clamp(22px, 2.4vw, 30px));
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.pam-body{
  font-family: var(--sans);
  font-size: var(--t-body, 16px);
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
  flex-grow: 1;
}

.pam-body p{
  margin: 0;
}

.pam-cta{
  margin-top: 8px;
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media (min-width: 768px){
  .pam-cta{
    width: auto;
  }
}

.pam-cta-disabled{
  opacity: .55;
  pointer-events: none;
  cursor: default;
}

@media (max-width: 389px){
  .pam-card{
    padding: 26px 20px;
  }
}


/* ===== PDP fold-fit: the primary CTA must sit above the fold on
   every common desktop viewport. Perks flow as a two-column grid,
   and constrained heights compress the type scale. ===== */
.pdh--hero .pdh-perks { flex-flow: row wrap; gap: 6px 14px; }
.pdh--hero .pdh-perk { flex: 0 0 calc(50% - 14px); font-size: 12.5px; }

@media (min-width: 990px) and (max-height: 1200px) {
  .pdh--hero { padding-block: clamp(20px, 3vh, 44px); }
  .pdh--hero h1, .pdh--hero .pdh-title { font-size: clamp(2.6rem, 4.6vw, 4rem); margin-block: 10px 6px; }
  .pdh--hero .pdh-positioning, .pdh--hero .pdh-deck, .pdh--hero .pdh-sub {
    font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden; margin-block: 10px 14px; }
  .pdh--hero .pdh-stats, .pdh--hero .pdh-stat-row { gap: 10px; margin-block: 10px; }
  .pdh--hero .pdh-stat, .pdh--hero [class*="pdh-stat"] > div { padding: 10px 16px; }
  .pdh--hero .pdh-stat b, .pdh--hero .pdh-stat .pdh-stat-n { font-size: 1.6rem; }
  .pdh--hero .pdh-card { padding: 12px 16px; }
  .pdh--hero .pdh-meta { font-size: 12px; margin-top: 2px; }
  .pdh--hero .pdh-cta { margin-top: 12px; padding-block: 15px; }
  .pdh--hero .pdh-assure { margin-top: 8px; }
  .pdh--hero .pdh-assure p { font-size: 10.5px; line-height: 1.5; margin: 2px 0; }
  .pdh--hero .pdh-diet { margin-top: 8px; gap: 6px; }
}
@media (min-width: 990px) and (max-height: 940px) {
  .pdh--hero h1, .pdh--hero .pdh-title { font-size: clamp(2.2rem, 3.8vw, 3.1rem); }
  .pdh--hero .pdh-positioning, .pdh--hero .pdh-deck, .pdh--hero .pdh-sub { -webkit-line-clamp: 2; }
  .pdh--hero .pdh-perk { font-size: 11.5px; }
  .pdh--hero .pdh-eyebrow, .pdh--hero .eyebrow { font-size: 10px; }
}

/* ===== review cards: uniform height, long bodies clamp ===== */
.rev-grid { align-items: stretch; }
.rev-card { height: 100%; }
.rev-card p { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== fold-fit v2 (real selectors) ===== */
@media (min-width: 990px) and (max-height: 1200px) {
  .pdh--hero .pdh-body { font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-block: 10px 12px; }
  .pdh--hero .pdh-stats { margin-block: 8px 10px; }
  .pdh--hero .pdh-stats > * { padding: 8px 14px !important; }
  .pdh--hero .pdh-h1 { margin-block: 8px 4px; }
  .pdh--hero .pdh-card { padding: 10px 14px !important; }
  .pdh--hero .pdh-card .pdh-meta { display: none; }
  .pdh--hero .pdh-card.sel .pdh-meta { display: block; font-size: 11.5px; }
  .pdh--hero .pdh-paths { margin-top: 10px !important; gap: 8px !important; }
  .pdh--hero .pdh-paths-eyebrow { margin-bottom: 4px !important; }
}
@media (min-width: 990px) and (max-height: 950px) {
  .pdh--hero .pdh-body { -webkit-line-clamp: 2; }
  .pdh--hero .pdh-paths-eyebrow { display: none; }
  .pdh--hero .pdh-cta { margin-top: 8px; }
  .pdh--hero .pdh-perk { font-size: 11px; }
  .pdh--hero .pdh-assure p { font-size: 10px; margin: 1px 0; }
  .pdh--hero .pdh-diet { display: none; }
}

/* ===== hex texture: one notch more present ===== */
.cream::before { opacity: .8; }
.hive::before, .final::before { opacity: .85; }

/* ============================================================
   DESIGN-DIRECTOR ELEVATION LAYER (2026-08-01)
   Surface hierarchy, lit hero set, fold economy, cream edges,
   legible affordances, unified hover vocabulary.
   ============================================================ */

/* 1. Surface tiers: data chips flatten (tier 1), commerce card
   is the only tier-3 surface in its section. */
.pdh--hero .pdh-stat { border: 0; background: none; box-shadow: none; }
.pdh--hero .pdh-stats { grid-template-columns: auto auto; justify-content: start;
  gap: clamp(22px, 3vw, 36px); border-block: 1px solid var(--rule); padding: 13px 0; }
.pdh--hero .pdh-stat + .pdh-stat { border-left: 1px solid var(--rule); padding-left: clamp(20px, 2.6vw, 32px); }
.pdh-card.sel {
  border-color: rgba(200,134,10,.42) !important;
  background: linear-gradient(180deg, rgba(200,134,10,.13), rgba(200,134,10,.032)) !important;
  box-shadow: 0 0 0 1px rgba(200,134,10,.20), 0 30px 64px -34px rgba(232,168,48,.58) !important; }
.pdh-selected { display: none !important; }

/* 2. The hero as a lit set: bigger jar, real light source, ground */
@media (min-width: 980px) { .pdh-jar-img { width: min(76%, 505px); } }
.pdh-hex-out, .pdh-hex-in { filter: drop-shadow(0 0 10px rgba(232,168,48,.30)); }
.pdh-hex-out { opacity: 1; }
.pdh-glow { background:
  radial-gradient(closest-side, rgba(232,168,48,.30), rgba(232,168,48,.09) 52%, transparent 74%),
  radial-gradient(closest-side, rgba(255,230,178,.12), transparent 62%); }
.pdh-media { position: relative; z-index: 0; }
.pdh-media::after { content: ''; position: absolute; inset: -8% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(56% 44% at 50% 38%, rgba(232,168,48,.14), transparent 70%),
              radial-gradient(130% 74% at 50% 116%, rgba(0,0,0,.9), transparent 60%); }

/* 4. Cream: real object edges, one primary review action */
.rev-card, .cream .faq-item {
  border-color: #E7D8B4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 32px -24px rgba(63,48,20,.42); }
.rev-actions a:last-child { background: rgba(154,103,8,.08); border-color: var(--p-gold); }

/* 6. Micro-typography: legible faint layer, steadier numerals */
:root { --ink-faint: #8F856F; }
.bb-pay { opacity: 1; }
.bb-pay span { color: var(--p-mute); }
.stat-strip .k, .ev-badge, .pdh-badge { font-size: 10.5px; }
.pdh-card-price, .stat-strip .v, .affil-term .v { font-variant-numeric: tabular-nums lining-nums; }

/* 7. Explorer affordances: chips and disclosures read as controls */
.pin-filter { border-color: rgba(200,134,10,.30); }
.pin-filter:hover { color: var(--gold-lite); background: rgba(200,134,10,.07); }
.pin-filter.is-on {
  background: linear-gradient(180deg, rgba(200,134,10,.20), rgba(200,134,10,.05));
  color: var(--gold-lite); box-shadow: 0 0 0 1px rgba(200,134,10,.28); }
.pin-toggle { width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: 50%;
  transition: transform .35s var(--ease-out), border-color .25s, background .25s; }
.pin-toggle::before { left: 7px; right: 7px; top: 12px; }
.pin-toggle::after { top: 7px; bottom: 7px; left: 12px; }
.pin-row:hover .pin-toggle { border-color: var(--gold); background: rgba(200,134,10,.08); }
.pin-row.is-open .pin-toggle { transform: rotate(45deg); background: rgba(200,134,10,.14); }
.pin-row.is-open .pin-toggle::after { transform: none; }

/* 8. One hover vocabulary + entrance stagger everywhere */
@media (hover: hover) {
  .pin-row:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(0,0,0,.9); }
  .pin-row { transition: transform .4s var(--ease-out), border-color .3s, background .3s, box-shadow .4s var(--ease-out); }
  .pdh-card { position: relative; overflow: hidden; }
  .pdh-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s var(--ease);
    background: radial-gradient(240px 130px at 50% -12%, rgba(232,168,48,.18), transparent 72%); }
  .pdh-card:hover::before { opacity: 1; }
}
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 160ms; }
.reveal:nth-child(4) { transition-delay: 240ms; }
.reveal:nth-child(5) { transition-delay: 320ms; }
.reveal:nth-child(6) { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) { .reveal { transition-delay: 0ms !important; } }

/* Short desktop viewports: the CTA owns the fold, chrome yields */
@media (min-width: 990px) and (max-height: 820px) {
  .pdh--hero { padding-block: 10px 24px; }
  .pdh--hero .pdh-h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin-block: 6px 2px; }
  .pdh--hero .pdh-stats { display: none; }
  .pdh--hero .pdh-body { -webkit-line-clamp: 2; margin-block: 8px 8px; }
  .pdh--hero .pdh-paths-eyebrow { display: none; }
  .pdh--hero .pdh-card { padding: 8px 12px !important; }
  .pdh--hero .pdh-perk { font-size: 10.5px; }
  .pdh--hero .pdh-cta { margin-top: 8px; padding-block: 13px; }
  .pdh--hero .pdh-assure .pdh-ship { display: none; }
}

/* ===== The fold never waits for scroll: hero variant contents
   enter on load with a quick staggered rise; the observer-driven
   .reveal path stays for everything below the fold. ===== */
.pdh--hero .reveal { opacity: 1; transform: none; animation: riseIn .7s var(--ease-out) both; }
.pdh--hero .reveal:nth-child(2) { animation-delay: .07s; }
.pdh--hero .reveal:nth-child(3) { animation-delay: .14s; }
.pdh--hero .reveal:nth-child(4) { animation-delay: .21s; }
.pdh--hero .reveal:nth-child(5) { animation-delay: .28s; }
.pdh--hero .reveal:nth-child(6) { animation-delay: .35s; }
.pdh--hero .reveal:nth-child(7) { animation-delay: .42s; }
.pdh--hero .pdh-cta.reveal { animation-delay: .38s; }
@media (prefers-reduced-motion: reduce) {
  .pdh--hero .reveal { animation: none; opacity: 1 !important; transform: none !important; }
}

/* ===== Hive email field: light ground, dark entry (Jason 8/1) ===== */
.hive-form input {
  background: var(--paper);
  color: var(--p-ink);
  border: 1px solid rgba(200,134,10,.45);
}
.hive-form input::placeholder { color: var(--p-mute); }
.hive-form input:focus { border-color: var(--gold-hi); background: var(--paper-2); }

/* ===== Live-page carryovers: forest ground on BREATHE, emoji glyphs ===== */
.pbr-sec { background-size: cover; background-position: center 30%; position: relative; }
.pbr-veil { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(7,5,2,.3), rgba(7,5,2,.84) 26%, rgba(7,5,2,.88) 74%, rgba(7,5,2,.3)),
              linear-gradient(180deg, rgba(7,5,2,.55), rgba(7,5,2,.3) 22%, rgba(7,5,2,.35) 78%, rgba(7,5,2,.8)); }
.pbr-sec > *:not(.pbr-veil) { position: relative; z-index: 1; }
.pcv-emoji { font-size: 44px; line-height: 1; margin-bottom: 16px; }
.pif-emoji { font-size: 36px; line-height: 1; display: inline-block; }
.pub-emoji { font-size: 32px; line-height: 1; display: block; margin-bottom: 14px; }


/* ================= NINE PAGES LAYER (generated) ================= */

/* ================= END NINE PAGES LAYER ================= */

/* ================= ALVARA NAV (generated) ================= */
/* ============================================================
   ALVARA NAV  ·  Colophon
   Appended to assets/alvara-home.css. Uses existing tokens only.
   Namespaces: .anav-* and .atick-*
   One gesture: a 1px gold rule drawn from its origin edge.
   ============================================================ */

/* ---------- Sticky stack + measurement ---------- */

.anav-section { padding: 0 !important; margin: 0 !important; overflow: visible; }

.anav-sentinel {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none; opacity: 0;
}

.anav-root {
  position: relative;
  --anav-tick-h: 32px;
  --anav-bar-h: 60px;
}

.anav {
  position: relative;
  z-index: 2;
}

/* Anchor targets clear the live header height. Overrides the 92px default. */
:where(section, .band)[id] { scroll-margin-top: calc(var(--anav-h, 112px) + 12px); }

/* Horizon's own cart drawer must outrank the ALVARA header stack. */
cart-drawer,
#cart-drawer,
.cart-drawer,
.drawer--cart { z-index: 200; }

@media print { .anav-root { display: none !important; } }

/* ============================================================
   1. PROMO TICKER
   ============================================================ */

.atick {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  height: var(--anav-tick-h);
  background: var(--bg-deep);
  border-bottom: 1px solid var(--rule);
  transition: height 260ms var(--ease);
  --atick-fade: 16px;
  --atick-pause-w: 36px;
}

.atick-hit {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  right: var(--atick-pause-w);
  z-index: 2;
  display: block;
}

.atick-vp {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--atick-fade), #000 calc(100% - var(--atick-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--atick-fade), #000 calc(100% - var(--atick-fade)), transparent 100%);
}

.atick-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: anav-tick-slide var(--anav-tick-dur, 62s) linear infinite;
}

.atick-set { display: flex; align-items: center; }

@keyframes anav-tick-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.atick-msg {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--ink-mute);
  white-space: nowrap;
  transition: color 180ms linear;
}

.atick .atick-sep {
  width: 8px; height: 8px;
  flex: none;
  color: var(--gold);
  opacity: .55;
  margin: 0 clamp(20px, 3vw, 52px);
}

.atick-static {
  display: none;
  width: 100%;
  text-align: center;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--ink-mute);
}

.atick-pause {
  position: relative;
  z-index: 3;
  flex: none;
  width: var(--atick-pause-w);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-faint);
  transition: color 180ms linear;
}
.atick-pause:hover,
.atick-pause:focus-visible { color: var(--gold-hi); }
.atick-ico { display: block; width: 12px; height: 12px; fill: currentColor; }
.atick-ico-play { display: none; }
.atick-pause[aria-pressed="true"] .atick-ico-pause { display: none; }
.atick-pause[aria-pressed="true"] .atick-ico-play { display: block; }

/* Pause: hover, focus, explicit toggle, or an open mega panel. */
.atick:hover .atick-track,
.atick:focus-within .atick-track,
.anav-root[data-tick-paused="1"] .atick-track,
.anav-root[data-panel-open] .atick-track { animation-play-state: paused; }

.atick:hover .atick-msg,
.atick:focus-within .atick-msg { color: var(--gold-lite); }

@media (min-width: 401px) { .atick { --atick-fade: 20px; } }

@media (min-width: 741px) {
  .atick {
    --atick-fade: 48px;
    --atick-pause-w: 40px;
    background:
      radial-gradient(ellipse 60% 320% at 50% 50%, rgba(200, 134, 10, .07), transparent 70%),
      var(--bg-deep);
  }
  .atick::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background-image: var(--hex);
    background-size: 56px 100px;
    opacity: .55;
    pointer-events: none;
  }
  .atick-msg { font-size: 11.5px; letter-spacing: .09em; }
  .atick-static { font-size: 11.5px; }
}

/* ============================================================
   2. NAV BAR
   ============================================================ */

.anav-bar {
  position: relative;
  z-index: 2;
  background: rgba(11, 9, 6, .96);
  border-bottom: 1px solid var(--rule);
  transition: background-color 300ms linear, border-color 300ms linear;
}

.anav-wrap { height: var(--anav-bar-h); transition: height 260ms var(--ease); }

.anav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}

.anav-spacer { flex: 1 1 auto; min-width: 0; }

/* --- Wordmark --- */

.anav-logo {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  opacity: .94;
  transition: opacity 200ms linear;
  padding: 6px 0;
}
.anav-logo:hover { opacity: 1; }

.anav-logo img {
  height: 16px !important;
  width: auto !important;
  max-width: none;
  display: block;
  transition: height 260ms var(--ease);
}

.anav-logo-text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .30em;
  padding-right: .30em;
  color: var(--ink);
}

/* The asymmetric underdraw: grows from the left, retracts to the right.
   transform-origin is never transitioned, so it snaps at the state change. */
.anav-logo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-hi);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--ease);
}
.anav-logo:hover::after,
.anav-logo:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}

/* --- Menu --- */

.anav-menu { display: none; }

.anav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .18em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-mute);
  transition: color 200ms linear;
}
.anav-item:hover,
.anav-item:focus-visible,
.anav-item[aria-expanded="true"] { color: var(--gold-hi); }

.anav-item::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: calc(50% - 14px);
  height: 1px;
  background: var(--gold-hi);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--ease);
}
.anav-item:hover::after,
.anav-item:focus-visible::after,
.anav-item[aria-expanded="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.anav-item[aria-current="page"] { color: var(--ink); }
.anav-item[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
  background: var(--gold);
}

.anav-menu .anav-hex {
  width: 7px; height: 7px;
  flex: none;
  margin-left: 8px;
  color: var(--gold);
  opacity: .38;
  transition: transform 240ms var(--ease), opacity 200ms linear;
}
.anav-item[aria-expanded="true"] .anav-hex { opacity: 1; transform: rotate(30deg); }

/* --- Right cluster --- */

.anav-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.anav-ico {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 180ms linear;
}
.anav-ico:hover,
.anav-ico:focus-visible { color: var(--gold-hi); }
.anav-ico svg { width: 19px; height: 19px; display: block; }

.anav-search { display: none; }

/* Horizon's header-actions markup is re-skinned, never rebuilt. */
.anav-utils { display: flex; align-items: center; }
.anav .anav-utils :where(a, button, summary) {
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-mute);
  transition: color 180ms linear;
}
.anav .anav-utils :where(a, button, summary):hover,
.anav .anav-utils :where(a, button, summary):focus-visible { color: var(--gold-hi); }
.anav .anav-utils :where(svg) { width: 19px; height: 19px; }

.anav-div { display: none; }

.anav-cta {
  display: none;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #17110A;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  /* AA safe: the gradient never reaches --gold-lo, which drops the label
     to roughly 3.3:1. --gold-lo survives as the inset bottom line only. */
  background: linear-gradient(135deg, var(--gold-lite) 0%, var(--gold-hi) 46%, var(--gold) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .6),
    inset 0 -1px 0 rgba(140, 93, 6, .55),
    0 2px 14px rgba(200, 134, 10, .14);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), padding 260ms var(--ease);
}
.anav-cta::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: translateX(-170%) skewX(-12deg);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
.anav-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .6),
    inset 0 -1px 0 rgba(140, 93, 6, .55),
    0 8px 26px rgba(232, 168, 48, .26);
}
.anav-cta:hover::after { transform: translateX(300%) skewX(-12deg); }
.anav-cta:active { transform: translateY(0); transition-duration: 120ms; }

/* --- Burger: three hairlines, no container --- */

.anav-burger {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.anav-burger span {
  display: block;
  width: 18px; height: 1.5px;
  border-radius: 2px;
  background: var(--gold-hi);
  transition: transform 300ms var(--ease), opacity 200ms linear;
}
.anav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.anav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.anav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --- Bar breakpoints --- */

@media (min-width: 481px) {
  .anav-root { --anav-tick-h: 34px; --anav-bar-h: 64px; }
  .anav-logo img { height: 18px !important; }
}

@media (min-width: 561px) {
  .anav-search { display: grid; }
}

@media (min-width: 720px) {
  .anav-cta { display: inline-flex; }
  .anav-div {
    display: block;
    flex: none;
    width: 1px; height: 18px;
    margin: 0 16px;
    background: var(--rule);
  }
}

@media (min-width: 741px) {
  .anav-bar {
    background: rgba(11, 9, 6, .72);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
  }
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .anav-bar { background: rgba(11, 9, 6, .94); }
  }
}

@media (min-width: 1041px) {
  .anav-root { --anav-tick-h: 36px; --anav-bar-h: 76px; }
  .anav-logo img { height: 20px !important; }
  .anav-burger { display: none; }
  .anav-ico { width: 40px; height: 40px; }
  .anav .anav-utils :where(a, button, summary) { min-width: 40px; height: 40px; }
  .anav-ico svg,
  .anav .anav-utils :where(svg) { width: 17px; height: 17px; }
  .anav-menu {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: clamp(22px, 2.2vw, 34px);
    margin-left: clamp(26px, 3.4vw, 56px);
  }
}

@media (min-width: 1041px) and (max-width: 1199px) {
  .anav-menu { gap: 26px; margin-left: 26px; }
  .anav-cta { padding: 11px 18px; }
}

@media (min-width: 1800px) {
  .anav-root { --anav-tick-h: 40px; --anav-bar-h: 84px; }
  .anav-logo img { height: 22px !important; }
}

/* --- Condensed state (driven by the IntersectionObserver sentinel) --- */

.anav-root[data-scroll="past"] { --anav-tick-h: 28px; --anav-bar-h: 56px; }
.anav-root[data-scroll="past"] .anav-bar { border-bottom-color: rgba(200, 134, 10, .26); }

@media (min-width: 741px) {
  .anav-root[data-scroll="past"] .anav-bar {
    background: rgba(11, 9, 6, .94);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
  }
}

@media (min-width: 1041px) {
  .anav-root[data-scroll="past"] { --anav-bar-h: 60px; }
  .anav-root[data-scroll="past"] .anav-logo img { height: 17px !important; }
  .anav-root[data-scroll="past"] .anav-cta { padding: 10px 18px; }
}

.anav-root[data-panel-open] .anav-bar { border-bottom-color: var(--rule-2); }

/* ============================================================
   3. MEGA PANELS  (desktop only)
   ============================================================ */

.anav-mega { display: none; }

@media (min-width: 1041px) {

  .anav-mega {
    display: block;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 1;
    background: radial-gradient(90% 130% at 62% -10%, rgba(200, 134, 10, .12), transparent 64%) var(--bg-3);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .7);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    transition:
      opacity 160ms var(--ease),
      clip-path 200ms var(--ease),
      visibility 0s linear 200ms;
  }
  .anav-mega > * { visibility: inherit; }

  /* Honeycomb carved at the top edge, gone by the bottom. */
  .anav-mega::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 0;
    background-image: var(--hex);
    background-size: 56px 100px;
    opacity: .8;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
    mask-image: linear-gradient(180deg, #000, transparent 78%);
  }

  .anav-mega.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    clip-path: inset(0 0 0 0);
    transition:
      opacity 220ms linear,
      clip-path 520ms var(--ease-out),
      visibility 0s;
  }

  .anav-mega-in { position: relative; z-index: 1; }

  .anav-mega-wrap {
    padding-top: clamp(30px, 2.8vw, 44px);
    padding-bottom: clamp(34px, 3vw, 48px);
  }

  /* --- Legend rail: the rule appears to pass behind the parent word --- */

  .anav-rail {
    display: grid;
    grid-template-columns: 26px auto 1fr;
    align-items: center;
    column-gap: 14px;
    margin-bottom: clamp(26px, 2.4vw, 34px);
  }
  .anav-rail-stub,
  .anav-rail-line {
    display: block;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
  }
  .anav-rail-stub { background: var(--rule-2); transition: transform 200ms var(--ease-out) 60ms; }
  .anav-rail-line {
    background: linear-gradient(90deg, var(--gold) 0%, var(--rule-2) 24%, var(--rule-2) 78%, transparent 100%);
    transition: transform 520ms var(--ease-out) 120ms;
  }
  .anav-legend {
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold-soft);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 320ms linear 240ms, transform 320ms var(--ease-out) 240ms;
  }
  .anav-mega.is-open .anav-rail-stub,
  .anav-mega.is-open .anav-rail-line { transform: scaleX(1); }
  .anav-mega.is-open .anav-legend { opacity: 1; transform: none; }

  /* --- Columns --- */

  .anav-cols {
    display: grid;
    column-gap: 0;
    grid-template-columns: minmax(160px, .72fr) minmax(300px, 1.28fr) 300px;
  }
  .anav-cols--noplate { grid-template-columns: minmax(170px, .8fr) 1fr; }

  .anav-rubric { padding-right: clamp(36px, 3.6vw, 64px); }
  .anav-contents,
  .anav-plate-col {
    border-left: 1px solid var(--rule);
    padding-left: clamp(36px, 3.6vw, 64px);
  }
  .anav-contents { padding-right: clamp(36px, 3.6vw, 64px); }
  .anav-cols--noplate .anav-contents { padding-right: 0; }

  .anav-col {
    opacity: 0;
    transform: translateY(9px);
    transition: opacity 300ms linear, transform 420ms var(--ease-out);
  }
  .anav-mega.is-open .anav-col { opacity: 1; transform: none; }
  .anav-mega.is-open .anav-rubric { transition-delay: 140ms; }
  .anav-mega.is-open .anav-plate-col { transition-delay: 260ms; }
  /* The contents column carries no entrance of its own. Its rows do. */
  .anav-contents { opacity: 1; transform: none; transition: none; }

  /* --- Column 1: the rubric --- */

  .anav-count { color: var(--gold-hi); }
  .anav-rubric-name {
    margin-top: 18px;
    font-family: var(--serif);
    font-weight: 350;
    font-size: clamp(30px, 2.5vw, 40px);
    line-height: 1.04;
    letter-spacing: -.02em;
    font-variation-settings: 'SOFT' 18, 'WONK' 0, 'opsz' 48;
    color: var(--ink);
  }
  .anav-rubric-rule {
    display: block;
    width: 28px; height: 1px;
    margin-top: 20px;
    background: var(--gold);
    opacity: .8;
  }
  .anav-rubric-note {
    margin-top: 18px;
    max-width: 26ch;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-mute);
  }

  /* --- Column 2: the ruled contents list --- */

  .anav-list { list-style: none; margin: 0; padding: 0; }
  .anav-li {
    opacity: 0;
    transform: translateY(9px);
    transition: opacity 300ms linear, transform 420ms var(--ease-out);
  }
  .anav-mega.is-open .anav-li {
    opacity: 1;
    transform: none;
    transition-delay: calc(180ms + min(var(--i, 0), 6) * 26ms);
  }

  .anav-entry {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: start;
    padding: 15px 14px 17px;
    margin: 0 -14px;
    border-top: 1px solid var(--rule);
    text-decoration: none;
    background: transparent;
    transition: background-color 180ms linear;
  }
  .anav-li:last-child .anav-entry { border-bottom: 1px solid var(--rule); }
  .anav-entry:hover,
  .anav-entry:focus-visible { background-color: rgba(200, 134, 10, .05); }
  .anav-entry:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -2px; }

  /* The marginal rule: the panel rule rotated ninety degrees.
     Draws down from the top, retracts upward from the bottom. */
  .anav-entry::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 1px;
    background: var(--gold-hi);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 200ms var(--ease);
  }
  .anav-entry:hover::before,
  .anav-entry:focus-visible::before {
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 260ms var(--ease-out);
  }

  .anav-folio {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.9;
    letter-spacing: .2em;
    color: var(--gold);
    opacity: .55;
    transition: opacity 200ms linear;
  }
  .anav-entry:hover .anav-folio,
  .anav-entry:focus-visible .anav-folio { opacity: 1; }

  .anav-entry-body { display: block; min-width: 0; }
  .anav-entry-title {
    display: block;
    font-family: var(--serif);
    font-weight: 350;
    font-size: clamp(17px, 1.15vw, 20px);
    line-height: 1.18;
    letter-spacing: -.008em;
    /* Text optical size. The display cut at opsz 120 shatters below 22px. */
    font-variation-settings: 'SOFT' 22, 'WONK' 0, 'opsz' 20;
    color: var(--ink);
    transition: color 200ms linear;
  }
  .anav-entry:hover .anav-entry-title,
  .anav-entry:focus-visible .anav-entry-title { color: var(--gold-lite); }
  .anav-entry-desc {
    display: block;
    margin-top: 5px;
    max-width: 36ch;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-mute);
    text-wrap: pretty;
  }
  .anav-entry[aria-current="page"] .anav-entry-title { color: var(--gold-lite); }
  .anav-entry[aria-current="page"]::before { transform: scaleY(1); transform-origin: top; background: var(--gold); }

  /* --- Column 3: the plate --- */

  .anav-plate { display: block; text-decoration: none; }
  .anav-plate-frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--r-md);
  }
  .anav-plate-frame::after {
    content: '';
    position: absolute; inset: 0;
    border: 1px solid var(--rule);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color 300ms linear;
  }
  .anav-plate img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: sepia(.16) saturate(.9) brightness(.82) contrast(1.03);
    transition: transform 900ms var(--ease-out);
  }
  .anav-plate-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(7, 5, 2, .72));
    transition: background 300ms linear;
    pointer-events: none;
  }
  .anav-plate:hover img { transform: scale(1.03); }
  .anav-plate:hover .anav-plate-veil { background: linear-gradient(180deg, transparent 45%, rgba(7, 5, 2, .82)); }
  .anav-plate:hover .anav-plate-frame::after { border-color: var(--rule-2); }
  .anav-plate:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: var(--r-md); }

  .anav-plate-cap { display: block; margin-top: 16px; }
  .anav-plate-kicker {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .anav-plate-title {
    display: block;
    margin-top: 9px;
    font-family: var(--serif);
    font-weight: 350;
    font-size: 21px;
    line-height: 1.2;
    font-variation-settings: 'SOFT' 22, 'WONK' 0, 'opsz' 24;
    color: var(--ink);
    transition: color 200ms linear;
  }
  .anav-plate:hover .anav-plate-title { color: var(--gold-lite); }
  .anav-plate-desc {
    display: block;
    margin-top: 5px;
    max-width: 32ch;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-mute);
  }

  /* Panel to panel swap: no re-entrance, no rule redraw, no stagger. */
  .anav-mega.is-swap {
    transition: opacity 180ms linear 90ms;
    clip-path: inset(0 0 0 0);
  }
  .anav-mega.is-swap .anav-rail-stub,
  .anav-mega.is-swap .anav-rail-line { transition-delay: 0ms; }
  .anav-mega.is-swap .anav-legend { transition-delay: 90ms; }
  .anav-mega.is-swap .anav-col,
  .anav-mega.is-swap .anav-li { transition-delay: 90ms !important; }
}

@media (min-width: 1280px) {
  .anav-cols { grid-template-columns: minmax(180px, .78fr) minmax(340px, 1.30fr) 340px; }
}
@media (min-width: 1800px) {
  .anav-cols { grid-template-columns: .78fr 1.30fr 372px; }
}

/* ============================================================
   4. MOBILE DRAWER
   ============================================================ */

/* Scroll lock. No position:fixed on body: that would drop the sticky header
   out of the viewport, and the header stays visible above the drawer. */
html.anav-locked,
html.anav-locked body { overflow: hidden; }

.anav-scrim {
  touch-action: none;
  overscroll-behavior: contain;
  position: fixed;
  top: var(--anav-h, 112px);
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  background: rgba(7, 5, 2, .62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms linear, visibility 0s linear 200ms;
}
.anav-root.is-drawer .anav-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms linear, visibility 0s;
}

.anav-drawer {
  position: fixed;
  top: var(--anav-h, 112px);
  right: 0; bottom: 0;
  z-index: 3;
  width: 100vw;
  max-width: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--bg-2);
  box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .7);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 300ms var(--ease), visibility 0s linear 300ms;
  --anav-pad: max(clamp(20px, 6vw, 28px), env(safe-area-inset-right, 0px));
  --anav-pad-l: max(clamp(20px, 6vw, 28px), env(safe-area-inset-left, 0px));
}
.anav-drawer > * { visibility: inherit; }
.anav-drawer::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--hex);
  background-size: 56px 100px;
  opacity: .5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.anav-root.is-drawer .anav-drawer {
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: transform 420ms var(--ease-out), visibility 0s;
}

.anav-drawer-nav {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px var(--anav-pad) 10px var(--anav-pad-l);
}
.anav-drawer-list { list-style: none; margin: 0; padding: 0; }

.anav-d-li {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 260ms linear, transform 360ms var(--ease-out);
}
.anav-root.is-drawer .anav-d-li {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + min(var(--i, 0), 8) * 34ms);
}

.anav-d-row {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms linear;
}
.anav-d-row:active { background-color: rgba(200, 134, 10, .07); transition-duration: 90ms; }

.anav-d-folio {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--gold);
  opacity: .45;
}
.anav-d-label {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.01em;
  font-variation-settings: 'SOFT' 22, 'WONK' 0, 'opsz' 24;
  color: var(--ink);
}
.anav-d-row[aria-current="page"] .anav-d-label { color: var(--gold-lite); }

.anav-d-label--hive {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--gold-lite);
}

.anav-drawer .anav-d-hex {
  width: 8px; height: 8px;
  color: var(--gold);
  opacity: .5;
  transition: transform 240ms var(--ease), opacity 200ms linear;
}
.anav-d-group.is-open .anav-d-hex { opacity: 1; transform: rotate(30deg); }

.anav-d-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease);
}
.anav-d-panel-in { overflow: hidden; min-height: 0; }
.anav-d-group.is-open .anav-d-panel { grid-template-rows: 1fr; }

.anav-d-sub { list-style: none; margin: 0; padding: 0; background: rgba(200, 134, 10, .035); }
.anav-d-sub-row {
  display: block;
  min-height: 60px;
  padding: 12px 0 14px 30px;
  border-top: 1px solid rgba(200, 134, 10, .10);
  text-decoration: none;
}
.anav-d-sub-row:active { background-color: rgba(200, 134, 10, .07); }
.anav-d-sub-title {
  display: block;
  font-family: var(--serif);
  font-weight: 350;
  font-size: 17px;
  line-height: 1.25;
  font-variation-settings: 'SOFT' 22, 'WONK' 0, 'opsz' 18;
  color: var(--ink);
}
.anav-d-sub-row[aria-current="page"] .anav-d-sub-title { color: var(--gold-lite); }
.anav-d-sub-desc {
  display: block;
  margin-top: 4px;
  max-width: 34ch;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}

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

.anav-drawer-foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(16, 12, 7, 0), var(--bg-2) 26%), var(--bg-2);
  padding: 18px var(--anav-pad) max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px)) var(--anav-pad-l);
}

.anav-d-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #17110A;
  background: linear-gradient(135deg, var(--gold-lite) 0%, var(--gold-hi) 46%, var(--gold) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .6),
    inset 0 -1px 0 rgba(140, 93, 6, .55);
}

.anav-d-utils {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
  border-top: 1px solid var(--rule);
}
.anav-d-util {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 180ms linear;
}
.anav-d-util + .anav-d-util { border-left: 1px solid var(--rule); }
.anav-d-util svg { width: 16px; height: 16px; flex: none; }
.anav-d-util:active,
.anav-d-util:focus-visible { color: var(--gold-hi); }
.anav-d-count { color: var(--gold-hi); }

@media (min-width: 520px) {
  .anav-drawer { width: min(88vw, 440px); border-left: 1px solid var(--rule); }
}

@media (min-width: 1041px) {
  .anav-drawer,
  .anav-scrim { display: none; }
}

/* ============================================================
   5. REDUCED MOTION
   The site already forces every duration to .001ms, so the
   component must be correct with zero duration everywhere.
   Nothing here depends on a transitionend event.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .atick-track { display: none; }
  .atick-static { display: block; }
  .atick-vp { -webkit-mask-image: none; mask-image: none; }
  .atick { height: auto; min-height: 32px; }
  .atick-pause { display: none; }
  .atick-hit { right: 0; }

  .anav-mega .anav-col,
  .anav-mega .anav-li,
  .anav-mega .anav-legend,
  .anav-root.is-drawer .anav-d-li { transition-delay: 0ms !important; }

  .anav-mega { clip-path: none; }
  .anav-plate img { transition: none; }
  .anav-plate:hover img { transform: none; }
  .anav-cta::after { display: none; }
}
/* ================= END ALVARA NAV ================= */
/* ===== Sticky stack fix =====
   Shopify wraps a section group in #header-group, a block only as tall as the
   header itself. A sticky section inside it unsticks the moment that box
   scrolls away, so the group is the element that has to stick. */
#header-group {
  position: sticky;
  top: 0;
  z-index: 130;
}
#header-group > .shopify-section {
  position: relative;
}

/* ===== Cart add states ===== */
.is-adding { opacity: .72; cursor: progress; }
.acart-err {
  margin: 10px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: #FFB4A2; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .3s var(--ease), max-height .3s var(--ease);
}
.acart-err.on { opacity: 1; max-height: 60px; }

/* ==========================================================================
   ALVARA CART DRAWER
   Horizon owns this markup, so the skin works by re-pointing the theme's own
   custom properties inside the dialog and then treating the panel like any
   other ALVARA surface: dark honey ground, hex texture, gold as emphasis.
   ========================================================================== */

.cart-drawer__dialog {
  --color-background: #0F0B06;
  --color-foreground: #F5EEE1;
  --color-foreground-rgb: 245 238 225;
  --color-border: rgba(200, 134, 10, .18);
  --color-primary-button-background: var(--gold);
  --color-primary-button-text: #17110A;
  --color-shadow: rgba(0, 0, 0, .8);

  background: linear-gradient(180deg, #12100A 0%, #0D0A06 42%, #0B0906 100%) !important;
  color: var(--ink) !important;
  border-left: 1px solid rgba(200, 134, 10, .3) !important;
  box-shadow: -40px 0 90px -40px rgba(0, 0, 0, .95) !important;
  width: min(460px, 96vw) !important;
  max-width: 96vw !important;
}
@media (min-width: 750px) {
  .cart-drawer__dialog { width: min(460px, 42vw) !important; }
}

/* the light that spills off the jar */
.cart-drawer__dialog::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 46% at 84% -4%, rgba(200, 134, 10, .17), transparent 62%),
    var(--hex);
  opacity: .9;
}
.cart-drawer__inner { position: relative; z-index: 1; }

.cart-drawer__dialog::backdrop {
  background: rgba(5, 4, 2, .74);
  backdrop-filter: blur(7px) saturate(.9);
  -webkit-backdrop-filter: blur(7px) saturate(.9);
}

/* ---------- header ---------- */
.cart-drawer__header {
  background: transparent !important;
  border-bottom: 1px solid var(--rule) !important;
  padding-block: 22px !important;
}
.cart-drawer__heading {
  font-family: var(--serif) !important;
  font-weight: 350 !important;
  font-size: clamp(24px, 3.4vw, 30px) !important;
  letter-spacing: -.015em;
  color: var(--ink) !important;
  gap: 12px !important;
}
.cart-drawer__heading .cart-bubble__background {
  background: linear-gradient(180deg, rgba(200, 134, 10, .34), rgba(200, 134, 10, .12)) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 168, 48, .4);
  border-radius: 999px;
}
.cart-drawer__heading .cart-bubble__text {
  color: var(--gold-lite) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .06em;
}
.cart-drawer__close-button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--rule) !important;
  color: var(--ink-mute) !important;
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .35s var(--ease), background .25s;
}
.cart-drawer__close-button:hover {
  color: var(--gold-hi) !important; border-color: var(--gold) !important;
  background: rgba(200, 134, 10, .08) !important; transform: rotate(90deg);
}

/* ---------- items ---------- */
.cart-drawer__content, .cart-drawer__items { background: transparent !important; }
.cart-drawer__items .cart-items__table-row {
  border-bottom: 1px solid var(--rule) !important;
  padding-block-end: 22px !important; margin-block-end: 22px !important;
  animation: cartRowIn .5s var(--ease-out) both;
}
.cart-drawer__items .cart-items__table-row:nth-child(2) { animation-delay: .06s; }
.cart-drawer__items .cart-items__table-row:nth-child(3) { animation-delay: .12s; }
@keyframes cartRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cart-drawer__items img {
  border-radius: 10px; border: 1px solid var(--rule);
  background: #0A0805;
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .9);
}
.cart-drawer__items .cart-item__name,
.cart-drawer__items a[href*="/products/"] {
  font-family: var(--serif) !important; font-weight: 400 !important;
  font-size: 16.5px !important; line-height: 1.28 !important;
  color: var(--ink) !important; text-decoration: none !important;
  transition: color .22s var(--ease);
}
.cart-drawer__items a[href*="/products/"]:hover { color: var(--gold-hi) !important; }

/* selling plan and variant lines read as a quiet mono caption */
.cart-drawer__items .cart-item__property,
.cart-drawer__items .cart-item__selling-plan,
.cart-drawer__items .cart-items__selling-plan {
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-soft) !important;
}
.cart-drawer__items .price,
.cart-drawer__items [class*="price"] {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gold-lite) !important;
}

/* quantity stepper as a dark pill */
.cart-drawer__items quantity-selector-component,
.cart-drawer__items .quantity-selector {
  background: rgba(20, 16, 10, .8) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.cart-drawer__items quantity-selector-component button,
.cart-drawer__items .quantity-selector button {
  color: var(--gold-hi) !important; background: transparent !important;
  min-width: 38px; min-height: 40px;
  transition: background .2s var(--ease), color .2s;
}
.cart-drawer__items quantity-selector-component button:hover,
.cart-drawer__items .quantity-selector button:hover { background: rgba(200, 134, 10, .12) !important; }
.cart-drawer__items quantity-selector-component input,
.cart-drawer__items .quantity-selector input {
  background: transparent !important; color: var(--ink) !important;
  font-family: var(--mono) !important; font-variant-numeric: tabular-nums;
  border: none !important; width: 40px; text-align: center;
}
.cart-drawer__items button[aria-label*="Remove" i] {
  color: var(--ink-faint) !important;
  transition: color .22s var(--ease), transform .22s var(--ease);
}
.cart-drawer__items button[aria-label*="Remove" i]:hover { color: var(--gold-hi) !important; transform: translateY(-1px); }

/* ---------- summary ---------- */
.cart-drawer__summary {
  background: linear-gradient(180deg, rgba(23, 17, 10, 0), rgba(23, 17, 10, .96) 22%) !important;
  border-top: 1px solid var(--rule);
  gap: 16px !important;
}
.cart-discount summary, .cart-actions summary {
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute) !important;
}
.cart-discount summary:hover, .cart-actions summary:hover { color: var(--gold-hi) !important; }
.cart-totals__total {
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute) !important;
  width: 100%; display: flex; justify-content: space-between; align-items: baseline;
}
.cart-totals__total > *:last-child {
  font-family: var(--serif) !important; font-size: 27px !important;
  letter-spacing: -.01em; text-transform: none;
  color: var(--gold-lite) !important; font-variant-numeric: tabular-nums lining-nums;
}
.cart-totals__tax-note, .cart-drawer__summary p, .cart-drawer__summary small {
  font-family: var(--mono) !important; font-size: 10.5px !important;
  letter-spacing: .06em; color: var(--ink-faint) !important; line-height: 1.7;
}
.cart-drawer__summary a { color: var(--gold-soft) !important; }

/* ---------- the checkout button, treated as metal ---------- */
.cart__checkout-button {
  position: relative; overflow: hidden;
  width: 100%;
  font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: 15px !important; letter-spacing: .06em; text-transform: uppercase;
  color: #17110A !important;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 62%, var(--gold-lo)) !important;
  border: none !important; border-radius: var(--r-sm) !important;
  padding: 19px 30px !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .6), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 10px 30px -14px rgba(232, 168, 48, .7) !important;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.cart__checkout-button::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: translateX(-170%) skewX(-12deg); transition: transform .7s var(--ease); pointer-events: none;
}
.cart__checkout-button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .6), 0 16px 40px -14px rgba(232, 168, 48, .85) !important; }
.cart__checkout-button:hover::after { transform: translateX(300%) skewX(-12deg); }
.cart__ctas { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* ---------- CRO 2026-08-02 ----------
   The wallets lead. Shop Pay returns a one-tap flow for recognised customers, so it is
   the shortest path to a completed order and earns top position. This also mirrors the
   hosted checkout's own hierarchy (Express checkout, then OR, then the form), so the
   drawer and the page that follows it present the same order.
   Flex `order` does the reordering; DOM order is left intact for screen readers, which
   still meet the branded button first as the primary labelled action.        */
.additional-checkout-buttons { position: relative; order: -2; padding-top: 22px; }

/* wallets sized to sit level with the branded button rather than under it */
.additional-checkout-buttons,
.additional-checkout-buttons shopify-accelerated-checkout,
.additional-checkout-buttons shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 54px;
  --shopify-accelerated-checkout-button-border-radius: var(--r-sm);
  --shopify-accelerated-checkout-row-gap: 10px;
  --shopify-accelerated-checkout-inline-alignment: stretch;
}

/* eyebrow above the wallets, matching the label the hosted checkout uses.
   Inherits the surface's text colour so it reads on both the dark drawer and light /cart. */
.additional-checkout-buttons::before {
  content: 'Express checkout'; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  opacity: .55; z-index: 1;
}

/* Shopify injects the recurring-purchase consent here as a sibling of the wallets.
   Left at its native size on purpose: this is required subscription disclosure and
   must stay conspicuous. Spacing only.                                            */
.additional-checkout-buttons .dynamic-checkout__content > small {
  display: block; margin-top: 12px; line-height: 1.65;
}

/* Divider between the express path and the branded path.
   Built from two flex rules rather than a chip masking a line, so it works on the dark
   drawer and the light /cart panel without knowing the surface colour. */
.acart-or {
  order: -1; display: flex; align-items: center; gap: 12px;
  width: 100%; margin: 14px 0 8px;
}
.acart-or::before,
.acart-or::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: color-mix(in srgb, currentColor 20%, transparent);
}
.acart-or span {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  opacity: .55;
}

/* ---------- trust strip (injected) ---------- */
.acart-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin: 4px 0 0; padding: 0; list-style: none;
}
.acart-trust li {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.acart-trust i { color: var(--gold); }

/* ---------- empty state ---------- */
.cart-drawer--empty .cart-drawer__heading--empty {
  font-family: var(--serif) !important; font-weight: 350 !important;
  font-size: 28px !important; color: var(--ink) !important;
}
.cart-items__empty-button, .cart-drawer a.button {
  font-family: var(--mono) !important; font-size: 11.5px !important;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-hi) !important; background: rgba(200, 134, 10, .05) !important;
  border: 1px solid var(--rule) !important; border-radius: var(--r-sm) !important;
  padding: 15px 26px !important; text-decoration: none !important;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.cart-items__empty-button:hover, .cart-drawer a.button:hover {
  border-color: var(--gold) !important; background: rgba(200, 134, 10, .1) !important; transform: translateY(-2px);
}

/* ---------- scrollbar ---------- */
.cart-drawer__items::-webkit-scrollbar, .cart-drawer__content::-webkit-scrollbar { width: 4px; }
.cart-drawer__items::-webkit-scrollbar-thumb, .cart-drawer__content::-webkit-scrollbar-thumb {
  background: rgba(200, 134, 10, .3); border-radius: 4px;
}
.cart-drawer__items, .cart-drawer__content { scrollbar-width: thin; scrollbar-color: rgba(200,134,10,.3) transparent; }

@media (prefers-reduced-motion: reduce) {
  .cart-drawer__items .cart-items__table-row { animation: none; }
  .cart__checkout-button::after { display: none; }
}

/* ---------- ALVARA cart drawer, polish pass ---------- */

/* a hairline of honey draws across the top edge as the panel arrives */
.cart-drawer__dialog[open] .cart-drawer__header::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hi) 22%, var(--gold-lite) 50%, var(--gold-hi) 78%, transparent);
  transform-origin: 50% 50%;
  animation: cartRule .9s var(--ease-out) .1s both;
}
@keyframes cartRule { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: .9; } }

.cart-drawer__items { padding-block-start: 24px !important; }

/* the item thumbnail sits in a lit niche */
.cart-drawer__items .cart-items__table-row img {
  position: relative;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 224, 160, .07);
}

/* checkout label carries the same arrow as the product page CTA */
.cart__checkout-button .button-text { display: inline-flex; align-items: center; gap: 10px; }
.cart__checkout-button .button-text::after {
  content: '\2192'; font-size: 1.05em; line-height: 1;
  transition: transform .3s var(--ease);
}
.cart__checkout-button:hover .button-text::after { transform: translateX(4px); }

/* the subscription disclosure should whisper, not shout */
.cart-drawer__summary .cart-totals__installments,
.cart-drawer__summary [class*="subscription"],
.cart-drawer__summary .dynamic-checkout__content + * { color: var(--ink-faint) !important; }

@media (max-width: 749px) {
  .cart-drawer__dialog { width: 100% !important; border-left: none !important; }
  .cart-drawer__heading { font-size: 24px !important; }
  .cart__checkout-button { padding: 18px 24px !important; font-size: 14px !important; }
  .acart-trust { gap: 6px 14px; }
  .acart-trust li { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer__dialog[open] .cart-drawer__header::after { animation: none; }
}

/* ============================================================================
   TIER 1 (2026-08-02): brand typography on the stock Horizon templates.

   The custom ALVARA sections set their own fonts. Everything on a stock template
   (cart, collections, search, 404, contact, blog, article, page, password) was
   still rendering in Inter, because Shopify's font settings are inter_n4/inter_n7
   and nothing overrode Horizon's font variables.

   Fraunces / DM Sans / DM Mono are already loaded sitewide from theme.liquid, so
   this costs no extra requests. Horizon's own variables are mapped first; the
   element rules below are the safety net for any surface that resolves fonts
   without going through them. Both are low-specificity on purpose, so the custom
   sections' own (often !important) rules keep winning.
   ============================================================================ */

:root {
  --font-primary--family: var(--serif);
  --font-body--family: var(--sans);
  --font-heading--family: var(--serif);
  --font-secondary--family: var(--sans);
  --font-subheading--family: var(--mono);
  --font-accent--family: var(--mono);
}

body {
  font-family: var(--sans);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 350;
  letter-spacing: -0.01em;
}

/* The dark page background used to be gated behind
   `body:has([class*="section-alvara"])`, so it only applied to pages carrying a
   custom section. Now that every stock template runs on scheme-alvara, the whole
   site is dark, and leaving body white caused a white flash on load and white
   overscroll on the cart, collections, search, contact, blog and 404 pages. */
html,
body {
  background-color: #0B0906;
}

/* native scrollbars, spinners and date pickers follow the dark surface */
:root {
  color-scheme: dark;
}

/* Horizon hardcodes rgba(0,0,0,.5) on facet checkbox labels ("In stock",
   "Out of stock") rather than deriving them from the colour scheme, so they
   failed WCAG AA at 3.95:1 once the collection and search pages went dark. */
.checkbox__label-text {
  color: rgba(245, 238, 225, 0.78);
}

/* The facet and sort dropdowns render in a floating-panel-component whose
   background is hardcoded white, independent of the colour scheme. On the dark
   collection and search pages that left a white popover with unreadable labels. */
floating-panel-component {
  background-color: #17110A !important;
  border: 1px solid rgba(200, 134, 10, 0.25);
  color: #F5EEE1;
}

/* Sort dropdown option labels hardcode rgba(0,0,0,.81) rather than inheriting the
   colour scheme, so they were black text inside the now-dark sort panel. */
.sorting-filter__label {
  color: rgba(245, 238, 225, 0.85);
}

/* Wholesale tier cards take their selected state from the radio itself. The shared
   path-selector script also stamps .sel on every card in the group, which made all
   five case tiers read as selected at once, so .sel is neutralised here unless the
   card actually contains the checked input. */
.pdh-wholesale-form .pdh-card.sel:not(:has(.pdh-radio:checked)) {
  border-color: rgba(200, 134, 10, .18) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pdh-wholesale-form .pdh-card.sel:not(:has(.pdh-radio:checked)) .pdh-dot {
  border-color: rgba(200, 134, 10, .5);
  background: rgba(255, 255, 255, .03);
}
.pdh-wholesale-form .pdh-card.sel:not(:has(.pdh-radio:checked)) .pdh-dot::after {
  transform: scale(0);
  opacity: 0;
}
.pdh-wholesale-form .pdh-card.sel:not(:has(.pdh-radio:checked)) .pdh-selected { opacity: 0; }
.pdh-wholesale-form .pdh-card.sel:not(:has(.pdh-radio:checked)) .pdh-price { color: inherit; }

/* ======================================================================
   NAV CRO PASS 2026-08-02
   Primary CTA becomes the consumer purchase entry (was "Partner With Us"
   to /pages/partners, a B2B recruitment page in the highest-contrast slot).
   Legibility and target size raised for the 45-65 core audience: 14px type
   (was 12.5px uppercase) and a 44px minimum height that survives BOTH the
   1041-1199px padding step and the scrolled state, neither of which may
   drop it below 44px again. Letter-spacing tightened .1em -> .06em so the
   larger type does not widen the header cluster.
   ====================================================================== */
.anav-cta {
  font-size: 14px;
  letter-spacing: .06em;
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 1041px) and (max-width: 1199px) {
  .anav-cta { padding-left: 18px; padding-right: 18px; }
}

.anav-root[data-scroll="past"] .anav-cta {
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Secondary partner link. Demoted from the gold gradient to a plain text
   link so the partner path stays reachable in the header without being the
   only styled CTA. Desktop only, matching .anav-menu's 1041px reveal. */
.anav-partner { display: none; }

@media (min-width: 1041px) {
  .anav-partner {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-height: 44px;
    margin-right: 18px;
    padding: 0 2px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .04em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink);
    opacity: .70;
    transition: opacity 200ms linear, color 200ms linear;
  }

  .anav-partner:hover,
  .anav-partner:focus-visible {
    opacity: 1;
    color: var(--gold-hi);
  }
}

/* Mobile drawer: same demotion, beneath the drawer CTA. */
.anav-d-partner {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
  opacity: .70;
  transition: opacity 200ms linear, color 200ms linear;
}

.anav-d-partner:hover,
.anav-d-partner:focus-visible {
  opacity: 1;
  color: var(--gold-hi);
}

/* ======================================================================
   FLOATING PILL NAV 2026-08-02
   Requested by Jason. Logo sits INSIDE the pill.

   Approach: the full-width sticky wrapper stays in the DOM untouched, and
   only the inner .anav-wrap is styled as the pill. That keeps .anav-mega
   full-bleed (it is absolutely positioned against .anav, so left:0/right:0
   still resolves to the viewport) with no 100vw, no position:fixed and no
   re-parenting.

   Elevation on dark was the real risk: a dark pill on a dark hero has no
   perceptible edge. Solved with three cues together rather than one:
   a surface lifted above the page ground, a low-opacity gold hairline, and
   a real shadow. Backdrop blur is reused, not introduced, since .anav-bar
   already ran blur(18px) at this same 741px breakpoint.

   The ticker collapses to zero height once scrolled, so at rest you get
   band + pill and in motion the pill floats alone over content. Driven off
   the existing data-scroll="past" attribute, so no JS change.

   Hover safety verified in alvara-home.js: the panel's own pointerenter
   clears closeTimer and scheduleClose runs on a 220ms grace, so the
   transparent gap between pill and panel does not dismiss the menu.

   Mobile (below 741px) deliberately keeps the current full-width bar.
   ====================================================================== */
@media (min-width: 741px) {

  /* carrier: transparent, and its vertical padding creates the float gap */
  .anav-root .anav-bar {
    background: transparent;
    border-bottom: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 12px 0 14px;
  }

  /* the pill itself */
  .anav-root .anav-wrap {
    max-width: 1180px;
    padding-left: 26px;
    padding-right: 16px;
    border-radius: 999px;
    background: rgba(26, 21, 15, .80);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
    backdrop-filter: blur(20px) saturate(1.18);
    border: 1px solid rgba(200, 134, 10, .18);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .32);
    transition: height 260ms var(--ease), background-color 300ms linear,
                border-color 300ms linear, box-shadow 300ms linear,
                max-width 260ms var(--ease);
  }

  /* ticker: collapsible, and it keeps its own band look while visible */
  .atick {
    overflow: hidden;
    transition: min-height 280ms var(--ease), height 280ms var(--ease),
                opacity 200ms linear;
  }

  .anav-root[data-scroll="past"] .atick {
    min-height: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* scrolled: tighten and firm up so the pill reads as lifted, not washed */
  .anav-root[data-scroll="past"] .anav-wrap {
    /* background and border-color deliberately NOT set here: they would
       outrank the ground swap and pin the pill dark. See FLOAT FIX block. */
    box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .36);
  }

  /* the gold CTA is now inside a rounded container, so soften its corners
     to sit concentrically rather than fighting the pill radius */
  .anav-root .anav-cta {
    border-radius: 999px;
  }
}

/* Reduced motion: no height animation on the collapsing band. */
@media (prefers-reduced-motion: reduce) {
  .atick { transition: none; }
  .anav-root .anav-wrap { transition: none; }
}

/* ======================================================================
   ADAPTIVE PILL GROUND 2026-08-02
   Requested by Jason: cream pill over dark sections, dark pill over cream
   sections, switching automatically with the ground it sits on.

   Ground is DECLARED, not sampled. There is no way to read backdrop
   luminance in CSS, and mix-blend-mode:difference was rejected because it
   destroys the gold and mangles the wordmark. So alvara-home.js measures the
   document ranges of every light-ground block (.cream, plus anything opted
   in with data-anav-light) and writes data-anav-ground="light|dark" onto
   .anav-root as the pill's centre crosses them.

   State table:
     no attribute        -> dark pill, light contents  (safe pre-JS fallback,
                            identical to the previous build)
     ground="dark"       -> CREAM pill, dark contents
     ground="light"      -> DARK pill, light contents
     [data-panel-open]   -> forced DARK pill regardless of ground, so the pill
                            and the full-bleed mega panel read as one surface
                            instead of a cream tab welded to a dark sheet.

   Surface and border go through --pill-bg / --pill-bd so the scrolled state
   can firm up the shadow without fighting the ground swap.
   ====================================================================== */
@media (min-width: 741px) {

  .anav-root .anav-wrap {
    --pill-bg: rgba(26, 21, 15, .80);
    --pill-bd: rgba(200, 134, 10, .18);
    background: var(--pill-bg);
    border-color: var(--pill-bd);
  }

  /* scrolled: shadow only. Must not set background, or it would override the
     ground swap below at equal specificity. */
  .anav-root[data-scroll="past"] .anav-wrap {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .36);
  }

  /* ---- over a DARK section: cream pill ---- */
  .anav-root[data-anav-ground="dark"] .anav-wrap {
    --pill-bg: rgba(253, 245, 228, .94);
    --pill-bd: rgba(11, 9, 6, .10);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .46), 0 2px 8px rgba(0, 0, 0, .30);
  }

  .anav-root[data-anav-ground="dark"] .anav-item,
  .anav-root[data-anav-ground="dark"] .anav-partner,
  .anav-root[data-anav-ground="dark"] .anav-ico,
  .anav-root[data-anav-ground="dark"] .anav-utils,
  .anav-root[data-anav-ground="dark"] .anav-logo-text {
    color: var(--p-ink);
  }

  .anav-root[data-anav-ground="dark"] .anav-menu .anav-hex {
    color: var(--p-gold);
    opacity: .55;
  }

  .anav-root[data-anav-ground="dark"] .anav-div {
    background: rgba(11, 9, 6, .18);
  }

  /* Only logo-white.webp exists in Files, so the white wordmark is rendered
     dark with a filter. Graceful: if the filter is unsupported the logo stays
     visible, just light. Replace with a real dark wordmark when one is
     uploaded (same missing asset that blocks checkout branding). */
  .anav-root[data-anav-ground="dark"] .anav-logo img {
    filter: brightness(0);
  }

  .anav-root[data-anav-ground="dark"] .anav-burger span {
    background: var(--p-ink);
  }

  /* ---- over a CREAM section: dark pill, warm shadow ---- */
  .anav-root[data-anav-ground="light"] .anav-wrap {
    --pill-bg: rgba(17, 13, 9, .94);
    --pill-bd: rgba(200, 134, 10, .22);
    box-shadow: 0 14px 34px rgba(60, 44, 16, .22), 0 2px 8px rgba(60, 44, 16, .14);
  }

  /* Panel-open dark override REMOVED 2026-08-02 on Jason's call. It forced the
     pill dark whenever a mega panel opened, which read as the pill "changing
     back to dark" on hover. The pill now holds its ground colour while a panel
     is open, so a cream pill can sit above the dark full-bleed panel. If that
     pairing reads badly, the alternative is inverting the panel too, which is
     a much larger change: the panel carries gold gradients, a hex overlay and
     photographic plates all designed against dark. */

  /* cross-fade the swap so it does not read as a flash mid-scroll */
  .anav-root .anav-item,
  .anav-root .anav-partner,
  .anav-root .anav-ico,
  .anav-root .anav-utils,
  .anav-root .anav-menu .anav-hex,
  .anav-root .anav-logo img,
  .anav-root .anav-div {
    transition: color 240ms linear, background-color 240ms linear,
                filter 240ms linear, opacity 240ms linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anav-root .anav-item,
  .anav-root .anav-partner,
  .anav-root .anav-ico,
  .anav-root .anav-utils,
  .anav-root .anav-logo img,
  .anav-root .anav-div { transition: none; }
}

/* ======================================================================
   FLOAT FIX 2026-08-02
   Bug: the pill stopped floating as soon as the page was scrolled, and the
   pill never went cream. One root cause, two rules, both at (0,3,0) and both
   beating the (0,2,0) overrides written earlier:

     1. the theme's own .anav-root[data-scroll="past"] .anav-bar sets
        background rgba(11,9,6,.94) + blur, which re-painted a full-width
        dark BAND behind the pill on scroll. That band is what killed the
        float. Visible in Jason's screenshot at the cream section.

     2. the earlier pill block's .anav-root[data-scroll="past"] .anav-wrap
        set background directly, which outranked
        .anav-root .anav-wrap { background: var(--pill-bg) } and pinned the
        pill dark, so the ground swap could set --pill-bg to cream and never
        be painted. That declaration is now stripped at source; this block
        restates the surface at matching specificity as a belt-and-braces.

   Everything here is (0,3,0) and declared last, so scroll state can no
   longer outrank ground state.
   ====================================================================== */
@media (min-width: 741px) {

  /* the carrier stays transparent in EVERY scroll state, so the only painted
     thing in the header is the pill itself */
  .anav-root[data-scroll] .anav-bar,
  .anav-root[data-scroll="past"] .anav-bar {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
  }

  /* the pill surface always resolves from the ground variables */
  .anav-root[data-scroll] .anav-wrap,
  .anav-root[data-scroll="past"] .anav-wrap,
  .anav-root[data-anav-ground] .anav-wrap {
    background: var(--pill-bg);
    border-color: var(--pill-bd);
  }
}

/* ======================================================================
   MEGA PANEL GROUND MATCH 2026-08-02
   The mega panel now matches the pill. Ground "dark" means the page section
   is dark, so the pill is cream, so the panel is cream too. Ground "light"
   needs no rules: the panel's shipped design already is the dark variant.

   Every value below is the paper-palette counterpart of the dark original,
   not a guess:
     background      radial rgba(200,134,10,.12) over --bg-3  ->  rgba(147,98,10,.10) over --paper
     hex overlay     var(--hex) stroke rgba(200,134,10,.06)   ->  var(--hex-p) stroke rgba(154,103,8,.09)
     legend          --gold-soft #C9A84C                      ->  --p-gold #93620A
     count           --gold-hi  #E8A830                       ->  --p-gold
     titles          --ink      #F5EEE1                       ->  --p-ink  #201809
     descriptions    --ink-mute #B7AD98                       ->  --p-mute #6B5E45
     hairlines       --rule rgba(200,134,10,.18)              ->  rgba(32,24,9,.12)
     hover title     --gold-lite #FFE6B2 (invisible on cream) ->  --p-gold

   --p-gold is the paper gold specifically because it was set to #93620A in an
   earlier pass to clear 4.5:1 on cream. Do not substitute --gold here.

   The plate CAPTION is inverted because .anav-plate-cap is a sibling of the
   image frame with margin-top:16px, so it sits on the panel ground, not on
   the image's veil. The veil and the photograph itself are left alone.

   Scoped to 1041px and up, matching the panel's own breakpoint.
   ====================================================================== */
@media (min-width: 1041px) {

  .anav-root[data-anav-ground="dark"] .anav-mega {
    background: radial-gradient(90% 130% at 62% -10%, rgba(147, 98, 10, .10), transparent 64%) var(--paper);
    border-bottom-color: rgba(32, 24, 9, .12);
    box-shadow: 0 34px 60px -26px rgba(60, 44, 16, .28);
  }

  .anav-root[data-anav-ground="dark"] .anav-mega::before {
    background-image: var(--hex-p);
    opacity: .55;
  }

  /* rail */
  .anav-root[data-anav-ground="dark"] .anav-legend {
    color: var(--p-gold);
  }

  .anav-root[data-anav-ground="dark"] .anav-rail-line {
    background: linear-gradient(90deg,
      var(--p-gold) 0%,
      rgba(32, 24, 9, .22) 24%,
      rgba(32, 24, 9, .22) 78%,
      transparent 100%);
  }

  /* column 1, the rubric */
  .anav-root[data-anav-ground="dark"] .anav-count {
    color: var(--p-gold);
  }

  .anav-root[data-anav-ground="dark"] .anav-rubric-name {
    color: var(--p-ink);
  }

  .anav-root[data-anav-ground="dark"] .anav-rubric-rule {
    background: var(--p-gold);
  }

  .anav-root[data-anav-ground="dark"] .anav-rubric-note {
    color: var(--p-mute);
  }

  /* column 2, the entries */
  .anav-root[data-anav-ground="dark"] .anav-entry {
    border-top-color: rgba(32, 24, 9, .12);
  }

  .anav-root[data-anav-ground="dark"] .anav-entry:hover,
  .anav-root[data-anav-ground="dark"] .anav-entry:focus-visible {
    background-color: rgba(147, 98, 10, .06);
  }

  .anav-root[data-anav-ground="dark"] .anav-entry::before {
    background: var(--p-gold);
  }

  .anav-root[data-anav-ground="dark"] .anav-folio {
    color: var(--p-gold);
  }

  .anav-root[data-anav-ground="dark"] .anav-entry-title {
    color: var(--p-ink);
  }

  .anav-root[data-anav-ground="dark"] .anav-entry-desc {
    color: var(--p-mute);
  }

  .anav-root[data-anav-ground="dark"] .anav-entry:hover .anav-entry-title,
  .anav-root[data-anav-ground="dark"] .anav-entry:focus-visible .anav-entry-title,
  .anav-root[data-anav-ground="dark"] .anav-entry[aria-current="page"] .anav-entry-title {
    color: var(--p-gold);
  }

  /* column 3, the plate. Caption only: the photo and its veil are untouched. */
  .anav-root[data-anav-ground="dark"] .anav-plate-frame::after {
    border-color: rgba(32, 24, 9, .14);
  }

  .anav-root[data-anav-ground="dark"] .anav-plate-kicker {
    color: var(--p-gold);
  }

  .anav-root[data-anav-ground="dark"] .anav-plate-title {
    color: var(--p-ink);
  }

  .anav-root[data-anav-ground="dark"] .anav-plate-desc {
    color: var(--p-mute);
  }

  .anav-root[data-anav-ground="dark"] .anav-plate:hover .anav-plate-title {
    color: var(--p-gold);
  }

  .anav-root[data-anav-ground="dark"] .anav-plate:focus-visible {
    outline-color: var(--p-gold);
  }
}

/* ======================================================================
   PILL GEOMETRY + TABLET + MOBILE 2026-08-02

   Three asks, one block.

   1. The mega panel now matches the pill: same width, same corner radius,
      same left and right inset, at every width. Both read off two shared
      tokens on .anav-root, so they can never drift apart again:
         --anav-inset  outer gutter, so pill and panel float off both edges
         --pill-r      corner radius

      --pill-r is 30px because that is the pill's ACTUAL corner radius: the
      pill is declared border-radius 999px, and on a 60px tall box the browser
      clamps that to half the height, 30px. So 30px on the panel is literally
      the same curvature, not an approximation.

      The panel keeps left:0/right:0 plus auto margins rather than a
      translateX, so nothing competes with its clip-path reveal.

   2. Tablet. The panel and the horizontal nav previously did not exist below
      1041px at all: every tablet got a hamburger. Now live from 768px, which
      covers iPad portrait. isDesktop() in alvara-home.js was moved to 768px
      in the same pass, without which the JS would refuse to open panels no
      matter what CSS said.

      In the 768 to 1040 band the panel drops to two columns and hides the
      plate. Three columns need roughly 940px of panel; at 768px there is
      about 700px. The plate returns at 1041px. The reveal stagger is also
      simplified there: opacity only, no clip-path and no per-row delays,
      because the full choreography is defined inside the 1041px block and
      porting it wholesale is a much larger surface than a tablet needs.

   3. Mobile. Below 768px the pill treatment now applies too, so the header
      reads as one system at every size instead of a pill on desktop and a
      flat bar on phones. Ground inversion already works at any width (the JS
      is resolution independent), it was only the CSS that was gated at
      741px. Radius scales down and the inset tightens.

   NOT VERIFIED BY RENDERING. Every value here is derived from the measured
   base styles, but the store is password protected so none of it has been
   seen. The tablet band and the mobile pill both need eyes on them.
   ====================================================================== */

.anav-root {
  --anav-inset: clamp(12px, 2vw, 28px);
  --pill-r: 30px;
}

/* ---------------------------------------------------------------
   Shared: the panel tracks the pill's box at every breakpoint
   --------------------------------------------------------------- */
@media (min-width: 768px) {

  .anav-root .anav-bar {
    padding-left: var(--anav-inset);
    padding-right: var(--anav-inset);
  }

  .anav-root .anav-mega {
    left: var(--anav-inset);
    right: var(--anav-inset);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--pill-bd, var(--rule));
    border-radius: var(--pill-r);
    overflow: hidden;
  }

  /* the reveal must stay rounded while it animates, otherwise the corners
     snap square for the duration of the clip */
  .anav-root .anav-mega {
    clip-path: inset(0 0 100% 0 round var(--pill-r));
  }

  .anav-root .anav-mega.is-open,
  .anav-root .anav-mega.is-swap {
    clip-path: inset(0 0 0 0 round var(--pill-r));
  }

  /* align the panel's first column with the pill's wordmark */
  .anav-root .anav-mega-wrap {
    padding-left: 26px;
    padding-right: 26px;
  }
}

/* ---------------------------------------------------------------
   Tablet: 768 to 1040. Nav and panels exist here for the first time.
   --------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1040px) {

  .anav-root .anav-burger { display: none; }

  .anav-root .anav-menu {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 18px;
    margin-left: 20px;
  }

  .anav-root .anav-logo img { height: 16px !important; }

  .anav-root .anav-cta {
    font-size: 13.5px;
    padding-left: 16px;
    padding-right: 16px;
    min-height: 44px;
  }

  .anav-root .anav-wrap {
    padding-left: 20px;
    padding-right: 14px;
  }

  .anav-root .anav-div { margin: 0 12px; }

  .anav-root .anav-utils :where(a, button, summary) {
    min-width: 40px;
    height: 40px;
  }

  /* panel: present, simplified, two columns */
  .anav-root .anav-mega {
    display: block;
    position: absolute;
    top: 100%;
    z-index: 1;
    background: radial-gradient(90% 130% at 62% -10%, rgba(200, 134, 10, .12), transparent 64%) var(--bg-3);
    box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .7);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    clip-path: none;
    transition: opacity 180ms linear, visibility 0s 180ms;
  }

  .anav-root .anav-mega.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    clip-path: none;
    transition: opacity 220ms linear, visibility 0s;
  }

  .anav-root .anav-mega > * { visibility: inherit; }
  .anav-root .anav-mega-in { position: relative; z-index: 1; }

  .anav-root .anav-mega-wrap {
    padding-top: 30px;
    padding-bottom: 34px;
  }

  /* the 1041px block owns the entrance choreography, so neutralise the
     hidden starting states here rather than porting all of it */
  .anav-root .anav-mega .anav-col,
  .anav-root .anav-mega .anav-li,
  .anav-root .anav-mega .anav-legend {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
  }

  .anav-root .anav-mega .anav-rail-line,
  .anav-root .anav-mega .anav-rail-stub {
    transform: scaleX(1);
  }

  .anav-root .anav-cols {
    grid-template-columns: minmax(140px, .8fr) 1fr;
  }

  .anav-root .anav-plate-col { display: none; }
  .anav-root .anav-contents { padding-right: 0; }

  /* cream ground: the panel inherits the paper treatment here too */
  .anav-root[data-anav-ground="dark"] .anav-mega {
    background: radial-gradient(90% 130% at 62% -10%, rgba(147, 98, 10, .10), transparent 64%) var(--paper);
    box-shadow: 0 34px 60px -26px rgba(60, 44, 16, .28);
  }
}

/* ---------------------------------------------------------------
   Mobile: below 768px the header becomes a pill too
   --------------------------------------------------------------- */
@media (max-width: 767px) {

  .anav-root {
    --anav-inset: 12px;
    --pill-r: 26px;
  }

  .anav-root .anav-bar {
    background: transparent;
    border-bottom: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 10px var(--anav-inset) 12px;
  }

  .anav-root[data-scroll] .anav-bar,
  .anav-root[data-scroll="past"] .anav-bar {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
  }

  .anav-root .anav-wrap {
    --pill-bg: rgba(26, 21, 15, .86);
    --pill-bd: rgba(200, 134, 10, .18);
    padding-left: 18px;
    padding-right: 10px;
    border-radius: var(--pill-r);
    background: var(--pill-bg);
    border: 1px solid var(--pill-bd);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .48), 0 2px 6px rgba(0, 0, 0, .30);
  }

  /* ground inversion, same rules as desktop */
  .anav-root[data-anav-ground="dark"] .anav-wrap {
    --pill-bg: rgba(253, 245, 228, .95);
    --pill-bd: rgba(11, 9, 6, .10);
  }

  .anav-root[data-anav-ground="light"] .anav-wrap {
    --pill-bg: rgba(17, 13, 9, .94);
    --pill-bd: rgba(200, 134, 10, .22);
    box-shadow: 0 12px 28px rgba(60, 44, 16, .22);
  }

  .anav-root[data-anav-ground="dark"] .anav-logo img { filter: brightness(0); }
  .anav-root[data-anav-ground="dark"] .anav-burger span { background: var(--p-ink); }
  .anav-root[data-anav-ground="dark"] .anav-ico,
  .anav-root[data-anav-ground="dark"] .anav-utils { color: var(--p-ink); }
  .anav-root[data-anav-ground="dark"] .anav-div { background: rgba(11, 9, 6, .18); }

  /* the ticker rides above the pill and scrolls away, same as desktop */
  .atick {
    overflow: hidden;
    transition: min-height 280ms var(--ease), height 280ms var(--ease),
                opacity 200ms linear;
  }

  .anav-root[data-scroll="past"] .atick {
    min-height: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* tap targets: the drawer rows and utility row were the tightest spots */
  .anav-root .anav-burger { width: 44px; height: 44px; }
  .anav-d-row { min-height: 52px; }
  .anav-d-sub-row { min-height: 46px; }
  .anav-d-util { min-height: 44px; }
  .anav-d-cta { min-height: 48px; }
}

/* ======================================================================
   PARTNER PANEL + APPLICATION FORMS 2026-08-02

   Header panel (.anav-mega--partner) and the homepage inline form (.pt-apply)
   share field names and behaviour but not palette: the panel follows the nav
   ground tokens, the homepage section lives inside .cream so it is always the
   paper palette.

   Both use the native Shopify contact form with return_to, which is the
   convention the Hive form already ships, so they work with JS off.

   Checkbox chips use the input:checked + span pattern rather than :has(), so
   support goes back further. The real input stays in the layout, sized over
   the chip, so the whole chip is the hit area at 40px+ tall.

   Visible labels, not placeholder-as-label, deliberately: the audience skews
   45-65 and this file already carries a documented small-type problem.
   ====================================================================== */

/* ---------------- header panel ---------------- */
.apt {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 28px;
  column-gap: clamp(32px, 4vw, 72px);
}

@media (min-width: 900px) {
  .apt { grid-template-columns: minmax(210px, .78fr) 1.22fr; }
}

.apt-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-hi);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms linear, color 200ms linear;
}

.apt-more:hover,
.apt-more:focus-visible { border-bottom-color: var(--gold-hi); }

.apt-legend,
.pt-legend {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.apt-tiers,
.pt-form-tiers {
  display: block;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.apt-chip,
.pt-check {
  position: relative;
  display: inline-flex;
  margin: 0 8px 8px 0;
}

.apt-chip input,
.pt-check input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.apt-chip span,
.pt-check span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 180ms linear, border-color 180ms linear,
              background-color 180ms linear;
}

.apt-chip input:checked + span,
.pt-check input:checked + span {
  background: var(--gold);
  border-color: var(--gold);
  color: #17110A;
}

.apt-chip input:focus-visible + span,
.pt-check input:focus-visible + span {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

.apt-fields,
.pt-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 720px) {
  .apt-fields,
  .pt-form-grid { grid-template-columns: repeat(3, 1fr); }
  .apt-field--wide,
  .pt-field--wide { grid-column: 1 / -1; }
}

.apt-field,
.pt-field { margin: 0; }

.apt-field label,
.pt-field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.apt-field input,
.apt-field textarea,
.pt-field input,
.pt-field textarea {
  width: 100%;
  background: rgba(11, 9, 6, .55);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  padding: 13px 15px;
  outline: none;
  transition: border-color 200ms linear;
}

.apt-field textarea,
.pt-field textarea { resize: vertical; min-height: 84px; }

.apt-field input:focus,
.apt-field textarea:focus,
.pt-field input:focus,
.pt-field textarea:focus { border-color: var(--gold-hi); }

.apt-submit,
.pt-submit {
  margin-top: 18px;
  min-height: 48px;
  font-size: 14px;
}

/* ---------------- header panel on a CREAM ground ---------------- */
.anav-root[data-anav-ground="dark"] .apt-legend { color: var(--p-mute); }
.anav-root[data-anav-ground="dark"] .apt-more { color: var(--p-gold); }
.anav-root[data-anav-ground="dark"] .apt-more:hover,
.anav-root[data-anav-ground="dark"] .apt-more:focus-visible { border-bottom-color: var(--p-gold); }

.anav-root[data-anav-ground="dark"] .apt-chip span {
  border-color: rgba(32, 24, 9, .18);
  color: var(--p-body);
}

.anav-root[data-anav-ground="dark"] .apt-chip input:checked + span {
  background: var(--p-gold);
  border-color: var(--p-gold);
  color: var(--paper);
}

.anav-root[data-anav-ground="dark"] .apt-chip input:focus-visible + span {
  outline-color: var(--p-gold);
}

.anav-root[data-anav-ground="dark"] .apt-field label { color: var(--p-mute); }

.anav-root[data-anav-ground="dark"] .apt-field input,
.anav-root[data-anav-ground="dark"] .apt-field textarea {
  background: rgba(255, 253, 246, .82);
  border-color: rgba(32, 24, 9, .18);
  color: var(--p-ink);
}

.anav-root[data-anav-ground="dark"] .apt-field input:focus,
.anav-root[data-anav-ground="dark"] .apt-field textarea:focus {
  border-color: var(--p-gold);
}

/* ---------------- homepage inline form, always paper ---------------- */
.pt-apply {
  margin-top: clamp(44px, 5vw, 72px);
  padding: clamp(26px, 3vw, 42px);
  background: var(--paper-2);
  border: 1px solid rgba(32, 24, 9, .10);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 50px -30px rgba(60, 44, 16, .30);
}

.pt-apply-head { margin-bottom: 22px; }

.pt-apply-h {
  margin: 8px 0 6px;
  font-size: clamp(24px, 2.2vw, 34px);
  color: var(--p-ink);
}

.pt-apply-intro {
  max-width: 52ch;
  color: var(--p-body);
}

.cream .pt-legend { color: var(--p-mute); }

.cream .pt-check span {
  border-color: rgba(32, 24, 9, .18);
  color: var(--p-body);
}

.cream .pt-check input:checked + span {
  background: var(--p-gold);
  border-color: var(--p-gold);
  color: var(--paper);
}

.cream .pt-check input:focus-visible + span { outline-color: var(--p-gold); }

.cream .pt-field label { color: var(--p-mute); }

.cream .pt-field input,
.cream .pt-field textarea {
  background: #fff;
  border-color: rgba(32, 24, 9, .18);
  color: var(--p-ink);
}

.cream .pt-field input:focus,
.cream .pt-field textarea:focus { border-color: var(--p-gold); }

.cream .form-ok { color: var(--p-gold); }

/* Shopify renders its own error list inside {% form %} on validation failure */
.pt-form .errors,
.apt-form .errors {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(200, 70, 40, .45);
  background: rgba(200, 70, 40, .10);
  font-size: 14px;
  list-style: none;
}

.cream .pt-form .errors { color: #7A2412; }

/* ======================================================================
   BUTTON RESETS + PARTNER CTA REMOVAL 2026-08-02

   Two grey-box bugs, both from elements that became <button> without a reset.

   1. .anav-partner used to be an <a>. Turning it into a panel parent made it a
      <button>, which inherits the UA default background (buttonface grey) and
      border. .anav-item already carries this reset; .anav-partner never needed
      one until now.

   2. .btn-dark and .btn-line are SCOPED to .pt-cta in this theme
      (".pt-cta .btn-dark"), not global. The form submit sits in .pt-form, so
      "btn btn-dark" matched nothing but the bare .btn rule, which sets
      border:none and no background, leaving the UA grey. .pt-submit is now
      styled explicitly instead of leaning on a scoped class.

   The .pt-cta row itself is gone: the inline form replaces it.
   ====================================================================== */

/* 1. partner parent: full button reset, keep the text-link look */
.anav-partner {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  /* deliberately NOT setting font or color here: this block sits later in the
     file than the @media (min-width:1041px) .anav-partner rule at equal
     specificity, so "font: inherit" would clobber its 13px/500 typography and
     "color: inherit" would fight the ground-inversion rules. */
}

.anav-partner .anav-hex {
  width: 7px;
  height: 7px;
  flex: none;
  margin-left: 7px;
  color: var(--gold);
  opacity: .38;
  transition: transform 240ms var(--ease), opacity 200ms linear;
}

.anav-partner[aria-expanded="true"] .anav-hex {
  transform: rotate(180deg);
  opacity: .9;
}

.anav-root[data-anav-ground="dark"] .anav-partner .anav-hex { color: var(--p-gold); }

/* 2. homepage form submit: explicit, not a scoped class */
.pt-submit {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  min-height: 52px;
  padding: 0 34px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--p-ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .22s var(--ease), background-color .22s linear;
}

.pt-submit:hover { transform: translateY(-2px); background: #3A2C13; }
.pt-submit:active { transform: translateY(0); }
.pt-submit:focus-visible { outline: 2px solid var(--p-gold); outline-offset: 3px; }

/* 3. header panel submit rides the existing gold button, just sized up */
.apt-submit {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 20px;
  min-height: 50px;
  padding: 0 30px;
  font-size: 14.5px;
}

/* ======================================================================
   CREAM FORM FIELDS 2026-08-02
   Requested: cream field fills with dark text, on both the dark header panel
   and the homepage form. Previously the panel fields were dark-on-dark, which
   read as empty wells.

   Three things this has to handle beyond the fill colour:

   1. color-scheme. This theme sets color-scheme: dark on the page, so the UA
      renders native control internals (caret, autofill menu, scrollbars inside
      the textarea, spinners) for a dark surface. A light fill without
      color-scheme: light gives a dark caret UI on cream. Set per field.

   2. Autofill. Chrome paints its own background over any declared one. The
      inset box-shadow trick is the only reliable override, paired with
      -webkit-text-fill-color, otherwise a returning visitor sees the fields
      flip to Chrome's blue or yellow.

   3. Focus visible on BOTH grounds. The border alone is not enough contrast
      against a cream panel, so focus adds a gold ring that reads on cream and
      on the dark panel alike.
   ====================================================================== */

.apt-field input,
.apt-field textarea,
.pt-field input,
.pt-field textarea {
  background: var(--paper-2);
  border: 1px solid rgba(32, 24, 9, .20);
  color: var(--p-ink);
  color-scheme: light;
  caret-color: var(--p-ink);
  transition: border-color 200ms linear, box-shadow 200ms linear;
}

.apt-field input::placeholder,
.apt-field textarea::placeholder,
.pt-field input::placeholder,
.pt-field textarea::placeholder {
  color: var(--p-mute);
  opacity: 1;
}

.apt-field input:focus,
.apt-field textarea:focus,
.pt-field input:focus,
.pt-field textarea:focus {
  border-color: var(--p-gold);
  box-shadow: 0 0 0 3px rgba(200, 134, 10, .28);
}

/* Chrome paints autofill over the declared background; this is the override */
.apt-field input:-webkit-autofill,
.apt-field textarea:-webkit-autofill,
.pt-field input:-webkit-autofill,
.pt-field textarea:-webkit-autofill,
.apt-field input:-webkit-autofill:focus,
.pt-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--paper-2) inset;
  box-shadow: 0 0 0 1000px var(--paper-2) inset;
  caret-color: var(--p-ink);
}

/* the ground-inversion variants no longer need to restate the fill, but the
   cream panel wants a slightly warmer field so it does not disappear into it */
.anav-root[data-anav-ground="dark"] .apt-field input,
.anav-root[data-anav-ground="dark"] .apt-field textarea {
  background: #fff;
  border-color: rgba(32, 24, 9, .22);
  color: var(--p-ink);
}

.cream .pt-field input,
.cream .pt-field textarea {
  background: #fff;
  border-color: rgba(32, 24, 9, .20);
  color: var(--p-ink);
}

/* ======================================================================
   HERO IMAGE LIFT 2026-08-02
   Requested: bring the hero photograph's colour forward, brighter.

   Three things were holding it back, and all three are adjusted rather than
   only one, because reducing a single layer far enough to matter would have
   cost headline legibility:

   1. .hero-veil, a horizontal gradient (was .95 / .80 / .28 / .55) stacked
      with a vertical one (was .82 top, .98 bottom).
   2. .hero::after, a gold radial wash over a dark radial (was rgba(8,6,3,.5))
      sitting exactly on the jar, which was muting the product itself.
   3. no colour treatment on .hero-bg at all.

   DELIBERATELY PRESERVED: the left third of the horizontal veil stays heavy
   (.90 at the edge, .68 at 34%) because the H1, deck and proof row all sit
   there in near-white. The brightening is concentrated from 55% rightward,
   over the mushrooms and the jar, where there is no text. Reducing the left
   side further would trade a real contrast problem for a cosmetic gain, and
   this build already carries a documented small-type issue.

   Contrast against a photograph cannot be measured the way a solid can, so
   the H1 and the proof row want a human check at desktop and 390px.
   ====================================================================== */

.hero-veil {
  background:
    linear-gradient(90deg,
      rgba(11, 9, 6, .90) 0%,
      rgba(11, 9, 6, .68) 34%,
      rgba(11, 9, 6, .10) 64%,
      rgba(11, 9, 6, .34) 100%),
    linear-gradient(180deg,
      rgba(11, 9, 6, .62),
      transparent 26%,
      transparent 66%,
      rgba(11, 9, 6, .92));
}

/* gold wash up slightly, dark radial off the jar */
.hero::after {
  background:
    radial-gradient(ellipse 58% 50% at 68% 50%, rgba(200, 134, 10, .20), transparent 66%),
    radial-gradient(ellipse 40% 56% at 70% 52%, rgba(8, 6, 3, .24), transparent 72%);
}

/* the photograph itself: saturation carries "colour forward" better than
   brightness alone, which would just wash the blacks grey */
.hero-bg {
  filter: saturate(1.18) contrast(1.05) brightness(1.10);
}

@media (prefers-reduced-transparency: reduce) {
  .hero-veil {
    background:
      linear-gradient(90deg,
        rgba(11, 9, 6, .95) 0%,
        rgba(11, 9, 6, .82) 34%,
        rgba(11, 9, 6, .30) 64%,
        rgba(11, 9, 6, .50) 100%);
  }
}

/* ======================================================================
   HERO HONEYCOMB 2026-08-03
   Asked whether the subtle beehive overlay on alvara.life could be done on
   the new hero. It already was: .hero::before has always carried
   background-image: var(--hex). It was simply invisible in practice.

   Why it could not be seen:
     - the --hex token strokes at rgba(200,134,10,0.06)
     - .hero::before then halved that with opacity: .5, so about 0.03 effective
     - and a tight radial mask (ellipse 58% x 70% at 66% 50%, opaque only to
       26%) confined what was left to a small patch right of centre

   So this is a visibility change, not a new feature. Three adjustments:
     1. a hero-only hex at 0.13 stroke, inlined rather than editing --hex,
        because --hex is shared with the mega panels and the cream sections
     2. full opacity, and larger tiles (98 x 175 keeps the token's 56:100
        ratio) to match the scale on alvara.life
     3. a much wider, softer mask so the comb reads across the whole hero
        and fades at the edges instead of sitting in one patch

   Still deliberately subtle: it should register as texture, not as a grid.
   Turn the stroke alpha up or down as the single dial.
   ====================================================================== */

.hero::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z' fill='none' stroke='rgba(200,134,10,0.13)'/%3E%3C/svg%3E");
  background-size: 98px 175px;
  background-repeat: repeat;
  opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse 96% 104% at 58% 44%, #000 48%, transparent 96%);
  mask-image: radial-gradient(ellipse 96% 104% at 58% 44%, #000 48%, transparent 96%);
}

@media (max-width: 740px) {
  .hero::before { background-size: 74px 132px; }
}

/* ============================================================
   2026-08-03 FEEDBACK ROUND (Heath, Jared, Manzoor)
   1) .pin--light: the "Inside Every Spoonful" explorer rendered on
      the homepage cream sheet. Token remap plus the hardcoded dark
      chips that ignore tokens. The product page keeps the dark ground.
   2) .ritual stepper pass: numerals centered on the thread so the
      band reads as a 1-2-3 infographic at a glance.
   ============================================================ */
.pin--light {
  --bg: var(--paper);
  --ink: var(--p-ink);
  --ink-mute: var(--p-body);
  --ink-faint: var(--p-mute);
  --gold: var(--p-gold);
  --gold-hi: var(--p-gold);
  --gold-soft: #7A6420;
  --rule: var(--p-rule);
  --rule-2: #D8C592;
  --hex: var(--hex-p);
}
.pin--light::before { opacity: .55; }
.pin--light .pin-deck-accent { color: var(--p-gold); }
.pin--light .pin-filter { background: rgba(255, 252, 244, .65); }
.pin--light .pin-filter:hover { color: var(--p-gold); }
.pin--light .pin-filter.is-on {
  color: var(--p-gold);
  background: linear-gradient(180deg, rgba(154, 103, 8, .16), rgba(154, 103, 8, .05));
  box-shadow: 0 0 0 1px rgba(154, 103, 8, .30);
}
.pin--light .pin-row { background: rgba(255, 252, 244, .72); }
.pin--light .pin-row.is-open { background: #FFFDF6; border-color: rgba(154, 103, 8, .45); }
.pin--light .pin-thumb { background: #EFE6CF; }
.pin--light .pin-media-jar, .pin--light .pin-media-ing { background: #EFE6CF; }
.pin--light .pin-detail-inner { color: var(--p-body); }

/* Ritual band: centered stepper, numerals sized to carry the thread. */
.ritual .rit-card { text-align: center; }
.ritual .rit-step { margin-left: auto; margin-right: auto; width: 54px; height: 60px; font-size: 16.5px; }
.ritual .rit-grid::before { top: 60px; height: 2px; background: linear-gradient(90deg, transparent, var(--rule-2) 12%, var(--rule-2) 88%, transparent); }
.ritual .rit-note { text-align: center; }

/* Root map, desktop flow mode. The retired pin took the section's
   composed frame with it: without a fixed-height stage the constellation
   was smashed flat with a dead right half and the copy dropped below.
   Rebuild the pin's final frame statically: one tall stage, field
   filling it below the nav offset, copy overlaying the right half,
   dawn seam back. Mobile (<760px) keeps the stacked flow layout. */
@media (min-width: 760px) {
  .rootmap.rm-flowmode .rm-pin { height: clamp(640px, 92vh, 840px); height: clamp(640px, 92svh, 840px); padding: 0; overflow: hidden; }
  .rootmap.rm-flowmode .rm-eyebrow { position: absolute; top: clamp(26px, 5svh, 54px); left: var(--gut); margin: 0; padding: 0; }
  .rootmap.rm-flowmode .rm-field { position: absolute; inset: 0; top: 84px; height: auto; }
  .rootmap.rm-flowmode .rm-copy { position: absolute; left: 46%; right: 5%; top: 40%; padding: 0; }
  .rootmap.rm-flowmode .rm-dawn { display: block; transition: opacity 1.2s ease-out 2.2s; }
  .rootmap.rm-flowmode .rm-pin.in .rm-dawn { opacity: .85; }
}

/* ============================================================
   2026-08-03 ROUND 2 (Jamieson, iPhone)

   1) PRODUCT IMAGE SWAP. Every jar slot used to carry the Vernovo
      canister render, which is not the container ALVARA ships. All
      four Shopify products carry the glass-jar photograph, so the
      slots now carry that instead.

      That render was a cut-out on an opaque dark plate, so the old
      styling feathered it with a radial mask, colour-graded it, and
      floated it over an elliptical shadow. Applied to a rectangular
      photograph the mask eats the corners into a vignette. Anything
      marked .jar-photo opts out of the cut-out treatment and gets
      framed as an editorial image instead.

   2) HERO LEGIBILITY ON PHONES. .hero-veil is a HORIZONTAL gradient
      tuned for the desktop two-column grid: .90 opaque at the left
      edge, .68 at 34%, then .10 from 64% rightward on the reasoning
      that "there is no text over there". True at desktop, where the
      copy sits in the left column. Below 940px .hero-grid collapses
      to 1fr, the copy spans the full width into that .10 zone, and
      white type lands on the sunlit lion's mane. A vertical scrim
      replaces the horizontal one at those widths.
   ============================================================ */
.jar-photo {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(200, 134, 10, .26);
  box-shadow: 0 34px 64px -30px rgba(0, 0, 0, .9);
  background: #0a0805;
}
.hero-jar img.jar-photo {
  width: min(430px, 78%);
  aspect-ratio: 1122 / 1402;
  height: auto;
  /* a rectangle should not bob; the float read as a cut-out device */
  animation: jarIn 1s .4s both;
}
@media (min-width: 1800px) { .hero-jar img.jar-photo { width: min(470px, 80%); } }
.ledger-jar img.jar-photo,
.final img.jar.jar-photo,
.buy .jar-img.jar-photo { aspect-ratio: 1; height: auto; }
/* The elliptical ground shadow only reads under a cut-out. Every slot that
   still renders one (hero, buy, ledger, final CTA) now carries a photo, so
   this is unconditional rather than :has()-gated, which keeps it working on
   older Safari too. */
.hero-jar .jar-shadow,
.jar-wrap .jar-shadow { display: none; }

@media (max-width: 940px) {
  .hero-veil {
    background:
      linear-gradient(180deg,
        rgba(11, 9, 6, .93) 0%,
        rgba(11, 9, 6, .90) 42%,
        rgba(11, 9, 6, .70) 66%,
        rgba(11, 9, 6, .88) 100%);
  }
  .hero-bg { filter: saturate(1.12) contrast(1.02) brightness(.80); }
  .hero::after { opacity: .55; }
}

/* ============================================================
   2026-08-04 LEGIBILITY PASS (Jared, sitewide note)

   "Font size... it defaults to tiny. I always specify to increase
   the font size and contrast, as the contrast is also often a
   problem." The small mono/uppercase layer was the offender: 10 to
   11.5px at --ink-faint. Raised across the board and moved off the
   faintest ink. Headline and body scales are unchanged, so nothing
   reflows; only the label layer grows.

   Also: the Porges pull quote on the root map.
   ============================================================ */
.eyebrow { font-size: 12.5px; letter-spacing: .22em; }
.hero-proof { font-size: 13px; color: var(--ink-mute); letter-spacing: .09em; }
.hero-proof b { color: var(--gold-hi); }
.trust-cell .t-sub { font-size: 11.5px; color: var(--ink-mute); letter-spacing: .13em; }
.ledger-eyebrow { font-size: 12.5px; letter-spacing: .22em; }
.ledger-dl dd { font-size: 13px; color: var(--p-body); }
.hive-perks { font-size: 11.5px; color: var(--ink-mute); }
.pin-hint, .pin-diet li { font-size: 11.5px; color: var(--ink-mute); }
.final-fine { font-size: 11.5px; color: var(--ink-mute); }
.rit-note { font-size: 15px; }
.sp-caption { font-size: 11.5px; }
.stat-strip .k { font-size: 11.5px; color: var(--p-mute); }
.bb-unlock { font-size: 15px; }
.bb-unlock .fine { font-size: 11px; }
.bb-vets { font-size: 12.5px; }
.fda-note { font-size: 12.5px; }
.rev-actions a { font-size: 12px; }

/* Porges, on the section that carries the nervous-system claim */
.rm-quote { margin: 26px 0 0; padding-left: 18px; border-left: 2px solid var(--gold); max-width: 42ch;
  opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rm-pin.p-cp .rm-quote, .rootmap.rm-flowmode .rm-pin.in .rm-quote { opacity: 1; transform: none; }
.rm-quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(16px, .95rem + .5vw, 20px); line-height: 1.5; color: var(--ink); }
.rm-quote figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-hi); }

/* ============================================================
   2026-08-04 HERO BACK TO THE CUT-OUT (Jason)

   single12ozjar_clean is a transparent 2048 square cut-out of the
   real glass jar. It was already in the theme as the PDP hero's
   fallback, which is why the hexagon-halo treatment reads cleaner
   above the fold than a framed lifestyle photo.

   .jar-cutout is the opposite of .jar-photo: no frame, no border,
   no radial mask (the asset has real alpha, so the mask that used
   to feather the canister's opaque plate is unnecessary), and the
   float comes back because a cut-out can float where a rectangle
   cannot.
   ============================================================ */
.jar-cutout {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  object-fit: contain;
}
.hero-jar img.jar-cutout {
  width: min(520px, 88%);
  height: auto;
  aspect-ratio: auto;
  filter: drop-shadow(0 46px 56px rgba(0, 0, 0, .7));
  animation: jarIn 1s .4s both, jarFloat 9s 1.5s ease-in-out infinite;
}
@media (min-width: 1800px) { .hero-jar img.jar-cutout { width: min(580px, 90%); } }
@media (prefers-reduced-motion: reduce) { .hero-jar img.jar-cutout { animation: none; } }
.final img.jar.jar-cutout {
  aspect-ratio: auto;
  height: auto;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .62));
}
.bb-satc img.jar-cutout, .satc img.jar-cutout { aspect-ratio: auto; height: auto; }

/* Ledger jar: same cut-out as the hero, sized to the block's radial glow. */
.ledger-jar img.jar-cutout {
  aspect-ratio: auto;
  height: auto;
  width: 100%;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .62));
}

/* ============================================================
   QA fix 2026-08-07 (rev-card):
   .rev-card p carried flex: 1 with overflow: hidden, so inside a
   fixed-height card the quote was cropped to whatever space was
   left over, with no ellipsis. The -webkit-line-clamp above it
   never took effect because the computed display is flow-root,
   not -webkit-box. Review quotes must not stop mid-sentence, so
   the paragraph now sizes to its content and the attribution
   line is pushed to the bottom instead.
   ============================================================ */
.rev-card p {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  flex: 0 0 auto;
}
.rev-card .who { margin-top: auto; padding-top: 17px; }

/* The product page carries ten reviews in a three-up grid, so the
   fourth row holds one card with two empty columns beside it. Centre
   a card that lands alone at the end of a row. The :nth-child(3n+1)
   guard means it only fires when the count actually leaves an orphan,
   so adding or removing a review falls back to normal grid flow. */
.rev-grid > .rev-card:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 960px) {
  .rev-grid > .rev-card:last-child:nth-child(3n + 1) { grid-column: auto; }
}

/* ============================================================
   ALVARA page grid 2026-08-07

   One container for every template. Before this, content width
   depended on which template a page used: 1184px on the
   section-built pages, 672px on the default page template,
   1048px on the partner pages, 582px on Shopify's policy pages.
   The left edge of the content moved by up to 300px between
   pages, which is what read as some pages being squeezed.

   Everything below resolves to the same edges as .wrap:
   max-width 1280px (1440px above 1800px) with var(--gut)
   gutters. Line length is untouched; this is about containers.
   ============================================================ */

/* The .avf-band full bleed uses 100vw, which counts the scrollbar,
   so the partner pages scrolled horizontally by the scrollbar width.
   Clip at the main element rather than rework every breakout. */
main.content-for-layout { overflow-x: clip; }

/* Horizon lays every section out as a three track grid sized from
   --page-width. Two different values were in play: 42rem on the
   default page template's content section and 90rem on the rest, which
   is why Contact put its heading at 123 and its form section at 40.
   Point both container classes at the ALVARA container. The :not()
   clauses raise specificity above .section.page-width-content, which
   sets --page-width on itself. */
main .section.page-width-content:not([class*="full-width"]),
main .section.section--page-width:not([class*="full-width"]) {
  --page-width: min(1280px, 100%);
  --page-margin: var(--gut);
}

/* A bare .section is also a container, but on the product and home
   templates it is the wrapper Shopify puts around the ALVARA sections,
   which are grid items inside it and then run their own .wrap. Narrowing
   that wrapper double-gutters them: measured on the product page, the
   science section moved from 123 to 171 and infusion to 103. So bare
   sections only get the grid when they do not host an ALVARA section.
   If :has() is unavailable the selector is dropped and those templates
   keep Horizon's default, which is the safe direction. */
main .section:not([class*="page-width"]):not([class*="full-width"]):not(:has(> [class*="section-alvara-"])) {
  --page-width: min(1280px, 100%);
  --page-margin: var(--gut);
}

/* Document pages: one left edge for everything. Prose keeps its
   measure, rules and card grids run the full container width, which
   is the same two zone rhythm the section-built pages use. */
.av-doc > h2,
.av-doc > h3,
.av-doc > p,
.av-doc > ul,
.av-doc > ol,
.av-doc > blockquote { max-width: 66ch; }
.av-doc > .av-lede { max-width: 48ch; }
.av-doc > hr.av-rule,
.av-doc > .av-grid,
.av-doc > .av-team { max-width: none; }

/* Partner pages: the band still bleeds full width, its shell now
   sits on the site grid instead of its own 1120px measure. */
/* Descendant, not child: on /pages/wholesale one shell is nested
   inside .avf-creamwrap and a child selector missed it, leaving that
   band at the old 1048px while its neighbours moved. */
.avf .avf-band .avf-shell {
  max-width: 1280px;
  padding-inline: var(--gut);
}

/* One pre-existing outlier on the product page: the infusion section
   sets its .wrap to 1320px, so it sat 20px outside the grid on each
   side. The breathe section is deliberately narrow at 760px and is
   left alone; that is the poetic section Jared asked to rework, and
   its width is a design decision rather than a drift. */
.section-alvara-pdp-infusion .wrap { max-width: 1280px; }

/* Shopify's own policy pages (/policies/*) were the narrowest of all
   at 582px. Shopify ships policy-*.css after this file and sets
   max-width: 65ch at the same specificity, so it would win on source
   order. The class is doubled to outrank it without !important.
   The container widens, the prose does not: the .rte children keep the
   same 66ch measure the document pages use. */
.shopify-policy__container.shopify-policy__container {
  max-width: 1280px;
  padding-inline: var(--gut);
}
.shopify-policy__body .rte > * { max-width: 66ch; }

@media (min-width: 1800px) {
  main .section.page-width-content:not([class*="full-width"]),
  main .section.section--page-width:not([class*="full-width"]),
  main .section:not([class*="page-width"]):not([class*="full-width"]):not(:has(> [class*="section-alvara-"])) { --page-width: min(1440px, 100%); }
  .avf .avf-band .avf-shell { max-width: 1440px; }
  .section-alvara-pdp-infusion .wrap { max-width: 1440px; }
  .shopify-policy__container.shopify-policy__container { max-width: 1440px; }
}

/* ============================================================
   ALVARA root map paint-by-default 2026-08-08

   The root map hid every element until JS put .in on #rmPin, so a
   single missed trigger left the whole section as an empty black
   band with no way to recover. Jared saw this consistently in
   Safari.

   Inverted: content paints by default, and the hidden start state
   applies only once the script has put .rm-anim on the section,
   which it does at init, before observing anything. If the script
   never runs, or throws earlier in the file, the section is simply
   visible rather than blank.
   ============================================================ */
.rootmap:not(.rm-anim) .rm-eyebrow,
.rootmap:not(.rm-anim) .rm-node,
.rootmap:not(.rm-anim) .rm-h2 .w,
.rootmap:not(.rm-anim) .rm-s2,
.rootmap:not(.rm-anim) .rm-flow,
.rootmap:not(.rm-anim) .rm-couplet,
.rootmap:not(.rm-anim) .rm-ctaP,
.rootmap:not(.rm-anim) .rm-quote {
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
}
.rootmap:not(.rm-anim) .rm-eyebrow,
.rootmap:not(.rm-anim) .rm-h2 .w,
.rootmap:not(.rm-anim) .rm-s2,
.rootmap:not(.rm-anim) .rm-flow,
.rootmap:not(.rm-anim) .rm-couplet,
.rootmap:not(.rm-anim) .rm-ctaP,
.rootmap:not(.rm-anim) .rm-quote { transform: none !important; }
.rootmap:not(.rm-anim) .rm-node { transform: translate(-50%, -100%) !important; }

/* ============================================================
   ALVARA hum heading 2026-08-08

   The emblem image is gone, so the lockup column now leads with a
   serif heading in the site's own display face. Sized against the
   narrower left grid column rather than the full wrap, and capped
   so "Feel the Hum" holds one or two lines at every width.
   ============================================================ */
.hum-title {
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.2rem);
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 20px;
  text-wrap: balance;
}
.hum-lockup .hum-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0;
  max-width: 22ch;
  margin-inline: auto;
}
.hum-lockup .hum-tagline b { color: var(--gold-hi); font-weight: 500; }
@media (max-width: 760px) {
  .hum-title { font-size: clamp(2.1rem, 1.4rem + 4vw, 3rem); }
}

/* ============================================================
   ALVARA root map CTA clipping 2026-08-08

   The desktop root map put an absolutely positioned copy column
   inside a pin whose height came from the viewport, with
   overflow: hidden. The copy is taller than the pin on shorter
   screens, so the "Discover MycoNectar" button was cropped: 39px
   lost at 1440x900, 149px at 1440x700. Jared reported it as the
   section cutting off the button.

   The copy goes back into normal flow so it sets the height, and
   the constellation stays an absolute background layer beneath it.
   The old viewport height becomes a minimum rather than a cap, so
   tall screens look exactly as before and short ones grow instead
   of cropping.

   Scoped to the same min-width: 760px breakpoint as the layout it
   corrects. Below that the section already uses a stacked flow
   layout that was never affected.
   ============================================================ */
@media (min-width: 760px) {
  .rootmap.rm-flowmode .rm-pin {
    height: auto;
    min-height: clamp(640px, 92vh, 840px);
    min-height: clamp(640px, 92svh, 840px);
    padding: 84px 0 48px;
    display: flex;
    align-items: center;
  }
  .rootmap.rm-flowmode .rm-stage { width: 100%; }
  .rootmap.rm-flowmode .rm-copy {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin-left: 46%;
    margin-right: 5%;
  }
}

/* ============================================================
   ALVARA review stars 2026-08-08

   Horizon's styles.css also defines .stars, sets its height from
   --star-size, and loads after this file. Same specificity, later
   sheet, and the variable is undefined here, so every ALVARA star
   row collapsed to height 0 and rendered nothing at all.

   Doubling our own class beats it at (0,2,0) without enumerating
   containers, so any future star row is covered too. Only height
   is restated, since the variants set their own widths and mask
   sizes. Defining --star-size would fix the height but adopt
   Horizon's other star styling with it.
   ============================================================ */
.stars.stars { height: 14px; display: inline-block; }
.ledger-stars.ledger-stars { height: 10px; }
.rev-card .st,
.rev-meta .st,
.bb-stars .st { min-height: 14px; }

/* ============================================================
   ALVARA form legibility + review input contrast
   2026-08-20, Jared urgent round

   1. Partner apply forms (.avf, 12 pages) carry their CSS in each
      page's inline <style>, in the body, so it beats the head
      sheet on document order. Doubling the scope class (.avf.avf)
      wins on specificity instead, same trick as the star fix at
      the end of this file. Sizes are one step up the existing
      scale; inputs land on exactly 16px because anything smaller
      triggers Safari's auto-zoom on iOS.

   2. Cream apply forms had invisible placeholders: Horizon's
      base.css sets input::placeholder to var(--color-input-text),
      which resolves to the dark-scheme cream on a white input.
      Measured 1.15:1. Fixed the way .apt-field already fixes it
      above, with --p-mute at full opacity.

   3. Judge.me's write-a-review fields render #fff on #fafafa,
      1.02:1, so typed review text is invisible. Their sheet loads
      after this file and they can change their own specificity on
      any release, so this one needs !important. Hex literal, not
      var(--p-ink): if the modal ever moves into an iframe the
      custom property would not resolve and the declaration would
      be dropped, silently restoring white on white.
   ============================================================ */

/* --- Partner apply forms: field and label size --- */
.avf.avf .av-field label,
.avf.avf .avf-checkgroup--dark > p {
  font-size: .78rem;
  letter-spacing: .12em;
  opacity: .88;
}

.avf.avf .av-field input,
.avf.avf .av-field select,
.avf.avf .av-field textarea {
  font-size: 1rem;
  line-height: 1.5;
}

/* --- Partner apply forms: placeholder contrast --- */
.avf.avf .av-field input::placeholder,
.avf.avf .av-field textarea::placeholder {
  color: var(--p-mute);
  opacity: 1;
}

.avf.avf .avf-darkform .av-field input::placeholder,
.avf.avf .avf-darkform .av-field textarea::placeholder {
  color: var(--ink-mute);
  opacity: 1;
}

/* --- Partner apply forms: supporting form copy --- */
.avf.avf .av-consent { font-size: .94rem; line-height: 1.6; }
.avf.avf .av-status  { font-size: 1.02rem; }
.avf.avf .avf-checkgroup--dark .avf-checks label { font-size: 1rem; opacity: .92; }

/* --- Partner apply forms: paragraph copy --- */
.avf.avf .avf-lede { font-size: clamp(1.08rem, 1.6vw, 1.24rem); opacity: .95; }

.avf.avf .avf-benefit p,
.avf.avf .avf-step p { font-size: .96rem; line-height: 1.66; opacity: .82; }

.avf.avf .avf-note      { font-size: .88rem; opacity: .74; }
.avf.avf .avf-fda       { font-size: .84rem; opacity: .7; }
.avf.avf .avf-pchip span { font-size: .86rem; opacity: .82; }

.avf.avf table.avf-table    { font-size: .98rem; }
.avf.avf table.avf-table th { font-size: .74rem; letter-spacing: .1em; opacity: .78; }

/* --- Judge.me write-a-review: white text on a near-white field --- */
.jdgm-write-review-modal .jdgm-write-review-modal__field-input,
.jdgm-write-review-modal input.jdgm-write-review-modal__field-input,
.jdgm-write-review-modal textarea.jdgm-write-review-modal__field-input {
  color: #201809 !important;
  -webkit-text-fill-color: #201809 !important;
  background-color: #fff !important;
  caret-color: #201809 !important;
}

.jdgm-write-review-modal .jdgm-write-review-modal__field-input::placeholder {
  color: rgba(32, 24, 9, .62) !important;
  -webkit-text-fill-color: rgba(32, 24, 9, .62) !important;
  opacity: 1 !important;
}

/* --- PDP use bar, empty lunar card. ACTIVE 2026-08-20.
       Jared reported the lunar text as missing or invisible. It is neither a
       colour nor a contrast fault: the claim-light compliance pass blanked
       lunar_title and lunar_body, so the card renders as an empty bordered
       box with a moon in it. Hiding the empty shell removes the defect he
       saw without inventing copy. The real fix is his words in the section
       settings, which is an open question back to him.
       Self-disarming: fill lunar_title and both cards return with no edit. */

.pub .pub-card:has(> h3:empty) { display: none; }
.pub .pub-duo:has(> .pub-card > h3:empty) { grid-template-columns: minmax(0, 1fr); }

/* ============================================================
   ALVARA events grid: unlinked cards + mark plate
   2026-08-20, Jared urgent round item 7

   Eleven 2026 events go live on /pages/events. Only two of them
   have a photograph ALVARA actually owns (Expo West, Hollywood
   gifting suite). The rest arrived as third-party website
   screenshots, event posters and stock photography, so they are
   published with no image rather than with someone else's.
   .ev-img--plate is the honest stand-in: the ALVARA hex on the
   card ground, same 16/10 box, so every card in a row stays the
   same height. Drop a real photo into the block later and the
   plate disappears on its own.
   ============================================================ */

.event-card--static { cursor: default; }
.event-card--static:hover {
  transform: none;
  border-color: var(--rule);
  box-shadow: none;
}

.ev-img--plate {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(200,134,10,.16) 0%, rgba(200,134,10,0) 62%),
    linear-gradient(180deg, #17120B 0%, #100C07 100%);
  border-bottom: 1px solid var(--rule);
}

.ev-plate-mark {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--gold);
  opacity: .78;
}

.ev-plate-mark .ic { width: 30px; height: 30px; }

@media (max-width: 900px) {
  .ev-plate-mark { width: 62px; height: 62px; }
  .ev-plate-mark .ic { width: 25px; height: 25px; }
}

/* Events page uses the section heading as the page h1 (2026-08-20). */
.sec-head h1 { font-size: var(--t-h2); margin-top: 20px; }

/* ---------- CASE ORDERS (half case / full case, 2026-08-20) --------------
   The three consumer paths keep their own row. Cases get a second row of
   their own so every card inside a row is the same width and the row edges
   stay flush with the row above. Cards reuse .pdh-card wholesale. */
.pdh-cases{ margin-top:clamp(16px,2.4vw,24px); width:100%; scroll-margin-top:140px; }
.pdh-cases-lead{ margin:0 0 10px; }
.pdh--chooser .pdh-cases-lead{ text-align:center; justify-content:center; }
.pdh-paths--cases{ margin-top:0; }
@media (min-width:880px){
  .pdh--chooser .pdh-paths--cases{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(14px,1.6vw,20px);
    align-items:stretch;
  }
}
.pdh-card--case{ justify-content:flex-start; }
.pdh-card--case .pdh-meta{ margin-top:2px; }

/* One line version, used where two more cards would push the buy button
   below the fold. It renders under the CTA so it never moves it. */
.pdh-casestrip{
  margin:12px 0 0;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--ink-mute);
}
.pdh--chooser .pdh-casestrip{ text-align:center; }
.pdh-casestrip-lead{ color:var(--ink-mute); }
.pdh-casestrip-link{
  color:var(--gold-lite);
  text-decoration:none;
  border-bottom:1px solid rgba(200,134,10,.42);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.pdh-casestrip-link:hover{ color:var(--gold-hi); border-bottom-color:var(--gold-hi); }
.pdh-casestrip-sep{ padding:0 .5em; opacity:.6; }

/* The wholesale buy box is a flex child of .pdh-buy (align-items:flex-start),
   so the product form shrank to its content width instead of filling the
   column. Nothing shipped on this layout before, so this is its first fit. */
.pdh-wholesale-form{ width:100%; }
/* The fold-fit rules clamp .pdh-body to 2 or 3 lines to protect the buy button.
   The wholesale layout carries no stat strip, so it has the headroom to show a
   product description in full. */
.pdh--hero .pdh-body--full{ display:block; -webkit-line-clamp:unset; overflow:visible; }