@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --teal:#7cc4c2; --teal-deep:#1f6a6c; --ice:#dcf0f5; --choc:#482d26; --choc-soft:#6d5148; --white:#fff; --butter:#f7d98f;
  --pad:clamp(1.25rem,4vw,3.5rem); --max:1280px; --gap:clamp(4rem,9vw,8rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--choc);font:400 1.0625rem/1.6 Inter,system-ui,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2{font-weight:800;letter-spacing:-.04em;line-height:1;text-wrap:balance}
h1{font-size:clamp(2.9rem,7.4vw,6.5rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem)}
h3{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.lede{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;max-width:34em}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--gap)}
:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--choc);color:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:0}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.7rem 1.5rem;border-radius:999px;font-weight:650;text-decoration:none;background:var(--choc);color:#fff;border:2px solid var(--choc);transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--choc)}
.btn.ghost{background:transparent;color:var(--choc)}
.btn.ghost:hover{background:var(--choc);color:#fff}
.on-dark .btn{background:var(--ice);color:var(--choc);border-color:var(--ice)}
.on-dark .btn:hover{background:transparent;color:var(--ice)}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.tlink{font-weight:650;text-underline-offset:.2em;text-decoration-thickness:2px}

/* Notice and header */
.notice{background:var(--choc);color:#fff;text-align:center;font-size:.92rem;padding:.5rem var(--pad)}
.notice a{font-weight:650;text-underline-offset:.2em}
.site-head{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #fff}
.head-in{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);height:76px;display:flex;align-items:center;gap:1.5rem}
.brand{position:relative;width:118px;height:76px;flex:none}
.brand img{position:absolute;top:8px;left:0;width:118px;filter:drop-shadow(0 3px 0 rgba(72,45,38,.18))}
.site-nav{display:flex;align-items:center;gap:1.6rem;margin-left:1rem}
.site-nav a{text-decoration:none;font-weight:550;font-size:1rem;padding:.3rem 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current]{border-color:var(--choc)}
.head-right{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.status{font-size:.92rem;font-weight:550;white-space:nowrap}
.status::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--teal-deep);margin-right:.45em}
.status.closed::before{background:#a9978f}
.head-right .btn{min-height:44px;padding:.45rem 1.2rem}
.burger{display:none;width:48px;height:48px;background:none;border:0;padding:12px;cursor:pointer;color:var(--choc)}
.burger span{display:block;height:3px;background:currentColor;border-radius:2px;margin:5px 0;transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Logo hangs over the hero at the top, then tucks into the bar on scroll */
.brand img{transition:width .18s,top .18s}
.stuck .brand img{width:64px;top:6px;filter:none}
/* The scalloped edge, lifted from the logo's seal */
.scallop{position:relative}
.scallop::after{content:"";position:absolute;left:0;right:0;bottom:-17px;height:18px;z-index:2;background:radial-gradient(circle at 20px 0,var(--edge,var(--teal)) 19.5px,transparent 20px) -6px 0/40px 18px repeat-x}

/* Hero */
.hero{background:var(--teal)}
.hero-in{max-width:var(--max);margin-inline:auto;padding:clamp(4rem,7vw,6rem) var(--pad) clamp(3.5rem,6vw,5.5rem);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.hero .lede{margin-top:1.5rem}
.seal-wrap{position:relative;justify-self:end;width:100%;max-width:540px}
.seal{clip-path:var(--seal);aspect-ratio:1;background:var(--choc);padding:9px}
.seal img{width:100%;height:100%;object-fit:cover;clip-path:var(--seal)}
.badge{position:absolute;left:-1.5rem;bottom:.5rem;width:clamp(116px,12vw,150px);aspect-ratio:1;background:var(--choc);color:#fff;clip-path:var(--seal);display:grid;place-content:center;text-align:center;font-weight:750;line-height:1.08;font-size:clamp(.95rem,1.25vw,1.15rem);letter-spacing:-.02em}
@media (prefers-reduced-motion:no-preference){
  .seal{animation:settle 1.1s cubic-bezier(.2,.8,.2,1) both}
  @keyframes settle{from{transform:rotate(-24deg) scale(.9)}to{transform:none}}
}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-block:clamp(3.5rem,5vw,4.5rem) 0}
.facts dt{font-size:.95rem;color:var(--choc-soft)}
.facts dd{font-size:1.25rem;font-weight:650;letter-spacing:-.015em;line-height:1.3}

/* Italian glossary */
.glossary-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.glossary{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2.5rem,4vw,3.5rem) clamp(1.25rem,2.5vw,2.5rem)}
.term:nth-child(1){grid-column:span 7}.term:nth-child(2){grid-column:span 5}.term:nth-child(3){grid-column:span 5}.term:nth-child(4){grid-column:span 7}
.term img{width:100%;height:clamp(240px,31vw,430px);object-fit:cover;border-radius:6px}
.term h3{margin-top:1.1rem;font-size:1.65rem;font-weight:750}
.term .say{color:var(--choc-soft);font-size:.98rem}
.term p.d{margin-top:.4rem;max-width:32em}
.term .p{font-weight:650;margin-top:.35rem}

/* Case index */
.index{background:var(--ice)}
.index-list{margin-top:2.5rem;border-top:2px solid var(--choc)}
.index-list a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem .25rem;text-decoration:none;border-bottom:1px solid rgba(72,45,38,.3);font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;transition:padding .15s}
.index-list a:hover{padding-left:.9rem;background:#fff}
.index-list span{font-size:1rem;font-weight:500;letter-spacing:0;white-space:nowrap}

/* Split sections */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split.wide-img{grid-template-columns:1.15fr .85fr}
.split img{width:100%;border-radius:6px;object-fit:cover}
.split p+p{margin-top:1rem}
.split h2+p{margin-top:1.25rem}
.dark{background:var(--choc);color:#fff}
.dark .chips li{border-color:rgba(255,255,255,.5)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.chips li{border:1.5px solid var(--choc);border-radius:999px;padding:.25rem .85rem;font-size:.95rem;font-weight:550}
.pull{background:var(--teal);text-align:center}
.pull blockquote{margin:0 auto;max-width:17em;font-size:clamp(2rem,5vw,4.1rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.pull p{margin-top:1.5rem}

/* Page heads */
.page-head{background:var(--teal)}
.page-head .wrap{padding-block:clamp(3.5rem,6vw,5.5rem) clamp(3rem,5vw,4.5rem)}
.page-head .lede{margin-top:1.25rem}

/* Menu */
.menu-bar{position:sticky;top:76px;z-index:30;background:#fff;border-bottom:1px solid rgba(72,45,38,.2)}
.menu-bar .wrap{display:flex;gap:1.5rem;align-items:center;justify-content:space-between;padding-block:.65rem;overflow-x:auto;scrollbar-width:none}
.jump{display:flex;gap:1.1rem;flex:none}
.jump a{font-weight:600;text-decoration:none;font-size:.98rem;white-space:nowrap;padding:.3rem 0}
.jump a:hover{text-decoration:underline;text-underline-offset:.25em}
.filters{display:flex;gap:.4rem;flex:none}
.filters button{font:inherit;font-size:.92rem;font-weight:600;min-height:38px;padding:.25rem .9rem;border-radius:999px;border:1.5px solid var(--choc);background:none;color:var(--choc);cursor:pointer;white-space:nowrap}
.filters button[aria-pressed=true]{background:var(--choc);color:#fff}
.menu-sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,4vw,4rem);padding-block:clamp(3rem,6vw,5rem);border-bottom:1px solid rgba(72,45,38,.2);scroll-margin-top:140px}
.menu-sec:last-of-type{border-bottom:0}
.menu-side{position:sticky;top:160px;align-self:start}
.menu-side p{margin-top:.75rem}
.menu-side img{margin-top:1.5rem;border-radius:6px;aspect-ratio:4/3;width:100%;object-fit:cover}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
caption{position:absolute;left:-9999px}
thead th{font-size:.88rem;font-weight:600;line-height:1.25;text-align:right;padding:.5rem 0 .6rem .9rem;border-bottom:2px solid var(--choc);vertical-align:bottom}
thead th:first-child{text-align:left;padding-left:0}
thead th small{display:block;font-weight:400;font-size:.8rem;color:var(--choc-soft)}
tbody th{text-align:left;font-weight:500;padding:.6rem 0}
tbody td{text-align:right;padding:.6rem 0 .6rem .9rem;white-space:nowrap}
tbody tr{border-bottom:1px solid rgba(72,45,38,.16)}
tbody th.group{font-size:1.15rem;font-weight:750;letter-spacing:-.015em;padding-top:1.6rem;padding-bottom:.35rem}
tbody th.group small{font-weight:400;font-size:.9rem;letter-spacing:0;color:var(--choc-soft);margin-left:.4rem}
tr.gr{border-bottom:0}
.tag{display:inline-block;font-size:.76rem;font-weight:650;line-height:1;padding:.22rem .45rem;border-radius:4px;background:var(--ice);margin-left:.4rem;white-space:nowrap;vertical-align:.08em}
.tag.so{background:#f1ece9}
.sub{display:block;font-size:.9rem;color:var(--choc-soft);font-weight:400}
.empty{padding:1.5rem 0}
[hidden]{display:none!important}
.menu-foot{background:var(--ice)}

/* Cakes */
.sizes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.25rem;align-items:end;margin-top:3rem}
.size svg{display:block;margin-bottom:1rem;fill:var(--teal);stroke:var(--choc);stroke-width:2.5}
.size h3{font-size:1.15rem}
.size p{font-size:.98rem;color:var(--choc-soft)}
.size .pr{color:var(--choc);font-weight:650;margin-top:.2rem}
.calc{background:var(--choc);color:#fff;border-radius:6px;padding:clamp(1.75rem,4vw,3rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:3.5rem}
.calc label{display:block;font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.calc input{width:100%;margin-top:1.1rem;accent-color:var(--teal);height:32px}
.calc output{display:block;font-size:clamp(2.8rem,6vw,4.6rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.calc .res-h{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:750;letter-spacing:-.03em;line-height:1.15}
.calc .res-p{margin-top:.5rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);counter-reset:s;margin-top:2.5rem}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-content:center;width:52px;height:52px;background:var(--choc);color:#fff;font-weight:750;font-size:1.2rem;clip-path:var(--seal);margin-bottom:1rem}
.steps p{margin-top:.35rem}
.spreads{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);margin-top:2.5rem}
.spread{border-top:3px solid var(--choc);padding-top:1rem}
.spread li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid rgba(72,45,38,.25);font-variant-numeric:tabular-nums}
.spread ul{margin-top:.8rem}
.spread .tot{font-weight:750;border-bottom:0}
.faq{max-width:52rem;margin-top:2rem;border-top:2px solid var(--choc)}
.faq details{border-bottom:1px solid rgba(72,45,38,.3)}
.faq summary{cursor:pointer;font-weight:650;font-size:1.15rem;padding:1rem 0;list-style-position:outside}
.faq p{padding-bottom:1.1rem;max-width:40em}

/* Story */
.timeline{margin-top:2.5rem;border-top:2px solid var(--choc)}
.timeline li{display:grid;grid-template-columns:170px 1fr;gap:1.5rem;padding:1.2rem 0;border-bottom:1px solid rgba(72,45,38,.3)}
.timeline b{font-size:1.3rem;font-weight:750;letter-spacing:-.02em}

/* Gallery */
.gal{columns:3;column-gap:1rem}
.gal button{display:block;width:100%;padding:0;border:0;background:none;margin-bottom:1rem;cursor:zoom-in;break-inside:avoid;color:inherit;font:inherit;text-align:left}
.gal img{width:100%;border-radius:6px}
.gal span{display:block;font-size:.92rem;padding:.35rem 0 0}
dialog{border:0;padding:0;background:none;max-width:min(92vw,1100px);max-height:92vh;color:#fff}
dialog::backdrop{background:rgba(40,24,20,.92)}
dialog img{max-height:82vh;width:auto;margin:auto;border-radius:6px}
dialog p{text-align:center;padding:.6rem 0 0}
dialog form{position:fixed;top:1rem;right:1rem;margin:0}
dialog form button{font:inherit;font-weight:650;background:#fff;color:var(--choc);border:0;border-radius:999px;min-height:44px;padding:.3rem 1.1rem;cursor:pointer}

/* Visit */
.hours{width:100%;max-width:26rem;margin-top:1rem}
.hours th{font-weight:500;padding:.45rem 0}
.hours td{padding:.45rem 0;font-weight:600}
.map{width:100%;height:clamp(320px,42vw,500px);border:0;border-radius:6px;display:block}
.visit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);margin-top:3rem}
.visit-grid p{margin-top:.4rem}

/* Footer */
.foot{background:var(--choc);color:#fff;padding-block:clamp(3rem,5vw,4.5rem) 2rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:2rem}
.foot img{width:130px}
.foot h3{font-size:1rem;margin-bottom:.5rem}
.foot li{padding:.15rem 0}
.foot a{text-underline-offset:.2em}
.foot small{display:block;margin-top:3rem;opacity:.75}
.mobile-bar{display:none}
.serve-note{display:none}

@media (max-width:1080px){
  .status{display:none}
  .site-nav{gap:1.1rem;margin-left:0}
}
@media (max-width:900px){
  .burger{display:block;margin-left:.25rem}
  .head-right{gap:.25rem}
  .head-right .btn{display:none}
  .head-in{height:64px;justify-content:space-between}
  .brand{width:92px;height:64px}
  .brand img{width:92px;top:6px}
  .stuck .brand img{width:54px;top:5px}
  .site-nav{position:fixed;inset:calc(64px + var(--nb,0px)) 0 0 0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:2.5rem var(--pad);margin:0;transform:translateX(100%);visibility:hidden;transition:transform .2s,visibility .2s;z-index:39}
  .site-nav.open{transform:none;visibility:visible}
  .site-nav a{font-size:2rem;font-weight:750;letter-spacing:-.03em;padding:.55rem 0}
  .hero-in,.split,.split.wide-img,.glossary-head,.calc{grid-template-columns:1fr}
  .seal-wrap{justify-self:center;max-width:min(84vw,460px);order:2}
  .badge{left:-.5rem}
  .term:nth-child(n){grid-column:span 12}
  .term img{height:68vw}
  .facts,.steps,.spreads,.visit-grid{grid-template-columns:1fr}
  .facts{gap:1.1rem}
  .sizes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu-sec{grid-template-columns:1fr;gap:1.25rem}
  .menu-side{position:static}
  .menu-side img{aspect-ratio:16/9}
  .menu-bar{top:64px}
  .menu-bar .wrap{flex-direction:column;align-items:stretch;gap:.35rem;overflow:visible;padding-block:.45rem}
  .jump,.filters{overflow-x:auto;scrollbar-width:none}
  .serve-note{display:block;font-size:.92rem;color:var(--choc-soft);padding-bottom:.75rem;border-bottom:2px solid var(--choc)}
  .menu-sec{scroll-margin-top:170px}
  .gal{columns:2}
  .foot-grid{grid-template-columns:1fr 1fr}
  .timeline li{grid-template-columns:1fr;gap:.2rem}
  .foot{padding-bottom:6rem}
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:35;background:#fff;padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));border-top:1px solid rgba(72,45,38,.25)}
  .mobile-bar .btn{min-height:46px;padding:.4rem}
  /* Cake and cheesecake tables turn into stacked price lists */
  table.wide thead{position:absolute;left:-9999px}
  table.wide tbody tr{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem;padding:.9rem 0}
  table.wide tbody th{grid-column:1/-1;padding:0 0 .35rem;font-weight:700}
  table.wide tbody td{display:flex;justify-content:space-between;padding:.12rem 0;font-size:.97rem}
  table.wide tbody td::before{content:attr(data-l);color:var(--choc-soft);white-space:normal;text-align:left;padding-right:.5rem}
  table.wide tbody td:empty{display:none}
}
@media (max-width:520px){
  .gal{columns:1}
  .foot-grid{grid-template-columns:1fr}
  .index-list a{font-size:1.45rem}
  .notice{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}