/* Baked Bakery & Cafe - one shared stylesheet for every page.
   Edit the color + spacing tokens here once and the whole site follows. */
:root{
  --cream:#faf4e8;      /* page canvas */
  --cream-2:#f2e7d0;    /* raised panels */
  --ink:#2c2118;        /* body text */
  --ink-soft:#5a4a3a;   /* secondary text */
  --cocoa:#3f2c1e;      /* brand brown */
  --cocoa-ink:#241810;  /* darkest brown / dark bands */
  --sage:#5b6b46;       /* herb green */
  --berry:#8a3b4f;      /* raspberry accent / links + buttons */
  --butter:#e7b34a;     /* warm accent fill (used on dark only) */
  --rule:#d9c8a7;       /* hairlines */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background-color:var(--cream); color:var(--ink);
  font-family:'Karla',system-ui,Arial,sans-serif; font-size:1.0625rem;
  line-height:1.6; text-align:left; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin-inline:auto; padding-inline:var(--sp-5)}
.content{max-width:66ch}     /* keeps reading line length comfortable */
.prose{max-width:62ch}
.prose p{color:var(--ink-soft)}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; color:var(--cocoa-ink); line-height:1.08; font-weight:600; margin:0 0 var(--sp-4)}
h1{font-size:clamp(2.6rem,6vw,4.25rem); letter-spacing:-.015em}
h2{font-size:2.25rem}
h3{font-size:1.5rem}
p{margin:0 0 var(--sp-4)}
a{color:var(--berry); text-underline-offset:3px}
a:hover{color:var(--cocoa-ink)}
a:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sage); outline-offset:3px}
.skip{position:absolute; left:-999px}
.skip:focus{left:var(--sp-4); top:var(--sp-4); background-color:var(--cocoa-ink); color:var(--cream); padding:var(--sp-3) var(--sp-4); border-radius:3px; z-index:5}
.script{font-family:'Caveat',cursive; color:var(--berry); font-size:2rem; line-height:1}
.eyebrow{text-transform:uppercase; letter-spacing:.22em; font-size:.8125rem; font-weight:700; color:var(--sage); margin:0 0 var(--sp-3)}

/* header / nav */
.site-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); background-color:var(--cream); border-bottom:2px solid var(--cocoa-ink)}
.brand{display:flex; align-items:center; gap:var(--sp-3); text-decoration:none; color:var(--cocoa-ink)}
.brand-mark{width:46px; height:46px; color:var(--berry); flex:none}
.brand-name{font-family:'Fraunces',serif; font-weight:700; font-size:1.5rem; color:var(--cocoa-ink); line-height:1; display:block}
.brand-sub{display:block; font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); margin-top:2px}
.nav{display:flex; flex-wrap:wrap; gap:var(--sp-4)}
.nav a{color:var(--cocoa); text-decoration:none; font-size:.9375rem; letter-spacing:.05em; text-transform:uppercase; padding:var(--sp-1) 0; border-bottom:2px solid transparent}
.nav a:hover{color:var(--berry); border-bottom-color:var(--butter)}
.nav a[aria-current="page"]{color:var(--berry); border-bottom-color:var(--berry)}

/* buttons */
.btn{display:inline-block; font-family:'Karla',sans-serif; font-weight:700; font-size:.9375rem; letter-spacing:.05em; text-transform:uppercase; background-color:var(--berry); color:var(--cream); padding:var(--sp-3) var(--sp-5); border:2px solid var(--berry); border-radius:2px; text-decoration:none; cursor:pointer}
.btn:hover{background-color:var(--cocoa-ink); color:var(--butter); border-color:var(--cocoa-ink)}
.btn-ghost{background-color:var(--cream); color:var(--cocoa-ink); border:2px solid var(--cocoa-ink)}
.btn-ghost:hover{background-color:var(--cocoa-ink); color:var(--cream)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5)}

/* intro (asymmetric, deliberately not a centered hero) */
.intro{display:grid; grid-template-columns:1.35fr .9fr; gap:var(--sp-7); align-items:center; padding:var(--sp-9) 0}
.lede{font-size:1.25rem; color:var(--ink-soft)}
.intro .lede{max-width:42ch}
.manifest .lede{color:var(--cream); background-color:var(--cocoa-ink)}
.eyebrow.on-dark{color:var(--butter); background-color:var(--cocoa-ink)}
.ticket{background-color:var(--cream-2); border:2px solid var(--cocoa-ink); border-radius:5px; padding:var(--sp-6); box-shadow:8px 8px 0 var(--butter)}
.ticket h2{font-size:1.5rem; margin-bottom:var(--sp-3)}
.ticket ul{list-style:none; margin:0; padding:0}
.ticket li{display:flex; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px dashed var(--rule)}
.ticket li:last-child{border-bottom:0}
.ticket li b{font-family:'Fraunces',serif; font-weight:600}

/* generic bands + rules */
.band{padding:var(--sp-8) 0}
.band-tight{padding:var(--sp-7) 0}
hr.rule{height:0; border:0; border-top:2px solid var(--rule); margin:var(--sp-7) 0}
.lead-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; margin-bottom:var(--sp-6)}

/* signature / case cards (auto-fit, unclassed children) */
.case{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--sp-5)}
.case>article{background-color:var(--cream); border:1.5px solid var(--rule); border-radius:5px; padding:var(--sp-5)}
.case>article h3{margin:0 0 var(--sp-2); font-size:1.25rem}
.case>article p{margin:0; color:var(--ink-soft); font-size:.9375rem}

/* badges */
.badge{display:inline-block; font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:var(--sp-1) var(--sp-2); border-radius:999px; margin-right:var(--sp-2)}
.badge-gf{background-color:var(--sage); color:var(--cream)}
.badge-ve{background-color:var(--cocoa); color:var(--cream)}
.legend{display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:center; color:var(--ink-soft); font-size:.9375rem; margin-bottom:var(--sp-6)}

/* dark manifesto band */
.manifest{background-color:var(--cocoa-ink); color:var(--cream); padding:var(--sp-9) 0}
.manifest h2{color:var(--butter); background-color:var(--cocoa-ink); font-size:2.25rem; max-width:20ch}
.manifest p{color:var(--cream); background-color:var(--cocoa-ink)}
.manifest .lede{font-size:1.25rem}

/* menu */
.menu-wrap>div{margin-bottom:var(--sp-8)}
.menu-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:var(--sp-4) var(--sp-7)}
.menu-list>li{border-bottom:1px solid var(--rule); padding-bottom:var(--sp-3)}
.menu-list>li b{font-family:'Fraunces',serif; font-weight:600; font-size:1.25rem; display:block}
.menu-list>li span{display:block; color:var(--ink-soft); font-size:.9375rem}

/* cake price ledger */
.ledger{width:100%; border-collapse:collapse; margin:var(--sp-5) 0}
.ledger caption{text-align:left; color:var(--ink-soft); font-size:.9375rem; margin-bottom:var(--sp-3)}
.ledger th,.ledger td{text-align:left; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--rule)}
.ledger thead th{background-color:var(--cocoa-ink); color:var(--cream); font-family:'Karla',sans-serif; font-size:.9375rem; letter-spacing:.04em; text-transform:uppercase}
.ledger td b{font-family:'Fraunces',serif}

/* form */
.cakeform{background-color:var(--cream-2); border:2px solid var(--cocoa-ink); border-radius:5px; padding:var(--sp-6); box-shadow:8px 8px 0 var(--sage)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
.form-grid>div{display:flex; flex-direction:column; gap:var(--sp-1)}
.form-grid>div.wide{grid-column:1 / -1}
label{font-weight:700; font-size:.9375rem}
input,select,textarea{font:inherit; padding:var(--sp-3); border:1.5px solid var(--cocoa); border-radius:3px; background-color:var(--cream); color:var(--ink)}
::placeholder{color:var(--ink-soft)}
.form-note{color:var(--ink-soft); font-size:.9375rem; margin-top:var(--sp-4)}

/* visit */
.visit{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-7); align-items:start}
.infocard{background-color:var(--cream-2); border:2px solid var(--cocoa-ink); border-radius:5px; padding:var(--sp-6); box-shadow:8px 8px 0 var(--sage)}
.infocard h2{font-size:1.5rem}
.dl{margin:0}
.dl div{display:flex; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px dashed var(--rule)}
.dl dt{font-weight:700; color:var(--cocoa)}
.dl dd{margin:0; color:var(--ink-soft); text-align:right}
.maplink{display:block; border:2px solid var(--cocoa-ink); border-radius:5px; padding:var(--sp-6); background-color:var(--cocoa-ink); color:var(--cream); text-decoration:none}
.maplink b{color:var(--butter); background-color:var(--cocoa-ink); font-family:'Fraunces',serif; font-size:1.5rem; display:block; margin-bottom:var(--sp-2)}
.maplink span{color:var(--cream); background-color:var(--cocoa-ink)}

/* cake lookbook */
.lookbook{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--sp-5)}
.lookbook>figure{margin:0; border:1.5px solid var(--rule); border-radius:5px; overflow:hidden; background-color:var(--cream)}
.lookbook>figure svg{display:block; width:100%; height:165px; background-color:var(--cream-2)}
.lookbook>figure figcaption{padding:var(--sp-4)}
.lookbook>figure figcaption h3{margin:0 0 var(--sp-1); font-size:1.25rem}
.lookbook>figure figcaption p{margin:0; color:var(--ink-soft); font-size:.9375rem}

/* footer */
.site-foot{background-color:var(--cocoa-ink); color:var(--cream); padding:var(--sp-8) 0 var(--sp-6); margin-top:var(--sp-9)}
.foot-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-6)}
.site-foot h2{font-size:1.25rem; margin:0 0 var(--sp-3)}
.foot-cols p{margin:0 0 var(--sp-2); color:var(--cream); background-color:var(--cocoa-ink)}
.site-foot a{color:var(--butter); background-color:var(--cocoa-ink)}
.site-foot a:hover{color:var(--cream); background-color:var(--cocoa-ink)}
.foot-fine{margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid #4a3526; color:var(--cream); background-color:var(--cocoa-ink); font-size:.8125rem}

@media (max-width:760px){
  .intro,.visit,.form-grid{grid-template-columns:1fr}
  .site-head{flex-direction:column; align-items:flex-start}
  h2{font-size:1.75rem}
  .manifest h2{font-size:1.75rem}
  .dl dd{text-align:left}
}