/* ============================================================
   MULE EXTRACTS — homepage mockup
   Brand tokens taken from MuleExtracts 2026 Brand Guidelines.
   Type: Anton (Roc Grotesk Cmp Bold alt) / Syncopate (Termina alt)
         / Bitter (New Spirit alt, per approved homepage design)
   ============================================================ */

:root{
  --black:#000000;
  --ink:#0A0A08;
  --ink-2:#141210;
  --ivory:#F9F6E7;
  --paper:#F1ECD8;
  --gold:#A28D5B;
  --gold-hi:#C9B27F;
  --gold-dim:rgba(162,141,91,.35);
  --gold-faint:rgba(162,141,91,.16);

  --sativa-deep:#791217;  --sativa:#DB78AF;
  --hybrid-deep:#003826;  --hybrid:#64CCC9;
  --indica-deep:#31114A;  --indica:#6656FC;

  --wrap:1280px;
  --pad:clamp(20px,4vw,40px);
  --sec-y:clamp(76px,9vw,132px);
  --nav-h:75px;   /* 74px bar + 1px gold hairline */
  --marq-h:86px;  /* marquee band + 2px slack so it never clips at the fold */

  --f-display:'Anton',Impact,'Haettenschweiler',sans-serif;
  --f-util:'Syncopate','Helvetica Neue',Arial,sans-serif;
  --f-body:'Bitter',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--ink);color:var(--ivory);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--gold);color:#000;}

:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:#000;padding:12px 20px;
  font-family:var(--f-util);font-size:11px;letter-spacing:.2em;font-weight:700;
}
.skip:focus{left:12px;top:12px;}

/* ---------- primitives ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y);position:relative;}
.g-black{background:var(--black);color:var(--ivory);}
.g-ink{background:var(--ink);color:var(--ivory);}
.g-ivory{background:var(--ivory);color:var(--black);}
.g-gold{background:var(--gold);color:var(--black);}

.eyebrow{
  font-family:var(--f-util);font-weight:700;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;margin:0 0 18px;
}
.g-ivory .eyebrow{color:#7A6737;}
.eyebrow::before{
  content:"";width:44px;flex:none;border-top:3px dotted currentColor;opacity:.8;
}
.eyebrow.is-plain::before{display:none;}

.h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(34px,5.2vw,64px);line-height:.98;letter-spacing:.005em;
  text-transform:uppercase;margin:0;
}
.h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(22px,2.4vw,30px);line-height:1.04;letter-spacing:.02em;
  text-transform:uppercase;margin:0;
}
.lede{font-size:clamp(16px,1.35vw,19px);line-height:1.7;margin:0;opacity:.82;max-width:56ch;}
.body-sm{font-size:15.5px;line-height:1.68;margin:0;opacity:.76;}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-bottom:clamp(36px,4.5vw,60px);}
.sec-head__l{flex:1 1 380px;max-width:560px;}
.sec-head .lede{flex:1 1 340px;max-width:46ch;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-util);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:17px 26px;border:1px solid transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
  /* For years .btn only ever sat on an <a>, which is transparent by default. On a
     <button> the UA paints buttonface, so a ghost button came out solid white.
     Reset the button chrome here rather than in each modifier. */
  background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none;
}
.btn:hover{transform:translateY(-2px);}
.btn--gold{background:var(--gold);color:#000;}
.btn--gold:hover{background:var(--ivory);}
.btn--ghost{border-color:var(--gold);color:var(--gold-hi);}
.btn--ghost:hover{background:var(--gold);color:#000;}
.btn--dark{background:var(--black);color:var(--ivory);}
.btn--dark:hover{background:var(--gold);color:#000;}
.btn__arrow{font-family:var(--f-body);font-size:15px;line-height:1;transform:translateY(-1px);}

.link-more{
  font-family:var(--f-util);font-weight:700;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:9px;
  border-bottom:1px solid var(--gold-dim);padding-bottom:5px;
  transition:color .2s ease,border-color .2s ease,gap .2s ease;
}
.link-more:hover{color:var(--ivory);border-color:var(--ivory);gap:14px;}
.g-ivory .link-more:hover{color:#000;border-color:#000;}

/* the Mule packaging frame: hairline + inset dotted rule */
.frame{position:relative;border:1px solid var(--gold-dim);}
.frame::after{
  content:"";position:absolute;inset:7px;border:1px dotted var(--gold-dim);
  pointer-events:none;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:80;background:rgba(0,0,0,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--gold-dim);
}
.nav__in{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:74px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;}
/* Horizontal lockup. The nav and footer are both black, so the reversed
   art (gold mule, ivory wordmark) is the one that ships. */
.brand img{height:44px;width:auto;}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__links a{
  font-family:var(--f-util);font-weight:700;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory);opacity:.86;transition:color .2s ease,opacity .2s ease;
}
.nav__links a:hover{color:var(--gold-hi);opacity:1;}
.nav__cta{margin-left:6px;}
.nav__toggle{display:none;}

/* ============================================================
   HERO
   ============================================================ */
/* Hero is sized so the gold marquee band always lands inside the first screen. */
.hero{
  position:relative;overflow:hidden;background:var(--black);
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--nav-h) - var(--marq-h));
  min-height:calc(100svh - var(--nav-h) - var(--marq-h));
  padding-top:clamp(24px,4vh,88px);padding-bottom:0;
}
.hero__tex{
  position:absolute;inset:0;background:url("pattern-mules.webp") center/1100px repeat;
  opacity:.30;mix-blend-mode:screen;pointer-events:none;
}
.hero__glow{
  position:absolute;right:-4%;top:4%;width:min(760px,74vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(162,141,91,.42) 0%,rgba(162,141,91,.15) 40%,transparent 68%);
  pointer-events:none;
}
.hero__grid{
  /* width:100% is required: as a flex item, .wrap's auto side margins would
     otherwise suppress stretch and shrink-to-fit, breaking alignment with the nav. */
  position:relative;flex:1;width:100%;
  display:grid;grid-template-columns:1.16fr .84fr;gap:clamp(32px,5vw,72px);
  align-items:center;padding-bottom:clamp(24px,4vh,76px);
}
.hero__copy{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,28px);}
.hero__copy .eyebrow{margin-bottom:0;}
.hero h1{
  font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(48px,min(9.2vw,13.5vh),140px);line-height:.88;letter-spacing:.004em;
  text-transform:uppercase;
}
.hero h1 span{display:block;}
.hero h1 .stroke{
  color:transparent;-webkit-text-stroke:2px var(--gold);
  text-stroke:2px var(--gold);
}
.hero .lede{max-width:50ch;opacity:.8;}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:2px;}

/* orchestrated page-load sequence */
@keyframes riseIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes markIn{from{opacity:0;transform:scale(.93);}to{opacity:1;transform:none;}}
@keyframes railIn{from{opacity:0;}to{opacity:1;}}
.hero__copy > .eyebrow{animation:riseIn .75s cubic-bezier(.2,.7,.3,1) .06s both;}
.hero h1 span{animation:riseIn .85s cubic-bezier(.2,.7,.3,1) both;}
.hero h1 span:nth-child(1){animation-delay:.16s;}
.hero h1 span:nth-child(2){animation-delay:.27s;}
.hero h1 span:nth-child(3){animation-delay:.38s;}
.hero__copy > .lede{animation:riseIn .8s cubic-bezier(.2,.7,.3,1) .54s both;}
.hero__actions{animation:riseIn .8s cubic-bezier(.2,.7,.3,1) .66s both;}
.hero__mark{animation:markIn 1.15s cubic-bezier(.2,.7,.3,1) .24s both;}
.hero__rail{animation:railIn .9s ease .86s both;}

.hero__mark{position:relative;display:grid;place-items:center;padding:min(4vw,32px);}
.hero__ring{
  position:absolute;width:min(96%,470px);aspect-ratio:1;border-radius:50%;
  border:2px dotted var(--gold-dim);animation:spin 78s linear infinite;
}
.hero__ring--in{width:min(78%,384px);border-style:solid;border-width:1px;border-color:var(--gold-faint);animation-duration:120s;animation-direction:reverse;}
.hero__shield{position:relative;width:100%;max-width:min(392px,42vh);filter:drop-shadow(0 26px 54px rgba(0,0,0,.6));}
@keyframes spin{to{transform:rotate(360deg);}}

.hero__rail{
  position:relative;margin-top:auto;border-top:1px solid var(--gold-dim);
  display:flex;justify-content:center;align-items:center;gap:clamp(14px,2.4vw,34px);
  flex-wrap:wrap;padding:19px var(--pad);
  font-family:var(--f-util);font-weight:700;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);
}
.hero__rail i{font-style:normal;opacity:.5;}

/* ============================================================
   MARQUEE (gold band)
   ============================================================ */
.marq{background:var(--gold);color:#000;overflow:hidden;padding:19px 0;border-top:1px solid #000;border-bottom:1px solid #000;}
.marq__track{display:flex;width:max-content;animation:slide 42s linear infinite;}
.marq__grp{display:flex;align-items:center;flex:none;}
.marq__grp span{
  font-family:var(--f-display);font-weight:400;font-size:clamp(24px,3.1vw,40px);
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;line-height:1;padding-top:4px;
}
.marq__grp img{height:30px;width:auto;margin:0 clamp(20px,2.6vw,38px);filter:brightness(0);opacity:.85;}
@keyframes slide{to{transform:translateX(-50%);}}

/* ============================================================
   LINEUP
   ============================================================ */
.lineup__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}

.feat{
  grid-column:span 2;position:relative;overflow:hidden;background:var(--black);color:var(--ivory);
  border:1px solid rgba(0,0,0,.2);min-height:340px;display:flex;
}
.feat__img{position:absolute;inset:0;}
.feat__img img{width:100%;height:100%;object-fit:cover;object-position:72% 46%;opacity:.7;}
.feat__scrim{position:absolute;inset:0;background:linear-gradient(96deg,rgba(0,0,0,.97) 4%,rgba(0,0,0,.9) 34%,rgba(0,0,0,.45) 72%,rgba(0,0,0,.1) 100%);}
.feat__body{position:relative;padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;justify-content:flex-end;gap:16px;max-width:60ch;}
.tag-new{
  align-self:flex-start;background:var(--gold);color:#000;
  font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.24em;
  padding:7px 12px;text-transform:uppercase;
}
.feat .h2{font-size:clamp(30px,3.6vw,48px);}
.feat p{margin:0;font-size:16px;line-height:1.66;opacity:.82;max-width:46ch;}

.card{
  background:var(--black);color:var(--ivory);display:flex;flex-direction:column;
  border:1px solid rgba(0,0,0,.25);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 40px rgba(0,0,0,.28);}
.card__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px 0;
  font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}
.card__stage{
  position:relative;margin:16px 14px 0;aspect-ratio:5/4;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 62%,rgba(162,141,91,.20) 0%,rgba(162,141,91,0) 62%);
}
.card__stage::before{
  content:"";position:absolute;inset:0;border:1px dotted var(--gold-faint);
}
.card__stage img{max-height:88%;width:auto;object-fit:contain;transition:transform .45s cubic-bezier(.2,.7,.3,1);}
.card:hover .card__stage img{transform:scale(1.06) rotate(-1.2deg);}
.card__stage--photo img{width:100%;height:100%;max-height:none;object-fit:cover;opacity:.9;}
.card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:11px;flex:1;}
.card__body p{margin:0;font-size:14.5px;line-height:1.62;opacity:.72;flex:1;}
.card__foot{
  margin-top:4px;padding-top:14px;border-top:1px solid var(--gold-faint);
}

.menu-tile{
  background:var(--gold);color:#000;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  padding:26px 24px;min-height:260px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s ease;
}
.menu-tile:hover{transform:translateY(-5px);background:var(--gold-hi);}
.menu-tile__mule{
  position:absolute;right:-40px;bottom:-26px;width:250px;opacity:.34;
  filter:brightness(0);pointer-events:none;
}
.menu-tile__lab{
  position:relative;font-family:var(--f-util);font-weight:700;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;
}
.menu-tile .h3{position:relative;max-width:9ch;font-size:clamp(30px,3.4vw,44px);}
.menu-tile__go{
  position:relative;font-family:var(--f-util);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;
  border-bottom:1px solid rgba(0,0,0,.4);padding-bottom:5px;align-self:flex-start;
}

.cta-row{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  margin-top:clamp(30px,4vw,46px);
}

/* ============================================================
   EFFECTS SCALE (signature)
   ============================================================ */
.scale{background:var(--black);position:relative;overflow:hidden;}
.scale__tex{position:absolute;inset:0;background:url("pattern-mules.webp") center/900px repeat;opacity:.22;mix-blend-mode:screen;pointer-events:none;}
.scale__in{position:relative;}
.scale__intro{max-width:60ch;}

.rail{position:relative;margin:clamp(30px,4vw,48px) 0 0;padding:clamp(104px,11vw,142px) 0 0;}
.rail__bar{
  position:relative;height:18px;
  background:linear-gradient(90deg,
    var(--sativa-deep) 0%,
    #6a1a24 16%,
    #2b2a29 34%,
    var(--hybrid-deep) 50%,
    #1b2540 68%,
    #2c1550 86%,
    var(--indica-deep) 100%);
  box-shadow:0 0 0 1px rgba(162,141,91,.5), 0 0 52px rgba(162,141,91,.18);
}
.rail__bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%,rgba(0,0,0,.28));
}
.rail__glow{
  position:absolute;top:50%;left:50%;width:230px;height:160px;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse,var(--glow,rgba(100,204,201,.55)) 0%,transparent 66%);
  opacity:.85;filter:blur(7px);
  transition:left .62s cubic-bezier(.34,1.32,.44,1),background .5s ease;
}
.rail__mule{
  position:absolute;left:50%;bottom:5px;width:clamp(80px,8.5vw,120px);z-index:2;
  transform:translateX(-50%);transform-origin:60% 90%;
  transition:left .62s cubic-bezier(.34,1.32,.44,1);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.85));
}
.rail__mule.is-kicking{animation:kick .62s cubic-bezier(.34,1.3,.5,1);}
@keyframes kick{
  0%{transform:translateX(-50%) rotate(0deg);}
  30%{transform:translateX(-50%) rotate(-7deg) translateY(-8px);}
  60%{transform:translateX(-50%) rotate(4deg) translateY(-2px);}
  100%{transform:translateX(-50%) rotate(0deg);}
}
.rail__ticks{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--gold);}
.rail__ticks b{
  font-family:var(--f-util);font-weight:700;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
}
.rail__ticks span{display:flex;align-items:center;gap:11px;}
.rail__ticks svg{flex:none;}

.scale__tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(30px,4vw,44px);
}
.tab{
  appearance:none;background:transparent;cursor:pointer;
  border:1px solid var(--gold-dim);color:var(--ivory);
  font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:13px 16px;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.tab:hover{border-color:var(--gold-hi);color:var(--gold-hi);}
.tab[aria-selected="true"]{background:var(--tone,var(--gold));border-color:var(--tone,var(--gold));color:#000;}

.scale__panel{
  margin-top:clamp(30px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);
  border-top:1px solid var(--gold-dim);padding-top:clamp(28px,3.4vw,40px);
}
.scale__panel .h3{color:var(--tone,var(--gold));transition:color .35s ease;}
.scale__panel p{margin:12px 0 0;font-size:16.5px;line-height:1.68;opacity:.8;max-width:46ch;}
.scale__when{
  margin-top:20px;display:inline-flex;align-items:center;gap:11px;
  border-top:1px solid var(--gold-dim);padding-top:14px;
  font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.scale__when em{font-style:normal;color:var(--ivory);opacity:.85;}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;}
.chips h4{
  width:100%;margin:0 0 4px;font-family:var(--f-util);font-weight:700;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.chip{
  border:1px solid var(--tone,var(--gold));color:var(--tone,var(--gold));
  padding:9px 13px;font-family:var(--f-body);font-size:13.5px;line-height:1;
  transition:border-color .35s ease,color .35s ease;
}

/* ============================================================
   FXT
   ============================================================ */
.fxt__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fxt-card{
  position:relative;background:var(--black);color:var(--ivory);
  padding:3px;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fxt-card::before{
  content:"";position:absolute;inset:0;background:var(--edge);z-index:0;
}
.fxt-card:hover{transform:translateY(-5px);}
.fxt-card__in{
  position:relative;z-index:1;background:var(--black);height:100%;
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px;
}
.fxt-card__name{
  font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3vw,38px);
  line-height:1;letter-spacing:.02em;text-transform:uppercase;margin:0;
  background:var(--edge);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.fxt-card__name em{font-style:normal;color:var(--ivory);-webkit-text-fill-color:var(--ivory);opacity:.55;font-size:.62em;letter-spacing:.1em;}
.fxt-lab{
  font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:6px 0 0;
}
.fxt-terps{margin:0;font-size:15px;line-height:1.5;color:var(--ivory);opacity:.95;}
.fxt-out{margin:0;font-size:14.5px;line-height:1.6;font-style:italic;opacity:.68;flex:1;}
.fxt__note{
  margin:26px 0 0;font-size:12.5px;letter-spacing:.02em;opacity:.5;font-style:italic;
}

/* ============================================================
   PROCESS
   ============================================================ */
.proc{background:var(--black);position:relative;overflow:hidden;}
.proc__bg{position:absolute;inset:0;}
.proc__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.62;}
.proc__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.93) 100%);}
.proc__in{position:relative;}
.proc__steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border-top:1px solid var(--gold-dim);margin-top:clamp(36px,4.5vw,56px);
}
.step{
  padding:28px 22px 8px;border-right:1px solid var(--gold-dim);
  display:flex;flex-direction:column;gap:12px;position:relative;
}
.step:last-child{border-right:0;}
.step::before{
  content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--gold);
}
.step__n{
  font-family:var(--f-display);font-size:38px;line-height:1;color:var(--gold);opacity:.55;letter-spacing:.02em;
}
.step__t{
  font-family:var(--f-util);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ivory);line-height:1.5;margin:0;
}
.step p{margin:0;font-size:14.5px;line-height:1.62;opacity:.68;}

/* ============================================================
   TRUE TO — three pillars
   ============================================================ */
.true__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid #000;}
.true__col{padding:32px 30px 0;border-right:1px solid rgba(0,0,0,.18);position:relative;}
.true__col::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;background:#000;}
.true__col:last-child{border-right:0;}
.true__col:first-child{padding-left:0;}
.true__col:last-child{padding-right:0;}
.true__col .h3{margin-bottom:14px;}
.true__col p{margin:0;font-size:15.5px;line-height:1.66;color:#2A2620;}

.origin{
  margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:auto 1fr;
  gap:clamp(28px,4vw,56px);align-items:center;
  border-top:1px solid rgba(0,0,0,.2);padding-top:clamp(36px,4vw,52px);
}
.origin__mark{width:clamp(120px,14vw,178px);}
.origin__lab{
  font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#7A6737;margin:0 0 14px;
}
.origin__q{
  margin:0;font-size:clamp(19px,2.1vw,27px);line-height:1.45;color:#171512;max-width:44ch;
}
.origin__q b{font-weight:700;}

/* ============================================================
   FIND US
   ============================================================ */
.find{background:var(--black);}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--gold-dim);margin-bottom:clamp(30px,4vw,46px);
}
.stat{padding:26px 24px;border-right:1px solid var(--gold-dim);display:flex;flex-direction:column;gap:6px;}
.stat:last-child{border-right:0;}
.stat__n{font-family:var(--f-display);font-size:clamp(38px,4.6vw,58px);line-height:1;color:var(--gold);letter-spacing:.01em;}
.stat__l{font-family:var(--f-util);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.8;}

.states{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.state{
  position:relative;overflow:hidden;min-height:330px;display:flex;align-items:flex-end;
  border:1px solid var(--gold-dim);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.state:hover{transform:translateY(-5px);}
.state img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);opacity:.66;transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .4s ease;}
.state:hover img{transform:scale(1.05);opacity:.78;}
.state::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.96) 14%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.18) 100%),
             linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 62%);
}
.state__body{position:relative;z-index:1;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:12px;}
.state__n{font-family:var(--f-util);font-weight:700;font-size:10px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;}
.state p{margin:0;font-size:15px;line-height:1.6;opacity:.78;max-width:38ch;}
.find__cta{margin-top:clamp(30px,4vw,46px);display:flex;gap:16px;flex-wrap:wrap;align-items:center;}

/* ============================================================
   OUTPOST / SOCIAL split band
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;}
.split__cell{padding:clamp(48px,6vw,84px) clamp(28px,5vw,72px);display:flex;flex-direction:column;gap:18px;justify-content:center;}
.split__cell--gold{background:var(--gold);color:#000;}
.split__cell--black{background:var(--black);color:var(--ivory);position:relative;overflow:hidden;}
.split__cell--black .eyebrow{color:var(--gold);}
.split__cell--gold .eyebrow{color:#3A3018;}
.split__cell p{margin:0;font-size:15.5px;line-height:1.66;max-width:40ch;opacity:.85;}
.split__cell--gold p{opacity:.78;}
.split__tex{position:absolute;inset:0;background:url("pattern-mules.webp") center/700px repeat;opacity:.3;mix-blend-mode:screen;pointer-events:none;}
.split__in{position:relative;display:flex;flex-direction:column;gap:18px;}
.handles{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
.split__shot{
  width:100%;max-width:420px;aspect-ratio:16/10;object-fit:cover;object-position:center 30%;
  border:1px solid rgba(0,0,0,.55);margin-top:6px;
}
.ig-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px;max-width:520px;}
.ig-row img{aspect-ratio:1;object-fit:cover;border:1px solid var(--gold-dim);filter:grayscale(.15);transition:filter .3s ease,transform .3s ease;}
.ig-row img:hover{filter:none;transform:translateY(-3px);}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--black);border-top:4px solid var(--gold);padding:clamp(52px,6vw,76px) 0 34px;}
.foot__top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;}
.foot__brand{max-width:330px;display:flex;flex-direction:column;gap:14px;}
.foot__brand .brand img{height:54px;}
.foot__brand p{margin:0;font-size:14px;line-height:1.6;opacity:.55;}
.foot__cols{display:flex;gap:clamp(32px,5vw,72px);flex-wrap:wrap;}
.foot__col{display:flex;flex-direction:column;gap:12px;}
.foot__col h4{
  margin:0 0 3px;font-family:var(--f-util);font-weight:700;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.foot__col a{
  font-family:var(--f-util);font-weight:400;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ivory);opacity:.75;transition:color .2s ease,opacity .2s ease;
}
.foot__col a:hover{color:var(--gold-hi);opacity:1;}
.foot__legal{
  margin-top:clamp(36px,4.5vw,54px);padding-top:22px;border-top:1px solid rgba(249,246,231,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12.5px;line-height:1.6;opacity:.46;
}
.badge21{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border:1px solid var(--gold);color:var(--gold);
  font-family:var(--f-display);font-size:15px;letter-spacing:.04em;
}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
.rv.is-in{opacity:1;transform:none;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .lineup__grid{grid-template-columns:repeat(2,1fr);}
  .feat{grid-column:span 2;}
  .fxt__grid{grid-template-columns:repeat(2,1fr);}
  .proc__steps{grid-template-columns:repeat(2,1fr);}
  .step{border-bottom:1px solid var(--gold-dim);}
  .step:nth-child(2n){border-right:0;}
  .true__grid{grid-template-columns:1fr;}
  .true__col{border-right:0;border-bottom:1px solid rgba(0,0,0,.18);padding:30px 0;}
  .true__col:last-child{border-bottom:0;}
}
@media (max-width:900px){
  .nav__links{
    position:fixed;inset:74px 0 auto 0;background:rgba(0,0,0,.98);
    border-bottom:1px solid var(--gold-dim);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 0 18px;
    display:none;
  }
  .nav__links.is-open{display:flex;}
  .nav__links a{padding:15px var(--pad);font-size:11px;}
  .nav__links .btn{margin:10px var(--pad) 0;justify-content:center;}
  .nav__toggle{
    display:inline-flex;flex-direction:column;gap:5px;background:transparent;border:0;
    padding:10px;cursor:pointer;
  }
  .nav__toggle span{display:block;width:24px;height:2px;background:var(--ivory);}
  .hero__grid{grid-template-columns:1fr;gap:30px;}
  /* Once the hero stacks, the shield lands ABOVE the headline and costs 380px
     before a word is read -- it pushed both hero buttons off the fold. This is
     the breakpoint where that happens, so this is where it goes, not 640. The
     nav lockup carries the mark on every one of these widths anyway. */
  .hero__mark{display:none;}
  /* Same emblem in the brand story: it stretches to the full column, which is
     589px square at 640px wide. Cap it so it reads as a mark, not a backdrop. */
  .steprow__media--mark img{max-width:240px;margin:0 auto;display:block;}
  .scale__panel{grid-template-columns:1fr;}
  .states{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .stat{border-right:0;border-bottom:1px solid var(--gold-dim);}
  .stat:last-child{border-bottom:0;}
}
@media (max-width:640px){
  body{font-size:16px;}
  .lineup__grid{grid-template-columns:1fr;}
  .feat{grid-column:span 1;min-height:300px;}
  .fxt__grid{grid-template-columns:1fr;}
  .proc__steps{grid-template-columns:1fr;}
  .step{border-right:0;}
  .rail{padding-top:86px;}
  .rail__mule{width:72px;}
  .origin{grid-template-columns:1fr;gap:22px;}
  .tab{flex:1 1 44%;justify-content:center;text-align:center;}
  /* Full-bleed masthead: size the type so the longest line ("Harder.") fills
     the column instead of sitting at 45% of it. Anton sets this word about
     3.1x its font-size wide, and the column is the viewport less 2x20px of
     wrap padding, so (100vw - 40px) / 3.1 lands it on the measure. Trimmed a
     few percent for the margin between browsers' font metrics, and floored so
     a very narrow phone still gets a headline rather than a caption. */
  .hero h1{font-size:max(46px, calc((100vw - 44px) / 3.2));}
  .hero h1 .stroke{-webkit-text-stroke-width:2px;}
}

/* Short viewports: tighten the hero so the marquee still clears the fold. */
@media (min-width:901px) and (max-height:790px){
  .hero{padding-top:clamp(16px,3vh,88px);}
  .hero__grid{padding-bottom:clamp(16px,3vh,76px);}
  .hero__copy{gap:clamp(13px,2.1vh,24px);}
  .hero h1{font-size:clamp(44px,min(8.4vw,11.2vh),140px);}
  .hero .lede{font-size:16px;line-height:1.6;}
  .hero__rail{padding-top:13px;padding-bottom:13px;}
  .hero__shield{max-width:min(392px,38vh);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .rv{opacity:1;transform:none;}
}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */

/* --- compact page hero --- */
.phero{
  position:relative;overflow:hidden;background:var(--black);color:var(--ivory);
  padding:clamp(56px,7vw,92px) 0 clamp(48px,6vw,80px);
  border-bottom:1px solid var(--gold-dim);
}
.phero__tex{position:absolute;inset:0;background:url("pattern-mules.webp") center/1000px repeat;opacity:.26;mix-blend-mode:screen;pointer-events:none;}
.phero__shot{position:absolute;inset:0;}
.phero__shot img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);opacity:.42;}
.phero__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(0,0,0,.97) 4%,rgba(0,0,0,.9) 38%,rgba(0,0,0,.6) 72%,rgba(0,0,0,.4) 100%),
             linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 34%);
}
.phero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,64px);align-items:end;}
.phero h1{
  font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(42px,6.6vw,92px);line-height:.94;letter-spacing:.005em;text-transform:uppercase;
}
.phero .lede{margin-top:22px;max-width:54ch;}
.phero__aside{display:flex;flex-direction:column;gap:14px;padding-bottom:6px;}
.phero__mark{width:clamp(120px,15vw,190px);margin-left:auto;opacity:.95;}

.crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px;
  font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}
.crumb a{opacity:.75;}
.crumb a:hover{opacity:1;color:var(--gold-hi);}
.crumb i{font-style:normal;opacity:.45;}

/* --- key facts strip --- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--gold-dim);margin-top:clamp(30px,4vw,44px);}
.facts div{padding:20px 22px;border-right:1px solid var(--gold-dim);display:flex;flex-direction:column;gap:6px;}
.facts div:last-child{border-right:0;}
.facts b{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1;color:var(--gold);letter-spacing:.02em;}
.facts span{font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.72;}

/* --- product / flavour grid --- */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:clamp(26px,3.4vw,38px);}
.filterbar__lab{
  font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-right:6px;
}
.fchip{
  appearance:none;cursor:pointer;background:transparent;border:1px solid rgba(0,0,0,.28);color:#1B1813;
  font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:11px 15px;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.fchip:hover{border-color:#000;}
.fchip[aria-pressed="true"]{background:#000;border-color:#000;color:var(--ivory);}
.g-black .fchip,.g-ink .fchip{border-color:var(--gold-dim);color:var(--ivory);}
.g-black .fchip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#000;}

.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pgrid--3{grid-template-columns:repeat(3,1fr);}
.pcard{
  background:var(--black);color:var(--ivory);display:flex;flex-direction:column;
  border:1px solid var(--gold-dim);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease;
}
.pcard:hover{transform:translateY(-5px);border-color:var(--gold-hi);}
.pcard[hidden]{display:none;}
.pcard__shot{
  position:relative;aspect-ratio:1;overflow:hidden;
  background:radial-gradient(ellipse at 50% 66%,rgba(162,141,91,.20) 0%,rgba(162,141,91,0) 64%);
}
/* Absolute so the pack art can never grow the box: an in-flow img with height:100%
   resolves against an indefinite height and defeats aspect-ratio. Every pack is
   alpha-trimmed, so contain gives them all the same presence in the grid. */
.pcard__shot img{
  position:absolute;inset:0;width:100%;height:100%;
  padding:20px 20px 8px;box-sizing:border-box;
  object-fit:contain;object-position:center;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.pcard:hover .pcard__shot img{transform:scale(1.05) rotate(-1.5deg);}
.pcard__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pcard__name{font-family:var(--f-display);font-weight:400;font-size:19px;line-height:1.06;letter-spacing:.02em;text-transform:uppercase;margin:0;}
.pcard__flav{margin:0;font-size:13.5px;line-height:1.4;opacity:.66;}
.pcard__note{
  margin:0;font-family:var(--f-util);font-weight:700;font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
.pcard__foot{margin-top:auto;padding-top:12px;}

/* mini effects rail on a product card */
.minirail{position:relative;height:5px;margin-top:4px;
  background:linear-gradient(90deg,var(--sativa-deep),#2b2a29 50%,var(--indica-deep));}
.minirail i{
  position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--tone,var(--gold));
  box-shadow:0 0 0 2px #000, 0 0 10px var(--tone,var(--gold));
}
.minirail + .pcard__note{margin-top:8px;}

/* --- label wall (strain archives) --- */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
.wall figure{margin:0;position:relative;transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.wall figure:hover{transform:translateY(-4px) scale(1.02);z-index:2;}
.wall img{width:100%;height:auto;border:1px solid var(--gold-faint);background:#0d0c0a;}
.wall figcaption{
  margin-top:9px;font-family:var(--f-util);font-weight:700;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.66;line-height:1.5;
}
.wall figcaption em{font-style:normal;color:var(--gold);}
.wall figure[hidden]{display:none;}

/* --- editorial step rows --- */
.steprow{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,4.5vw,66px);align-items:center;
  padding:clamp(34px,4.5vw,56px) 0;border-top:1px solid var(--gold-dim);
}
.steprow:nth-child(even) .steprow__media{order:-1;}
.steprow__media{position:relative;}
.steprow__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--gold-dim);}
/* The emblem is an emblem, not a photograph: square, uncropped, no frame. */
.steprow__media--mark img{aspect-ratio:1;object-fit:contain;border:0;}
.steprow__n{
  font-family:var(--f-display);font-weight:400;font-size:clamp(52px,7vw,96px);line-height:.9;
  color:var(--gold);opacity:.35;letter-spacing:.02em;margin-bottom:10px;
}
.steprow h3{
  font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2.8vw,38px);line-height:1.02;
  letter-spacing:.02em;text-transform:uppercase;margin:0 0 16px;
}
.steprow p{margin:0 0 14px;font-size:16px;line-height:1.7;opacity:.8;max-width:52ch;}
.steprow p:last-child{margin-bottom:0;}

/* --- craft vs commodity comparison --- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--gold-dim);}
.compare__col{padding:clamp(26px,3.4vw,40px);}
.compare__col:first-child{border-right:1px solid var(--gold-dim);opacity:.62;}
.compare__tag{
  font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 16px;
}
.compare__col:first-child .compare__tag{color:var(--ivory);opacity:.6;}
.compare h3{font-family:var(--f-display);font-weight:400;font-size:clamp(21px,2.3vw,28px);line-height:1.06;letter-spacing:.02em;text-transform:uppercase;margin:0 0 16px;}
.compare ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.compare li{position:relative;padding-left:22px;font-size:15px;line-height:1.6;opacity:.85;}
.compare li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:currentColor;opacity:.45;}
.compare__col:last-child li::before{background:var(--gold);opacity:1;}

/* --- big statement band --- */
.statement{background:var(--gold);color:#000;padding:clamp(56px,7vw,104px) 0;}
.statement p{
  margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(30px,4.6vw,62px);line-height:1.04;letter-spacing:.01em;text-transform:uppercase;
  max-width:20ch;
}
.statement cite{
  display:block;margin-top:26px;font-style:normal;
  font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  opacity:.7;
}

/* --- long-form prose --- */
.prose{max-width:70ch;}
.prose h2{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:.02em;text-transform:uppercase;margin:44px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-family:var(--f-util);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:30px 0 10px;color:var(--gold);}
.g-ivory .prose h3{color:#7A6737;}
.prose p,.prose li{font-size:16px;line-height:1.75;margin:0 0 16px;}
.prose ul{margin:0 0 18px;padding-left:20px;}
.prose a{border-bottom:1px solid var(--gold-dim);}
.prose a:hover{border-color:currentColor;}
.prose__toc{
  border:1px solid rgba(0,0,0,.2);padding:22px 24px;margin-bottom:36px;
  display:flex;flex-direction:column;gap:9px;
}
.prose__toc b{font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#7A6737;margin-bottom:4px;}
.prose__toc a{font-size:14px;border:0;opacity:.8;}
.prose__toc a:hover{opacity:1;}

/* --- article --- */
.article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(28px,5vw,72px);align-items:start;}
.article__meta{position:sticky;top:100px;display:flex;flex-direction:column;gap:12px;}
.article__meta span{font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.article__meta p{margin:0;font-size:14px;line-height:1.6;opacity:.66;}
.figure-wide{margin:34px 0;}
.figure-wide img{width:100%;border:1px solid var(--gold-dim);}
.figure-wide figcaption{margin-top:10px;font-size:12.5px;font-style:italic;opacity:.55;}

/* --- store finder: hero panel --- */
/* The locations hero is the one place where run-in costs something real: every
   pixel of padding here is a pixel of directory pushed under the fold, and the
   directory is what the page is for. The panel already fills the hero, so it
   does not need an interior page's full breathing room, and the section below
   opens with a control bar rather than a heading. */
.phero--find{padding-top:clamp(40px,4.4vw,60px);padding-bottom:clamp(36px,4vw,56px);}
/* Every other interior hero bottom-aligns its two columns, which is right when
   the aside is a small mark or empty. Here the aside is a panel 90-190px taller
   than the headline block, and bottom-aligning piled all of that slack into one
   void above the breadcrumb. Centred, the two read as a pair and the leftover
   space splits evenly instead of collecting in one place. */
.phero--find .phero__in{align-items:center;}
.sec--find{padding-top:clamp(28px,3.2vw,44px);}
.sec--find .finder{gap:clamp(16px,2vw,20px);}

/* Sits in .phero__aside, which is empty on every other interior page. The
   panel keeps a contact form's shape: label, one field, submit, one secondary
   action, one status line. */
/* Solid, not a frosted blur: a backdrop-filter here buys almost nothing over
   the photograph the hero scrim has already darkened, and costs a compositor
   layer on every phone that loads the page. */
.lookup{border:1px solid var(--gold-dim);background:rgba(8,7,5,.78);}
.lookup__form{
  padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;gap:14px;
}
/* The numbers ride inside the same block as the search, not in a band of their
   own below the hero. Two by two, because "Licensed dispensaries" will not sit
   on one line in a 310px column. */
/* grid-auto-rows:1fr keeps both rows the same height, so a label that wraps at
   320px cannot leave one row taller than the other. */
.lookup__facts{
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;
  border-top:1px solid var(--gold-dim);
}
.lookup__facts div{padding:13px 16px;display:flex;flex-direction:column;gap:4px;justify-content:center;}
.lookup__facts div:nth-child(odd){border-right:1px solid var(--gold-dim);}
.lookup__facts div:nth-child(-n+2){border-bottom:1px solid var(--gold-dim);}
.lookup__facts b{
  font-family:var(--f-display);font-weight:400;line-height:1;color:var(--gold);
  font-size:clamp(19px,1.9vw,25px);letter-spacing:.02em;
}
.lookup__facts span{
  font-family:var(--f-util);font-weight:700;font-size:8.5px;letter-spacing:.17em;
  text-transform:uppercase;opacity:.68;line-height:1.45;
}
.lookup__lab{
  font-family:var(--f-util);font-weight:700;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:0;
}
.lookup__row{display:flex;gap:10px;flex-wrap:wrap;}
.lookup__in{
  flex:1 1 190px;min-width:0;background:rgba(0,0,0,.4);color:var(--ivory);
  border:1px solid var(--gold-faint);
  /* 16px exactly: anything smaller and iOS Safari zooms the page on focus. */
  font-family:var(--f-body);font-size:16px;line-height:1.2;padding:16px 14px;
  -webkit-appearance:none;appearance:none;border-radius:0;
}
.lookup__in::placeholder{color:rgba(249,246,231,.4);}
.lookup__in::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
.lookup__in:focus{outline:2px solid var(--gold-hi);outline-offset:1px;border-color:var(--gold);}
.lookup__go{flex:0 0 auto;justify-content:center;padding-top:0;padding-bottom:0;min-height:52px;}
.lookup__go:hover{transform:none;}
.lookup__gps{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  background:none;border:0;cursor:pointer;color:var(--gold-hi);
  font-family:var(--f-util);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:11px 2px;min-height:44px;
}
.lookup__gps:hover{color:var(--ivory);}
.lookup__gps[disabled]{opacity:.45;cursor:progress;}
/* Crosshair, not a map pin: this button reads your position, it does not drop one. */
.lookup__pin{position:relative;width:14px;height:14px;flex:none;}
.lookup__pin::before{content:"";position:absolute;inset:3px;border:1.5px solid currentColor;border-radius:50%;}
.lookup__pin::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(currentColor,currentColor) 50% 0/1.5px 4px no-repeat,
             linear-gradient(currentColor,currentColor) 50% 100%/1.5px 4px no-repeat,
             linear-gradient(currentColor,currentColor) 0 50%/4px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) 100% 50%/4px 1.5px no-repeat;
}
.lookup__msg{margin:0;font-size:13.5px;line-height:1.5;opacity:.7;}
.lookup__msg.is-warn{opacity:1;color:var(--gold-hi);}
/* Visually hidden, still read by screen readers and still present in
   textContent -- which is what the NitroCMS tracker logs on a tel: tap. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* --- store directory --- */
.finder{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,32px);}
.finder__bar{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  border:1px solid var(--gold-dim);padding:14px 16px;background:rgba(0,0,0,.35);
}
.finder__chips{display:flex;gap:8px;flex-wrap:wrap;}
.finder__now{
  margin:0;flex:1 1 220px;min-width:0;
  font-family:var(--f-util);font-weight:700;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;
}
.finder__now b{color:var(--gold);font-weight:700;}
.finder__clear{
  background:none;border:0;cursor:pointer;color:var(--gold-hi);text-decoration:underline;
  font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:6px 0 6px 12px;
}
.finder__clear:hover{color:var(--ivory);}
.finder__count{
  font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);padding:0 8px;
}

/* --- ranked results --- */
/* The mileage is the whole point of the list, so it is set in the display face
   and leads every row: the directory reads as a distance ladder. */
.nearlist{list-style:none;margin:0;padding:0;}
.near{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2.2vw,30px);align-items:center;
  padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(--gold-faint);
}
.near:first-child{border-top:1px solid var(--gold-dim);}
.near__mi{
  font-family:var(--f-display);font-weight:400;line-height:.9;color:var(--gold);
  font-size:clamp(26px,3.2vw,38px);letter-spacing:.02em;text-align:right;
  min-width:3.6ch;font-variant-numeric:tabular-nums;
}
.near__mi i{
  display:block;margin-top:6px;font-family:var(--f-util);font-style:normal;
  font-weight:700;font-size:9px;letter-spacing:.2em;opacity:.6;
}
.near__body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.near__name{font-family:var(--f-body);font-weight:700;font-size:16.5px;line-height:1.25;}
.near__at{font-size:13.5px;line-height:1.5;opacity:.62;}
.near__acts{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.near__acts a{font-size:13.5px;opacity:.66;white-space:nowrap;}
.near__acts a:hover{opacity:1;color:var(--gold-hi);}
.nearmore{
  display:block;width:100%;margin-top:2px;background:none;cursor:pointer;
  border:0;border-top:1px solid var(--gold-dim);color:var(--gold-hi);
  font-family:var(--f-util);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:20px 0;
}
.nearmore:hover{color:var(--ivory);background:rgba(162,141,91,.06);}

/* --- browse-everything disclosure --- */
.browse{margin-top:clamp(30px,4vw,44px);}
.browse__btn{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;
  background:none;border:0;border-top:1px solid var(--gold-dim);cursor:pointer;
  color:inherit;font-family:var(--f-util);font-weight:700;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;padding:22px 0;
}
.browse__btn:hover{color:var(--gold-hi);}
.browse__btn span:last-child{color:var(--gold);}
.browse__btn[aria-expanded="true"] span:last-child::after{content:" \2013";}
.browse__btn[aria-expanded="false"] span:last-child::after{content:" +";}
.browse__panel[hidden]{display:none;}

/* --- finder, narrow --- */
@media (max-width:900px){
  /* The hero stacks here, so the panel stops being a sidebar and becomes the
     first thing under the lede -- which is where it wants to be on a phone. */
  .lookup{margin-top:4px;}
  /* Wide enough now for all four numbers in one row. */
  .lookup__facts{grid-template-columns:repeat(4,1fr);}
  .lookup__facts div:nth-child(odd){border-right:0;}
  .lookup__facts div:nth-child(-n+3){border-right:1px solid var(--gold-dim);}
  .lookup__facts div:nth-child(-n+2){border-bottom:0;}
}
@media (max-width:640px){
  .lookup__facts{grid-template-columns:1fr 1fr;}
  .lookup__facts div:nth-child(-n+3){border-right:0;}
  .lookup__facts div:nth-child(odd){border-right:1px solid var(--gold-dim);}
  .lookup__facts div:nth-child(-n+2){border-bottom:1px solid var(--gold-dim);}
}
@media (max-width:560px){
  .lookup__go{flex:1 1 100%;}
  .finder__bar{flex-direction:column;align-items:flex-start;gap:14px;}
  /* The bar stacks here, and a flex-basis written for a row becomes a 220px
     tall empty block once the main axis turns vertical. */
  .finder__now{flex:0 0 auto;width:100%;}
  .finder__count{padding:0;}
  /* Mileage and shop stay side by side; the actions drop to their own row
     rather than squeezing three columns into 320px. */
  .near{grid-template-columns:auto minmax(0,1fr);row-gap:12px;}
  .near__acts{grid-column:2;}
}
.citygroup{margin-top:clamp(26px,3.4vw,38px);}
.citygroup > h3{
  font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1;letter-spacing:.03em;
  text-transform:uppercase;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--gold-dim);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.citygroup > h3 small{font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.2em;color:var(--gold);}
.storegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.store{
  border:1px solid var(--gold-faint);padding:16px 18px;display:flex;flex-direction:column;gap:5px;
  transition:border-color .2s ease,background .2s ease;
}
.store:hover{border-color:var(--gold-dim);background:rgba(162,141,91,.06);}
.store b{font-family:var(--f-body);font-weight:700;font-size:15.5px;line-height:1.3;}
.store span{font-size:13.5px;line-height:1.5;opacity:.62;}
.store a{font-size:13.5px;opacity:.62;}
.store a:hover{opacity:1;color:var(--gold-hi);}
.finder__empty{padding:40px 0;opacity:.6;font-style:italic;}

/* --- contact --- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:start;}
.contact__rows{display:flex;flex-direction:column;}
.crow{padding:22px 0;border-top:1px solid var(--gold-dim);display:flex;flex-direction:column;gap:6px;}
.crow:first-child{border-top:0;padding-top:0;}
.crow span{font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.crow b{font-family:var(--f-body);font-weight:500;font-size:19px;line-height:1.45;}
.crow a{border-bottom:1px solid var(--gold-dim);transition:color .2s ease,border-color .2s ease;}
.crow a:hover{color:var(--gold-hi);border-color:var(--gold-hi);}
.contact__map{border:1px solid var(--gold-dim);aspect-ratio:4/3;width:100%;}
.contact__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) invert(.92) contrast(.86);}

/* --- interior responsive --- */
@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(3,1fr);}
  .storegrid{grid-template-columns:repeat(2,1fr);}
  .facts{grid-template-columns:repeat(2,1fr);}
  .facts div:nth-child(2n){border-right:0;}
  .facts div:nth-child(-n+2){border-bottom:1px solid var(--gold-dim);}
  .article{grid-template-columns:1fr;}
  .article__meta{position:static;flex-direction:row;flex-wrap:wrap;gap:18px;align-items:baseline;}
}
@media (max-width:900px){
  .phero__in{grid-template-columns:1fr;}
  .phero__mark{display:none;}
  .steprow{grid-template-columns:1fr;gap:24px;}
  .steprow:nth-child(even) .steprow__media{order:0;}
  .compare{grid-template-columns:1fr;}
  .compare__col:first-child{border-right:0;border-bottom:1px solid var(--gold-dim);}
  .contact{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .pgrid,.pgrid--3{grid-template-columns:repeat(2,1fr);}
  .storegrid{grid-template-columns:1fr;}
  .facts{grid-template-columns:1fr;}
  .facts div{border-right:0;border-bottom:1px solid var(--gold-dim);}
  .facts div:last-child{border-bottom:0;}
  .wall{grid-template-columns:repeat(2,1fr);}
}

/* --- FXT detail cards (fxt.html) --- */
.fxt__grid--full{gap:20px;}
.fxt-card__shot{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 26%;
  border:1px solid var(--gold-faint);margin-bottom:6px;
}
.fxt-detail{margin:0;font-size:14.5px;line-height:1.66;opacity:.72;}
.fxt-card__in .fxt-lab:first-of-type{margin-top:2px;}

/* --- journal / misc --- */
.journal-note{color:#5C5346;}

/* --- store directory: city accordion --- */
.cityrow{border-bottom:1px solid var(--gold-faint);}
.cityrow[hidden]{display:none;}
.cityrow__btn{
  width:100%;appearance:none;background:transparent;border:0;cursor:pointer;color:var(--ivory);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 4px;text-align:left;transition:color .2s ease;
}
.cityrow__btn:hover{color:var(--gold-hi);}
.cityrow__btn b{
  font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1;
  letter-spacing:.03em;text-transform:uppercase;
}
.cityrow__btn u{
  text-decoration:none;font-family:var(--f-util);font-weight:700;font-size:9px;
  letter-spacing:.2em;color:var(--gold);white-space:nowrap;
}
.cityrow__btn u::after{content:" +";display:inline-block;width:1em;text-align:right;}
.cityrow__btn[aria-expanded="true"] u::after{content:" –";}
.cityrow__panel{padding:2px 0 22px;}
.cityrow__panel[hidden]{display:none;}
.finder__hint{
  margin:0 0 4px;font-family:var(--f-util);font-weight:700;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.7;
}

/* --- statement band: optional supporting paragraph --- */
.statement p.statement__sub{
  margin:30px 0 0;font-family:var(--f-body);font-size:clamp(16px,1.5vw,19px);
  line-height:1.7;letter-spacing:0;text-transform:none;max-width:62ch;opacity:.72;
}
/* --- steprow: explicit ordering, not nth-child --- */
.steprow--bare{border-top:0;padding-top:0;}
.steprow--alt .steprow__media{order:2;}
.steprow--flip .steprow__media{order:-1;}
@media (max-width:900px){ .steprow--alt .steprow__media,.steprow--flip .steprow__media{order:0;} }
/* --- store directory: state headers --- */
.stateband{
  margin:34px 0 6px;padding-bottom:10px;border-bottom:2px solid var(--gold);
  font-family:var(--f-display);font-weight:400;font-size:clamp(20px,2.2vw,28px);
  line-height:1;letter-spacing:.03em;text-transform:uppercase;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
}
.stateband:first-child{margin-top:0;}
.stateband small{font-family:var(--f-util);font-weight:700;font-size:9.5px;letter-spacing:.2em;color:var(--gold);}


/* ============================================================
   Effect filter
   Every product bar renders all six stops, so the control keeps one
   shape site-wide. A stop the page cannot fill comes back dashed and
   disabled rather than missing. The pressed chip takes that stop's own
   colour off the rail, so the bar reads as a slice of the scale.
   ============================================================ */
.fchip[aria-pressed="true"]{background:#000;border-color:#000;color:var(--ivory);}
.filterbar .fchip[aria-pressed="true"]{
  background:var(--tone,#000);border-color:var(--tone,#000);color:#000;
}
.filterbar .fchip[data-filter="all"][aria-pressed="true"]{
  background:#000;border-color:#000;color:var(--ivory);
}
.g-black .filterbar .fchip[data-filter="all"][aria-pressed="true"],
.g-ink .filterbar .fchip[data-filter="all"][aria-pressed="true"]{
  background:var(--gold);border-color:var(--gold);color:#000;
}
.fchip:disabled{opacity:.28;cursor:not-allowed;border-style:dashed;}
.fchip:disabled:hover{border-color:var(--gold-faint);}
.g-black .fchip:disabled:hover,.g-ink .fchip:disabled:hover{border-color:var(--gold-dim);}

/* ============================================================
   Product detail lightbox
   A lit vitrine, not a white modal: the page dims to near-black, the
   product keeps its own bright ground, and the label side goes dark so
   the effects rail reads the way it does on the packaging.
   ============================================================ */
/* A real button laid over the tile, so the product name stays a heading in the
   accessibility outline and Enter/Space come for free. */
.pcard__hit{
  position:absolute;inset:0;z-index:2;
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:transparent;
}
.pcard__hit:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-4px;}
html.pdp-open,html.pdp-open body{overflow:hidden;}

.pdp{
  border:0;padding:0;background:transparent;color:var(--ivory);
  width:min(1120px,calc(100vw - 2*var(--pad)));max-width:none;
  max-height:calc(100vh - 2*var(--pad));overflow:visible;
}
.pdp::backdrop{background:rgba(0,0,0,.9);}
.pdp__in{
  position:relative;display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  grid-template-rows:auto auto;
  background:var(--ink);border:1px solid var(--gold-dim);
  max-height:calc(100vh - 2*var(--pad));overflow:auto;
}
.pdp__in::before{
  content:"";position:absolute;inset:8px;border:1px dotted var(--gold-faint);
  pointer-events:none;z-index:3;
}

.pdp__x{
  position:absolute;top:20px;right:20px;z-index:4;
  width:40px;height:40px;display:grid;place-items:center;
  background:rgba(0,0,0,.55);color:var(--gold-hi);
  border:1px solid var(--gold-dim);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.pdp__x:hover{background:var(--gold);color:#000;border-color:var(--gold);}

.pdp__shot{
  grid-column:1;grid-row:1;
  position:relative;background:var(--black);min-height:240px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* Square pack renders fill the plate. Strain labels are wide banners and the label is
   the information, so those are shown whole rather than cropped. */
.pdp__shot img{width:100%;height:100%;object-fit:cover;display:block;}
.pdp__shot--wide{padding:clamp(18px,2.4vw,32px);}
.pdp__shot--wide img{height:auto;object-fit:contain;}

.pdp__body{grid-column:2;grid-row:1/3;padding:clamp(24px,2.6vw,38px) clamp(24px,3vw,44px);}
.pdp__line{
  font-family:var(--f-util);font-weight:700;font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;
}
.pdp__name{
  font-family:var(--f-display);font-size:clamp(30px,4vw,54px);line-height:.96;
  letter-spacing:.012em;text-transform:uppercase;margin:0;color:var(--ivory);
}
.pdp__flav{font-family:var(--f-body);font-style:italic;font-size:16px;opacity:.62;margin:10px 0 0;}

/* the ratio, set as the pack sets it: a column per cannabinoid */
.pdp__spec{margin:26px 0 0;border-top:1px solid var(--gold-faint);border-bottom:1px solid var(--gold-faint);}
.pdp__spec[hidden]{display:none;}
.pdp__spec--ratio{display:flex;}
.pdp__spec--ratio div{
  flex:1;padding:11px 4px;text-align:center;border-right:1px solid var(--gold-faint);
}
.pdp__spec--ratio div:last-child{border-right:0;}
.pdp__spec--ratio b{
  display:block;font-family:var(--f-display);font-size:26px;line-height:1;color:var(--gold-hi);
}
.pdp__spec--ratio span{
  display:block;margin-top:6px;font-family:var(--f-util);font-weight:700;
  font-size:8px;letter-spacing:.16em;opacity:.6;
}
.pdp__spec--plain p{
  margin:0;padding:14px 0;font-family:var(--f-util);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);
}

/* the rail: the same instrument as the homepage scale and the printed labels */
.pdp__rail{margin:24px 0 0;}
.pdp__rail-bar{
  position:relative;height:6px;
  background:linear-gradient(90deg,var(--sativa-deep) 0%,#1d3a2e 34%,#243a55 62%,var(--indica-deep) 100%);
}
.pdp__glow{
  position:absolute;top:50%;left:0;width:104px;height:104px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse,var(--tone,var(--gold)) 0%,transparent 62%);
  opacity:.15;transition:left .62s cubic-bezier(.32,.9,.28,1);
}
.pdp__mule{
  position:absolute;top:50%;left:0;width:46px;height:auto;
  transform:translate(-50%,-72%);
  transition:left .62s cubic-bezier(.32,.9,.28,1);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.85));
}
.pdp__rail-ends{
  display:flex;justify-content:space-between;align-items:center;margin-top:34px;
  font-family:var(--f-util);font-weight:700;font-size:8px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.pdp__rail-ends span{display:inline-flex;align-items:center;gap:8px;}
.pdp__rail-ends span:nth-child(2){opacity:.5;}
.pdp__scale{
  font-family:var(--f-util);font-weight:700;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tone,var(--gold-hi));margin:18px 0 0;
}
.pdp__desc{font-family:var(--f-body);font-size:15.5px;line-height:1.68;opacity:.82;margin:20px 0 0;max-width:52ch;}
.pdp__body .cta-row{margin-top:22px;}
.pdp__body .cta-row[hidden]{display:none;}
.pdp__dose{
  font-family:var(--f-util);font-weight:700;font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.5;margin:14px 0 0;
}

.pdp__rel{margin-top:36px;border-top:1px solid var(--gold-dim);padding-top:24px;}
.pdp__rel-h{
  font-family:var(--f-util);font-weight:700;font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px;
}
.pdp__rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.pdp__rel-item{
  display:block;text-align:left;background:none;border:0;padding:0;cursor:pointer;
  color:inherit;transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.pdp__rel-item:hover{transform:translateY(-4px);}
.pdp__rel-item img{width:100%;height:92px;object-fit:contain;display:block;background:var(--black);border:1px solid var(--gold-faint);}
.pdp__rel-item:hover img{border-color:var(--gold);}
.pdp__rel-item span{
  display:block;margin-top:7px;font-family:var(--f-util);font-weight:700;
  font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;opacity:.7;
}
.pdp__rel-item:hover span{opacity:1;color:var(--gold-hi);}

@media (max-width:860px){
  .pdp__in{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  .pdp__shot{grid-column:1;grid-row:1;}
  .pdp__body{grid-column:1;grid-row:2;}
  .pdp__rel{grid-column:1;grid-row:3;}
  .pdp__shot{aspect-ratio:4/3;}
  .pdp__x{top:12px;right:12px;}
}
@media (prefers-reduced-motion: reduce){
  .pdp__mule,.pdp__glow,.pdp__rel-item{transition:none;}
}

/* ============================================================
   The effects scale, working, above the grid it controls
   A dark control panel so the rail reads the same on an ivory section
   as on a black one: the gradient is built for a dark ground. Sits
   directly above the products so a pick and its result share one view.
   ============================================================ */
.scalefilter{
  margin:clamp(24px,3vw,36px) 0 clamp(26px,3.2vw,40px);
  background:var(--black);border:1px solid var(--gold-dim);
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px) clamp(20px,2.4vw,28px);
  color:var(--ivory);
}
.scalefilter__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
}
.scalefilter__lab{
  font-family:var(--f-util);font-weight:700;font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:0;flex:none;
}
.scalefilter__note{
  font-family:var(--f-body);font-size:13px;line-height:1.55;opacity:.52;margin:0;
  max-width:60ch;
}
.rail--filter{margin-top:0;padding-top:clamp(58px,6vw,78px);}
.rail--filter .rail__bar{height:12px;cursor:pointer;}
.rail--filter .rail__mule{width:clamp(56px,5.4vw,74px);bottom:4px;cursor:pointer;}
.rail--filter .rail__glow{width:150px;height:110px;}
.rail--filter .rail__ticks{margin-top:11px;}
.rail--filter .rail__ticks b{font-size:8.5px;letter-spacing:.2em;}
.scalefilter .scale__tabs{margin-top:clamp(18px,2.2vw,26px);gap:7px;}
.scalefilter .tab{padding:11px 14px;font-size:9px;}
/* The homepage scale marks its active tab with aria-selected; this one is a filter, so
   it uses aria-pressed and needs its own rule or the pick reads as unselected. */
.scalefilter .tab[aria-pressed="true"]{
  background:var(--tone,var(--gold));border-color:var(--tone,var(--gold));color:#000;
}
.scalefilter .tab[data-filter="all"][aria-pressed="true"]{
  background:var(--gold);border-color:var(--gold);color:#000;
}
.scalefilter .tab[disabled]{opacity:.28;cursor:not-allowed;border-style:dashed;}
.scalefilter .tab[disabled]:hover{border-color:var(--gold-dim);color:var(--ivory);}
@media (max-width:640px){
  .rail--filter{padding-top:clamp(46px,14vw,58px);}
  .scalefilter .tab{padding:10px 11px;font-size:8px;}
}

/* A whole section can be filtered out, and [hidden] must beat any display it carries. */
[data-group][hidden]{display:none;}

/* The facts band now opens the section it belongs to rather than standing as its own,
   so it needs the gap the section break used to provide. Adjacent sections on the same
   ground also collapse their doubled padding: two ivory sections back to back read as
   one very empty screen. */
.facts + .sec-head{margin-top:clamp(48px,5.5vw,76px);}
.sec.g-ivory + .sec.g-ivory,
.sec.g-black + .sec.g-black,
.sec.g-ink + .sec.g-ink{padding-top:0;}

/* A section that opens with the facts band starts tighter: the band is a slim rule-and-
   numbers strip, not a headline, so a full section's air above it just reads as a gap
   between the hero and the page. */
.sec--facts{padding-top:clamp(44px,5vw,72px);}

/* ============================================================
   AGE GATE
   Cannabis: every visitor confirms 21+ before the site is readable.
   The inline <head> script in every page sets html[data-age="ok"] before
   first paint when localStorage already holds the answer, so a returning
   visitor never sees this and a first-timer never sees a flash of the page
   behind it. Everything here keys off that one attribute.

   The page content is only COVERED, never display:none'd or removed, so it
   stays in the rendered DOM Google indexes. Do not "optimise" this into
   hiding <main>.
   ============================================================ */
.agegate{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);
  padding:var(--pad);
  overflow-y:auto;
}
html[data-age="ok"] .agegate{display:none;}
/* Scroll lock while the gate is up. Scoped to the attribute rather than a JS
   class so it is already in force on the very first paint. */
html:not([data-age="ok"]) body{overflow:hidden;}

.agegate__box{
  width:100%;max-width:560px;text-align:center;
  animation:agegate-in .3s ease both;
}
@keyframes agegate-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* height:auto is load-bearing. The file is 900x241 and carries width/height
   attributes, which the UA applies as presentational hints; setting only width
   in CSS leaves height pinned at 241px and the lockup renders squashed. */
.agegate__logo{
  width:min(280px,70vw);height:auto;margin:0 auto clamp(30px,5vw,44px);
}
.agegate__h{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(34px,7.5vw,58px);line-height:.98;
  letter-spacing:.005em;text-transform:uppercase;
  margin:0 0 16px;color:var(--ivory);
}
.agegate__lede{
  margin:0 auto clamp(28px,4.5vw,38px);max-width:34ch;
  color:rgba(249,246,231,.72);font-size:16px;line-height:1.6;
}
.agegate__acts{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}
.agegate__acts .btn{justify-content:center;}
/* Body face, sentence case, no tracking. This is a sentence someone has to read
   and agree to, not a utility label -- extended caps at 9.5px and 38% opacity
   came out around 3.2:1 contrast, under the 4.5:1 floor for small text. */
.agegate__fine{
  margin:clamp(28px,4.5vw,38px) auto 0;max-width:46ch;
  font-family:var(--f-body);font-size:13px;line-height:1.65;
  color:rgba(249,246,231,.62);
}

/* A hairline echo of the packaging frame, so the gate reads as Mule and not as
   a browser dialog. Decoration only, hence aria-hidden on the element. */
.agegate__rule{
  width:64px;height:1px;background:var(--gold);margin:0 auto 26px;
}

/* Side by side down to the narrowest common phone; a full-width NO gives leaving
   the same visual weight as entering, which is not the balance we want. */
@media (max-width:359px){
  .agegate__acts{flex-direction:column;}
  .agegate__acts .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .agegate__box{animation:none;}
}

/* ==== GENERATED from pagegen/ -- rewritten every build, do not edit ==== */
/* --- cities --- */
/* The hero numbers strip: .lookup's shape (border, dark fill, gold display
   numbers, small caps labels) without the search form riding above it, so
   no leftover top border. Breakpoints mirror .lookup__facts for the same
   reason -- the hero stacks at 900px, so the aside stops being a sidebar
   and is wide enough for all four numbers in one row. */
.cty-glance{
  border:1px solid var(--gold-dim);background:rgba(8,7,5,.78);
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;
}
.cty-glance div{padding:16px 18px;display:flex;flex-direction:column;gap:4px;justify-content:center;}
.cty-glance div:nth-child(odd){border-right:1px solid var(--gold-dim);}
.cty-glance div:nth-child(-n+2){border-bottom:1px solid var(--gold-dim);}
.cty-glance b{
  font-family:var(--f-display);font-weight:400;line-height:1;color:var(--gold);
  font-size:clamp(20px,2vw,27px);letter-spacing:.02em;
}
.cty-glance span{
  font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;opacity:.68;line-height:1.45;
}
@media (max-width:900px){
  .cty-glance{grid-template-columns:repeat(4,1fr);}
  .cty-glance div:nth-child(odd){border-right:0;}
  .cty-glance div:nth-child(-n+3){border-right:1px solid var(--gold-dim);}
  .cty-glance div:nth-child(-n+2){border-bottom:0;}
}
@media (max-width:640px){
  .cty-glance{grid-template-columns:1fr 1fr;}
  .cty-glance div:nth-child(-n+3){border-right:0;}
  .cty-glance div:nth-child(odd){border-right:1px solid var(--gold-dim);}
  .cty-glance div:nth-child(-n+2){border-bottom:1px solid var(--gold-dim);}
}

/* Portland's quadrant accordion. Native <details>, so it works with no
   script of its own and the collapsed groups still ship in the markup for
   anything reading the page rather than clicking it. */
.cty-fold{border-top:1px solid var(--gold-faint);}
.cty-fold:last-of-type{border-bottom:1px solid var(--gold-faint);}
.cty-fold > summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 2px;cursor:pointer;list-style:none;
  font-family:var(--f-util);font-weight:700;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;
}
.cty-fold > summary::-webkit-details-marker{display:none;}
.cty-fold > summary:hover{color:var(--gold-hi);}
.cty-fold > summary b{color:var(--gold);font-weight:700;}
.cty-fold > summary::after{content:" +";color:var(--gold-hi);}
.cty-fold[open] > summary::after{content:" \2013";}
.cty-fold__panel{padding:4px 0 26px;}

/* --- faq --- */
/* A row of link-more jumps, not a chip bar -- chips on this site are reserved
   for the real filter controls (fchip/tab), so a jump nav borrows link-more
   instead of inventing a second pill language. */
.faq-jump{display:flex;flex-wrap:wrap;column-gap:34px;row-gap:14px;margin-top:32px}

/* Question/answer rows, styled off the site's own label-left content-right
   rhythm (see .sec-head) rather than an accordion widget -- the page is short
   enough that everything visible, well set, reads better than a click to
   reveal, and it keeps every answer in the same place a reader already
   found it in search. */
.faq-list{margin-top:clamp(30px,3.6vw,46px)}
.faq-row{
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);
  padding:clamp(28px,3.4vw,42px) 0;border-top:1px solid var(--gold-dim);
}
.faq-row:first-child{border-top:0;padding-top:0}
.g-ivory .faq-row{border-top-color:rgba(0,0,0,.22)}
.faq-row h3{
  flex:1 1 280px;max-width:360px;margin:0;
  font-family:var(--f-body);font-weight:600;font-size:clamp(17px,1.55vw,19px);line-height:1.42;
}
.faq-row__a{flex:2 1 400px;max-width:62ch}
.faq-row__a p{margin:0 0 13px;font-size:15.5px;line-height:1.72;opacity:.82}
.faq-row__a p:last-child{margin-bottom:0}
.faq-row__a a{color:var(--gold-hi);border-bottom:1px solid var(--gold-dim)}
.g-ivory .faq-row__a a{color:#000;border-bottom-color:rgba(0,0,0,.3)}
.faq-row__a a:hover{border-color:currentColor}

@media (max-width:640px){
  .faq-row{padding:22px 0;gap:10px}
  .faq-row h3{max-width:none;font-size:16.5px}
}

/* --- products --- */
/* Every product page carries its own --tone/--glow (set inline, per product,
   from ctx.TONE/ctx.STOP_GLOW). The rules below only ever spend it on a black
   ground -- the same restraint the rest of the site already uses for these
   colors (the homepage's #scale panel and the pdp dialog are both dark) --
   so the accent reads as a signal on top of the black/ivory/gold system,
   never a second palette.

   Everything staged here is a NEW selector scoped under .pdet/.pdet-*; no
   shared rule (.eyebrow, .pdp__spec--ratio, .rail__glow...) is edited. */

/* --- hero: the render standing on the same glow it stands on down on the
   rail, so the page's accent is legible the moment it loads, not just once
   you scroll to the scale. No family photo behind it on a single-SKU page --
   it would only compete with the one product this page is about. */
.pdet-phero .eyebrow{color:var(--tone);}
.pdet-phero .lede{position:relative;}
.pdet-phero .lede::after{
  content:"";display:block;width:56px;height:1px;background:var(--tone);
  margin-top:26px;
}
.pdet-hero{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:220px;}
.pdet-hero__glow{
  position:absolute;left:50%;top:44%;width:clamp(340px,40vw,520px);height:clamp(340px,40vw,520px);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse,var(--glow) 0%,transparent 72%);
  mix-blend-mode:screen;filter:saturate(1.6);
}
.pdet-hero img{
  position:relative;width:clamp(180px,20vw,300px);display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.75));
}

/* --- spotlight: the ratio is what places this product on the rail, so its
   numbers carry the same color the rail marks it with. */
.pdet-tone .pdp__spec--ratio b{color:var(--tone);}

/* --- the rail, standing on its own dark panel when the section around it is
   ivory -- the same reason scale_filter wraps itself in one: the instrument
   reads the same wherever it sits, and gold/tone both need a dark ground to
   read the way they do everywhere else on the site. */
.pdet-panel{
  background:var(--black);border:1px solid var(--gold-dim);color:var(--ivory);
  padding:clamp(30px,3.6vw,46px) clamp(24px,3.4vw,40px) clamp(26px,3vw,36px);
  margin-top:clamp(28px,3.4vw,40px);
}
.pdet-panel .rail{margin-top:0;}

/* --- related-products row: same grid as the lightbox (pdp__rel-grid) at
   desktop, but this sits in normal page flow rather than a scrollable
   dialog, so it gets its own mobile column count instead of staying
   cramped at 3-up. */
@media (max-width:900px){
  .pdet-rel{grid-template-columns:repeat(2,1fr);}
  .pdet-hero{min-height:190px;margin-top:6px;}
  .pdet-hero img{width:clamp(150px,44vw,210px);}
  .pdet-hero__glow{width:clamp(230px,66vw,320px);height:clamp(230px,66vw,320px);}
  .pdet-panel{padding:clamp(24px,6vw,34px) 20px clamp(20px,5vw,28px);}
}
/* ==== END GENERATED ==== */

/* --- crawlable index of child pages (products, cities) --- */
.pidx{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--gold-faint);border:1px solid var(--gold-faint);}
.pidx__item{
  background:var(--ink);padding:15px 18px;display:flex;flex-direction:column;gap:4px;
  transition:background .2s ease;
}
.pidx__item:hover{background:rgba(162,141,91,.1);}
.pidx__item b{font-family:var(--f-body);font-weight:700;font-size:15px;line-height:1.3;}
.pidx__item span{font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.8;}

/* --- footer index band: every product and city page --- */
.foot__index{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(22px,3vw,44px);
  border-top:1px solid var(--gold-faint);margin-top:clamp(30px,4vw,46px);padding-top:clamp(26px,3.4vw,38px);
}
.foot__idxcol h5{
  font-family:var(--f-util);font-weight:700;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;
}
.foot__idxlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:7px 18px;}
.foot__idxlinks a{font-size:13px;line-height:1.35;opacity:.62;}
.foot__idxlinks a:hover{opacity:1;color:var(--gold-hi);}