/* ============================================================
   NELRA'S PALEO ALTERNATIVES — design tokens
   Direction: an apothecary ledger — dark botanical ink,
   aged-paper label cards, brass + clay accents, batch-ticket
   motif borrowed from canning-jar lot numbers.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500&family=Libre+Franklin:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink: #3A4A30;
  --ink-2: #445238;
  --ink-soft: #536149;
  --paper: #F2E9D8;
  --paper-2: #E8DCBF;
  --clay: #B5613A;
  --clay-2: #954E2E;
  --brass: #BE9440;
  --sage: #8B9A78;
  --text-dark: #2E2A1E;
  --text-light: #F6F0E1;
  --text-muted: #C9CDB8;
  --line: rgba(246,240,225,0.16);
  --line-dark: rgba(46,42,30,0.14);

  --display: 'Fraunces', serif;
  --body: 'Libre Franklin', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--text-light);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; }

img, svg{ display:block; max-width:100%; }

.wrap{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Nav ---------- */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(29,33,23,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand{
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text-light);
}
.brand em{
  font-style: italic;
  color: var(--brass);
}
.nav-links{
  display:flex;
  gap: 28px;
  list-style: none;
  margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}
.nav-links a:hover, .nav-links a.active{
  color: var(--text-light);
  border-color: var(--brass);
}

/* ---------- Hero ---------- */
.hero{
  padding: 88px 0 64px;
  position: relative;
  overflow: hidden;
}
.eyebrow{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 22px;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 1px;
  background: var(--brass);
  display:inline-block;
}
h1.headline{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  line-height: 1.04;
  margin: 0 0 22px;
  max-width: 15ch;
  letter-spacing: -0.01em;
}
h1.headline em{
  font-style: italic;
  color: var(--brass);
  font-weight: 500;
}
.lede{
  font-size: 1.1rem;
  max-width: 52ch;
  color: var(--text-muted);
  margin: 0 0 34px;
}
.cta-row{ display:flex; gap:16px; flex-wrap: wrap; align-items:center; }
.btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 13px 26px;
  border-radius: 10px;
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease;
}
.btn-solid{ background: var(--clay); color: var(--text-light); }
.btn-solid:hover{ background: var(--clay-2); transform: translateY(-1px); }
.btn-line{ border-color: var(--line); color: var(--text-light); }
.btn-line:hover{ border-color: var(--brass); color: var(--brass); }

/* ---------- Batch ticket signature element ---------- */
.batch-ticket{
  position: relative;
  border: 1px dashed rgba(176,138,62,0.55);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--brass);
  text-transform: uppercase;
  display: inline-block;
  background: rgba(176,138,62,0.06);
}
.batch-ticket .num{ color: var(--text-light); font-size: 0.85rem; }

/* ---------- Sections on paper ---------- */
.section{ padding: 72px 0; }
.section-dark{ background: var(--ink); }
.section-paper{
  background: var(--paper);
  color: var(--text-dark);
}
.section-paper .eyebrow{ color: var(--clay-2); }
.section-paper .eyebrow::before{ background: var(--clay-2); }

.section-head{ margin-bottom: 44px; max-width: 60ch; }
.section-head h2{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.section-head p{ color: var(--text-muted); margin:0; }
.section-paper .section-head p{ color: #57503C; }

/* ---------- Value / teaser cards ---------- */
.grid-4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 900px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-2{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .grid-4{ grid-template-columns: 1fr; }
}

.card{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 22px;
  background: var(--ink-2);
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color: var(--brass); transform: translateY(-2px); }
.card .tag{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
  display:block;
}
.card h3{
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 8px;
}
.card p{ color: var(--text-muted); font-size: 0.94rem; margin:0; }

/* ---------- Principles list ---------- */
.principles{
  list-style: none;
  margin:0; padding:0;
  display:grid;
  gap: 0;
}
.principles li{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--line-dark);
}
.principles li:last-child{ border-bottom: 1px solid var(--line-dark); }
.principles .idx{
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--clay-2);
  padding-top: 3px;
}
.principles h4{
  font-family: var(--display);
  font-size: 1.15rem;
  margin: 0 0 6px;
  font-weight: 600;
}
.principles p{ margin:0; color:#57503C; }

/* ---------- Footer ---------- */
footer{
  padding: 40px 0;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text-muted);
}
footer .wrap{
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   RECIPE PAGE
   ============================================================ */
.recipe-card{
  background: var(--paper);
  color: var(--text-dark);
  border-radius: 18px;
  padding: 40px;
  margin-bottom: 40px;
  position: relative;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
  border: 1px solid rgba(33,30,22,0.08);
}
.recipe-card .batch-ticket{
  position:absolute;
  top: -14px;
  right: 32px;
  background: var(--ink);
  border-color: rgba(176,138,62,0.7);
}
.recipe-head{
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  flex-wrap: wrap;
  gap: 20px;
  border-bottom: 1px solid rgba(33,30,22,0.15);
  padding-bottom: 22px;
  margin-bottom: 28px;
}
.recipe-head h3{
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 600;
  margin: 0 0 6px;
}
.recipe-head .sub{
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clay-2);
}
.meta-row{
  display:flex;
  gap: 28px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #57503C;
  flex-wrap: wrap;
}
.meta-row strong{ color: var(--text-dark); display:block; font-size: 0.9rem; margin-bottom: 2px; font-family: var(--body); }

.recipe-body{
  display:block;
  max-width: 640px;
}

.ing-table{ width:100%; border-collapse: collapse; }
.ing-table th{
  text-align:left;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clay-2);
  border-bottom: 1px solid rgba(33,30,22,0.2);
  padding: 0 8px 8px 0;
}
.ing-table td{
  padding: 10px 8px 10px 0;
  border-bottom: 1px dotted rgba(33,30,22,0.15);
  font-size: 0.92rem;
  vertical-align: top;
}
.ing-table td.amt{
  font-family: var(--mono);
  white-space: nowrap;
  font-weight: 500;
}
.ing-table td.why{ color: #57503C; font-size: 0.85rem; }

.steps{
  list-style: none;
  counter-reset: step;
  margin:0; padding:0;
}
.steps li{
  counter-increment: step;
  position: relative;
  padding-left: 38px;
  margin-bottom: 18px;
  font-size: 0.94rem;
}
.steps li::before{
  content: counter(step);
  position:absolute;
  left:0; top:-1px;
  width: 24px; height:24px;
  border-radius: 50%;
  background: var(--clay);
  color: var(--text-light);
  font-family: var(--mono);
  font-size: 0.75rem;
  display:flex; align-items:center; justify-content:center;
}

.note-block{
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--paper-2);
  border-left: 3px solid var(--brass);
  border-radius: 8px;
  font-size: 0.87rem;
  color: #4A4530;
}
.note-block strong{ color: var(--clay-2); }

/* ---------- Buy row / cart ---------- */
.buy-row{
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(33,30,22,0.15);
}
.buy-price{
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--clay-2);
}
.nav-cart-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--brass);
  border-radius: 20px;
  color: var(--brass) !important;
  border-bottom: none !important;
}
.nav-cart-link:hover{ background: rgba(176,138,62,0.12); }

/* Snipcart brand color overrides */
:root{
  --snipcart-primary-color: #A8472C;
}

/* ---------- Split hero (asymmetric, less "AI template") ---------- */
.hero-split{ padding: 72px 0 0; overflow: hidden; }
.organic-divider{ display:block; width:100%; height:auto; margin-bottom:-1px; }
.organic-divider path{ fill: var(--paper); }
.hero-split-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  padding-bottom: 40px;
}
@media (max-width: 900px){
  .hero-split-grid{ grid-template-columns: 1fr; }
  .hero-split-visual{ order: -1; max-width: 280px; margin: 0 auto 20px; }
}
.headline-lg{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 22px;
  max-width: 14ch;
  letter-spacing: -0.01em;
}
.headline-lg em{ font-style: italic; color: var(--brass); font-weight: 500; }
.hero-split-visual svg{ width: 100%; height: auto; max-width: 340px; margin: 0 auto; display:block; }

/* ---------- Ledger list (replaces generic card grid) ---------- */
.ledger{ list-style:none; margin:0; padding:0; counter-reset: none; }
.ledger-row{
  display:grid;
  grid-template-columns: 56px 1fr 2fr 32px;
  align-items: center;
  gap: 20px;
  padding: 20px 4px;
  border-top: 1px solid rgba(33,30,22,0.14);
  text-decoration:none;
  transition: background .18s ease;
}
.ledger-row:last-child{ border-bottom: 1px solid rgba(33,30,22,0.14); }
.ledger-row:hover{ background: rgba(168,71,44,0.05); }
.ledger-num{
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--clay-2);
}
.ledger-name{
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--text-dark);
}
.ledger-desc{ font-size: 0.88rem; color: #57503C; }
.ledger-arrow{
  font-family: var(--mono);
  color: var(--clay-2);
  text-decoration:none;
  font-size: 1.1rem;
  justify-self: end;
  transition: transform .18s ease;
}
.ledger-row:hover .ledger-arrow{ transform: translateX(4px); }
@media (max-width: 700px){
  .ledger-row{ grid-template-columns: 40px 1fr 24px; }
  .ledger-desc{ display:none; }
}

/* ---------- Principles layout (asymmetric, not centered) ---------- */
.principles-layout{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 800px){
  .principles-layout{ grid-template-columns: 1fr; }
}
.principles-tight li{ padding: 22px 0; }

.research-panel{
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 34px;
  margin-bottom: 40px;
}
.research-panel h4{
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0 0 12px;
  color: var(--brass);
}
.research-panel p{ color: var(--text-muted); font-size: 0.92rem; margin: 0 0 12px; }
.rank-chip-row{ display:flex; flex-wrap:wrap; gap: 8px; margin: 14px 0; }
.rank-chip{
  font-family: var(--mono);
  font-size: 0.74rem;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text-light);
}
.rank-chip.top{ border-color: var(--brass); color: var(--brass); }

/* ============================================================
   CHEAT SHEET PAGE
   ============================================================ */
.data-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.data-table thead th{
  text-align:left;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brass);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.data-table tbody td{
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table tbody tr:hover{ background: rgba(176,138,62,0.05); }
.data-table td.mono, .data-table td .mono-val{ font-family: var(--mono); }
.data-table .prod{ font-family: var(--display); font-weight:600; font-size: 1rem; }
.table-scroll{ overflow-x:auto; }

.callout{
  background: var(--paper);
  color: var(--text-dark);
  border-radius: 16px;
  padding: 24px 28px;
  margin: 32px 0;
  font-size: 0.92rem;
}
.callout strong{ color: var(--clay-2); }

.disclaimer{
  font-size: 0.82rem;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 40px;
}

/* ---------- Shop grid ---------- */
.shop-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1000px){ .shop-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .shop-grid{ grid-template-columns: 1fr; } }

.shop-card{
  background: var(--paper-2);
  border: 1px solid rgba(46,42,30,0.1);
  border-radius: 18px;
  padding: 22px 20px 20px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.shop-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(46,42,30,0.35); }
.shop-icon{ width: 44px; height: 44px; margin-bottom: 4px; }
.shop-card .batch-tag{
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-2);
}
.shop-card h3{
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}
.shop-card p.desc{
  font-size: 0.86rem;
  color: #57503C;
  margin: 0;
  flex-grow: 1;
}
.shop-card-footer{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(46,42,30,0.1);
}
.shop-price{
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--clay-2);
}
.shop-add-btn{
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 9px 16px;
  border-radius: 20px;
  background: var(--clay);
  color: var(--text-light);
  border: none;
  cursor: pointer;
  transition: background .18s ease;
}
.shop-add-btn:hover{ background: var(--clay-2); }

/* ---------- Info page blocks ---------- */
.info-block{
  background: var(--paper-2);
  border-radius: 18px;
  padding: 30px 32px;
  margin-bottom: 22px;
}
.info-block h3{
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--clay-2);
  margin: 0 0 10px;
}
.info-block p{ color: #4A4530; margin: 0; line-height: 1.7; }