/* ==========================================================================
   STACKO — content pages
   About, Where to Buy, FAQ, Contact, Trade, Allergens, legal, 404.
   Depends on stacko.css.
   ========================================================================== */

[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1);}
[data-reveal].is-in{opacity:1;transform:none;}
[data-reveal][data-delay="1"]{transition-delay:.08s;}
[data-reveal][data-delay="2"]{transition-delay:.16s;}

/* --- Page masthead ------------------------------------------------------- */
.phero{
  position:relative;overflow:hidden;
  margin-top:calc(var(--hdr-h) * -1);
  padding:calc(var(--hdr-h) + clamp(46px,9vh,100px)) var(--gutter) clamp(40px,7vh,76px);
  background:radial-gradient(120% 100% at 50% 12%,var(--flavor-light),var(--flavor) 48%,var(--flavor-dark) 100%);
  text-align:center;
}
.phero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(23,11,4,.5) 1.3px,transparent 1.6px);
  background-size:13px 13px;opacity:.22;
}
.phero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;}
.phero__h1{
  font-family:var(--display);text-transform:uppercase;line-height:.88;
  font-size:clamp(32px,6.6vw,84px);
  -webkit-text-stroke:clamp(2px,.36vw,3px) var(--ink);
  text-shadow:7px 7px 0 rgba(23,11,4,.34);
}
.phero__lede{max-width:46ch;font-size:clamp(14px,1.4vw,17px);font-weight:700;}

/* --- Prose --------------------------------------------------------------- */
.page{background:var(--ink);}
.page__wrap{max-width:820px;margin-inline:auto;}
.page__wrap--wide{max-width:1060px;}
.prose p{margin-bottom:18px;line-height:1.8;font-size:15px;}
.prose p:last-child{margin-bottom:0;}
.prose h2{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(20px,2.8vw,30px);line-height:1.05;
  margin:38px 0 16px;color:var(--pop);
}
.prose h3{
  font-family:var(--heading);text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(16px,2vw,21px);margin:26px 0 10px;
}
.prose ul{margin:0 0 18px 0;display:grid;gap:9px;}
.prose li{position:relative;padding-left:22px;line-height:1.75;font-size:15px;}
.prose li::before{content:"▸";position:absolute;left:0;color:var(--pop);}
.prose a{border-bottom:2px solid var(--pop);}
.prose a:hover{color:var(--pop);}
.prose strong{color:var(--pop);}
/* pull quotes are speech bubbles, not a left rule — it's a comic, after all */
.prose blockquote{
  position:relative;margin:26px 0 34px;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);border-radius:24px;
  padding:20px 24px;font-size:16px;line-height:1.7;font-weight:700;
  box-shadow:var(--hard);
}
.prose blockquote::after{
  content:"";position:absolute;left:38px;bottom:-18px;
  width:0;height:0;
  border:9px solid transparent;
  border-top:18px solid var(--ink);
}
.prose blockquote strong{color:var(--flavor);}

/* --- Notice / pending banner --------------------------------------------- */
.notice{
  border:3px solid var(--pop);background:rgba(255,230,0,.08);
  padding:18px 20px;margin-bottom:28px;font-size:14px;line-height:1.7;
}
.notice b{font-family:var(--display);display:block;text-transform:uppercase;font-size:13px;margin-bottom:6px;color:var(--pop);}

/* --- FAQ groups ---------------------------------------------------------- */
.faqgroup{margin-bottom:38px;}
.faqgroup__h{
  font-family:var(--display);text-transform:uppercase;color:var(--pop);
  font-size:clamp(15px,2vw,20px);margin-bottom:16px;
}

/* --- Card grids (stockists, trade specs, contact) ------------------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.card{
  border:3px solid var(--paper);padding:20px;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .16s ease,box-shadow .16s ease;
}
.card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--flavor);}
.card h3{font-family:var(--display);font-size:15px;text-transform:uppercase;}
.card p{font-size:13px;line-height:1.7;opacity:.85;}

.spec{width:100%;border-collapse:collapse;font-size:14px;}
.spec th,.spec td{border:2px solid rgba(255,255,255,.3);padding:11px 13px;text-align:left;}
.spec th{
  font-family:var(--display);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;width:44%;background:rgba(255,255,255,.05);
}

/* --- Forms --------------------------------------------------------------- */
.form{display:grid;gap:14px;max-width:560px;}
.form label{font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;display:block;}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:3px solid var(--paper);
  padding:13px 15px;font-size:14px;color:var(--paper);
}
.field textarea{min-height:140px;resize:vertical;}
.field select{appearance:none;background:var(--ink);}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.4);}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--pop);outline:none;}

/* --- Allergens hub ------------------------------------------------------- */
.allergen{border:3px solid var(--paper);padding:22px;margin-bottom:18px;}
.allergen__h{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(16px,2.2vw,22px);
  margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.allergen__num{font-family:var(--heading);font-size:13px;opacity:.6;letter-spacing:.16em;}
.allergen p{font-size:13px;line-height:1.75;}
.allergen strong{color:var(--pop);}

/* --- 404 ----------------------------------------------------------------- */
.oops{
  min-height:calc(100svh - var(--hdr-h));
  margin-top:calc(var(--hdr-h) * -1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;padding:var(--gutter);
  background:radial-gradient(120% 100% at 50% 30%,var(--flavor-light),var(--flavor) 46%,var(--flavor-dark) 100%);
}
.oops__code{
  font-family:var(--heading);font-size:clamp(90px,26vw,300px);line-height:.8;
  -webkit-text-stroke:clamp(3px,.6vw,6px) var(--ink);text-shadow:10px 10px 0 rgba(23,11,4,.35);
}
.oops__h{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,4.6vw,54px);-webkit-text-stroke:2px var(--ink);}

@media (max-width:640px){
  .prose blockquote{padding-left:14px;}
  .spec th{width:auto;}
}