/* ============================================================
   Justamere Trading Post — "APOTHECARY TRADE LABEL" identity
   Victorian herbalist trade-label look: Libre Caslon display,
   walnut ink on warm parchment, oxblood primary, turquoise-stone
   garnish (the jewelry), aged-brass rules. Registry-distinct:
   no shipped site uses Libre Caslon or oxblood-on-parchment.
   Signatures: speclabel double-rule specimen frames w/ corner
   ticks, tilewall framed photo mosaic, hanging tea tags, the
   circular est. seal, engraved leaf rules.
   ============================================================ */
:root{
  --font-head:'Libre Caslon Display',Georgia,serif;
  --font-body:'Mulish',-apple-system,sans-serif;
  --cap-font:var(--font-body);
  --h1-min:40px;--h1-vw:5.4vw;--h1-max:72px;--h1-lh:1.06;--h1-ls:0px;--h1-w:400;
  --h2-min:29px;--h2-vw:3.5vw;--h2-max:46px;--h2-lh:1.12;--h2-ls:0px;--h2-w:400;--h3-w:600;
  --maxw:1170px;--section-y:clamp(64px,8.5vw,118px);

  --ink:#2f261b;--body:#4a4033;--mut:#837763;
  --bg:#f7f0e1;--bg-soft:#efe6d2;--line:#dccfb4;
  --brand:#7a2e20;--accent:#7a2e20;--accent-2:#2f9187;

  --nav-fg:rgba(250,244,232,.95);--nav-fg-scrolled:var(--body);--nav-bg-scrolled:rgba(247,240,225,.97);
  --menu-bg:var(--bg);--menu-fg:var(--body);
  --foot-bg:#241c12;--foot-fg:#b3a68e;--foot-rule:var(--accent-2);
  --foot-cols:2fr 1fr 1.1fr 1.3fr;
  --head-overlay-a:rgba(36,28,18,.6);--head-overlay-b:rgba(36,28,18,.86);
  --check-glyph:"✦";
  --hero-vh:86vh;--hero-cap:880px;

  --hero-scrim:linear-gradient(180deg,rgba(36,28,18,.28),rgba(36,28,18,.6));
  --img-grade:saturate(1.06) contrast(1.03) sepia(.04);
  --shadow:0 22px 46px rgba(47,38,27,.18);--shadow-sm:0 10px 24px rgba(47,38,27,.12);
  --radius:2px;--btn-radius:2px;
  --nav-h:86px;--nav-h-scrolled:62px;--ul-h:1px;
  --reveal-ease:cubic-bezier(.19,1,.22,1);
}
h1,h2,h3{font-family:var(--font-head)}
em{font-style:italic;color:var(--brand)}
.btn-primary{background:var(--brand);color:#f9f2e4;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:13.5px;
  box-shadow:0 12px 26px rgba(122,46,32,.32);border:1px solid #5f2318}
.btn-primary:hover{background:#652518;transform:translateY(-1px)}
.btn-line{border-color:var(--ink);color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;font-weight:800}
.section.soft{background:var(--bg-soft)}
.section.dark{background:#241c12;color:#d9ccb2}
.section.dark h2,.section.dark h3{color:#f4ecdb}
.section.dark .lead,.section.dark p{color:#bfb296}

/* wordmark */
.logo{display:flex;align-items:center;gap:13px}
.mark{border-radius:50%}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wm-name{font-family:var(--font-head);font-size:20px;color:#fff;letter-spacing:.4px}
.wm-sub{font-size:9px;font-weight:800;letter-spacing:3.4px;text-transform:uppercase;color:#d8b46a;margin-top:5px}
.nav.scrolled .wm-name{color:var(--ink)}
.nav.scrolled .wm-sub{color:var(--brand)}

/* hero */
.hero .scrim{background:var(--hero-scrim)}
.hero h1{text-shadow:0 3px 26px rgba(0,0,0,.45);max-width:18ch}
.hero .lead{color:#f0e7d2;max-width:56ch;margin:18px 0 28px}
.heroline{display:inline-flex;align-items:center;gap:12px;margin-top:30px;
  font-size:11.5px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#e8d9ae}
.heroline::before,.heroline::after{content:"";width:40px;height:1px;background:#c8a75f}

/* SIGNATURE 1: speclabel — apothecary specimen label card.
   Double rule + corner ticks + small-caps kicker plate. */
.speclabel{position:relative;background:#fbf6ea;border:1px solid var(--ink);padding:26px 24px;
  box-shadow:inset 0 0 0 4px #fbf6ea,inset 0 0 0 5px rgba(47,38,27,.55)}
.speclabel::before,.speclabel::after{content:"";position:absolute;width:12px;height:12px;
  border-color:var(--brand);border-style:solid}
.speclabel::before{top:-4px;left:-4px;border-width:2px 0 0 2px}
.speclabel::after{bottom:-4px;right:-4px;border-width:0 2px 2px 0}
.speclabel .sl-kicker{display:inline-block;font-size:10px;font-weight:800;letter-spacing:2.8px;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:12px}
.speclabel h3{margin:0 0 10px;font-size:24px}
.speclabel p{margin:0;color:var(--mut);font-size:15.5px}
.slgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* SIGNATURE 2: tilewall — framed square photo mosaic (414px-honest:
   photos never render above ~420px wide, always inside a plate frame). */
.tilewall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:640px}
.tile{background:#fbf6ea;border:1px solid var(--ink);padding:10px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--reveal-ease),box-shadow .3s}
.tile:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;filter:var(--img-grade)}
.tile .plate{display:block;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--mut);padding:10px 4px 2px}
.tilewall.wall3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}

/* SIGNATURE 3: hanging tea tags — blend names as kraft tags on a rail */
.tagrail{display:flex;flex-wrap:wrap;gap:14px;padding:26px 0 6px;border-top:1px solid var(--line)}
.tag{position:relative;background:#efe3c8;border:1px solid #b09a6d;color:#5d5138;
  font-size:13px;font-weight:800;letter-spacing:.6px;padding:11px 18px 11px 30px;
  clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);transform:rotate(-1.2deg)}
.tag:nth-child(2n){transform:rotate(1deg)}
.tag:nth-child(3n){transform:rotate(-.4deg)}
.tag::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid #8f7a4e}
.tag.tq{background:#dff0ec;border-color:#5f9b92;color:#22544d}

/* SIGNATURE 4: est-seal — stamped circular seal */
.est-seal{width:130px;height:130px;flex:0 0 auto}
.est-seal svg{width:100%;height:100%;transform:rotate(-8deg)}

/* engraved leaf rule between sections */
.leafrule{display:flex;align-items:center;gap:16px;justify-content:center;margin:0 auto;max-width:520px;color:#a58e5f}
.leafrule::before,.leafrule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#c3ad7e)}
.leafrule::after{background:linear-gradient(90deg,#c3ad7e,transparent)}
.leafrule svg{width:26px;height:26px}

/* split layouts */
.shopsplit{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,72px);align-items:center}
.stat-ribbon{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:center}
.stat-ribbon .st{padding:26px 12px;background:#fbf6ea;border:1px solid var(--line)}
.stat-ribbon .n{font-family:var(--font-head);font-size:clamp(32px,4.4vw,50px);color:var(--brand);line-height:1}
.stat-ribbon .l{font-size:11px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--mut);margin-top:9px}

/* review quote plates */
.quoteplate{background:#fbf6ea;border:1px solid var(--line);border-top:3px solid var(--accent-2);padding:24px;font-size:15.5px;color:var(--body)}
.quoteplate .who{margin-top:12px;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

@media(max-width:1000px){.slgrid,.qgrid{grid-template-columns:1fr 1fr}.shopsplit{grid-template-columns:1fr}.tilewall{max-width:none}}
@media(max-width:640px){
  .slgrid,.qgrid{grid-template-columns:1fr}
  .tilewall,.tilewall.wall3{grid-template-columns:1fr 1fr;gap:12px}
  .stat-ribbon{grid-template-columns:1fr}
  .est-seal{width:104px;height:104px}
}

/* visit contact rows: constrain icons */
.crow{display:flex;gap:14px;align-items:flex-start;margin:16px 0}
.crow svg{width:26px;height:26px;flex:0 0 auto;color:var(--brand)}

/* ===== full tea list (teabook ledger) ===== */
.teabook{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin-top:30px}
.teabook .entry{background:#fbf6ea;border:1px solid var(--line);border-left:3px solid var(--accent-2);padding:15px 18px}
.teabook .entry b{display:block;font-family:var(--font-head);font-weight:400;font-size:19.5px;color:var(--ink);margin-bottom:5px}
.teabook .entry span{font-size:13.5px;color:var(--mut);line-height:1.5}
.teanote{font-size:13.5px;color:var(--mut);margin-top:18px;max-width:72ch}
.pricechip{display:inline-flex;align-items:center;gap:10px;background:#241c12;color:#e8d9ae;font-weight:800;
  letter-spacing:.4px;padding:12px 20px;border-radius:2px;font-size:15.5px;margin:8px 0 4px}
.pricechip small{font-weight:600;color:#b8a888;letter-spacing:0}
.brewgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.brewgrid .r{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dotted var(--line);font-size:14.5px}
.brewgrid .r:last-child{border-bottom:0}
.brewgrid .r i{font-style:normal;color:var(--mut)}
/* storefront band */
.storeband{position:relative}
.storeband img{width:100%;height:clamp(320px,48vw,560px);object-fit:cover;display:block;filter:var(--img-grade)}
.storeband .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 20px;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(21,16,9,.78));color:#f0e7d2;font-size:13px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase}
@media(max-width:760px){.teabook,.brewgrid{grid-template-columns:1fr}}

/* ===== 25% off sterling promo ===== */
.promobar{display:block;background:linear-gradient(90deg,#25736b,#2f9187 50%,#25736b);color:#f2fbf9;text-align:center;
  padding:11px 14px;font-size:12.5px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;line-height:1.4}
.promobar b{color:#ffe9a8}
.promobar:hover{background:linear-gradient(90deg,#20655e,#28776f 50%,#20655e)}
.salechip{display:inline-flex;align-items:center;gap:10px;background:#2f9187;color:#fff;border:1px solid #7fd6ca;
  padding:12px 22px;border-radius:2px;font-size:14px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  box-shadow:0 14px 30px rgba(20,60,55,.35);transform:rotate(-1deg);margin:18px 0 6px}
.salechip .pct{font-family:var(--font-head);font-size:26px;letter-spacing:0;color:#ffe9a8}
.saleflag{display:inline-block;background:#2f9187;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;padding:5px 10px;border-radius:2px;margin-bottom:12px}

/* ===== mobile nav: ALL pages visible at the top as tap pills (no burger) ===== */
@media(max-width:860px){
  :root{--nav-h:148px;--nav-h-scrolled:148px}
  .nav .burger{display:none!important}
  .nav .wrap{height:auto!important;min-height:0;flex-direction:column;gap:10px;padding:12px 0 12px}
  .logo{justify-content:center}
  .nav .links{position:static!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap;
    justify-content:center;gap:7px 6px;background:transparent!important;box-shadow:none!important;border:0!important;
    padding:0 10px!important;max-height:none!important;overflow:visible!important;width:100%}
  .nav .links a{width:auto!important;font-size:12.5px;font-weight:800;letter-spacing:.5px;padding:8px 13px!important;
    border:1px solid rgba(240,231,210,.4);border-radius:999px;color:var(--nav-fg);line-height:1;white-space:nowrap}
  .nav.scrolled .links a{border-color:#c9b993;color:var(--nav-fg-scrolled)}
  .nav .links a.active{background:#7a2e20;border-color:#7a2e20;color:#f9f2e4!important}
}

/* hero holds REAL product photos (tilewall), not just copy: the shared motion
   script fades + drifts .hero .wrap on scroll, which faded the pictures away.
   Inline styles win unless we force these. */
.hero .wrap{opacity:1!important;transform:none!important}