/* ============================================================
   Anush — neighbourhood bakery
   Default palette: Pomegranate. Other palettes applied at
   runtime by script.js (see the design's theme system).
   ============================================================ */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

:root{
  --canvas:#F6EFE2; --ink:#2A1D1A; --ink-fig:#3A2A25;
  --brand:#9C2235; --brand-deep:#86182A; --accent:#E0A23F;
  --card:#FFFFFF; --card-border:#EADFC9; --card-ph:#EFE2C8; --card-tag:#A08157;
  --muted:#6F574A; --on-brand-soft:#E6CFD0; --on-ink-soft:#C9B6AC; --on-ink-faint:#9C8579;
}

body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--brand);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit; }

.theme{ background:var(--canvas); min-height:100vh; width:100%; }
.container{ max-width:1180px; margin:0 auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; border-radius:11px;
  font-weight:700; font-size:16px; cursor:pointer;
  border:none;
}
.btn-accent{ background:var(--accent); color:var(--ink); }
.btn-outline{
  background:transparent; color:var(--canvas); font-weight:600;
  border:1.5px solid rgba(255,255,255,.4);
}
.btn-lg{ padding:16px 28px; }
.btn-outline.btn-lg{ padding:16px 26px; }
.btn-nav{ font-size:15px; padding:13px 24px; border-radius:10px; }
.btn-sm{ font-size:15px; padding:12px 22px; border-radius:10px; }
/* default (story button) size */
.btn:not(.btn-lg):not(.btn-nav):not(.btn-sm){ padding:15px 26px; }

/* ---------- Header / Nav ---------- */
.site-header{ position:relative; background:var(--brand); }
.nav{
  max-width:1180px; margin:0 auto; padding:26px 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:'DM Serif Display',serif; font-size:30px;
  color:var(--canvas); letter-spacing:.3px;
}
.nav-actions{ display:flex; align-items:center; gap:14px; }
.an-navlinks{ display:flex; align-items:center; gap:36px; }
.nav-link{ color:var(--canvas); font-size:16px; font-weight:500; }

.an-burger{
  display:none; background:transparent;
  border:1.5px solid rgba(255,255,255,.4); border-radius:9px;
  width:46px; height:46px; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.an-burger span{ display:block; width:20px; height:2px; background:var(--canvas); }

/* ---------- Hero ---------- */
.hero{ background:var(--brand); }
.an-herogrid{
  max-width:1180px; margin:0 auto; padding:24px 40px 96px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.eyebrow{
  font-family:'Archivo',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  margin:0 0 22px;
}
.hero-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(46px,6vw,76px); line-height:1.02;
  color:var(--canvas); margin:0 0 26px; letter-spacing:-.5px;
}
.hero-lead{
  font-size:clamp(17px,1.4vw,20px); line-height:1.6;
  color:var(--on-brand-soft); max-width:440px; margin:0 0 38px;
}
.hero-cta{ margin-bottom:30px; }
.an-cta-row{ display:flex; gap:14px; align-items:center; }
.rating{ display:flex; align-items:center; gap:10px; }
.stars{ color:var(--accent); font-size:16px; letter-spacing:2px; }
.rating-text{ color:var(--on-brand-soft); font-size:15px; }

/* ---------- Figures (photo placeholders) ---------- */
.figure{
  margin:0; border-radius:18px; position:relative;
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 2px,
    transparent 2px, transparent 16px);
}
.figure--brand{ background-color:var(--brand-deep); border:1px solid rgba(255,255,255,.14); }
.figure--ink{
  background-color:var(--ink-fig); border:1px solid rgba(255,255,255,.1);
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 2px,
    transparent 2px, transparent 16px);
}
.an-herofig{ min-height:420px; }
.an-storyfig{ min-height:430px; }
.figure--map{ min-height:380px; }
.fig-cap{
  position:absolute; left:24px; bottom:22px;
  font-family:ui-monospace,Menlo,monospace; font-size:12.5px;
  color:rgba(255,255,255,.6); letter-spacing:.04em;
}
.fig-cap--dim{ color:rgba(255,255,255,.5); }

/* ---------- Craft strip ---------- */
.strip{ background:var(--accent); }
.an-strip{
  max-width:1180px; margin:0 auto; padding:24px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.strip-item{
  margin:0; font-size:16px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.an-stripdot{
  width:5px; height:5px; border-radius:50%;
  background:rgba(42,29,26,.35); flex:none;
}

/* ---------- What we bake ---------- */
.menu-section{ background:var(--canvas); }
.menu-section .container{ padding:84px 40px 90px; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:44px; flex-wrap:wrap;
}
.section-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(38px,4.6vw,56px); color:var(--ink);
  margin:0; letter-spacing:-.5px;
}
.link-arrow{
  color:var(--brand); font-weight:700; font-size:16px;
  display:inline-flex; align-items:center; gap:8px;
}
.product-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:26px;
}
.product-card{
  background:var(--card); border-radius:16px; overflow:hidden;
  border:1px solid var(--card-border); box-shadow:0 1px 2px rgba(42,29,26,.04);
}
.card-ph{
  height:172px; position:relative; background-color:var(--card-ph);
  background-image:repeating-linear-gradient(135deg,
    rgba(0,0,0,.05) 0, rgba(0,0,0,.05) 2px,
    transparent 2px, transparent 15px);
}
.card-tag{
  position:absolute; left:16px; bottom:13px;
  font-family:ui-monospace,Menlo,monospace; font-size:11.5px;
  color:var(--card-tag); letter-spacing:.04em;
}
.card-body{ padding:24px 24px 22px; }
.product-name{
  font-family:'DM Serif Display',serif; font-weight:400; font-size:24px;
  color:var(--ink); margin:0 0 7px;
}
.product-desc{ font-size:15px; color:var(--muted); line-height:1.5; margin:0 0 20px; }
.product-foot{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-weight:700; font-size:18px; color:var(--brand); }
.add-btn{
  width:44px; height:44px; border-radius:11px; border:none;
  background:var(--brand); color:var(--canvas); font-size:22px; line-height:1;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}

/* ---------- Our story ---------- */
.story{ background:var(--ink); }
.an-storygrid{
  max-width:1180px; margin:0 auto; padding:90px 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.story-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(36px,4.4vw,54px); line-height:1.06;
  color:var(--canvas); margin:0 0 24px; letter-spacing:-.4px;
}
.story-text{
  font-size:17px; line-height:1.65; color:var(--on-ink-soft);
  max-width:460px; margin:0 0 18px;
}
.story-text + .story-text{ margin-bottom:34px; }
.em-accent{ font-style:italic; color:var(--accent); }

/* ---------- Visit ---------- */
.visit{ background:var(--brand); }
.an-visitgrid{
  max-width:1180px; margin:0 auto; padding:90px 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.visit-title{
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(36px,4.4vw,54px); line-height:1.05;
  color:var(--canvas); margin:0 0 30px; letter-spacing:-.4px;
}
.info-list{ margin:0 0 36px; display:grid; gap:18px; }
.info-row{ display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:baseline; }
.info-term{
  font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.info-desc{ margin:0; font-size:17px; color:var(--canvas); line-height:1.5; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); }
.an-foot{
  max-width:1180px; margin:0 auto; padding:56px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.foot-brand{ font-family:'DM Serif Display',serif; font-size:28px; color:var(--canvas); margin:0 0 8px; }
.foot-tag{ font-size:14.5px; color:var(--on-ink-faint); margin:0; }
.foot-links{ display:flex; gap:30px; align-items:center; }
.foot-link{ color:var(--on-ink-soft); font-size:15px; font-weight:500; }

/* ---------- Palette switcher (design theme control) ---------- */
.palette-switch{
  position:fixed; right:20px; bottom:20px; z-index:50;
  display:flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--canvas);
  padding:11px 16px; border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.palette-switch__label{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-ink-soft);
}
.palette-switch__dots{ display:flex; gap:9px; }
.palette-dot{
  width:22px; height:22px; border-radius:50%;
  border:2px solid transparent; padding:0; cursor:pointer;
  background:var(--dot); outline:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;
  transition:transform .12s ease, border-color .12s ease;
}
.palette-dot:hover{ transform:scale(1.12); }
.palette-dot.is-active{ border-color:var(--canvas); }
.palette-dot:focus-visible{ border-color:var(--canvas); }

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .an-navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:4px; background:var(--brand-deep);
    padding:16px 28px 28px; border-top:1px solid rgba(255,255,255,.16);
    align-items:flex-start;
  }
  .an-navlinks.an-open{ display:flex; }
  .an-navlinks .nav-link{ padding:10px 0; font-size:17px; }
  .an-burger{ display:flex; }
  .an-herogrid{ grid-template-columns:1fr; gap:36px; }
  .an-herofig{ min-height:300px; order:-1; }
  .an-strip{ flex-direction:column; align-items:flex-start; gap:14px; }
  .an-stripdot{ display:none; }
  .an-storygrid{ grid-template-columns:1fr; }
  .an-storyfig{ min-height:280px; }
  .an-visitgrid{ grid-template-columns:1fr; }
  .an-foot{ flex-direction:column; gap:28px; align-items:flex-start; }
}
@media (max-width:560px){
  .an-cta-row{ flex-direction:column; align-items:stretch; }
  .an-cta-row a{ justify-content:center; }
  .palette-switch{ right:12px; bottom:12px; padding:9px 13px; }
}