:root { --paper: #efe2c8; --paper-light: #f8efd9; --ink: #614943; --chocolate: #6d5149; --cream: #fff8e8; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: "DM Sans", sans-serif; background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.55), transparent 25rem), repeating-linear-gradient(0deg, rgba(91,68,52,.018) 0 1px, transparent 1px 4px), var(--paper); }
.skip-link { position: absolute; left: -999px; }.skip-link:focus { left: 1rem; top: 1rem; z-index: 5; background: var(--cream); padding: .7rem; color: var(--ink); }
.hero { min-height: 540px; display: grid; justify-items: center; align-content: center; padding: 5rem 1.5rem; position: relative; overflow: hidden; text-align: center; background: linear-gradient(rgba(246,235,211,.86), rgba(239,226,200,.92)), url('assets/cakes.png') center 28% / cover; }
.hero::after, main::before { content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: radial-gradient(var(--ink) .5px, transparent .6px); background-size: 5px 5px; mix-blend-mode: multiply; }
.brand-mark { display: grid; justify-items: center; line-height: .7; color: var(--ink); border: 3px solid var(--ink); border-radius: 45% 45% 25% 25%; width: 62px; height: 63px; padding-top: 3px; position: relative; z-index: 1; }.brand-mark span { font-size: 2.5rem; transform: rotate(180deg); }.brand-mark small { font-weight: 800; font-size: .72rem; letter-spacing: .08em; }
.eyebrow { position: relative; z-index: 1; margin: 1.5rem 0 .2rem; font-size: .78rem; letter-spacing: .18em; font-weight: 700; }
h1, h2 { font-family: "Playfair Display", Georgia, serif; position: relative; z-index: 1; }h1 { font-size: clamp(4rem, 10vw, 7rem); font-style: italic; margin: 0; letter-spacing: -.07em; line-height: .9; } .home-kitchen { position: relative; z-index: 1; margin: .5rem 0; font-size: 1.1rem; font-weight: 700; letter-spacing: .2em; }.home-kitchen span { margin-left: .4rem; }
.intro { position: relative; z-index: 1; max-width: 510px; font-size: 1.04rem; line-height: 1.6; margin: 1.4rem auto; }.menu-button { position: relative; z-index: 1; display: inline-flex; gap: .8rem; padding: .9rem 1.4rem; border-radius: 99px; background: var(--chocolate); color: var(--cream); text-decoration: none; font-weight: 700; box-shadow: 0 5px 0 rgba(72,47,38,.2); }.menu-button:hover { background:#533b35; transform: translateY(-1px); }
.flourish { position: absolute; color: var(--ink); opacity: .25; font-size: 15rem; line-height: 1; }.flourish-one { left: -2rem; bottom: -4rem; transform: rotate(20deg); }.flourish-two { right: -2rem; top: -3rem; transform: rotate(205deg); }
main { position: relative; padding: 4.5rem max(1rem, calc((100% - 1200px)/2)); }.menu-intro { text-align: center; margin-bottom: 2.5rem; }.menu-intro .eyebrow { margin: 0 0 .7rem; }.menu-intro h2 { font-size: clamp(2rem, 5vw, 3rem); margin: 0; }.menu-intro p:last-child { margin: .7rem 0 0; }
.menu-grid { position: relative; z-index: 1; display: grid; gap: 1.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }.menu-page { cursor: zoom-in; appearance: none; position: relative; padding: 0; overflow: hidden; border: 5px solid rgba(97,73,67,.7); border-radius: 8px; background: var(--cream); box-shadow: 0 10px 25px rgba(81,58,46,.16); transition: transform .2s, box-shadow .2s; }.menu-page:hover, .menu-page:focus-visible { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 16px 34px rgba(81,58,46,.24); outline: 3px solid var(--chocolate); outline-offset: 3px; }.menu-page img { display:block; width:100%; aspect-ratio: 3/4; object-fit: cover; object-position: top; }.menu-page span { display:block; padding:.7rem; color:var(--cream); background:var(--chocolate); font-size:.88rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.menu-page-last { grid-column: 1 / -1; width: calc(50% - .875rem); justify-self:center; }.note { position:relative; z-index:1; text-align:center; max-width:650px; margin:3rem auto 0; line-height:1.55; font-size:.95rem; }
footer { text-align:center; padding:3rem 1rem; color:var(--cream); background:var(--chocolate); }.footer-mark { margin:auto; color:var(--cream); border-color:var(--cream); transform:scale(.7); }.footer-name { margin:.2rem 0 .8rem; font-family:"Playfair Display",serif; font-size:2rem; font-style:italic; }.footer-name span { display:block; font-family:"DM Sans",sans-serif; font-size:.65rem; font-style:normal; font-weight:700; letter-spacing:.22em; }.contact-details { display:flex; justify-content:center; align-items:center; gap:1.3rem; margin:1rem auto 1.5rem; }.contact-details p { margin:0 0 .4rem; }.contact-details a { display:block; width:max-content; max-width:100%; margin:.3rem auto; color:var(--cream); font-weight:700; }.qr-code { margin:0; }.contact-details img { display:block; width:94px; height:94px; padding:4px; border-radius:4px; background:#fff; }.qr-code figcaption { margin-top:.35rem; font-size:.68rem; font-weight:700; letter-spacing:.04em; }.footer-name ~ a { color:var(--cream); font-weight:700; }
.lightbox { max-width: min(95vw, 960px); max-height: 94vh; padding: .75rem; border: 0; background: var(--cream); color: var(--ink); box-shadow: 0 20px 70px rgba(0,0,0,.5); }.lightbox::backdrop { background: rgba(50,34,30,.78); backdrop-filter: blur(3px); }.lightbox img { display:block; max-width:100%; max-height:calc(88vh - 2rem); margin:auto; }.lightbox p { margin:.45rem .3rem .1rem; text-align:center; font-weight:700; }.close { position:fixed; top:1.5rem; right:1.5rem; width:42px; height:42px; border:0; border-radius:50%; color:var(--cream); background:var(--chocolate); cursor:pointer; font-size:2rem; line-height:1; }
@media (max-width: 640px) { .hero { min-height: 500px; padding:4rem 1rem; }.flourish{font-size:11rem}.menu-grid { grid-template-columns:1fr; gap:1.4rem; }.menu-page-last { grid-column:auto; width:auto; }.menu-page img { aspect-ratio:3/4; }.menu-page span { font-size:.78rem; } main { padding-top:3rem; }.contact-details { gap:.9rem; }.contact-details img { width:82px; height:82px; } }