/* ==========================================================================
   Brown Sugar Bakery — menu site
   Brand palette
     cream   #FBF3E7   plum    #550E25   orange  #E78C3C
     red     #E8442A   rose    #B06A4E   lilac   #CCB0D4   lilacBg #F1E8F4
   ========================================================================== */

@font-face{font-family:'BSBSerif';src:url(fonts/bsb-serif.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'BSBSans';src:url(fonts/bsb-sans-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'BSBSans';src:url(fonts/bsb-sans-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'BSBHand';src:url(fonts/bsb-hand.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --cream:#FBF3E7; --plum:#550E25; --orange:#E78C3C; --red:#E8442A;
  --rose:#B06A4E; --lilac:#CCB0D4; --lilac-bg:#F1E8F4;
  --rule:2.5px; --hairline:rgba(85,14,37,.11);
  --serif:'BSBSerif',Georgia,'Times New Roman',serif;
  --sans:'BSBSans',Helvetica,Arial,sans-serif;
  --hand:'BSBHand','Brush Script MT',cursive;
  --pad-x:clamp(18px,5vw,56px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--plum);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--plum);color:var(--cream);
  padding:12px 20px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}
:where(a):focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}

.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad-x)}

/* ---------- header ---------------------------------------------------- */
/* padding-top only — the shorthand would cancel .wrap's horizontal padding */
.hd{text-align:center;padding-top:clamp(28px,5vw,60px)}
.hd .logo{width:min(100%,560px);margin:0 auto;display:block}
.hd .script{font-family:var(--hand);color:var(--red);margin:14px 0 0;
  font-size:clamp(32px,6vw,54px);line-height:1.15}
.hd .sub{font-size:clamp(9px,1.1vw,12px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--rose);margin:14px 0 0}

.scallop{width:100%;display:block;height:14px;margin:26px 0 0;opacity:.95;overflow:visible}

/* ---------- menu body -------------------------------------------------- */
/* .wrap sets the horizontal padding and would win on padding-top at equal
   specificity, so qualify this one */
main.wrap{padding-top:clamp(28px,4vw,44px)}

/* Fluid columns: two when there is room for two comfortable ones, otherwise
   one. `column-width` drives the decision, so phones and landscape phones drop
   to a single column on their own and the split rebalances as sections are
   added — no hand-assigned column lists to maintain. */
.cols{columns:2 360px;column-gap:clamp(32px,5vw,70px)}

.sec{margin-bottom:38px;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
.sec h2{font-family:var(--serif);font-size:clamp(21px,2.5vw,28px);letter-spacing:.085em;
  text-transform:uppercase;color:var(--plum);padding-bottom:.28em;
  border-bottom:var(--rule) solid var(--orange)}
.note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin:9px 0 -4px}

.sec ul{list-style:none;margin:.55em 0 0}
.sec li{display:block;padding:11px 0;border-bottom:1px solid var(--hairline)}
.sec li:last-child{border-bottom:none}

.row{display:flex;align-items:baseline;gap:.5em}
.nm{font-size:clamp(16px,1.7vw,19px);padding-right:.2em}
.nm i{font-style:normal;display:block;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--rose);margin-top:.35em}
.lead{flex:1;border-bottom:2px dotted rgba(85,14,37,.32);transform:translateY(-.22em);min-width:1.2em}
.pr{font-size:clamp(16px,1.7vw,19px);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr b{font-size:.66em;font-weight:400;color:var(--orange);margin-right:.12em;vertical-align:.22em}

.flin{font-size:clamp(11.5px,1.15vw,13px);line-height:1.5;color:var(--rose);margin:.5em 0 .1em}
.flin .w{white-space:nowrap}
.flin .d{color:var(--lilac);margin-right:.34em;display:inline-block}
.flin.add{color:var(--red);margin-top:.35em}
.flin.add em{font-style:normal;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-size:.86em;margin-right:.5em}

.pricenote{margin:8px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rose);text-align:center}

/* ---------- footer ------------------------------------------------------ */
.ft{background:var(--plum);color:var(--cream);border-radius:2px;
  margin:36px 0 0;padding:clamp(24px,3vw,38px);
  display:flex;justify-content:space-between;gap:clamp(20px,3vw,44px);align-items:stretch}
.fcol{flex:0 1 auto}
.lbl{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--orange);margin-bottom:.9em}
.addr{font-size:15px;line-height:1.55;white-space:nowrap}
.addr.ph{margin-top:.45em}
.ft a{color:var(--lilac);text-decoration:none;border-bottom:1px solid rgba(204,176,212,.35)}
.ft a:hover{color:#fff;border-bottom-color:#fff}
.ft .mid,.ft .right{border-left:1.5px solid rgba(251,243,231,.28);padding-left:clamp(20px,3vw,44px)}
.hr{display:flex;justify-content:space-between;gap:1.4em;font-size:14px;line-height:1.8;
  border-bottom:1px solid rgba(251,243,231,.14);padding-bottom:2px}
.hr:last-child{border-bottom:none}
.hr span{white-space:nowrap}
.hr span:last-child{color:var(--lilac)}

.colophon{text-align:center;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose);padding:26px 0 40px}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:760px){
  .nm{white-space:normal}
  /* flavor runs are the densest text on the page — give them a floor */
  .flin{font-size:12.5px;line-height:1.55}
  .sec{margin-bottom:32px}
  .ft{flex-direction:column;gap:26px}
  .ft .mid,.ft .right{border-left:none;border-top:1.5px solid rgba(251,243,231,.28);
    padding-left:0;padding-top:24px}
  .addr{white-space:normal;overflow-wrap:anywhere}
}

/* ---------- print --------------------------------------------------------- */
@media print{
  @page{margin:12mm}
  body{background:#fff}
  .skip,.colophon{display:none!important}
  .scallop{margin:14px 0 0}
  .hd{padding-top:0}
  main.wrap{padding-top:18px}
  .cols{column-count:2;column-width:auto;column-gap:26px}
  .sec{break-inside:avoid;margin-bottom:22px}
  .sec li{padding:7px 0}
  .ft{background:#fff;color:var(--plum);border:var(--rule) solid var(--plum);margin-top:22px;
    break-inside:avoid}
  .ft .lbl{color:var(--plum)}
  .ft a,.hr span:last-child{color:var(--plum)}
  .ft .mid,.ft .right{border-left:1.5px solid rgba(85,14,37,.3)}
}