/* ============================================================
   NANA BUNS — Brand System v1.0
   Palette, type scale and components. Proportions on a
   Fibonacci/golden scale (8 13 21 34 55 89 144).
   ============================================================ */

:root{
  /* --- Core palette --- */
  --buttermilk:#F7EFE3;   /* 60% ground */
  --flour:#EFE2CE;        /* tonal shift */
  --glaze:#FFFCF6;        /* paper white */
  --molasses:#2D1D16;     /* ink / body type */
  --molasses-soft:#5A4436;
  --brick:#A6462B;        /* Memphis brick + cinnamon — primary brand */
  --brick-deep:#7E3320;
  --pan-gold:#DFA23E;     /* caramelized sugar — 10% accent */
  --pan-gold-soft:#F0C877;
  --live-oak:#6E7A5A;     /* Jacksonville — pantry / sauce line */
  --st-johns:#2E4A57;     /* river blue — roux / savory line */
  --blush:#D99C86;

  /* --- Type --- */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --ui:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* --- Space (Fibonacci) --- */
  --s1:8px; --s2:13px; --s3:21px; --s4:34px; --s5:55px; --s6:89px; --s7:144px;

  --maxw:1180px;
  --radius:3px;
  --shadow:0 2px 4px rgba(45,29,22,.06),0 12px 34px rgba(45,29,22,.09);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--buttermilk);color:var(--molasses);
  font-family:var(--ui);font-size:17px;line-height:1.618;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--brick);text-decoration:none}
a:hover{color:var(--brick-deep)}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;margin:0 0 var(--s3);
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 40}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem);letter-spacing:-.015em}
h2{font-size:clamp(2rem,4vw,3.05rem);letter-spacing:-.01em}
h3{font-size:clamp(1.3rem,2vw,1.62rem)}
p{margin:0 0 var(--s3);max-width:66ch}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
.narrow{max-width:760px;margin-inline:auto}
.center{text-align:center}
.center p{margin-inline:auto}

.eyebrow{
  font-family:var(--ui);font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brick);
  margin:0 0 var(--s2);
}
.eyebrow.on-dark{color:var(--pan-gold-soft)}
.lede{font-size:1.22rem;line-height:1.6;color:var(--molasses-soft)}

/* --- Rule with a swirl --- */
.rule{display:flex;align-items:center;gap:var(--s2);margin:var(--s4) 0;color:var(--brick);opacity:.5}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:currentColor}
.rule svg{width:20px;height:20px;flex:none}
.center .rule{max-width:320px;margin-inline:auto}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  font-family:var(--ui);font-weight:700;font-size:.86rem;letter-spacing:.1em;
  text-transform:uppercase;padding:15px var(--s4);border:1.5px solid var(--brick);
  background:var(--brick);color:var(--glaze);border-radius:var(--radius);
  cursor:pointer;transition:.18s ease;text-align:center;
}
.btn:hover{background:var(--brick-deep);border-color:var(--brick-deep);color:var(--glaze);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--brick)}
.btn--ghost:hover{background:var(--brick);color:var(--glaze)}
.btn--light{background:var(--pan-gold);border-color:var(--pan-gold);color:var(--molasses)}
.btn--light:hover{background:var(--pan-gold-soft);border-color:var(--pan-gold-soft);color:var(--molasses)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ============ Header ============ */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(247,239,227,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(45,29,22,.1);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) var(--s4);max-width:var(--maxw);margin:0 auto}
.brandmark{display:flex;align-items:center;gap:var(--s2);color:var(--molasses)}
.brandmark img{width:46px;height:46px;border-radius:50%}
.brandmark .wm{font-family:var(--display);font-weight:700;font-size:1.32rem;
  letter-spacing:.02em;line-height:1;font-variation-settings:"SOFT" 40,"WONK" 1}
.brandmark .wm small{display:block;font-family:var(--ui);font-size:.55rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--brick);margin-top:4px;white-space:nowrap}
.nav{display:flex;align-items:center;gap:var(--s4)}
.nav a{font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--molasses)}
.nav a:hover{color:var(--brick)}
.cart-btn{position:relative;background:none;border:0;cursor:pointer;color:var(--molasses);padding:6px;display:flex}
.cart-btn svg{width:24px;height:24px}
.cart-count{
  position:absolute;top:-2px;right:-4px;background:var(--brick);color:#fff;
  font-size:.62rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.cart-count[hidden]{display:none}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--molasses);padding:6px}
.menu-toggle svg{width:26px;height:26px}

/* ============ Hero ============ */
.hero{position:relative;overflow:hidden;background:var(--flour)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--s6);
  max-width:var(--maxw);margin:0 auto;padding:var(--s6) var(--s4)}
.hero h1{margin-bottom:var(--s3)}
.hero .lede{margin-bottom:var(--s4)}
.hero-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.hero-img{position:relative}
.hero-img img{border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-seal{
  position:absolute;bottom:-30px;left:-30px;width:132px;height:132px;border-radius:50%;
  background:var(--buttermilk);box-shadow:var(--shadow);padding:6px;
}
.hero-seal img{border-radius:50%}

/* ============ Bands ============ */
.band{padding:var(--s6) 0}
.band--tight{padding:var(--s5) 0}
.band--cream{background:var(--flour)}
.band--ink{background:var(--molasses);color:var(--buttermilk)}
.band--ink h2,.band--ink h3{color:var(--buttermilk)}
.band--ink p{color:rgba(247,239,227,.78)}
.band--brick{background:var(--brick);color:var(--glaze)}
.band--brick h2{color:var(--glaze)}
.band--brick p{color:rgba(255,252,246,.85)}

/* ============ Ticker ============ */
.ticker{background:var(--molasses);color:var(--pan-gold-soft);
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;padding:11px var(--s3)}

/* ============ Products ============ */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s4)}
.card{
  background:var(--glaze);border:1px solid rgba(45,29,22,.1);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--flour)}
.card-media img{width:100%;height:100%;object-fit:cover}
.tag{
  position:absolute;top:var(--s2);left:var(--s2);background:var(--brick);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;
}
.tag--soon{background:var(--st-johns)}
.tag--oak{background:var(--live-oak)}
.card-body{padding:var(--s3);display:flex;flex-direction:column;flex:1;gap:var(--s1)}
.card-body h3{margin:0}
.card-sub{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--molasses-soft);margin:0}
.card-body p{font-size:.95rem;color:var(--molasses-soft);margin:var(--s1) 0 0}
.card-foot{margin-top:auto;padding-top:var(--s3);display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.price{font-family:var(--display);font-size:1.45rem;font-weight:600;font-variation-settings:"SOFT" 30,"WONK" 0}
.price small{font-family:var(--ui);font-size:.72rem;font-weight:600;color:var(--molasses-soft);letter-spacing:.06em;display:block;margin-top:2px}

/* ============ Story split ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
.split--rev .split-media{order:2}
.quote{
  font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.34;
  font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1;max-width:20ch;
}
.attrib{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brick);margin-top:var(--s3)}
.band--ink .attrib{color:var(--pan-gold)}

/* ============ Steps / values ============ */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s4)}
.col-item .num{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--brick);opacity:.35;margin-bottom:var(--s2)}
.band--ink .col-item .num{color:var(--pan-gold);opacity:.6}
.col-item h3{font-size:1.18rem;margin-bottom:var(--s1)}
.col-item p{font-size:.95rem;margin:0}

/* ============ Palette swatches ============ */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s2)}
.sw{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(45,29,22,.12)}
.sw i{display:block;height:96px}
.sw span{display:block;background:var(--glaze);padding:10px var(--s2);font-size:.72rem;letter-spacing:.06em}
.sw b{display:block;font-family:var(--display);font-size:.92rem}

/* ============ Newsletter ============ */
.signup{display:flex;gap:var(--s1);max-width:460px;margin-top:var(--s3)}
.signup input{
  flex:1;padding:14px var(--s3);border:1.5px solid rgba(45,29,22,.22);border-radius:var(--radius);
  font-family:var(--ui);font-size:.95rem;background:var(--glaze);color:var(--molasses);
}
.band--ink .signup input{background:rgba(255,255,255,.07);border-color:rgba(247,239,227,.3);color:var(--buttermilk)}
.signup input:focus{outline:2px solid var(--brick);outline-offset:1px}

/* ============ Footer ============ */
.site-footer{background:var(--molasses);color:rgba(247,239,227,.72);padding:var(--s6) 0 var(--s4)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s4)}
.site-footer h4{font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pan-gold);margin:0 0 var(--s2)}
.site-footer a{color:rgba(247,239,227,.72);display:block;padding:4px 0;font-size:.94rem}
.site-footer a:hover{color:var(--pan-gold-soft)}
.foot-brand .wm{font-family:var(--display);font-size:1.5rem;color:var(--buttermilk);font-weight:700}
.foot-note{border-top:1px solid rgba(247,239,227,.15);margin-top:var(--s5);padding-top:var(--s3);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:.8rem}

/* ============ Cart drawer ============ */
.scrim{position:fixed;inset:0;background:rgba(45,29,22,.5);opacity:0;pointer-events:none;
  transition:opacity .25s ease;z-index:80}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(430px,100%);background:var(--buttermilk);
  z-index:90;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(45,29,22,.2);
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s4);border-bottom:1px solid rgba(45,29,22,.12)}
.drawer-head h3{margin:0;font-size:1.25rem}
.icon-btn{background:none;border:0;cursor:pointer;color:var(--molasses);padding:6px;display:flex}
.icon-btn svg{width:22px;height:22px}
.drawer-body{flex:1;overflow-y:auto;padding:var(--s3) var(--s4)}
.drawer-foot{padding:var(--s3) var(--s4) var(--s4);border-top:1px solid rgba(45,29,22,.12);background:var(--flour)}
.line{display:flex;gap:var(--s2);padding:var(--s3) 0;border-bottom:1px solid rgba(45,29,22,.09)}
.line img{width:74px;height:74px;object-fit:cover;border-radius:2px;flex:none}
.line-info{flex:1;min-width:0}
.line-info h4{font-family:var(--display);font-size:1rem;margin:0 0 2px;font-weight:600}
.line-info .meta{font-size:.76rem;color:var(--molasses-soft);margin:0 0 var(--s1)}
.qty{display:inline-flex;align-items:center;border:1px solid rgba(45,29,22,.25);border-radius:2px}
.qty button{background:none;border:0;width:28px;height:28px;cursor:pointer;color:var(--molasses);font-size:1rem;line-height:1}
.qty span{min-width:26px;text-align:center;font-size:.9rem;font-weight:700}
.line-right{text-align:right;display:flex;flex-direction:column;justify-content:space-between}
.line-price{font-weight:700;font-size:.98rem}
.remove{background:none;border:0;cursor:pointer;font-size:.72rem;color:var(--molasses-soft);
  text-decoration:underline;padding:0;letter-spacing:.04em}
.remove:hover{color:var(--brick)}
.totals{display:flex;justify-content:space-between;font-size:.95rem;margin-bottom:var(--s1)}
.totals.grand{font-family:var(--display);font-size:1.3rem;font-weight:600;margin:var(--s2) 0 var(--s3)}
.ship-bar{height:5px;background:rgba(45,29,22,.13);border-radius:3px;overflow:hidden;margin:var(--s1) 0 var(--s2)}
.ship-bar i{display:block;height:100%;background:var(--pan-gold);width:0;transition:width .3s ease}
.ship-note{font-size:.78rem;color:var(--molasses-soft);margin-bottom:var(--s2)}
.empty{text-align:center;padding:var(--s6) 0;color:var(--molasses-soft)}
.empty svg{width:52px;height:52px;opacity:.3;margin:0 auto var(--s3)}

/* ============ Toast ============ */
.toast{
  position:fixed;left:50%;bottom:var(--s4);transform:translate(-50%,20px);
  background:var(--molasses);color:var(--buttermilk);padding:13px var(--s4);
  border-radius:var(--radius);font-size:.9rem;z-index:100;opacity:0;
  pointer-events:none;transition:.25s ease;box-shadow:var(--shadow);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ Responsive ============ */
@media(max-width:900px){
  .hero-grid,.split{grid-template-columns:1fr;gap:var(--s4)}
  .split--rev .split-media{order:0}
  .hero-grid{padding:var(--s5) var(--s4)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-seal{width:96px;height:96px;bottom:-18px;left:-10px}
}
@media(max-width:720px){
  body{font-size:16px}
  .nav{position:fixed;inset:64px 0 auto;background:var(--buttermilk);flex-direction:column;
    align-items:stretch;gap:0;padding:var(--s2) var(--s4) var(--s4);
    border-bottom:1px solid rgba(45,29,22,.12);display:none;z-index:55}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid rgba(45,29,22,.08)}
  .menu-toggle{display:flex}
  .band{padding:var(--s5) 0}
  .wrap{padding:0 var(--s3)}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:430px){
  .brandmark img{width:40px;height:40px}
  .brandmark .wm{font-size:1.14rem}
  .brandmark .wm small{font-size:.48rem;letter-spacing:.18em}
}

/* ============================================================
   PRE-LAUNCH STATE
   Applied while the shop is not taking orders. Remove the
   `prelaunch` class from <body> to restore the working cart.
   ============================================================ */
body.prelaunch .cart-btn{display:none}

.notice{
  background:var(--molasses);color:var(--buttermilk);
  padding:var(--s3) var(--s4);border-radius:var(--radius);
  display:flex;gap:var(--s3);align-items:flex-start;
  margin-bottom:var(--s5);border-left:4px solid var(--pan-gold);
}
.notice svg{width:24px;height:24px;flex:none;color:var(--pan-gold);margin-top:2px}
.notice h3{font-size:1.12rem;margin:0 0 5px;color:var(--buttermilk)}
.notice p{margin:0;color:rgba(247,239,227,.8);font-size:.95rem;max-width:62ch}
.notice a{color:var(--pan-gold-soft);text-decoration:underline}

.tag--soon{background:var(--st-johns)}
.card.soon .card-media img{filter:saturate(.82)}
.price small.plan{color:var(--brick);font-weight:700}

.signup-note{font-size:.9rem;font-weight:700;margin-top:var(--s2);max-width:46ch}
.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup{position:relative}
.signup[hidden]{display:none}
.signup-note[hidden]{display:none}