:root {
     --wine-deep: #3d0c13;
     --wine: #671523;
     --wine-light: #8a2433;
     --gold: #c9a24b;
     --gold-bright: #eecf86;
     --gold-dim: #9c7e3a;
     --paper: #f6efdd;
     --paper-shade: #ecdfc0;
     --ink: #3a1712;
     --muted: #93805f;
     --veg: #1f7a3d;
     --nonveg: #a4231d;
     --pw: 380px;
     --ph: 540px;
 }

 * {
     box-sizing: border-box;
 }

 html,
 body {
     /* margin: 0; */
     /* padding: 0; */
     /* width: 100%; */
     /* min-height: 100%; */
     /* background: radial-gradient(ellipse at center, #241012 0%, #140708 70%, #0c0405 100%); */
     /* font-family: 'Cormorant Garamond', serif; */
     /* color: var(--ink); */
     /* overflow-x: hidden; */
 }
.room {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px 20px;
    gap: 16px;
    overflow: hidden;
}
 .room-title {
     /* font-family: 'Cinzel', serif; */
     letter-spacing: 1px;
     font-size: 22px;
     color: #ef1b06;
     /* text-transform: uppercase; */
     opacity: 1;
     text-align: center;
 }

 .stage {
     perspective: 2600px;
     perspective-origin: 50% 50%;
 }

 .book {
     position: relative;
     width: calc(var(--pw) * 2);
     height: 450px;
     display: flex;
     filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45));
 }

 .book.one-page {
     width: var(--pw);
 }

 .page-slot {
     position: relative;
     width: var(--pw);
     height: 450px;
     background: #ffffff;
     overflow: hidden;
     flex: 0 0 auto;
 }

 .page-slot.left-slot {
     border-radius: 6px 0 0 6px;
 }

 .page-slot.right-slot {
     border-radius: 0 6px 6px 0;
 }

 .book.one-page .left-slot {
     display: none;
 }

 .book.one-page .right-slot {
     border-radius: 6px;
     width: var(--pw);
 }

 .spine {
     position: absolute;
     top: 0;
     bottom: 0;
     left: calc(var(--pw) - 16px);
     width: 0px;
     pointer-events: none;
     z-index: 6;
     /* background: linear-gradient(to right, rgb(0 0 0 / 0%) 0%, rgba(0, 0, 0, .30) 42%, rgba(0, 0, 0, .30) 58%, rgba(0, 0, 0, 0) 100%); */
 }

 .book.one-page .spine {
     display: none;
 }

 .stack-edge {
     position: absolute;
     top: 3px;
     bottom: 8px;
     width: 11px;
     z-index: 2;
     pointer-events: none;
     background: repeating-linear-gradient(to bottom, #e7d9b8 0px, #e7d9b8 1.5px, #cdbb90 1.5px, #cdbb90 3px);
     box-shadow: 0 0 4px rgba(0, 0, 0, .25) inset;
 }

 .left-slot .stack-edge {
     left: -4px;
     border-radius: 3px 0 0 3px;
 }

 .right-slot .stack-edge {
     right: -4px;
     border-radius: 0 3px 3px 0;
 }

 .book.one-page .stack-edge {
     display: none;
 }

 .paper-tex {
     position: absolute;
     inset: 0;
     background: repeating-linear-gradient(115deg, rgb(138 116 116 / 2%) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, .012) 4px), linear-gradient(135deg, #f5eae0 0%, #eee9d624 100%);
 }

 .gutter-shade {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 46px;
     pointer-events: none;
 }

 .right-slot .gutter-shade {
     left: 0;
     background: linear-gradient(to right, rgb(164 156 156 / 14%), rgba(30, 8, 6, 0));
 }

 .left-slot .gutter-shade {
     right: 0;
     background: linear-gradient(to left, rgb(72 63 62 / 14%), rgba(30, 8, 6, 0));
 }

 .book.one-page .gutter-shade {
     display: none;
 }

 .page-pad {
     position: relative;
     z-index: 1;
     height: 100%;
     width: 100%;
     padding: 21px 23px 15px;
     display: flex;
     flex-direction: column;
     /* border-bottom-left-radius: 150px; */
 }

 .right-slot .page-pad {
     padding-left: 24px;
 }

 .left-slot .page-pad {
     padding-right: 24px;
 }

 /* ---- Flip overlay (the moving page) ---- */
 .flipper {
     position: absolute;
     top: 0;
     width: var(--pw);
     height: 450px;
     transform-style: preserve-3d;
     z-index: 20;
     pointer-events: none;
 }

 .flipper.animating {
     transition: transform .68s cubic-bezier(.42, .02, .2, 1);
 }

 .flipper .face {
     position: absolute;
     inset: 0;
     backface-visibility: hidden;
     background: var(--paper);
     overflow: hidden;
 }

 .flipper .face.back {
     transform: rotateY(180deg);
 }

 .flipper.at-right {
     left: calc(var(--pw));
     transform-origin: left center;
 }

 .flipper.at-left {
     left: 0;
     transform-origin: left center;
 }

 .flipper .face.front {
     border-radius: 0 6px 6px 0;
 }

 .flipper .face.back {
     border-radius: 6px 0 0 6px;
 }

 .flipper.at-left .face.front {
     border-radius: 6px 0 0 6px;
 }

 .flipper.at-left .face.back {
     border-radius: 0 6px 6px 0;
 }

 .flip-shine {
     position: absolute;
     inset: 0;
     pointer-events: none;
     background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 62%);
     opacity: 0;
 }

 /* ---- Cover ---- */
 .cover-face {
     background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .05), rgba(0, 0, 0, 0) 40%),
         linear-gradient(155deg, var(--wine-light) 0%, var(--wine) 45%, var(--wine-deep) 100%);
 }

 .cover-face.leather::before {
     content: "";
     position: absolute;
     inset: 0;
     background:
         repeating-linear-gradient(28deg, rgba(0, 0, 0, .05) 0 2px, rgba(0, 0, 0, 0) 2px 6px),
         repeating-linear-gradient(-32deg, rgba(255, 255, 255, .02) 0 1px, rgba(0, 0, 0, 0) 1px 5px);
     mix-blend-mode: overlay;
 }

 .cover-inner {
     position: relative;
     z-index: 2;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 26px;
     text-align: center;
     border: 1px solid rgba(233, 205, 134, .55);
     margin: 14px;
 }

 .chili-mark {
     width: 46px;
     height: auto;
     margin-bottom: 16px;
     filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
 }

 .cover-title {
     font-family: 'Cinzel', serif;
     font-weight: 600;
     font-size: clamp(22px, 4vw, 34px);
     letter-spacing: .12em;
     color: var(--gold-bright);
     text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
     margin: 0;
 }

 .cover-sub {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     color: #e6d9bf;
     opacity: .85;
     font-size: 14px;
     margin-top: 6px;
     letter-spacing: .04em;
 }

 .cover-rule {
     width: 58px;
     height: 1px;
     background: var(--gold);
     margin: 16px auto;
     opacity: .7;
 }

 .cover-tag {
     font-family: 'Jost', sans-serif;
     letter-spacing: .28em;
     font-size: 10px;
     color: var(--gold-dim);
     text-transform: uppercase;
 }

 .ribbon {
     position: absolute;
     top: -4px;
     right: 15%;
     width: 18px;
     height: 100px;
     background: linear-gradient(180deg, #7c1420, #4c0d15);
     clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
     box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
     animation: sway 4.5s ease-in-out infinite;
     transform-origin: top center;
     z-index: 3;
 }

 @keyframes sway {

     0%,
     100% {
         transform: rotate(-2deg);
     }

     50% {
         transform: rotate(2deg);
     }
 }

 .tap-hint {
     position: absolute;
     bottom: 18px;
     left: 0;
     right: 0;
     text-align: center;
     font-family: 'Jost', sans-serif;
     font-size: 10px;
     letter-spacing: .18em;
     color: var(--gold-dim);
     text-transform: uppercase;
     opacity: .75;
 }

 /* ---- Welcome / note ---- */
 .welcome-wrap,
 .note-wrap {
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     gap: 8px;
 }

 .welcome-wrap h2,
 .note-wrap h2 {
     font-family: 'Cinzel', serif;
     font-size: 18px;
     letter-spacing: .08em;
     color: var(--wine);
     margin: 0 0 6px;
 }

 .welcome-wrap p,
 .note-wrap p {
     font-size: 15px;
     line-height: 1.55;
     color: var(--ink);
     opacity: .85;
     max-width: 88%;
 }

 .welcome-rule {
     width: 44px;
     height: 1px;
     background: var(--gold-dim);
     margin: 8px auto 12px;
 }

 .addr {
     font-family: 'Jost', sans-serif;
     font-size: 11.5px;
     color: var(--muted);
     letter-spacing: .03em;
     line-height: 1.8;
 }

 /* ---- Menu pages ---- */
 .cat-head {
     margin-bottom: 8px;
     flex: 0 0 auto;
 }

 .cat-eyebrow {
     display: flex;
     align-items: center;
     gap: 8px;
     font-family: 'Jost', sans-serif;
     font-size: 9.5px;
     letter-spacing: .2em;
     color: var(--muted);
     text-transform: uppercase;
 }

 .diet-dot {
     width: 9px;
     height: 9px;
     border: 1.4px solid;
     flex: 0 0 auto;
 }

 .diet-dot.veg {
     border-color: var(--veg);
 }

 .diet-dot.veg::after {
     content: "";
     display: block;
     width: 5px;
     height: 5px;
     margin: 1.2px;
     background: var(--veg);
 }

 .diet-dot.nonveg {
     border-color: var(--nonveg);
 }

 .diet-dot.nonveg::after {
     content: "";
     display: block;
     width: 5px;
     height: 5px;
     margin: 1.2px;
     background: var(--nonveg);
 }

 .cat-title {
     font-family: 'Cinzel', serif;
     font-weight: 600;
     font-size: 16.5px;
     letter-spacing: .03em;
     color: var(--wine);
     margin: 4px 0 0;
 }

 .cat-title .contd {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 12px;
     color: var(--muted);
     font-weight: 500;
 }

 .cat-rule {
     height: 1px;
     background: linear-gradient(to right, var(--gold-dim), rgba(0, 0, 0, 0));
     margin-top: 7px;
 }

 .items {
     flex: 1 1 auto;
     overflow: hidden;
 }

 .item {
     padding: 6px 0;
     border-bottom: 1px dotted rgba(147, 128, 95, .35);
 }

 .item:last-child {
     border-bottom: none;
 }

 .item-row {
     display: flex;
     align-items: baseline;
     gap: 8px;
 }

 .item-name {
     font-weight: 600;
     font-size: 14.5px;
     color: var(--ink);
 }

 .item-leader {
     flex: 1 1 auto;
     border-bottom: 1px dotted rgba(147, 128, 95, .55);
     transform: translateY(-3px);
     min-width: 8px;
 }

 .item-price {
     font-family: 'Jost', sans-serif;
     font-weight: 500;
     font-size: 12.5px;
     color: var(--wine);
     white-space: nowrap;
 }

 .item-desc {
     font-style: italic;
     font-size: 11.5px;
     color: var(--muted);
     margin-top: 1px;
     line-height: 1.3;
 }

 .folio {
     flex: 0 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 7px;
     margin-top: 5px;
     border-top: 1px solid rgba(147, 128, 95, .25);
     font-family: 'Jost', sans-serif;
     font-size: 9.5px;
     letter-spacing: .1em;
     color: var(--muted);
     text-transform: uppercase;
 }

 .controls {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-top: 2px;
 }

 .nav-btn {
     font-family: 'Jost', sans-serif;
     letter-spacing: .12em;
     font-size: 11.5px;
     text-transform: uppercase;
     background: #f72222;
     color: #ffffff;
     border: 1px solid rgb(240 108 131 / 50%);
     padding: 8px 15px;
     cursor: pointer;
     transition: background .2s, opacity .2s;
     border-radius: 12px;
 }
.nav-btn:hover {
    background: rgb(246 199 199 / 27%);
    color: #000;
}
 .nav-btn:disabled {
     opacity: .3;
     cursor: default;
 }

 .nav-btn:disabled:hover {
     background: transparent;
 }

 .page-count {
     font-family: 'Jost', sans-serif;
     font-size: 11.5px;
     letter-spacing: .16em;
     color: #121212;
     opacity: 1;
 }

 @media (max-width:760px) {
     .cover-title {
         font-size: 22px;
     }

     .page-pad {
         padding: 24px 18px 20px;
     }

     .item-name {
         font-size: 13.5px;
     }

     .cat-title {
         font-size: 15px;
     }
 }