/* ============================================================
   LORE Storefront — shared brand V3 stylesheet
   Ink #0B0B0B / Cream #F6F1E8 / Gold #C9A961 — Cinzel + EB Garamond
   Extends the live loreinc.global design language for the catalog store.
   Used by: index.html (store home), every SKU page (sku-template.html).
   ============================================================ */
:root{
  --ink:#0B0B0B; --cream:#F6F1E8; --gold:#C9A961; --gold-deep:#A8842F;
  --ink-70:rgba(11,11,11,0.70); --ink-45:rgba(11,11,11,0.45); --ink-15:rgba(11,11,11,0.15);
  --ink-06:rgba(11,11,11,0.06);
  --cream-70:rgba(246,241,232,0.70); --cream-40:rgba(246,241,232,0.40); --cream-18:rgba(246,241,232,0.18);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--cream);color:var(--ink);
  font-family:'EB Garamond',Georgia,serif;font-size:1.25rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px;}
.col{max-width:34em;}
.cinzel{font-family:'Cinzel',serif;}

.eyebrow{font-family:'Cinzel',serif;font-size:0.78125rem;font-weight:500;
  letter-spacing:0.32em;text-transform:uppercase;color:var(--gold-deep);}
.numeral{font-family:'Cinzel',serif;font-weight:400;font-size:0.9375rem;
  letter-spacing:0.30em;color:var(--ink-45);
  display:flex;align-items:center;gap:16px;margin-bottom:30px;}
.numeral::after{content:"";flex:1;height:1px;background:var(--ink-15);}
.numeral.on-ink{color:var(--cream-40);}
.numeral.on-ink::after{background:var(--cream-18);}

h1{font-family:'Cinzel',serif;font-weight:500;
  font-size:clamp(2.125rem,5.4vw,3.875rem);line-height:1.16;letter-spacing:0.005em;}
h2{font-family:'Cinzel',serif;font-weight:400;
  font-size:clamp(1.6875rem,3.6vw,2.625rem);line-height:1.26;letter-spacing:0.01em;}
h3{font-family:'Cinzel',serif;font-weight:400;font-size:1.4375rem;letter-spacing:0.02em;}
p.lede{font-size:clamp(1.1875rem,2vw,1.4375rem);line-height:1.66;color:var(--ink-70);}
.gold-rule{width:58px;height:1px;background:var(--gold);}

/* ---- buttons ---- */
.btn{display:inline-block;text-decoration:none;font-family:'Cinzel',serif;
  font-size:0.84375rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  padding:19px 44px;border:1px solid var(--ink);color:var(--ink);background:transparent;
  transition:background .22s ease,color .22s ease;cursor:pointer;}
.btn:hover{background:var(--ink);color:var(--cream);}
.btn.solid{background:var(--ink);color:var(--cream);}
.btn.solid:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--cream);}
.btn.on-ink{border-color:var(--cream);color:var(--cream);}
.btn.on-ink:hover{background:var(--cream);color:var(--ink);}
.btn.on-ink.solid{background:var(--cream);color:var(--ink);}
.btn.lg{font-size:0.875rem;letter-spacing:0.22em;padding:22px 56px;}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.btn.on-ink.solid:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;
  background:rgba(246,241,232,0.93);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--ink-15);}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;
  max-width:1120px;margin:0 auto;padding:18px 40px;}
/* The wordmark is a LINK (it goes home) and was measured at 65x31 — under the 44px target.
   It gets no 2.5.8 exemption: it is not inline in a sentence, and no other control on the
   page goes home, so the "equivalent control" exception does not apply either. */
.nav .brand{display:flex;align-items:center;text-decoration:none;min-height:44px;}
.brand-word{font-size:1.375rem;font-weight:600;letter-spacing:0.16em;color:var(--ink);}
.tm{font-size:0.5em;letter-spacing:0;top:-0.8em;}
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{text-decoration:none;font-family:'Cinzel',serif;font-size:0.8125rem;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--ink);transition:color .18s ease;}
.nav-links a:hover{color:var(--gold-deep);}
.nav-links a.cta{color:var(--cream);background:var(--ink);
  padding:10px 20px;border:1px solid var(--ink);transition:background .2s ease;}
.nav-links a.cta:hover{background:var(--gold-deep);color:var(--cream);}

/* ---- hero ---- */
.hero{padding:96px 0 84px;border-bottom:1px solid var(--ink-15);}
.hero h1{margin:20px 0 26px;}
.hero .lede{margin-bottom:36px;}
.hero-cta{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:30px;}
.hero-sub{font-size:1rem;line-height:1.6;color:var(--ink-70);max-width:40em;}
.hero-sub strong{color:var(--ink);}

/* ---- aisle picker ---- */
.aisles{padding:84px 0;}
.aisles h2{margin-bottom:16px;}
.aisles .lede{margin-bottom:44px;}
.aisle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.aisle-card{display:block;text-decoration:none;background:#fff;
  border:1px solid var(--ink-15);padding:34px 30px 30px;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.aisle-card:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 18px 40px -24px rgba(11,11,11,0.4);}
.aisle-ico{font-size:2.125rem;display:block;margin-bottom:16px;line-height:1;}
.aisle-card h3{margin-bottom:12px;}
.aisle-card p{font-size:1.0625rem;line-height:1.6;color:var(--ink-70);margin-bottom:20px;}
.aisle-fix{font-family:'Cinzel',serif;font-size:0.78125rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold-deep);}
.aisle-card--soon{background:var(--ink-06);border-style:dashed;}

/* ---- aisle shelves ---- */
.aisle-shelf{padding:72px 0;border-top:1px solid var(--ink-15);}
.aisle-shelf--alt{background:#fff;}
.shelf-head{display:flex;gap:22px;align-items:flex-start;margin-bottom:40px;}
.shelf-ico{font-size:2.75rem;line-height:1;flex-shrink:0;}
.shelf-head h2{margin:6px 0 12px;}
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tile{display:block;text-decoration:none;position:relative;
  border:1px solid var(--ink-15);background:var(--cream);padding:28px 26px;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.aisle-shelf--alt .tile{background:var(--cream);}
.tile h3{font-size:1.3125rem;margin-bottom:10px;}
.tile p{font-size:1rem;line-height:1.55;color:var(--ink-70);margin-bottom:18px;}
.tile--live{cursor:pointer;}
.tile--live:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 18px 40px -24px rgba(11,11,11,0.4);}
.tile-tag{position:absolute;top:14px;right:14px;font-family:'Cinzel',serif;
  font-size:0.65625rem;letter-spacing:0.16em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);padding:4px 10px;}
.tile-price{font-family:'Cinzel',serif;font-size:1.625rem;color:var(--ink);}
.tile-price span{font-family:'EB Garamond',serif;font-size:0.875rem;color:var(--ink-45);letter-spacing:0;}
.tile-soon{font-family:'Cinzel',serif;font-size:0.71875rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-45);}
.tile--soon{border-style:dashed;opacity:0.92;}
.tile--req{border-style:dashed;background:var(--ink-06);}

/* ---- how it works (on ink) ---- */
.how{background:var(--ink);color:var(--cream);padding:88px 0;}
.how h2{color:var(--cream);margin-bottom:44px;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.step-n{font-family:'Cinzel',serif;font-size:1.875rem;color:var(--gold);
  display:block;margin-bottom:14px;}
.step h3{color:var(--cream);margin-bottom:10px;}
.step p{font-size:1.0625rem;line-height:1.62;color:var(--cream-70);}

/* ---- promise ---- */
.promise{padding:88px 0;}
.promise h2{margin-bottom:44px;}
.promise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.promise-card{border-left:2px solid var(--gold);padding:6px 0 6px 26px;}
.promise-card h3{margin-bottom:10px;}
.promise-card p{font-size:1.0625rem;line-height:1.62;color:var(--ink-70);}
.promise-cta{margin-top:48px;}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--cream);padding:60px 0 40px;}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:34px;border-bottom:1px solid var(--cream-18);}
.foot-brand .brand-word{color:var(--cream);}
.foot-brand p{font-size:1rem;color:var(--cream-70);margin-top:12px;max-width:26em;}
/* THE TOUCH-TARGET RULE WAS WRITTEN FOR `.nav-links a` AND THEREFORE PROVED NOTHING ABOUT
   THE FOOTER. The D4 gate reads DECLARATIONS, found a min-height:44px in this stylesheet
   and passed all 21 files; the RENDERED reading says these four links were 218x22 at every
   width — half the WCAG 2.5.5 / Apple HIG target and under even the 24px AA floor of 2.5.8.
   A gate that asks "was the rule written?" cannot ask "for which selectors?", so a target
   the rule never matched reads exactly like one it covers. Only the bounding box says
   otherwise — the same lesson the .cta rule below records, met one selector over.
   gap drops 12px -> 2px because the height now carries the rhythm: pitch goes 34px -> 46px
   rather than 34px -> 56px, so the footer grows by ~36px instead of ~88px.
   These stay `display:flex` (not inline-flex): as items of a column flex container they
   remain stretched to full width, and inline-flex would SHRINK the hit area horizontally
   from 218px to the width of the glyphs — fixing one axis by breaking the other. */
.foot-links{display:flex;flex-direction:column;gap:2px;}
.foot-links a{text-decoration:none;font-family:'Cinzel',serif;font-size:0.8125rem;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--cream-70);transition:color .18s ease;
  display:flex;align-items:center;min-height:44px;}
.foot-links a:hover{color:var(--gold);}
.foot-legal{padding-top:26px;}
.foot-legal p{font-size:0.8125rem;line-height:1.6;color:var(--cream-40);max-width:60em;}

/* ---- SKU page (sku-template.html / genre pages) ---- */
.sku-hero{padding:64px 0 56px;border-bottom:1px solid var(--ink-15);}
.sku-crumb{font-family:'Cinzel',serif;font-size:0.75rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:22px;}
.sku-crumb a{text-decoration:none;color:var(--gold-deep);}
.sku-hero h1{font-size:clamp(1.875rem,4.6vw,3.25rem);margin:8px 0 22px;}
.sku-hero .lede{margin-bottom:30px;}
.painbar{background:var(--ink);color:var(--cream);padding:26px 34px;margin:34px 0;
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;}
.painbar .stat{font-family:'Cinzel',serif;font-size:1.625rem;color:var(--gold);}
/* `min-width:16em` was an UNCONDITIONAL floor, and a floor taller than the room is an
   overflow. At 320px the painbar's content box is 210px while 16em resolves to 272px, so
   this paragraph rendered to x=330 against a 326px viewport — 4px of horizontal scroll on
   every SKU page carrying a painbar. PRE-EXISTING, not introduced by the touch-target work
   above: proven by neutralising that change in the live DOM and re-measuring, which left
   scrollWidth at 330 unmoved. The text scan cannot see this at all — every declaration
   here is individually valid and the defect only exists once the layout engine resolves
   `em` against a container the stylesheet never names. `min()` keeps the desktop intent
   (do not let the line get narrower than 16em WHERE THERE IS ROOM) and makes the floor
   yield to the container where there is not. */
.painbar p{font-size:1.0625rem;color:var(--cream-70);line-height:1.5;flex:1;min-width:min(16em,100%);}
.sku-section{padding:60px 0;border-top:1px solid var(--ink-15);}
.sku-section--alt{background:#fff;}
.bundle-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:32px;}
.bundle-item{border-left:2px solid var(--gold);padding:4px 0 4px 22px;}
.bundle-item h3{font-size:1.25rem;margin-bottom:8px;}
.bundle-item p{font-size:1rem;line-height:1.58;color:var(--ink-70);}
.price-card{background:#fff;border:1px solid var(--ink-15);padding:40px;text-align:center;max-width:34em;margin:0 auto;}
.price-old{font-family:'Cinzel',serif;font-size:1.25rem;color:var(--ink-45);text-decoration:line-through;}
.price-now{font-family:'Cinzel',serif;font-size:3.25rem;color:var(--ink);display:block;margin:6px 0;}
.price-now span{font-size:1.125rem;color:var(--ink-45);}
.price-terms{font-size:0.9375rem;color:var(--ink-70);line-height:1.55;margin:14px 0 26px;}
.addon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px;}
.addon{border:1px solid var(--ink-15);padding:24px;background:var(--cream);}
.addon h3{font-size:1.1875rem;margin-bottom:8px;}
.addon p{font-size:0.96875rem;line-height:1.55;color:var(--ink-70);}
.honest{font-size:0.9375rem;line-height:1.62;color:var(--ink-70);border-top:1px solid var(--ink-15);
  padding-top:24px;margin-top:40px;max-width:52em;}

/* ---- the leak calculator ----
   Sits IMMEDIATELY above the price card by design: the 2026-08-22 teardown said the
   number has to come before the button, not behind it. Type is in rem/clamp throughout
   for the same WCAG 1.4.4 reason as everything above; the fields carry an explicit 44px
   min-height (WCAG 2.5.5 / Apple HIG) because a number field is the one control on
   these pages a visitor has to hit accurately on a phone. */
.calc{border:1px solid var(--ink-15);background:var(--cream);padding:28px;margin-top:30px;max-width:44em;}
.calc-field{display:block;margin-bottom:20px;}
.calc-field > span{display:block;font-size:0.9375rem;line-height:1.5;color:var(--ink-70);margin-bottom:8px;}
.calc-field input{width:100%;min-height:44px;padding:10px 14px;font-size:1.125rem;
  font-family:inherit;color:var(--ink);background:#fff;border:1px solid var(--ink-15);border-radius:0;
  -webkit-appearance:none;appearance:none;}
.calc-field input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.calc-readout{border-top:1px solid var(--ink-15);margin-top:4px;padding-top:22px;}
.calc-readout > span{display:block;font-family:'Cinzel',serif;font-size:0.8125rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:6px;}
.calc-out{display:block;font-family:'Cinzel',serif;font-size:clamp(2rem,6vw,3rem);line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums;}
.calc-formula{font-size:0.875rem;line-height:1.55;color:var(--ink-45);margin-top:10px;}
.calc-note{font-size:0.875rem;line-height:1.6;color:var(--ink-70);margin-top:18px;
  border-top:1px solid var(--ink-15);padding-top:16px;}

/* ---- the video carriage (written by hive_video_carriage.py) ----
   The chapter row is the whole reason chapters are burned into the file: without it a
   chapter is a marker only a media player can see, and the segment answering "what does
   this cost and what happens to my information" stays buried at whatever timestamp it
   lands on. Each link is a real `#t=` URL, so a buyer can forward the money segment to
   the person who signs. Type is in rem/clamp and every tap target clears 44px, which is
   what `hive_storefront_mobile_check.py` reads. */
.vhead{font-family:'Cinzel',serif;font-size:clamp(1.5rem,4vw,2rem);line-height:1.2;margin-bottom:24px;}
.vwrap{max-width:56em;}
.vplayer{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink);
  border:1px solid var(--ink-15);}
.vchaps{display:flex;flex-direction:column;border:1px solid var(--ink-15);border-top:0;
  background:var(--cream);}
.vchap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;padding:12px 18px;font-size:0.9375rem;line-height:1.45;
  color:var(--ink);text-decoration:none;border-top:1px solid var(--ink-15);}
.vchap:first-child{border-top:0;}
.vchap:hover{background:var(--ink-06);}
.vchap:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.vchap span{font-family:'Cinzel',serif;font-size:0.8125rem;letter-spacing:0.08em;
  color:var(--ink-45);font-variant-numeric:tabular-nums;flex:none;}
.vnote{font-size:0.875rem;line-height:1.6;color:var(--ink-70);margin-top:18px;max-width:44em;}

/* ---- responsive ---- */
@media(max-width:860px){
  .aisle-grid,.tile-grid,.steps,.promise-grid,.bundle-list,.addon-grid{grid-template-columns:1fr;}
  .calc{padding:22px;}

  /* PERSISTENT AND VISIBLE — AND WHAT WAS HERE BEFORE WAS WORSE THAN A HAMBURGER.
     The rule was `.nav-links a:not(.cta){display:none;}`: on every screen under 860px
     the three wayfinding links were DELETED, and — unlike a hamburger — no control was
     left behind to bring them back. A hamburger at least costs you a tap; this cost you
     the destination. On a phone, "The Aisles", "How It Works" and "Our Promise" were
     simply not reachable from the header of any of the 20 storefront pages.

     Nielsen Norman Group, Pernice & Budiu, "Hamburger Menus and Hidden Navigation Hurt
     UX" (2016, n=179): navigation hidden behind a menu icon was discovered >20% less
     often, used by 57% of users against 86% for visible navigation, and was slower to
     use by ~15%. The finding is about HIDING, so the fix is not a better-drawn menu
     icon — it is not hiding. The links stay on the page, always, at every width.

     They wrap onto their own full-width row rather than scrolling sideways: a
     horizontal scroll strip re-creates the same defect one layer down, because the
     items past the right edge are hidden and nothing says they are there. Wrapping
     shows every item at once at any viewport width, with no interaction required and
     nothing to discover. */
  /* THE FIRST DRAFT OF THIS FIX TRADED ONE DEFECT FOR ANOTHER, AND ONLY MEASURING IT SAID SO.
     Letting all four items wrap together put the CTA on the links' row, which pushed the
     header to a MEASURED 151.95px — on a 375x812 phone that is 18.7% of the screen,
     permanently, because the header is sticky. "The links are visible now" was true and
     was not the whole story. Lifting the CTA out of flow puts it back on the brand's row
     and leaves the three wayfinding links a single row of their own.
     Absolute positioning, not a wrap trick: the alternatives (flex-grow on the brand, or
     a `display:contents` + generated-break) both depend on subtleties of flex line-breaking
     that I would be asserting rather than measuring, on 20 shipping pages. */
  /* THE BRAND IS LEFT-ALIGNED, AND THAT IS A CORRECTION A MEASUREMENT FORCED.
     The draft above this one centred the brand (`justify-content:center`) while pinning
     the CTA to the right, and carried a comment asserting "the brand wordmark is narrow,
     so there is no collision to guard against at any width this rule applies to."
     Rendered at 320px — the narrowest phone still in real use — the CTA sat ON TOP of the
     wordmark, covering the final letters of LORE. The claim was written from the shape of
     the rule instead of from a screenshot, which is the same error as pattern-matching a
     defect onto code I have not run. A centred box and a right-pinned box converge as the
     viewport narrows; flex-start and right-pinned diverge. */
  .nav{flex-wrap:wrap;justify-content:flex-start;padding:10px 24px 12px;}
  .brand-word{font-size:1.125rem;}
  /* gap 12px, not 16px: at 320px the three links measured onto THREE rows at 16px, which
     is not a category bar, it is a list. 12px holds them to two rows at 320 and one at 375. */
  .nav-links{width:100%;flex-wrap:wrap;justify-content:flex-start;gap:0 12px;}
  /* min-height 44px is the touch target, not decoration: WCAG 2.5.5 and Apple's HIG both
     put the minimum finger target at 44px, and 0.75rem text yields a ~17px tall link —
     well under half a usable target. The LINK is the target, not the glyph. */
  .nav-links a{font-size:0.75rem;letter-spacing:0.09em;
    display:inline-flex;align-items:center;min-height:44px;}
  /* Out of flow so it rides on the brand row. The brand wordmark is narrow ("LORE™"),
     so there is no collision to guard against at any width this rule applies to. */
  /* `display:inline-flex` + `align-items:center` is inherited from the rule above, but an
     absolutely-positioned box does NOT get min-height honoured the way the in-flow links
     do — measured at 18.91px tall against a declared min-height:40px, i.e. the touch
     target silently did not apply to the one link that takes the money. A DECLARED
     min-height that the layout does not honour reads exactly like a satisfied one in the
     source; only the bounding box says otherwise. Height is set outright instead. */
  .nav-links a.cta{position:absolute;top:6px;right:24px;padding:0 16px;
    height:44px;min-height:44px;font-size:0.6875rem;justify-content:center;}
  .wrap{padding:0 24px;}
  .hero{padding:64px 0 56px;}
  .shelf-head{flex-direction:column;gap:12px;}
}

/* A SECOND BREAKPOINT, SIZED FROM A MEASUREMENT AND NOT FROM A ROUND NUMBER.
   At 320px the three links measured 297.9px of content against 272px available — over by
   25.9px, so they took two rows and the sticky header grew to 142px, a MEASURED 25% of a
   568px screen. A quarter of a small phone permanently occupied by navigation is its own
   defect; "the links are visible" is not the finish line if being visible costs the page.
   The deficit is small, so the cure is small: letter-spacing (0.09em -> 0.04em) and the
   inter-item gap carry it back onto one row without shrinking the text, which would
   undo the rem work above, and without hiding anything, which is the whole point.
   360px is the boundary because it is the widest viewport that still measured short —
   the common Android width — not because it is a familiar figure. */
@media(max-width:360px){
  .nav-links{gap:0 8px;}
  .nav-links a{letter-spacing:0.04em;}
}