/* ============ KHAYBU — cream world (logo-native) ============ */
:root{
  /* palette from the real logo: cream ground, maroon K, golden cacao pod */
  --paper:#F7F2E1;        /* logo cream ground */
  --paper-deep:#EFE8D2;   /* section alternation */
  --ink:#4E1A12;          /* logo maroon — text */
  --ink-deep:#3A130C;
  --ink-60:rgba(78,26,18,.64);
  --ink-25:rgba(78,26,18,.28);
  --hairline:rgba(78,26,18,.18);
  --gold:#B58A3C;         /* cacao pod gold */
  --fill:#B58A3C;         /* current filling colour (accent tint) */
  --cta:#5C1F14;          /* maroon CTA on cream */
  --r:2px;
  --fs-hero:clamp(3.6rem,12vw,11rem);
  --fs-h2:clamp(2rem,5vw,3.4rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Archivo',sans-serif;font-weight:400;
  font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* subtle paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
::selection{background:var(--gold);color:#fff}
h1,h2,h3,.serif{font-family:'Fraunces',serif;font-weight:420;line-height:1.05;color:var(--ink-deep)}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);position:relative;z-index:2}
section{position:relative;z-index:2}
.meta{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60)}
.hairline-top{border-top:1px solid var(--hairline)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:14px 22px;z-index:3000;text-decoration:none;border-radius:var(--r)}
.skip-link:focus{left:0}

/* ============ header ============ */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:linear-gradient(to bottom,rgba(247,242,225,.94),rgba(247,242,225,0));backdrop-filter:blur(3px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem clamp(1.25rem,4vw,3rem)}
.wordmark{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-height:44px}
.wordmark img{width:40px;height:auto;border-radius:var(--r)}
.wordmark span{font-family:'Fraunces',serif;font-size:1.3rem;letter-spacing:.08em;color:var(--ink-deep)}
.nav-links{display:flex;gap:.15rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);padding:.85rem .85rem;display:inline-block}
.nav-links a.shop-cta{border:1px solid var(--ink);border-radius:var(--r);color:var(--ink);margin-left:.4rem}
@media(max-width:720px){.nav-links a:not(.shop-cta){display:none}}

/* ============ hero ============ */
.hero{min-height:92svh;display:flex;flex-direction:column;justify-content:center;padding-top:6rem;position:relative;text-align:center}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 42% at 50% 38%,color-mix(in srgb,var(--fill) 14%,transparent),transparent 70%);opacity:0;transition:opacity 1.2s ease .4s;pointer-events:none}
.loaded .hero-glow{opacity:1}
.hero-heart{width:clamp(110px,16vw,190px);margin:0 auto .8rem;display:block}
.heart-half{transition:transform 1.2s cubic-bezier(.22,1,.36,1);fill:none;stroke:var(--ink);stroke-width:1.4}
.heart-fill{fill:var(--fill);opacity:0;transition:opacity 1.2s ease .35s,fill .3s}
.loaded .heart-left{transform:translateX(-7px) rotate(-4deg)}
.loaded .heart-right{transform:translateX(7px) rotate(4deg)}
.loaded .heart-fill{opacity:1}
.hero h1{font-size:var(--fs-hero);letter-spacing:.02em}
.hero-tagline{font-size:.85rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-top:1rem}
.hero-thesis{margin:1.6rem auto 0;font-family:'Fraunces',serif;font-style:italic;font-size:1.2rem;color:var(--ink-60);max-width:34ch}
.hero-meta{display:flex;justify-content:center;gap:1.2rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--hairline);max-width:680px;margin-left:auto;margin-right:auto}
.hero-actions{margin-top:2.4rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* buttons */
.btn{display:inline-block;text-decoration:none;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  padding:1rem 1.9rem;border-radius:var(--r);min-height:44px;border:1px solid var(--ink)}
.btn-solid{background:var(--cta);color:var(--paper);border-color:var(--cta)}
.btn-ghost{color:var(--ink)}

/* ============ tibeb divider ============ */
.tibeb{height:14px;margin:0 auto;max-width:1160px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 7h8l6-6 6 6 8 0 6 6 6-6h8l4 0' stroke='%23B58A3C' stroke-width='1.1' fill='none' opacity='.7'/%3E%3C/svg%3E");background-repeat:repeat-x}

/* ============ marquee ============ */
.marquee{overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:1rem 0;background:var(--paper-deep)}
.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:marquee 38s linear infinite}
.marquee-track span{font-family:'Fraunces',serif;font-style:italic;font-size:1.1rem;color:var(--ink-60);padding-right:.5rem}
.marquee-track b{color:var(--gold);font-weight:400}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============ chapters ============ */
.chapter{padding:clamp(4rem,8vw,7rem) 0}
.chapter.alt{background:var(--paper-deep)}
.ch-head{display:flex;align-items:baseline;gap:1.3rem;margin-bottom:2.4rem}
.ch-num{font-family:'Fraunces',serif;font-style:italic;font-size:1rem;color:var(--fill);transition:color .3s}
.ch-head h2{font-size:var(--fs-h2)}
.ch-intro{max-width:56ch;color:var(--ink-60);margin-bottom:2.4rem}

/* ============ product list (visible borders, Eclo pattern) ============ */
.menu-list{list-style:none;border-top:1px solid var(--hairline)}
.menu-item{border-bottom:1px solid var(--hairline)}
.menu-row{display:grid;grid-template-columns:2.4rem 1fr auto;gap:1rem;align-items:center;padding:1rem .25rem;min-height:44px}
.menu-idx{font-family:'Fraunces',serif;font-style:italic;font-size:.9rem;color:var(--ink-25)}
.menu-stack{display:flex;flex-direction:column;gap:.18rem}
.menu-label{font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-60)}
.menu-name{font-family:'Fraunces',serif;font-size:clamp(1.15rem,2.3vw,1.6rem);color:var(--ink-deep);transition:color .2s}
.menu-price{font-variant-numeric:tabular-nums;font-size:.95rem;min-width:5rem;text-align:right}
.menu-cat{padding:2.4rem 0 .8rem}
@media(max-width:640px){.menu-row{grid-template-columns:1.5rem 1fr auto}.menu-label{letter-spacing:.16em}}

/* shop steppers */
.stepper{display:flex;align-items:center;gap:.4rem;justify-self:end}
.stepper button{appearance:none;width:44px;height:44px;border:1px solid var(--hairline);background:#fff8;border-radius:var(--r);
  font:inherit;font-size:1.1rem;color:var(--ink);cursor:pointer;line-height:1}
.stepper .qty{min-width:2rem;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink-deep)}
.shop-row{grid-template-columns:2.4rem 1fr auto auto}
@media(max-width:640px){.shop-row{grid-template-columns:1.5rem 1fr auto}.shop-row .menu-price{display:none}}

/* ============ steps / editorial trios ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.step{border:1px solid var(--hairline);border-radius:var(--r);padding:1.8rem 1.5rem;background:rgba(255,255,255,.35)}
.step h3{font-size:1.3rem;margin:.5rem 0 .6rem}
.step p{font-size:.95rem;color:var(--ink-60)}
.step a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:720px){.steps{grid-template-columns:1fr}}

/* ============ founder ============ */
.brand-logo{display:block;width:min(220px,55vw);height:auto;margin-bottom:2rem}
.founder blockquote{font-family:'Fraunces',serif;font-style:italic;font-weight:380;font-size:clamp(1.4rem,3.2vw,2.3rem);line-height:1.35;max-width:28ch;color:var(--ink-deep)}
.founder cite{display:block;margin-top:1.5rem;font-style:normal}

/* ============ order table ============ */
.order-table{width:100%;border-collapse:collapse}
.order-table td{border-top:1px solid var(--hairline);padding:1rem .25rem;vertical-align:top}
.order-table td:first-child{width:32%;color:var(--ink-60);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;padding-right:1rem}
.order-table a{text-decoration:underline;text-underline-offset:4px}

/* ============ cart drawer ============ */
.cart-pill{position:fixed;right:1.1rem;bottom:1.1rem;z-index:320;display:flex;align-items:center;gap:.55rem;
  background:var(--cta);color:var(--paper);border:none;border-radius:999px;padding:.85rem 1.3rem;
  font:inherit;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-height:44px;
  box-shadow:0 8px 28px rgba(78,26,18,.35)}
.cart-pill svg{width:18px;fill:var(--paper)}
.cart-pill[hidden]{display:none !important}
.drawer-overlay{position:fixed;inset:0;background:rgba(58,19,12,.35);z-index:300;opacity:0;pointer-events:none;transition:opacity .4s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(90vw,400px);z-index:310;background:var(--paper);
  border-left:1px solid var(--hairline);padding:1.6rem;overflow-y:auto;
  transform:translateX(105%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cart-drawer.open{transform:none}
.cart-drawer h3{font-size:1.4rem;margin-bottom:1.2rem}
.drawer-close{appearance:none;background:none;border:1px solid var(--hairline);color:var(--ink);
  border-radius:var(--r);font:inherit;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.6rem 1rem;min-height:44px;margin-bottom:1.2rem;cursor:pointer}
.cart-lines{list-style:none;border-top:1px solid var(--hairline);margin-bottom:1.2rem}
.cart-lines li{display:flex;justify-content:space-between;gap:.8rem;align-items:center;border-bottom:1px solid var(--hairline);padding:.7rem 0;font-size:.95rem}
.cart-lines .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.cart-lines .nm{flex:1}
.cart-empty{color:var(--ink-60);font-style:italic;margin-bottom:1.2rem}
.cart-total{display:flex;justify-content:space-between;border-top:1px solid var(--hairline);padding-top:1rem;font-variant-numeric:tabular-nums}
.order-btn{display:block;width:100%;text-align:center;margin-top:1.1rem;background:var(--cta);color:var(--paper);text-decoration:none;
  padding:1rem;border-radius:var(--r);font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;min-height:44px}
.order-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.cart-hint{font-size:.8rem;color:var(--ink-60);margin-top:.9rem;line-height:1.5}

/* unwrap moment */
@keyframes unwrapPop{0%{transform:scale(1)}45%{transform:scale(1.3) rotate(-6deg)}100%{transform:scale(0);opacity:0}}
.cart-drawer.unwrap .cart-lines li{animation:unwrapPop .6s cubic-bezier(.34,1.56,.64,1) forwards}
.cart-drawer.unwrap .cart-lines li:nth-child(2){animation-delay:.07s}
.cart-drawer.unwrap .cart-lines li:nth-child(3){animation-delay:.14s}
.cart-drawer.unwrap .cart-lines li:nth-child(4){animation-delay:.21s}
.cart-drawer.unwrap .cart-lines li:nth-child(5){animation-delay:.28s}

/* ============ closing / footer ============ */
.closing{text-align:center;padding:clamp(4.5rem,9vw,8rem) 0}
.closing p{font-family:'Fraunces',serif;font-size:clamp(1.7rem,4.2vw,3rem);font-style:italic;font-weight:380;max-width:24ch;margin:0 auto 2rem;color:var(--ink-deep)}
footer{border-top:1px solid var(--hairline);padding:2.2rem 0 3rem;background:var(--paper-deep)}
.foot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}
.foot-links{display:flex;gap:.2rem;list-style:none}
.foot-links a{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);text-decoration:none;padding:.8rem .7rem;display:inline-block}

/* ============ hover (capable devices only) ============ */
@media (hover: hover){
  .nav-links a:hover{color:var(--ink)}
  .nav-links a.shop-cta:hover{background:var(--ink);color:var(--paper)}
  .menu-item:hover .menu-name{color:var(--fill)}
  .btn-solid:hover{filter:brightness(1.12)}
  .btn-ghost:hover{background:var(--ink);color:var(--paper)}
  .stepper button:hover{border-color:var(--ink)}
  .cart-pill:hover{filter:brightness(1.12)}
  .order-btn:hover{filter:brightness(1.12)}
  .foot-links a:hover{color:var(--ink)}
  .order-table a:hover{color:var(--gold)}
  .step a:hover{color:var(--gold)}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r)}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto !important}
  .heart-half{transition:none}
}