/* ── RESET & VARS ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#18160f; --dark:#0f0e09;
  --cream:#f5f0e6; --cream2:#faf7f1; --cream3:#f0ebe0;
  --gold:#b8904a; --gold-lt:#c9a76a;
  --muted-dark:#6a6358; --muted-lt:#9a9180;
  --faint:#2e2b22; --faint2:#1e1c16;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--cream2);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── GHOST CONTENT WIDTHS (required) ────────── */
.kg-width-wide{max-width:min(900px,90vw);margin-left:auto;margin-right:auto}
.kg-width-full{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.kg-image{max-width:100%;height:auto;display:block}

/* ── REVEAL ──────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .85s ease,transform .85s ease}
.reveal.up{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.36s}.d4{transition-delay:.5s}

/* ── NAV ─────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 2rem;transition:all .4s}
nav.on-dark{background:rgba(15,14,9,.94);backdrop-filter:blur(8px);border-bottom:.5px solid var(--faint2)}
nav.on-light{background:rgba(250,247,241,.96);backdrop-filter:blur(8px);border-bottom:.5px solid #e0dace}
.nav-logo{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;transition:color .3s}
nav.on-dark .nav-logo{color:#e8dfc8}
nav.on-light .nav-logo{color:var(--ink)}
.nav-right{display:flex;gap:1.75rem;align-items:center}
.nav-link{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:color .3s}
nav.on-dark .nav-link{color:var(--muted-lt)}
nav.on-light .nav-link{color:var(--muted-dark)}
.nav-cta{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:8px 18px;border:.5px solid var(--gold);color:var(--gold);text-decoration:none;transition:all .3s}
.nav-cta:hover{background:var(--gold);color:#fff}

/* ── HERO ────────────────────────────────────── */
.hero{min-height:100vh;min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:0 2rem 5rem;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,11,7,.93) 0%,rgba(12,11,7,.55) 45%,rgba(12,11,7,.18) 100%)}
.hero-grain{position:absolute;inset:0;opacity:.038;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px;z-index:2;pointer-events:none}
.hero-content{position:relative;z-index:3;max-width:580px}
.hero-eye{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(232,223,200,.55);margin-bottom:1.5rem;display:block}
.hero-h1{font-family:var(--serif);font-weight:300;font-size:clamp(50px,7.5vw,84px);line-height:1.02;color:#f5f0e6;margin-bottom:1.25rem}
.hero-h1 em{font-style:italic;display:block}
.hero-sub{font-size:14px;color:rgba(232,223,200,.65);max-width:280px;line-height:1.65;margin-bottom:2.5rem}
.btn-join{display:inline-block;padding:13px 0;background:#e8dfc8;color:var(--ink);font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;text-decoration:none;text-align:center;width:240px;transition:all .3s;cursor:pointer;border:none}
.btn-join:hover{background:var(--gold);color:#fff}
.hero-badges{display:flex;align-items:center;margin-top:1.75rem;flex-wrap:wrap}
.hero-badge{font-size:9px;letter-spacing:.1em;color:rgba(200,190,165,.45);padding-right:.9rem;margin-right:.9rem;border-right:.5px solid rgba(200,190,165,.18)}
.hero-badge:last-child{border-right:none}

/* ── SECTIONS ────────────────────────────────── */
.inner{max-width:680px;margin:0 auto}
.s-cream{background:var(--cream2);padding:6.5rem 2rem}
.s-cream .inner{max-width:680px;margin:0 auto}
.section-stamp{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#c8c2b4;border-top:.5px solid #e2ddd4;padding-top:.9rem}
.s-label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:1.1rem;display:block}
.s-cream .s-label{color:#b0a898}
.s-h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5.2vw,56px);line-height:1.08;margin-bottom:1.75rem}
.s-cream .s-h2{color:var(--ink)}
.s-h2 em{font-style:italic;color:var(--gold)}
.s-body{font-size:15px;line-height:1.85;max-width:520px}
.s-cream .s-body{color:var(--muted-dark)}
.s-body+.s-body{margin-top:1rem}

/* ── PHOTO ───────────────────────────────────── */
.photo-full{display:block;width:100%;overflow:hidden}

/* ── SPLITS ──────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:580px}
/* Dining: copy left (1), photo right (2) */
.split-dining .split-copy{order:1}
.split-dining .split-photo{order:2}
/* Sub-hero split: photo left (1), copy right (2) */
.split-subhero .split-photo{order:1}
.split-subhero .split-copy{order:2}
/* Climate: text/copy left (1), photo right (2) */
.split-climate .split-copy{order:1}
.split-climate .split-photo{order:2}
.split-photo{position:relative;overflow:hidden}
.split-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-copy{padding:5.5rem 3rem;display:flex;flex-direction:column;justify-content:center}

.split-copy.cream{background:var(--cream2)}
.split-copy.cream .s-label{color:#b0a898}
.split-copy.cream .s-h2{color:var(--ink)}
.split-copy.cream .s-h2 em{color:var(--gold)}
.split-copy.cream .s-body{color:var(--muted-dark)}

.split-copy.dark1{background:#14120c}
.split-copy.dark1 .s-label{color:#4a4638}
.split-copy.dark1 .s-h2{color:#e8dfc8}
.split-copy.dark1 .s-h2 em{color:var(--gold-lt)}
.split-copy.dark1 .s-body{color:#7a7262}

.split-copy.dark2{background:#0f0e09}
.split-copy.dark2 .s-label{color:#3e3a2e}
.split-copy.dark2 .s-h2{color:#e8dfc8}
.split-copy.dark2 .s-h2 em{color:var(--gold-lt)}
.split-copy.dark2 .s-body{color:#7a7262}

/* ── STATS ───────────────────────────────────── */
.stat-block{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3.5rem;padding-top:2.5rem;border-top:.5px solid #e0dace}
.stat-num{font-family:var(--serif);font-weight:300;font-size:76px;line-height:1;color:var(--ink);margin-bottom:.5rem}
.stat-num sup{font-size:30px;vertical-align:top;margin-top:10px;display:inline-block}
.stat-lbl{font-size:12px;color:#a09080;line-height:1.55;max-width:160px}

/* ── INGREDIENTS ─────────────────────────────── */
.s-ing{background:#0d0c09;padding:7rem 2rem}
.ing-header{
  margin-bottom:3.5rem;
}
/* 2-col centered card grid */
.ing-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  max-width:680px;
  margin:0 auto;
}
.ing-card{
  padding:2.25rem 1.75rem;
  border-top:.5px solid #222018;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ing-card:nth-child(odd){border-right:.5px solid #222018}
.ing-icon{width:54px;height:54px;border-radius:8px;background:#1c1a12;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:1.1rem;flex-shrink:0}
.ing-name{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#e8dfc8;font-weight:500;margin-bottom:4px}
.ing-origin{font-size:10px;color:#4a4638;letter-spacing:.04em;margin-bottom:.75rem}
.ing-desc{font-size:13px;color:#7a7262;line-height:1.6;max-width:240px}

/* ── PRODUCT REVEAL (inline within cream section) ── */
.product-reveal{display:flex;align-items:center;justify-content:center;margin:2rem 0}
.product-reveal-img{height:400px;width:auto;max-width:100%;object-fit:contain;display:block}

/* ── CTA — Ghost native subscribe ───────────── */
.s-cta{background:#0d0c09;padding:9rem 2rem;text-align:center;position:relative;overflow:hidden}
.cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(184,144,74,.05) 0%,transparent 70%)}
.cta-in{position:relative;z-index:1;max-width:420px;margin:0 auto}
.cta-eye{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:1.5rem;opacity:.85}
.cta-h2{font-family:var(--serif);font-weight:300;font-size:clamp(46px,8vw,74px);line-height:.95;color:#e8dfc8;margin-bottom:1rem}
.cta-sub{font-size:13px;color:#7a7262;margin-bottom:3rem;line-height:1.7}

/* Ghost members form */
.email-wrap{display:flex;flex-direction:column;gap:10px;align-items:center}
.email-in{width:100%;max-width:310px;background:transparent;border:.5px solid #3e3a30;padding:13px 18px;font-family:var(--sans);font-size:13px;color:#e8dfc8;outline:none;transition:border-color .3s;text-align:center;letter-spacing:.04em;-webkit-appearance:none}
.email-in::placeholder{color:#3e3a30}
.email-in:focus{border-color:var(--gold)}
.btn-notify{width:100%;max-width:310px;background:#e8dfc8;border:none;padding:13px;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink);cursor:pointer;transition:all .3s;-webkit-appearance:none}
.btn-notify:hover{background:var(--gold);color:#fff}
.cta-note{font-size:10px;color:#4a4638;letter-spacing:.06em}
/* Ghost success/error states */
.cta-ok,.cta-error{display:none}
[data-members-success]{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold-lt);padding:1rem;display:none}
[data-members-error]{font-size:12px;color:#c07060;margin-top:4px;display:none}
/* Ghost shows these after submit */
.email-wrap.success [data-members-success]{display:block}
.email-wrap.success .email-in,
.email-wrap.success .btn-notify,
.email-wrap.success .cta-note{display:none}
.email-wrap.error [data-members-error]{display:block}

/* ── FOOTER ──────────────────────────────────── */
footer{background:#0a0906;padding:2.5rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;border-top:.5px solid var(--faint2)}
.f-logo{font-family:var(--serif);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:#e8dfc8}
.f-tag{font-size:9px;color:#3e3a28;margin-top:4px;letter-spacing:.08em}
.f-right{font-size:10px;color:#3e3a28;text-align:right;line-height:2}

/* ── MOBILE ──────────────────────────────────── */
@media(max-width:700px){

  /* ── Scroll snap ── */
  html{
    scroll-snap-type: y proximity;
    overflow-y: scroll;
  }
  /* Every major section becomes a snap point */
  .hero,
  .split,
  .s-cream,
  .s-ing,
  .s-cta {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
  /* Each section fills at least the full screen height */
  .hero{ min-height:100svh }
  .split{ min-height:100svh }
  .s-cream{ min-height:100svh }
  .s-ing{ min-height:100svh }
  .s-cta{ min-height:100svh; display:flex; flex-direction:column; justify-content:center }
  nav{padding:1rem 1.25rem}
  .nav-link{display:none}
  .nav-cta{padding:7px 14px;font-size:9px}

  .hero{padding:0 1.25rem 3.5rem}
  .hero-h1{font-size:clamp(40px,11vw,58px)}
  .hero-sub{max-width:100%;font-size:13px}
  .btn-join{width:100%;max-width:100%}

  .s-cream{padding:4.5rem 1.25rem}
  .s-ing{padding:5rem 1.25rem}
  .s-cta{padding:6rem 1.25rem}
  .s-h2{font-size:clamp(30px,8.5vw,44px)}

  .photo-full{height:300px!important}

  .split{grid-template-columns:1fr;min-height:auto}
  .split-photo{height:300px;order:1!important;position:relative}
  .split-copy{padding:3rem 1.25rem;order:2!important}

  /* Stats: keep side by side on mobile */
  .stat-block{grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;padding-top:1.75rem}
  .stat-num{font-size:52px}
  .stat-lbl{font-size:11px}

  .product-reveal{margin:1.5rem 0}
  .product-reveal-img{height:260px}

  .ing-grid{grid-template-columns:1fr}
  .ing-card{border-right:none!important;padding:1.75rem 0}
  .ing-icon{width:48px;height:48px;font-size:20px}
  .ing-desc{max-width:100%;font-size:12.5px}

  .email-in,.btn-notify{max-width:100%}

  footer{flex-direction:column;align-items:flex-start;padding:2rem 1.25rem}
  .f-right{text-align:left}
}