.site-frame { position: relative; isolation: isolate; background: var(--green-deep); }
.header-art { position: absolute; z-index: -1; inset: 0 0 auto; height: var(--header-art-height, 355px); pointer-events: none; background-image: radial-gradient(ellipse at center, #09291f00 35%, #09291f70 100%), url('../images/header-pub-v04.jpg'); background-size: cover; background-position: center top; }
.masthead { position: relative; overflow: hidden; background: transparent; }
.masthead-inner { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 22px; padding-bottom: 4px; }
.brand { width: min(255px, 78%); }
.header-place { margin-top: 9px; color: var(--paper); font-size: 13px; letter-spacing: .14em; }
.header-place::before, .header-place::after { content: ''; display: inline-block; width: 32px; height: 1px; margin: 0 12px 4px; background: var(--gold); opacity: .65; }
.masthead h1 { margin-top: 10px; font: 650 29px/1.2 var(--display); font-variation-settings: 'SOFT' 90, 'WONK' 1; }
.pub-motto { display: none; }
.menu-body { padding-top: 10px; }
#menu-sections { display: grid; gap: 10px; }
.menu-section { position: relative; padding: 20px 20px 10px; overflow: hidden; border: 1px solid #e7d9aa; border-radius: 13px; color: var(--ink); background: var(--paper); background-image: url('../images/grain.svg'), radial-gradient(ellipse at top, #fff7de70, #decf9930); box-shadow: 0 3px 10px #00000012; scroll-margin-top: calc(var(--controls-height) + 14px); }
.section-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 84px; margin-bottom: 8px; }
.section-title { position: relative; z-index: 1; min-width: 0; }
.section-title h2 { font: 850 clamp(30px, 10vw, 46px)/1.04 var(--display); letter-spacing: -.045em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 60; overflow-wrap: anywhere; scroll-margin-top: calc(var(--controls-height) + 34px); }
/* Destinazione delle ancore: resta annunciata, senza contorno sul titolo. */
.section-title h2:focus { outline: none; }
[data-category="schiacciatine"] .section-title h2 { font-size: clamp(24px, 7.3vw, 40px); }
.section-motto { display: flex; align-items: center; gap: 10px; max-width: 240px; margin-top: 10px; font-size: 8px; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; }
.illustration-control { flex: 0 0 80px; width: 80px; height: 80px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; touch-action: manipulation; }
.section-illustration { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transform-origin: center; }
.section-ornament { margin-inline: 6px; font-size: 32px; color: #798164; }
.item-grid { position: relative; z-index: 1; }
.menu-item { padding: 12px 0; border-top: 1px solid var(--rule); }
.item-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.item-heading h3 { min-width: 0; font: bold 21px/1.18 var(--serif); overflow-wrap: break-word; }
.item-price { flex-shrink: 0; white-space: nowrap; font: bold 20px/1.18 var(--serif); font-variant-numeric: tabular-nums; }
.ingredients { margin-top: 4px; font-size: 15px; line-height: 1.4; }
.item-note { margin-top: 7px; font-size: 14px; font-style: italic; }
.footer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 28px; text-align: center; }
.footer > p:first-of-type { font: 650 21px/1.2 var(--display); }
.footer a { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; border-bottom: 1px solid #d3b77870; }
.demo-note { color: var(--paper-soft); font-size: 12px; line-height: 1.6; }
@media (max-width: 359px) {
    .menu-section { padding-inline: 15px; }
    .illustration-control { flex-basis: 62px; width: 62px; height: 68px; }
    .section-motto { gap: 6px; font-size: 7px; letter-spacing: .15em; }
    .section-motto .flourish { width: 44px; }
    .item-heading h3, .item-price { font-size: 19px; }
}
@media (min-width: 640px) {
    .brand { width: 350px; }
    .masthead-inner { padding-top: 28px; }
    .menu-section { padding: 28px 36px 16px; }
    .section-title h2 { font-size: 60px; }
    [data-category="schiacciatine"] .section-title h2 { font-size: 48px; }
    .section-header { min-height: 105px; }
    .section-motto { max-width: 350px; font-size: 10px; }
    .illustration-control { flex-basis: 120px; width: 120px; height: 120px; }
    .item-heading h3, .item-price { font-size: 24px; }
    .ingredients { font-size: 17px; }
}
@media (min-width: 900px) {
    body { background: radial-gradient(ellipse at 50% 0, #214b3a, var(--green-deep) 85%); }
    .site-frame { width: min(100% - 48px, 1160px); margin: 26px auto; border: 2px solid #dedbbd99; border-radius: 24px; box-shadow: 0 12px 50px #00000030; }
    .header-art { border-radius: 22px 22px 0 0; }
    .masthead-inner { padding-top: 12px; }
    .brand { width: 410px; }
    .masthead h1 { margin-top: 12px; font-size: 34px; }
    .pub-motto { display: block; position: absolute; top: 68px; padding: 14px 12px 26px; border-block: 1px solid #d3b77870; text-align: center; font-size: 12px; letter-spacing: .1em; line-height: 1.8; text-transform: uppercase; }
    .pub-motto::after { content: ''; position: absolute; bottom: 2px; left: calc(50% - 32px); width: 64px; height: 18px; background: url('../images/fioritura.svg') center / contain no-repeat; filter: brightness(0) invert(.8) sepia(.5); opacity: .7; }
    .motto-left { left: 17%; }
    .motto-right { right: 13%; }
    .menu-body { width: calc(100% - 20px); padding-top: 8px; }
    #menu-sections { gap: 12px; }
    .menu-section { padding: 30px 48px 20px; }
    .section-header { min-height: 96px; margin-bottom: 14px; }
    .section-title { display: block; }
    .section-title h2 { font-size: 70px; }
    [data-category="schiacciatine"] .section-title h2 { font-size: 56px; }
    .section-motto { margin-top: 10px; max-width: 280px; font-size: 9px; }
    .illustration-control { position: absolute; right: -8px; top: -8px; width: 210px; height: 210px; }
    .has-illustration .section-title { padding-right: 205px; }
    .has-illustration .section-motto { max-width: 280px; }
    .has-illustration .item-grid { padding-right: 210px; }
    .item-heading h3, .item-price { font-size: 26px; }
    .ingredients { font-size: 17px; }
    .menu-item { padding: 13px 0; }
    .options-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
    .allergen-note { padding-inline: 48px; }
}
@media (min-width: 1150px) {
    .section-title { display: flex; align-items: center; gap: 28px; width: 100%; }
    .section-title h2 { flex-shrink: 0; }
    .section-motto { margin: 0; max-width: 260px; flex: 0 0 260px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
    .brand { width: 350px; }
    .motto-left { left: 13%; }
    .motto-right { right: 11%; }
    .pub-motto { font-size: 10px; }
}


/* Mobile: due ritagli del medesimo fondale, proporzioni originali. */
@media (max-width: 639px) {
    .header-art { background-image: radial-gradient(ellipse at 50% 30%, #214b3a90, #09291f00 70%); }
    .header-art::before, .header-art::after { content: ''; position: absolute; inset-block: 0; width: 50%; background-image: url('../images/header-pub-v04.jpg'); background-size: auto 100%; background-repeat: no-repeat; }
    .header-art::before { left: 0; background-position: left top; mask-image: linear-gradient(to right, #000 35%, transparent 100%); }
    .header-art::after { right: 0; background-position: right top; mask-image: linear-gradient(to left, #000 30%, transparent 100%); }
}