/* The Advanced website's layouts (Studio, Editorial, Noir, Photo café, Wave) and the pieces they share, on top of site.css. */
html, body { overflow-x: clip; }
:where(.site a) { color: inherit; } /* zero specificity: any class (a button, a card, a tile) sets its own colour */
.site .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.site .inp, .rsv select, .rsv textarea, .rsv input:not([type=checkbox]) { width: 100%; border: 0; border-radius: 12px; padding: 11px 14px; background: var(--bg); color: var(--ink); font: 500 14px var(--f-body); box-shadow: 0 0 0 1px var(--line); }
.rsv label { display: grid; gap: 5px; }
.rsv .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rsv .error { color: #b3261e; margin: 0; font-size: 13px; }
.muted2 { margin: 0; color: var(--muted); font-size: 13px; }
.hrs .today b { color: var(--brand); }
.s-nav .lg { text-decoration: none; color: inherit; }
.s-nav .lg i { overflow: hidden; }
.s-nav .btn.lang { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); padding: 9px 14px; }
.s-vis .art.big img, .art img { border-radius: inherit; }
#booking-status { margin: 4px 0; padding: 12px; border-radius: 14px; background: var(--soft); font-size: 13px; }
#booking-status.bad { background: color-mix(in srgb, #d64545 14%, var(--surface)); }
.cta2 a.btn { text-decoration: none; }
.btn.light { background: #fff; color: #1b1b1b; }
.was { opacity: .5; font-weight: 500; font-size: .8em; }

/* section heads */
.s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.s-head h2 { margin: 0 0 6px; font: 700 clamp(26px, 3.6vw, 40px)/1.1 var(--f-head); }
.s-head p { margin: 0; color: var(--muted); }

/* photo and card pieces */
.ph { overflow: hidden; background: color-mix(in srgb, var(--tint, #d9b48a) 40%, var(--surface)); display: grid; place-items: center; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.ph.art svg { width: 70%; height: 70%; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .25)); }
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dcard { position: relative; display: block; border-radius: calc(var(--r) * .9); overflow: hidden; text-decoration: none; color: #fff; }
.dcard.over { aspect-ratio: 3 / 4; }
.dcard.over .ph { position: absolute; inset: 0; border-radius: 0; }
.dcard.over .ph.art svg { margin-top: -18%; }
.dcard .shade { position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .78)); }
.dcard .txt { position: absolute; inset-inline: 0; bottom: 0; padding: 14px 16px 16px; display: grid; gap: 2px; }
.dcard .txt small { font: 600 10.5px var(--f-body); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.dcard .txt b { font: 700 18px var(--f-head); }
.dcard .txt em { font-style: normal; font-size: 12px; opacity: .78; }
.dcard .pr { margin-top: 6px; font: 600 14px var(--f-body); }
.dcard .plus { position: absolute; inset-inline-end: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #1b1b1b; display: grid; place-items: center; }
.dcard .plus svg { width: 16px; height: 16px; }
.dcard.dark { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.dcard.dark .ph { aspect-ratio: 1.15; border-radius: 0; }
.dcard.dark .txt { position: static; padding: 14px 52px 16px 16px; }
.dcard.dark .plus { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.dcard.round { background: color-mix(in srgb, var(--soft) 70%, transparent); color: var(--ink); padding: 18px; display: grid; gap: 10px; justify-items: center; text-align: center; border-radius: calc(var(--r) + 8px); }
.dcard.round .ph { width: 100%; aspect-ratio: 1.1; border-radius: calc(var(--r) * .7); background: transparent; }
.dcard.round b { font: 600 16px var(--f-head); }
.dcard.round .pr { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.dcard.round .buy { font-style: normal; background: var(--ink); color: var(--bg); border-radius: 99px; padding: 6px 14px; font: 700 11px var(--f-body); }
.strip { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.strip::-webkit-scrollbar { display: none; }
.strip .dcard { flex: 0 0 min(240px, 70%); scroll-snap-align: start; }
.ctiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ctile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--r) * .9); overflow: hidden; text-decoration: none; color: #fff; }
.ctile .ph { position: absolute; inset: 0; border-radius: 0; }
.ctile .ph.art svg { margin-top: -10%; }
.ctile .shade { position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0, 0, 0, .7)); }
.ctile .txt { position: absolute; inset-inline: 0; bottom: 0; padding: 16px; display: grid; gap: 2px; }
.ctile b { font: 700 19px var(--f-head); }
.ctile small { opacity: .8; font-size: 12px; }
.s-feats .feat { display: flex; gap: 12px; align-items: center; }
.s-feats .feat > div { display: grid; gap: 2px; }
.revs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-foot .wrap.fbar, .s-foot { color: var(--muted); }
.s-foot a { text-decoration: none; }
.fbar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 22px 34px; font-size: 13px; }

/* every layout but Studio runs full width at the top */
[data-spage="0"] .top-wrap { position: relative; }
[data-spage="0"] .s-nav { position: absolute; inset-inline: 0; top: 0; z-index: 5; max-width: 1180px; margin-inline: auto; padding: 18px 28px; }
[data-spage="0"] .s-hero { padding: 0; display: block; position: relative; min-height: 560px; }
.hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--deep); }
.hero-photo.none { display: grid; place-items: center; background: var(--deep); }
.hero-photo.none .art.big { width: min(46%, 380px); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .5); background: color-mix(in srgb, var(--tint) 38%, var(--surface)); }
.hero-in { position: relative; z-index: 2; max-width: 1180px; margin-inline: auto; padding: 150px 28px 90px; }
.hero-in h1 { max-width: 14ch; }

/* ---- Editorial: a light photo, the numbers, cards on photos ---- */
.lay-editorial .hero-photo { background-color: color-mix(in srgb, var(--soft) 80%, #fff); }
.lay-editorial::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 8%, color-mix(in srgb, var(--bg) 70%, transparent) 42%, transparent 75%); z-index: 1; }
[dir="rtl"] .lay-editorial::after { transform: scaleX(-1); }
.lay-editorial h1 { font-size: clamp(44px, 7vw, 84px); line-height: .98; letter-spacing: -.02em; }
.lay-editorial .proof { border-top: 1px solid var(--line); padding-top: 18px; gap: 36px; }
.lay-editorial .hero-photo.none .art.big { margin-inline-start: 30%; }
body[data-slayout="editorial"] .s-story { background: var(--deep); }
body[data-slayout="editorial"] .s-feats { grid-template-columns: repeat(4, 1fr); padding: 26px 0; border-block: 1px solid var(--line); margin-bottom: 56px; }
body[data-slayout="editorial"] .s-feats .feat { padding-inline: 18px; border-inline-start: 1px solid var(--line); }
body[data-slayout="editorial"] .s-feats .feat:first-child { border: 0; padding-inline-start: 0; }

/* ---- Noir: dark, a serif voice, a torn-paper strip ---- */
body[data-slayout="noir"] { --f-head: 'Playfair Display', 'Cormorant Garamond', 'Amiri', serif; }
.lay-noir { display: grid !important; grid-template-columns: 1.05fr .95fr; align-items: center; min-height: 600px; max-width: 1180px; margin-inline: auto; position: relative; }
.lay-noir .hero-in { padding: 140px 28px 90px; }
.lay-noir h1 { font-weight: 600; font-size: clamp(42px, 6vw, 78px); letter-spacing: -.01em; }
.lay-noir h1 em { color: var(--pop); font-style: italic; }
.lay-noir .hero-vis { position: relative; min-height: 420px; }
.lay-noir .hero-photo { border-radius: 46% 54% 50% 50% / 50% 45% 55% 50%; inset: 8% 0 8% 0; background-position: center; }
.lay-noir .stamp { position: absolute; inset-inline-end: 4%; bottom: 8%; width: 108px; height: 108px; color: var(--pop); }
.lay-noir .stamp text { fill: currentColor; font: 700 10px var(--f-body); letter-spacing: .18em; }
body[data-slayout="noir"] .s-feats { background: #efe6d6; color: #2b2118; padding: 38px 0 28px; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: max(28px, calc(50vw - 540px)); clip-path: polygon(0 12px, 3% 0, 6% 12px, 9% 2px, 12% 12px, 15% 0, 18% 12px, 21% 2px, 24% 12px, 27% 0, 30% 12px, 33% 2px, 36% 12px, 39% 0, 42% 12px, 45% 2px, 48% 12px, 51% 0, 54% 12px, 57% 2px, 60% 12px, 63% 0, 66% 12px, 69% 2px, 72% 12px, 75% 0, 78% 12px, 81% 2px, 84% 12px, 87% 0, 90% 12px, 93% 2px, 96% 12px, 100% 0, 100% 100%, 0 100%); margin-bottom: 56px; }
body[data-slayout="noir"] .s-feats .feat span { color: #6b5b49; }
body[data-slayout="noir"] .s-feats .feat i { background: #d9c3a4; color: #4a3724; border-radius: 50%; }
body[data-slayout="noir"] .s-story { background: transparent; color: var(--ink); grid-template-columns: 1fr 1fr; gap: 24px; overflow: visible; }
body[data-slayout="noir"] .s-story .vv { border-radius: 38% 62% 55% 45% / 48% 40% 60% 52%; overflow: hidden; background: color-mix(in srgb, var(--pop) 18%, var(--surface)); }
body[data-slayout="noir"] .s-story .tx { padding: 24px 0; }
body[data-slayout="noir"] .btn { background: var(--pop); color: var(--on-pop); }
body[data-slayout="noir"] .btn.g { background: transparent; color: var(--ink); }
body[data-slayout="noir"] .s-nav .btn:not(.g) { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---- Photo café: a photo, glass cards over its edge, a grid of specialties ---- */
.lay-photo { min-height: 640px; }
.lay-photo .hero-in { padding-bottom: 170px; }
.lay-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .55)); z-index: 1; }
.lay-photo .hero-in { color: #fff; }
.lay-photo h1 { font-family: var(--f-head); font-weight: 700; color: #fff; max-width: 16ch; font-size: clamp(44px, 6.4vw, 76px); line-height: 1.02; }
.lay-photo .lead { color: rgba(255, 255, 255, .92); max-width: 44ch; }
.lay-photo .btn.p { background: #d9a85f; color: #2a1a06; }
body[data-slayout="photo"] .s-nav { color: #fff; }
body[data-slayout="photo"] .s-nav .lk, body[data-slayout="photo"] .s-nav .lg { color: #fff; }
body[data-slayout="photo"] .s-nav .btn.g { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
body[data-slayout="photo"] .s-nav .btn:not(.g) { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.overlap { margin-top: -120px; position: relative; z-index: 6; }
.overlap .s-feats { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 0 50px; }
.overlap .s-feats .feat { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(16px); border-radius: calc(var(--r) * .9); padding: 22px; box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .5); flex-direction: column; align-items: flex-start; }
.overlap .s-feats .feat:nth-child(n+4) { display: none; }
body[data-slayout="photo"] .cats-photo .ctiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-slayout="photo"] .cats-photo .s-head { justify-content: center; text-align: center; }
.split-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.split-reviews .revs { grid-template-columns: 1fr; }
.grid-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-photos div { position: relative; aspect-ratio: 1; border-radius: calc(var(--r) * .5); overflow: hidden; }
.grid-photos img { width: 100%; height: 100%; object-fit: cover; }
.grid-photos svg { position: absolute; top: 8px; inset-inline-end: 8px; width: 18px; height: 18px; color: #fff; }

/* ---- Wave: a soft page, a wavy top, rounded cards, a dark footer in columns ---- */
.lay-wave { min-height: 520px; }
.lay-wave .hero-photo { filter: brightness(.55); }
.lay-wave .hero-in { color: #fff; padding-bottom: 120px; }
.lay-wave .hero-in .lead { color: rgba(255, 255, 255, .82); }
.lay-wave .thin { display: block; font: 300 clamp(22px, 3.4vw, 34px) var(--f-head); letter-spacing: .04em; opacity: .85; }
.lay-wave h1 { font: 800 clamp(48px, 8vw, 96px)/1 var(--f-head); letter-spacing: .01em; color: color-mix(in srgb, var(--pop) 70%, #fff); margin: 6px 0 22px; }
.lay-wave .wave { position: absolute; inset-inline: 0; bottom: -1px; width: 100%; height: 80px; z-index: 3; }
body[data-slayout="wave"] .s-nav { color: #fff; }
body[data-slayout="wave"] .s-nav .lk, body[data-slayout="wave"] .s-nav .lg { color: #fff; }
body[data-slayout="wave"] .s-nav .btn.g { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
body[data-slayout="wave"] .s-nav .btn:not(.g) { background: #fff; color: #1b1b1b; }
body[data-slayout="wave"] .s-head { flex-direction: column; align-items: center; text-align: center; }
body[data-slayout="wave"] .s-head h2 { text-transform: uppercase; letter-spacing: .02em; }
body[data-slayout="wave"] .ctiles .ctile { aspect-ratio: 1.05; border-radius: calc(var(--r) + 10px); }
body[data-slayout="wave"] .ctile .txt { align-items: center; text-align: center; padding-bottom: 22px; }
body[data-slayout="wave"] .ctile b { font-size: 20px; }
body[data-slayout="wave"] .ctile small { text-decoration: underline; text-underline-offset: 4px; }
.s-foot.cols { background: #1d1b1a; color: #e9e4df; margin-top: 30px; padding-top: 44px; }
.s-foot.cols .fcols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; border-bottom: 1px solid rgba(255, 255, 255, .15); padding-bottom: 28px; }
.s-foot.cols .fcols > div { display: grid; gap: 10px; align-content: start; font-size: 13px; }
.s-foot.cols b { font: 700 15px var(--f-head); color: #fff; }
.s-foot.cols a, .s-foot.cols span { color: #cfc8c1; }

/* ---- Studio and the rest: a strip of highlights ---- */
.feats-studio { padding-bottom: 54px; }
.feats-wave, .feats-photo { }

/* ---- phones ---- */
@media (max-width: 860px) {
  .s-qrbox.two, .s-qrbox.three { grid-template-columns: 1fr; }
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctiles { grid-template-columns: 1fr 1fr; }
  .revs { grid-template-columns: 1fr; }
  .lay-noir { grid-template-columns: 1fr; }
  .lay-noir .hero-vis { min-height: 320px; }
  [data-spage="0"] .s-nav { padding: 14px 18px; flex-wrap: wrap; }
  [data-spage="0"] .s-nav .lk { display: none; }
  [data-spage="0"] .s-nav .btn:not(.g) { display: none; } /* the top of the page already has the same button */
  [data-spage="0"] .s-nav .btn.g.lang { margin-inline-start: auto; }
  .hero-in { padding: 120px 18px 70px; }
  /* a drawn dish with no photo sits behind the text on a wide page; on a phone it would cover the words */
  .lay-editorial .hero-photo.none .art.big, .lay-photo .hero-photo.none .art.big, .lay-wave .hero-photo.none .art.big { display: none; }
  .overlap { margin-top: -70px; }
  .overlap .s-feats { grid-template-columns: 1fr; }
  .split-reviews { grid-template-columns: 1fr; }
  body[data-slayout="editorial"] .s-feats { grid-template-columns: 1fr 1fr; }
  body[data-slayout="editorial"] .s-feats .feat { border: 0; padding-inline: 0; }
  body[data-slayout="noir"] .s-story { grid-template-columns: 1fr; }
  .s-foot.cols .fcols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .ctiles { grid-template-columns: 1fr; }
  .dcard .txt b { font-size: 15px; }
  .dcard .txt em { display: none; }
}

/* dark mode button in the top bar */
.s-nav .dm { width: 42px; height: 42px; padding: 0; min-width: 0; flex: none; border-radius: 50%; }

/* Arabic: its letters join, so letter-spacing would pull them apart; and its tall shapes need room between lines (the English
   headlines are set at a line height of 1, which makes two Arabic lines touch). */
html[lang="ar"] body.site *:not(.st) { letter-spacing: 0; }
html[lang="ar"] body.site { line-height: 1.7; }
html[lang="ar"] body.site h1 { line-height: 1.4; }
html[lang="ar"] body.site h2, html[lang="ar"] body.site h3 { line-height: 1.5; }

/* Every photo fills its own frame: cropped to cover and centred, never its natural size and never stretched. The frame sets the
   size; the picture is laid over it. (Zero specificity: a frame that is placed by its own rule keeps that.) */
.site img:not(.logo-img) { display: block; max-width: 100%; }
:where(.site :is(.ph, .art, .g, .vv, .grid-photos > div)) { position: relative; overflow: hidden; }
:where(.site :is(.ph, .art, .g, .vv, .grid-photos > div)) > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }