/* ═══════════════════════════════════════════════
   SIDES v3 — styles.css
   Upload to Cloudflare Pages alongside index.html
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white:      #FFFFFF;
  --off-white:  #FAFAF6;
  --page:       #F6F3EE;
  --ink:        #191917;
  --ink-70:     rgba(25,25,23,0.70);
  --ink-45:     rgba(25,25,23,0.45);
  --ink-20:     rgba(25,25,23,0.20);
  --ink-10:     rgba(25,25,23,0.10);
  --ink-05:     rgba(25,25,23,0.05);

  /* S1 Sage */
  --s1-bg: #EDF2E9; --s1-mid: #C5D3BC; --s1-deep: #637A58; --s1-text: #384D31;
  /* S2 Ocean */
  --s2-bg: #E8F0F4; --s2-mid: #B4CBDA; --s2-deep: #426E84; --s2-text: #244558;
  /* S3 Pastel Yellow */
  --s3-bg: #FFFACD; --s3-mid: #D9C5AA; --s3-deep: #9E7A50; --s3-text: #634A28;
  /* S4 Clay */
  --s4-bg: #F0E8E0; --s4-mid: #CEB49E; --s4-deep: #8C5E42; --s4-text: #5C3520;
  /* S5 Spring Sage */
  --s5-bg: #EBF2E6; --s5-mid: #BFCFB8; --s5-deep: #5E7A52; --s5-text: #324A2A;
  /* S6 Dusty Burgundy */
  --s6-bg: #F0E8EC; --s6-mid: #CEB4BE; --s6-deep: #7A4558; --s6-text: #4A2232;

  --serif:  'Cormorant', Georgia, serif;
  --sans:   'Jost', system-ui, sans-serif;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--page); color: var(--ink);
  font-family: var(--sans); font-weight: 300;
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}

/* COVER */
.cover {
  background: var(--ink); min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 5rem 2rem;
  position: relative; overflow: hidden;
}
.cover-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 12% 88%, rgba(99,122,88,0.24) 0%, transparent 58%),
    radial-gradient(ellipse 50% 42% at 88% 12%, rgba(66,110,132,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(140,94,66,0.09) 0%, transparent 60%);
}
.cover-content { position: relative; }
.cover-eyebrow {
  font-family: var(--sans); font-weight: 400; font-size: 0.6rem;
  letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--s1-mid); margin-bottom: 2.75rem;
}
.cover-wordmark {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(5.5rem, 16vw, 10rem);
  letter-spacing: 0.38em; color: #F3EDE3; line-height: 1; margin-bottom: 2.25rem;
}
.cover-rule { width: 44px; height: 1px; background: rgba(197,211,188,0.35); margin: 0 auto 2.25rem; }
.cover-sub {
  font-family: var(--sans); font-weight: 300; font-size: 0.7rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(197,211,188,0.55); line-height: 2.2;
}
.cover-chips { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin-top: 3.5rem; }
.cover-chip {
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(197,211,188,0.38); padding: 0.35rem 0.9rem;
  border: 1px solid rgba(197,211,188,0.12); border-radius: var(--r-sm);
}

/* INTRO */
.intro-section { background: var(--white); padding: 5rem 2.5rem; }
.intro-inner { max-width: 960px; margin: 0 auto; }
.intro-lede {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  line-height: 1.65; color: var(--ink); max-width: 680px; margin-bottom: 2.5rem;
}
.intro-lede em { font-style: italic; color: var(--s1-deep); }
.stats-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--ink-10);
  border: 1px solid var(--ink-10); border-radius: var(--r-md); overflow: hidden; margin-bottom: 1.25rem;
}
@media (max-width: 700px) { .stats-row { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--off-white); padding: 1.25rem 1rem; text-align: center; }
.stat-n { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--ink); margin-bottom: 0.3rem; }
.stat-l { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-45); }
.oils-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.oils-label { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-45); flex-shrink: 0; }
.oil-tag { font-size: 0.62rem; letter-spacing: 0.08em; color: var(--s1-text); background: var(--s1-bg); padding: 0.28rem 0.72rem; border-radius: var(--r-sm); }

/* SECTION WRAPPER */
.sec { padding: 5rem 2.5rem; }
.sec-inner { max-width: 960px; margin: 0 auto; }
.sec-head { display: flex; align-items: flex-end; gap: 1.25rem; margin-bottom: 2.25rem; padding-bottom: 1.1rem; }
.sec-num { font-family: var(--serif); font-style: italic; font-size: 0.78rem; color: var(--ink-45); padding-bottom: 2px; flex-shrink: 0; }
.sec-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.15rem); line-height: 1.1; color: var(--ink); flex: 1; }
.sec-title em { font-style: italic; }
.sec-note { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-45); flex-shrink: 0; padding-bottom: 3px; }

/* S1 SIGNATURE */
.sec-s1 { background: var(--s1-bg); }
.sec-s1 .sec-head { border-bottom: 1px solid var(--s1-mid); }
.formula-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--s1-mid); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 640px) { .formula-grid { grid-template-columns: 1fr; } }
.fcard { background: var(--white); padding: 1.75rem; display: flex; flex-direction: column; transition: background 0.18s; }
.fcard:hover { background: var(--s1-bg); }
.fcard-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.55rem; gap: 0.5rem; }
.fcard-name { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--ink); line-height: 1.2; }
.fbadge { font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: var(--r-sm); flex-shrink: 0; margin-top: 3px; }
.fb-gf { background: #E5EEE2; color: #334D2C; }
.fb-df { background: #E2EAF0; color: #244558; }
.fb-vg { background: #E8EEE2; color: #304D28; }
.fb-hp { background: #EEE8E2; color: #5C3520; }
.fcard-items { font-size: 0.77rem; color: var(--ink-70); line-height: 1.95; margin-bottom: 0.9rem; flex: 1; }
.fcard-sauce { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s1-deep); margin-bottom: 1rem; }
.macro-bar { display: flex; background: var(--s1-bg); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 0.7rem; }
.mc { flex: 1; text-align: center; padding: 0.52rem 0.2rem; border-right: 1px solid var(--s1-mid); }
.mc:last-child { border-right: none; }
.mc-v { font-family: var(--sans); font-weight: 500; font-size: 0.85rem; color: var(--s1-text); line-height: 1; margin-bottom: 0.12rem; }
.mc-k { font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s1-deep); opacity: 0.8; }
.wtags { display: flex; flex-wrap: wrap; gap: 0.32rem; }
.wtag { font-size: 0.57rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s1-deep); padding: 0.18rem 0.5rem; border: 1px solid var(--s1-mid); border-radius: var(--r-sm); }
.note-strip { background: var(--white); border-radius: var(--r-md); padding: 1.1rem 1.6rem; display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.note-mark { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--s1-mid); flex-shrink: 0; }
.note-text { font-size: 0.75rem; color: var(--ink-70); line-height: 1.55; }

/* S2 GOAL */
.sec-s2 { background: var(--s2-bg); }
.sec-s2 .sec-head { border-bottom: 1px solid var(--s2-mid); }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px; background: var(--s2-mid); border-radius: var(--r-lg); overflow: hidden; }
.gcard { background: var(--white); padding: 1.5rem 1.35rem; transition: background 0.18s; }
.gcard:hover { background: var(--s2-bg); }
.gcard-name { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; color: var(--ink); margin-bottom: 0.22rem; }
.gcard-mood { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s2-deep); margin-bottom: 0.9rem; line-height: 1.6; }
.gcard-formulas { font-size: 0.72rem; color: var(--ink-45); line-height: 1.9; margin-bottom: 0.85rem; }
.gcard-formulas strong { font-size: 0.58rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--s2-deep); display: block; margin-bottom: 0.35rem; }
.gcard-macro { font-size: 0.65rem; color: var(--s2-text); background: var(--s2-bg); padding: 0.3rem 0.65rem; border-radius: var(--r-sm); display: inline-block; letter-spacing: 0.05em; }

/* S3 MORNING */
.sec-s3 { background: var(--s3-bg); }
.sec-s3 .sec-head { border-bottom: 1px solid var(--s3-mid); }
.morning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--s3-mid); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 640px) { .morning-grid { grid-template-columns: 1fr; } }
.mcard { background: var(--white); padding: 1.6rem 1.75rem; transition: background 0.18s; }
.mcard:hover { background: var(--s3-bg); }
.mcard-name { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--ink); margin-bottom: 0.18rem; }
.mcard-tag { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s3-deep); margin-bottom: 0.7rem; }
.mcard-items { font-size: 0.76rem; color: var(--ink-70); line-height: 1.8; margin-bottom: 0.85rem; }
.mcard-macro { display: flex; background: var(--s3-bg); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 0.55rem; }
.mm { flex: 1; text-align: center; padding: 0.48rem 0.15rem; border-right: 1px solid var(--s3-mid); }
.mm:last-child { border-right: none; }
.mm-v { font-weight: 500; font-size: 0.82rem; color: var(--s3-text); line-height: 1; margin-bottom: 0.1rem; }
.mm-k { font-size: 0.5rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--s3-deep); opacity: 0.8; }
.morning-sub { font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 0.8rem; }
.cafe-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; background: var(--s3-mid); border-radius: var(--r-md); overflow: hidden; }
@media (max-width: 640px) { .cafe-strip { grid-template-columns: 1fr; } }
.cafe-cell { background: var(--white); padding: 1.1rem 1.25rem; transition: background 0.18s; }
.cafe-cell:hover { background: var(--s3-bg); }
.cafe-name { font-family: var(--serif); font-size: 0.95rem; color: var(--ink); margin-bottom: 0.2rem; }
.cafe-desc { font-size: 0.65rem; color: var(--ink-45); line-height: 1.5; }

/* S4 BYO */
.sec-s4 { background: var(--s4-bg); }
.sec-s4 .sec-head { border-bottom: 1px solid var(--s4-mid); }
.byo-lede { font-family: var(--serif); font-size: 1rem; color: var(--ink-70); line-height: 1.65; max-width: 520px; margin-bottom: 2.5rem; }
.byo-step { margin-bottom: 2rem; }
.byo-step-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.step-pill { width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 1.5px solid var(--s4-mid); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 0.72rem; color: var(--s4-text); flex-shrink: 0; }
.step-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.step-rule { font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-45); margin-left: auto; }
.byo-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 2px; background: var(--s4-mid); border-radius: var(--r-sm); overflow: hidden; }
.bopt { background: var(--white); padding: 0.85rem 1rem; transition: background 0.15s; }
.bopt:hover { background: var(--s4-bg); }
.bopt-n { font-size: 0.78rem; font-weight: 400; color: var(--ink); margin-bottom: 0.12rem; }
.bopt-d { font-size: 0.62rem; color: var(--ink-45); }
.bopt-s { font-size: 0.6rem; color: var(--s4-deep); font-style: italic; margin-top: 0.18rem; }
.sauce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 2px; background: var(--s4-mid); border-radius: var(--r-sm); overflow: hidden; }
.sopt { background: var(--white); padding: 0.95rem 1rem; border-left: 3px solid transparent; transition: background 0.15s; }
.sopt:hover { background: var(--s4-bg); }
.sopt.sage { border-left-color: var(--s1-deep); }
.sopt.ocean { border-left-color: var(--s2-deep); }
.sopt.clay { border-left-color: var(--s4-deep); }
.sopt-n { font-family: var(--serif); font-size: 0.95rem; color: var(--ink); margin-bottom: 0.18rem; }
.sopt-d { font-size: 0.63rem; color: var(--ink-45); line-height: 1.4; }
.sopt-p { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s4-deep); margin-top: 0.28rem; }

/* S5 ADDITIONS */
.sec-s5 { background: var(--s5-bg); }
.sec-s5 .sec-head { border-bottom: 1px solid var(--s5-mid); }
.add-sub { font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 0.75rem; }
.add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 2px; background: var(--s5-mid); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 2px; }
.acell { background: var(--white); padding: 0.85rem 1rem; transition: background 0.15s; }
.acell:hover { background: var(--s5-bg); }
.acell-n { font-size: 0.78rem; font-weight: 400; color: var(--ink); margin-bottom: 0.12rem; }
.acell-d { font-size: 0.62rem; color: var(--ink-45); }

/* S6 BEVERAGES */
.sec-s6 { background: var(--s6-bg); }
.sec-s6 .sec-head { border-bottom: 1px solid var(--s6-mid); }
.bev-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--s6-mid); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 600px) { .bev-cols { grid-template-columns: 1fr; } }
.bev-col { background: var(--white); padding: 1.75rem; }
.bev-col-head { font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--s6-deep); margin-bottom: 1.1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--s6-mid); }
.bev-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--ink-05); }
.bev-item:last-child { border-bottom: none; }
.bev-n { font-family: var(--serif); font-size: 0.95rem; font-weight: 400; color: var(--ink); margin-bottom: 0.12rem; }
.bev-d { font-size: 0.65rem; color: var(--ink-45); line-height: 1.4; }
.bev-tag { font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s6-deep); background: var(--s6-bg); padding: 0.2rem 0.5rem; border-radius: var(--r-sm); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.addins-box { margin-top: 1.5rem; padding: 1.1rem 1.25rem; background: var(--s6-bg); border-radius: var(--r-md); }
.addins-head { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--s6-deep); margin-bottom: 0.55rem; }
.addins-list { font-size: 0.72rem; color: var(--ink-70); line-height: 2; }

/* SUBSCRIPTION */
.sec-sub { background: var(--ink); position: relative; overflow: hidden; }
.sec-sub::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 6% 92%, rgba(99,122,88,0.22) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 94% 8%, rgba(66,110,132,0.17) 0%, transparent 52%); }
.sub-inner { position: relative; }
.sub-eyebrow { font-size: 0.58rem; letter-spacing: 0.42em; text-transform: uppercase; color: #C5D3BC; margin-bottom: 1.1rem; }
.sub-heading { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 4.5vw, 2.8rem); color: #F3EDE3; line-height: 1.15; margin-bottom: 1rem; }
.sub-heading em { font-style: italic; color: #C5D3BC; }
.sub-body { font-size: 0.8rem; color: rgba(243,237,227,0.42); max-width: 440px; line-height: 1.7; margin-bottom: 2.5rem; }
.sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: rgba(243,237,227,0.07); border-radius: var(--r-lg); overflow: hidden; }
.sub-tier { background: rgba(243,237,227,0.025); padding: 1.45rem; transition: background 0.2s; }
.sub-tier:hover { background: rgba(243,237,227,0.055); }
.tier-n { font-family: var(--serif); font-size: 1rem; color: #F3EDE3; margin-bottom: 0.2rem; }
.tier-f { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: #C5D3BC; margin-bottom: 0.6rem; }
.tier-d { font-size: 0.7rem; color: rgba(243,237,227,0.38); line-height: 1.6; }
.sub-fn { font-size: 0.65rem; font-style: italic; color: rgba(243,237,227,0.2); margin-top: 1.75rem; }

/* FOOTER */
.footer { background: var(--s1-bg); padding: 2.75rem 2.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; border-top: 1px solid var(--s1-mid); }
.footer-logo { font-family: var(--serif); font-weight: 300; font-size: 1.7rem; letter-spacing: 0.32em; color: var(--ink); }
.footer-meta { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-45); text-align: right; line-height: 2.2; }

/* DIVIDER */
.divider { height: 1px; background: linear-gradient(to right, transparent, rgba(25,25,23,0.10), transparent); }

/* Morning sub spacing */
.morning-sub + .morning-sub, .morning-sub + .cafe-strip, .morning-grid + .morning-sub { margin-top: 1.5rem; }