:root {
  --papyrus: #f5e9d6;
  --paper: #fffaf0;
  --fava: #315944;
  --fava-dark: #203d30;
  --ink: #17231e;
  --turmeric: #e3a62f;
  --pomegranate: #a9363e;
  --wood: #8c4f32;
  --brass: #c4812d;
  --focus: #1b63d0;
  --radius: 1.4rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--papyrus); font-family: Avenir, "Avenir Next", "Segoe UI", sans-serif; line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: 1rem; background: white; padding: .75rem 1rem; transform: translateY(-180%); border-radius: .5rem; }
.skip-link:focus { transform: none; }
.site-header { min-height: 5.5rem; padding: .75rem clamp(1.25rem, 4vw, 4rem); display: flex; align-items: center; justify-content: space-between; background: var(--papyrus); }
.brand img { width: 10.8rem; height: auto; }
.header-cta { text-decoration: none; font-weight: 800; border-bottom: 2px solid var(--ink); }
.hero { min-height: calc(100svh - 5.5rem); padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem); background: var(--fava); color: var(--paper); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); align-items: center; gap: clamp(2.5rem, 8vw, 8rem); position: relative; overflow: hidden; }
.sun-disc { position: absolute; width: 24rem; height: 24rem; border-radius: 50%; background: var(--turmeric); opacity: .12; top: -10rem; left: 38%; }
.hero-copy, .hero-card { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 1rem; letter-spacing: .13em; text-transform: uppercase; font-size: .76rem; font-weight: 900; }
.eyebrow.dark { color: var(--pomegranate); }
h1, h2 { font-family: Georgia, "Times New Roman", serif; line-height: .94; letter-spacing: -.045em; margin: 0; }
h1 { font-size: clamp(3.6rem, 8.5vw, 8rem); max-width: 10ch; }
h1 em { color: var(--turmeric); font-weight: 400; }
.lede { max-width: 42rem; font-size: clamp(1.06rem, 1.7vw, 1.3rem); margin: 2rem 0; color: #eae4d8; }
.button, .form-row button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.4rem; border: 0; border-radius: 999px; padding: .85rem 1.4rem; background: var(--turmeric); color: var(--ink); font: inherit; font-weight: 900; text-decoration: none; cursor: pointer; }
.button:hover, .form-row button:hover { background: #f2b93d; }
.hero-card { aspect-ratio: 1/1.06; background: var(--pomegranate); border-radius: 48% 48% var(--radius) var(--radius); display: grid; place-items: end center; box-shadow: 2rem 2rem 0 rgba(13,36,26,.3); }
.hero-stamp { position: absolute; left: -1.5rem; top: 16%; width: 6.8rem; aspect-ratio: 1; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--turmeric); color: var(--ink); font: 800 .8rem/1.15 Avenir, sans-serif; transform: rotate(-9deg); }
.bowl-art { width: 76%; height: 64%; border-radius: 50% 50% 18% 18%; background: #e9d6bc; border: 1rem solid #fbf1df; transform: translateY(7%); position: relative; overflow: hidden; box-shadow: inset 0 -4rem 0 #cdad82; }
.bowl-art span { position: absolute; border-radius: 50%; }
.grain { width: 78%; height: 40%; background: #d59439; left: 11%; top: 12%; }
.greens { width: 45%; height: 38%; background: #4f7451; left: 4%; top: 8%; }
.tomato { width: 30%; height: 30%; background: #bc4a42; right: 8%; top: 8%; }
.falafel { width: 24%; aspect-ratio: 1; background: #795231; border: .3rem dotted #b78b45; top: 34%; }
.falafel.one { left: 23%; } .falafel.two { right: 21%; }
.tahina { width: 42%; height: 12%; background: #fff1cf; left: 29%; top: 54%; transform: rotate(-8deg); }
.marquee { overflow: hidden; background: var(--turmeric); padding: .8rem; white-space: nowrap; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.marquee div { text-align: center; }
.marquee span { color: var(--pomegranate); margin: 0 .75rem; }
.intro { max-width: 70rem; margin: auto; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 4vw, 3rem); text-align: center; }
.intro h2, .section-heading h2, .waitlist h2 { font-size: clamp(3rem, 6vw, 6rem); }
.intro > p:not(.eyebrow) { max-width: 47rem; margin: 2rem auto; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.menu-pills { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.menu-pills span { padding: .55rem 1rem; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 800; }
.gallery { background: var(--paper); padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 4rem); }
.section-heading { max-width: 66rem; margin-bottom: 3rem; }
.section-heading p:last-child { max-width: 42rem; font-size: 1.08rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 90rem; margin: auto; }
.concept-card { margin: 0; background: var(--papyrus); border-radius: var(--radius); overflow: hidden; min-height: 29rem; position: relative; }
.concept-card img, .concept-fallback { width: 100%; height: 23rem; object-fit: cover; }
.concept-card img { position: relative; z-index: 2; }
.concept-card.is-placeholder img { display: none; }
.concept-fallback { position: absolute; inset: 0 0 auto; background: var(--fava); overflow: hidden; }
.concept-fallback::after { content: "BEHGA"; position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-weight: 900; letter-spacing: .12em; color: var(--paper); }
.storefront .concept-fallback { background: #c7794c; border: 2.2rem solid #e3c89f; border-bottom: 4rem solid #aa7550; }
.storefront .awning { position: absolute; left: 8%; top: 20%; width: 84%; height: 20%; background: repeating-linear-gradient(90deg, var(--fava) 0 12%, #f4dfb9 12% 24%); clip-path: polygon(0 0,100% 0,94% 100%,6% 100%); }
.storefront .door { position: absolute; right: 13%; bottom: 0; width: 22%; height: 48%; background: #274a3a; }
.storefront .window { position: absolute; left: 12%; bottom: 0; width: 44%; height: 44%; background: #d6edf0; box-shadow: inset 0 -2rem rgba(227,166,47,.35); }
.counter .concept-fallback { background: linear-gradient(#eee0c8 0 48%, #dba43a 48% 52%, #477158 52%); display: flex; gap: 4%; justify-content: center; align-items: center; padding-top: 38%; }
.counter .concept-fallback span { width: 16%; height: 16%; border-radius: 50%; background: var(--pomegranate); border: .45rem solid var(--paper); }
.counter .concept-fallback span:nth-child(2n) { background: #c9923b; }
.dining .concept-fallback { background: repeating-linear-gradient(135deg,#a9363e 0 14px,#c9813b 14px 28px,#315944 28px 42px,#efd8b0 42px 56px); }
.dining .concept-fallback::before { content:""; position:absolute; inset: 18% 9% 0; background:#e5cfaa; border-radius: 9rem 9rem 0 0; }
.dining .table { position: absolute; left: 32%; bottom: 14%; width: 38%; height: 8%; background: var(--wood); border-radius: 50%; z-index: 1; }
.dining .chair { position:absolute; bottom:0; width: 16%; height: 30%; background:var(--fava); z-index:1; border-radius:1rem 1rem 0 0; }
.dining .chair.left { left:20%; } .dining .chair.right { right:18%; }
.food .concept-fallback { background: #dca33b; }
.food .dish { position:absolute; border-radius:50%; background:var(--paper); box-shadow: inset 0 0 0 1rem #c85b42; }
.food .dish.big { width:42%; aspect-ratio:1; left:8%; top:20%; } .food .dish.small { width:28%; aspect-ratio:1; right:10%; top:12%; box-shadow: inset 0 0 0 .7rem #5c794f; }
.food .cup { position:absolute; width:22%; height:32%; background:var(--fava); right:15%; bottom:7%; border-radius:.5rem .5rem 2rem 2rem; }
.concept-card figcaption { min-height: 6rem; padding: 1.15rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.concept-card figcaption strong { font: 700 1.35rem Georgia, serif; }
.concept-card figcaption span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #5b625d; }
.concept-note { max-width: 90rem; margin: 1.25rem auto 0; font-size: .78rem; color: #626861; }
.waitlist { background: var(--pomegranate); color: var(--paper); padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.waitlist > div > p:last-child { max-width: 35rem; font-size: 1.14rem; }
form label { display: block; font-weight: 800; margin-bottom: .5rem; }
.form-row { display: grid; grid-template-columns: 1fr auto; gap: .65rem; }
.form-row input { width: 100%; min-height: 3.4rem; border: 2px solid transparent; border-radius: 999px; padding: .8rem 1.15rem; font: inherit; background: var(--paper); color: var(--ink); }
.form-row input:focus { border-color: var(--turmeric); outline: 3px solid var(--paper); outline-offset: 3px; }
.form-row button:disabled { opacity: .65; cursor: wait; }
.trap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fine-print { margin: .65rem 0 0; font-size: .78rem; color: #f1d7d5; }
.form-status { min-height: 1.5rem; margin: .6rem 0 0; font-weight: 800; }
.form-status.success { color: #ffe5a0; } .form-status.error { color: #fff3f3; }
footer { background: var(--ink); color: var(--paper); padding: 3rem clamp(1.25rem, 4vw, 4rem); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
footer img { width: 9.6rem; } footer p:nth-child(2) { text-align:center; } footer p { margin: 0; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 5rem; }
  .hero-card { max-width: 29rem; width: 90%; justify-self: center; }
  .hero-stamp { left: -1rem; }
  .marquee div { text-align: left; animation: none; }
  .gallery-grid, .waitlist { grid-template-columns: 1fr; }
  .concept-card { min-height: 25rem; }
  .concept-card img, .concept-fallback { height: 19rem; }
  footer { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  footer p:nth-child(2) { text-align: center; }
}

@media (max-width: 480px) {
  .site-header { min-height: 4.8rem; }
  .brand img { width: 8.9rem; }
  .header-cta { font-size: .85rem; }
  .form-row { grid-template-columns: 1fr; }
  .form-row button { width: 100%; }
  h1 { font-size: clamp(3.2rem, 17vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}