/* Miso Bueno · brand system per brand-guide v2
   cream base · soft-black outlines · one or two brights per piece */

/* ---------- Fonts (self-hosted, latin subsets) ---------- */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/Fraunces-600.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:900; font-display:swap;
  src:url('/fonts/Fraunces-900.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/SpaceGrotesk-400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/fonts/SpaceGrotesk-500.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/SpaceGrotesk-700.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/Caveat-600.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --cream:#FAF3E0; --ink:#2B2320; --brown:#4E342E;
  --pink:#E23E7C; --matcha:#6DA544; --gold:#F2B134;
  --guajillo:#C8452F; --ube:#5B2A86;
  --card-shadow:5px 5px 0 var(--ink);
  --card-shadow-sm:4px 4px 0 var(--ink);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Space Grotesk',sans-serif; font-size:17px; line-height:1.6;
}
h1,h2,h3{font-family:'Fraunces',serif; line-height:1.1;}
h2{font-size:2.2rem; font-weight:900; margin-bottom:.5rem;}
h3{font-size:1.25rem; font-weight:900; margin-bottom:.35rem;}
p{margin-bottom:1rem;}
a{color:inherit;}
.wrap{max-width:960px; margin:0 auto; padding:0 24px;}
section{padding:64px 0;}
.caveat{font-family:'Caveat',cursive; font-weight:600;}
.note{font-size:.92rem; color:var(--brown);}
.section-lede{max-width:540px;}

.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:var(--guajillo); margin-bottom:.75rem;
}
.sticker{
  background:#fff; border:2.5px solid var(--ink); border-radius:16px;
  box-shadow:var(--card-shadow); padding:22px;
}
.tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  border:2px solid var(--ink); border-radius:999px; padding:2px 12px; background:#fff;
}
.tag-gold{background:var(--gold);}
.tag-matcha{background:var(--matcha); color:#fff;}
.tag-pink{background:var(--pink); color:#fff;}
.tag-ube{background:var(--ube); color:#fff;}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media(max-width:720px){ .grid2{grid-template-columns:1fr;} h2{font-size:1.8rem;} }

.divider{display:flex; justify-content:center; gap:26px; padding:8px 0;}
.divider svg{width:34px; height:34px; opacity:.9;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:.95rem; letter-spacing:.02em; text-decoration:none;
  border:2.5px solid var(--ink); border-radius:999px; padding:10px 26px;
  box-shadow:var(--card-shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink);}
.btn:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--ink);}
.btn-pink{background:var(--pink); color:#fff;}
.btn-brown{background:var(--brown); color:var(--cream);}
.btn-ghost{background:transparent; color:var(--cream); border-color:var(--gold); box-shadow:4px 4px 0 rgba(242,177,52,.55);}
.btn-ghost:hover{box-shadow:2px 2px 0 rgba(242,177,52,.55);}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--cream); border-bottom:2.5px solid var(--ink);
  padding:10px 22px;
}
.nav-brand{display:flex; align-items:baseline; text-decoration:none; gap:.04em;}
.nb-text{font-family:'Fraunces',serif; font-weight:900; font-size:1.35rem; letter-spacing:-.01em;}
.nb-o{width:.95rem; height:.95rem; transform:translateY(.12rem);}
.nb-space{width:.28em;}
.nav-links{display:flex; align-items:center; gap:20px; font-weight:500; font-size:.95rem;}
.nav-links a{text-decoration:none;}
.nav-links a:hover{color:var(--guajillo);}
.nav-cta{
  border:2px solid var(--ink); border-radius:999px; padding:4px 16px;
  background:var(--gold); font-weight:700; box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.nav-cta:hover{color:var(--ink); transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink);}
@media(max-width:560px){ .nav-links{gap:12px; font-size:.88rem;} }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(150deg, #3A2A22 0%, var(--brown) 55%, #6B4A3B 100%);
  color:var(--cream); text-align:center; padding:76px 24px 64px;
}
.badge-pill{
  display:inline-block; border:2px solid var(--gold); color:var(--gold); border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.26em; padding:6px 18px; margin-bottom:34px;
}
.wordmark{display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:.06em;}
.wm-text{
  font-family:'Fraunces',serif; font-weight:900; font-size:clamp(3rem, 11vw, 6.2rem);
  letter-spacing:-.01em;
}
.concha-o{
  width:clamp(2.1rem, 7.7vw, 4.35rem); height:clamp(2.1rem, 7.7vw, 4.35rem);
  transform:translateY(clamp(.28rem, 1vw, .55rem)); margin:0 .02em;
}
.wm-space{width:.35em;}
.tagline{
  color:var(--gold); font-family:'Caveat',cursive; font-weight:600;
  font-size:clamp(1.5rem, 4.5vw, 2.1rem); margin:14px 0 0;
}
.hero .sub{max-width:560px; margin:20px auto 0; font-size:1.02rem; color:#EFE3CD;}
.hero-ctas{display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:28px;}
.window-chip{
  display:inline-block; margin:26px auto 0; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:#C9B49B;
}
.window-chip.is-open{color:var(--gold); font-weight:700;}

/* concha wiggle on hover; skipped for reduced-motion folks */
@media(prefers-reduced-motion: no-preference){
  .wordmark:hover .concha-o, .nav-brand:hover .nb-o{animation:wiggle .5s ease 1;}
  @keyframes wiggle{
    25%{transform:translateY(.3rem) rotate(-7deg);}
    75%{transform:translateY(.3rem) rotate(7deg);}
  }
}

/* ---------- Story ---------- */
.story-grid{align-items:center;}
.story-tags{display:flex; flex-wrap:wrap; gap:10px;}
.story-art{text-align:center;}
.story-art svg{width:min(240px, 60%); height:auto;}
.art-caption{font-size:1.5rem; color:var(--guajillo); margin:6px 0 0;}

/* ---------- Menu ---------- */
.menu-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px;
}
@media(max-width:820px){ .menu-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .menu-grid{grid-template-columns:1fr;} }
.menu-card{
  background:#fff; border:2.5px solid var(--ink); border-radius:16px;
  box-shadow:var(--card-shadow); padding:20px; text-align:center; position:relative;
  transition:transform .12s ease, box-shadow .12s ease;
}
.menu-card:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink);}
.mc-art svg{width:96px; height:96px; margin-bottom:8px;}
.menu-card p{font-size:.9rem; color:var(--brown); margin:0;}
.menu-card .tag{margin-top:12px;}
.menu-card-soon{background:#FFF9EC; border-style:dashed;}
.rotating{margin-top:24px;}
.rotating .note{margin:0;}

/* ---------- Cycle ---------- */
.cycle{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:26px;}
@media(max-width:820px){ .cycle{grid-template-columns:1fr;} }
.step{
  background:#fff; border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--card-shadow-sm);
  padding:14px 12px;
}
.day{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; border-radius:999px; padding:2px 10px; margin-bottom:8px; border:2px solid var(--ink);
}
.day-matcha{background:var(--matcha);}
.day-pink{background:var(--pink);}
.day-gold{background:var(--gold); color:var(--ink);}
.day-guajillo{background:var(--guajillo);}
.day-brown{background:var(--brown);}
.step b{font-family:'Fraunces',serif; font-weight:900; display:block; font-size:.98rem; margin-bottom:3px;}
.step small{font-size:.78rem; color:var(--brown); display:block;}
.cycle-note{text-align:center; margin-top:18px; font-size:1.4rem; color:var(--brown);}

/* ---------- Order ---------- */
.order-panel{padding:34px 28px; text-align:center;}
.order-panel .section-lede, .order-panel p{max-width:520px; margin-left:auto; margin-right:auto;}
.order-ctas{margin:6px 0 18px;}
.faq-grid{margin-top:22px;}

/* ---------- Footer ---------- */
footer{background:var(--brown); color:#D8C7B2; text-align:center; padding:48px 24px; margin-top:56px;}
.seal{width:140px; height:140px; margin-bottom:14px;}
.fm{font-family:'Fraunces',serif; font-weight:900; font-size:1.6rem; color:var(--cream); margin-bottom:2px;}
.f-tag{color:var(--gold); font-size:1.4rem; margin-bottom:14px;}
.f-line{font-size:.85rem; margin-bottom:2px;}

/* ---------- 404 ---------- */
.oops{min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 24px;}
.oops svg{width:120px; height:120px; margin-bottom:18px;}
.oops h2{font-size:2.6rem;}