/* =====================================================================
   Sallies & Sammies — flagship design system ("home-1")
   Recreated from design_handoff_sallies_sammies_site/ — high fidelity;
   values are verbatim from the design reference files.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --cream:#FBF2E0;          /* page background */
  --paper:#FFFDF6;          /* card/section white */
  --ink:#3F2A14;            /* text, outlines */
  --ink-deep:#33240F;       /* footer bg */
  --bright:#FFF8EA;         /* text on tomato/ink, headings on green band */
  --tomato:#E0522F;         /* primary CTA, prices, accents */
  --tomato-dark:#B03E1D;    /* link hover */
  --green:#79A94F;          /* hours band, green cards */
  --sallie-tint:#EFF5E2;    /* sallie card bg */
  --sallie-border:#D9E4C2;  /* sallie card border */
  --mustard:#DFA02A;        /* catering strip, dashes */
  --badge:#F3DFAE;          /* badge pill bg */
  --muted:#6B563B;          /* menu descriptions */
  --muted-deep:#5C4930;     /* catering card body */
  --card-border:#EBDCBC;
  --rule:#EDDFBE;           /* menu row rules */
  --leader:#D9C69B;         /* dotted leaders */
  --input-border:#E3D4B2;
  --on-green:#2A1E0C;       /* body text on green band */
  --footer-text:#F6E9CF;
  --footer-link:#F6C48A;
  --font-body:'Source Sans 3','Segoe UI',Arial,sans-serif;
  --font-display:Fredoka,'Source Sans 3','Segoe UI',Arial,sans-serif;
}

/* ---------- Base ---------- */
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body)}
a{color:var(--tomato)}
a:hover{color:var(--tomato-dark)}
ss-mascot{display:inline-block;line-height:0}
.page{min-height:100vh;display:flex;flex-direction:column}

/* ---------- Nav (shared) ---------- */
.site-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 28px;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand ss-mascot{width:72px}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:.2px}
.nav-links{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-left:auto;font-weight:600;font-size:16px}
.nav-link{text-decoration:none;color:var(--ink)}
.nav-link:hover{color:var(--ink)}
.nav-link[aria-current="page"]{border-bottom:3px solid var(--tomato);padding-bottom:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-block;border-radius:999px;font-weight:700;text-decoration:none;font-family:inherit;border:0;cursor:pointer}
.btn-primary{background:var(--tomato);color:var(--bright)}
.btn-primary:hover{color:var(--bright)}
.btn-outline{background:transparent;border:3px solid var(--ink);color:var(--ink)}
.btn-outline:hover{color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--bright)}
.btn-ink:hover{color:var(--bright)}
.btn-deep{background:var(--ink-deep);color:var(--bright)}
.btn-deep:hover{color:var(--bright)}
/* Sizes (per placement, values from the mockups) */
.btn-nav{padding:10px 22px}                          /* nav pill (16px inherited) */
.btn-hero{font-size:18px;padding:14px 30px}          /* home hero */
.btn-hero.btn-outline{padding:11px 28px}
.btn-page{font-size:17px;padding:12px 26px}          /* menu page header */
.btn-cta{font-size:19px;padding:14px 30px}           /* catering hero */
.btn-cta.btn-outline{padding:11px 28px}
.btn-strip{font-size:17px;padding:13px 28px}         /* home catering strip */
.btn-strip.btn-outline{padding:10px 26px}
.btn-band{font-size:16px;padding:11px 24px}          /* about green band */
.btn-form{font-size:17px;padding:14px 30px;margin-top:20px}

/* ---------- Checker dividers ---------- */
.checker{height:14px;background:repeating-conic-gradient(var(--tomato) 0% 25%,var(--cream) 0% 50%) 0 0/28px 28px;opacity:.85}
.checker-mustard{background:repeating-conic-gradient(var(--mustard) 0% 25%,var(--cream) 0% 50%) 0 0/28px 28px;opacity:.8;margin-top:24px}

/* ---------- Cards ---------- */
.card{background:var(--cream);border:2px solid var(--card-border);border-radius:18px}
.card-sallie{background:var(--sallie-tint);border-color:var(--sallie-border)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}

/* ---------- Home: hero ---------- */
.hero{max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box;padding:40px 28px 64px;display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.hero-art{flex:1 1 340px;max-width:540px;min-width:280px}
.hero-art ss-mascot{width:100%}
.hero-copy{flex:1.15 1 340px;min-width:280px}
.hero-badge{display:inline-block;background:var(--badge);border-radius:999px;padding:6px 16px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 18px}
.hero-title{font-family:var(--font-display);font-weight:600;font-size:clamp(42px,6vw,74px);line-height:1.02;margin:0 0 18px}
.hero-sub{font-size:19px;line-height:1.55;max-width:46ch;margin:0 0 28px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.cta-row-center{justify-content:center}

/* ---------- Home: fan favorites ---------- */
.favorites{background:var(--paper);padding:64px 28px}
.favorites-inner{max-width:1200px;margin:0 auto}
.favorites-title{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4vw,44px);margin:0 0 6px}
.favorites-tag{margin:0 0 36px;font-size:17px}
.fav-group-head{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.fav-group-head ss-mascot{width:54px}
.fav-group-title{font-family:var(--font-display);font-weight:600;font-size:26px;margin:0}
.fav-grid-sammies{margin-bottom:44px}
.fav-card{padding:22px;display:flex;flex-direction:column;gap:10px}
.fav-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.fav-name{font-family:var(--font-display);font-weight:600;font-size:20px}
.fav-price{font-weight:700;color:var(--tomato);white-space:nowrap}
.fav-desc{margin:0;font-size:15.5px;line-height:1.5}
.favorites-more{margin:36px 0 0;font-size:17px;font-weight:600}

/* ---------- Green band (home hours / about visit) ---------- */
.band{background:var(--green);padding:56px 28px}
.band-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;color:var(--on-green)}
.band-inner-narrow{max-width:820px}
.band-col{flex:1 1 240px;min-width:240px}
.band-title{font-family:var(--font-display);font-weight:600;font-size:26px;margin:0 0 12px;color:var(--bright)}
.band-title-sm{font-size:24px}
.band-text{margin:0;font-size:17px;line-height:1.7;font-weight:600}
.band-text a{color:var(--on-green)}
.band-text a:hover{color:var(--on-green)}
.band-note{margin:0 0 12px;font-size:17px;line-height:1.6;font-weight:600}

/* ---------- Home: catering strip ---------- */
.strip{background:var(--mustard);padding:48px 28px}
.strip-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.strip-copy{flex:1 1 320px;min-width:260px}
.strip-title{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.5vw,36px);margin:0 0 8px}
.strip-text{margin:0;font-size:17px;line-height:1.5;max-width:56ch}

/* ---------- Footer (shared) ---------- */
.site-footer{background:var(--ink-deep);color:var(--footer-text);padding:52px 28px 40px;margin-top:auto}
.site-footer a{color:var(--footer-link)}
.site-footer a:hover{color:var(--footer-link)}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px}
.footer-brand{flex:1.2 1 260px;min-width:250px}
.footer-lockup{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-lockup ss-mascot{width:84px}
.footer-name{font-family:var(--font-display);font-weight:600;font-size:20px}
.footer-blurb{margin:0 0 14px;font-size:15.5px;line-height:1.6;opacity:.9}
.footer-social{margin:0;font-size:15.5px}
.footer-col{flex:1 1 200px;min-width:200px}
.footer-title{font-family:var(--font-display);font-weight:600;font-size:18px;margin:0 0 12px;color:var(--bright)}
.footer-text{margin:0;font-size:15.5px;line-height:1.7}
.footer-links{margin:0;font-size:15.5px;line-height:1.9}

/* ---------- Menu page ---------- */
.menu-header{max-width:900px;margin:0 auto;width:100%;box-sizing:border-box;padding:40px 28px 8px;text-align:center}
.menu-title{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,5.5vw,64px);margin:0 0 12px}
.menu-tag{font-size:18px;line-height:1.55;margin:0 0 20px}
.menu-main{max-width:1050px;margin:0 auto;width:100%;box-sizing:border-box;padding:28px 28px 72px}
.menu-section{margin:0 0 52px}
.menu-section-last{margin-bottom:8px}
.menu-section-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:4px solid var(--ink);padding-bottom:10px;margin-bottom:8px}
.menu-section-head ss-mascot{width:52px}
.menu-section-title{font-family:var(--font-display);font-weight:600;font-size:32px;margin:0}
.head-badge{background:var(--badge);border-radius:999px;padding:5px 14px;font-weight:700;font-size:14px}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 56px}
.menu-grid-narrow{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.menu-grid-merch{max-width:700px}
.menu-item{padding:14px 0;border-bottom:1px solid var(--rule)}
.menu-grid-narrow .menu-item{padding:12px 0}
.menu-item-solo{max-width:520px}
.menu-row{display:flex;align-items:baseline;gap:10px}
.menu-name{font-weight:700;font-size:17px}
.leader{flex:1;border-bottom:2px dotted var(--leader);min-width:24px}
.price{font-family:var(--font-display);font-weight:600;color:var(--tomato);white-space:nowrap}
.menu-desc{margin:5px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.menu-note{margin:18px 0 0;font-size:15px;color:var(--muted)}

/* ---------- Catering page ---------- */
.catering-header{max-width:860px;margin:0 auto;width:100%;box-sizing:border-box;padding:44px 28px 20px;text-align:center}
.catering-header ss-mascot{width:min(60%,300px)}
.catering-title{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,5.5vw,60px);margin:18px 0 14px}
.catering-sub{font-size:18.5px;line-height:1.6;margin:0 auto 26px;max-width:56ch}
.offerings{background:var(--paper);padding:60px 28px}
.offerings-inner{max-width:1100px;margin:0 auto}
.offerings-title{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4vw,40px);margin:0 0 6px}
.offerings-note{margin:0 0 32px;font-size:16.5px;color:var(--muted)}
.offer-card{padding:24px}
.offer-card ss-mascot{width:64px}
.offer-title{font-family:var(--font-display);font-weight:600;font-size:22px;margin:12px 0 8px}
.offer-title-dash{margin-top:14px}
.offer-text{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted-deep)}
.dash{width:44px;height:12px;border-radius:999px}
.dash-mustard{background:var(--mustard)}
.dash-brown{background:#8A6238}
.dash-tomato{background:var(--tomato)}
.offer-card-green{background:var(--green);border-color:var(--green);color:var(--bright)}
.offer-card-green .offer-title{margin:0 0 8px}
.offer-card-green .offer-text{color:inherit;margin:0 0 14px}
.offer-card-green a{color:var(--bright);font-weight:700}
.offer-card-green a:hover{color:var(--bright)}
.steps{padding:60px 28px}
.steps-inner{max-width:1100px;margin:0 auto}
.steps-title{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4vw,40px);margin:0 0 32px}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.step{display:flex;gap:16px;align-items:flex-start}
.step-num{font-family:var(--font-display);font-weight:600;font-size:20px;width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-num-1{background:var(--tomato);color:var(--bright)}
.step-num-2{background:var(--mustard);color:var(--ink)}
.step-num-3{background:var(--green);color:var(--bright)}
.step-title{font-family:var(--font-display);font-weight:600;font-size:20px;margin:8px 0 6px}
.step-text{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted-deep)}
.inquiry{background:var(--paper);padding:60px 28px}
.inquiry-inner{max-width:640px;margin:0 auto}
.inquiry-title{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4vw,40px);margin:0 0 8px}
.mock-note{display:inline-block;background:var(--badge);border-radius:10px;padding:8px 14px;font-weight:700;font-size:14px;margin:0 0 26px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px}
.field-wide{margin-top:16px}
.field input,.field textarea{font-family:inherit;font-size:16px;padding:12px 14px;border:2px solid var(--input-border);border-radius:12px;background:var(--cream);color:var(--ink);box-sizing:border-box;width:100%}
.field textarea{resize:vertical}

/* ---------- About page ---------- */
.about-header{max-width:820px;margin:0 auto;width:100%;box-sizing:border-box;padding:44px 28px 12px;text-align:center}
.about-title{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,5.5vw,60px);margin:0 0 16px}
.about-sub{font-size:19px;line-height:1.6;margin:0 auto;max-width:52ch}
.story{max-width:820px;margin:0 auto;width:100%;box-sizing:border-box;padding:40px 28px}
.story-title{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.5vw,36px);margin:0 0 14px}
.story-text{font-size:17.5px;line-height:1.7;margin:0 0 16px}
.story-text:last-of-type{margin-bottom:0}
.naming{background:var(--paper);padding:56px 28px}
.naming-inner{max-width:820px;margin:0 auto;text-align:center}
.naming-title{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.5vw,36px);margin:0 0 12px}
.naming-text{font-size:17.5px;line-height:1.7;margin:0 auto 36px;max-width:54ch}
.mascot-figures{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}
.mascot-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.mascot-figure ss-mascot{width:150px}
.mascot-caption{font-family:var(--font-display);font-weight:600;font-size:19px}
.mascot-caption-sub{display:block;font-family:var(--font-body);font-weight:400;font-size:14.5px;color:var(--muted)}