/* ==========================================================================
   Old School — Palos Hills, Illinois
   Typography-forward, photography-optional. Every image is a slot that
   degrades into a designed surface if the photo isn't there yet.
   ========================================================================== */

:root{
  --ink:        #0E0D0B;
  --ink-soft:   #1A1815;
  --ink-line:   #2A2620;
  --bone:       #F4EFE6;
  --bone-dim:   #E3DACB;
  --parchment:  #FBF8F2;
  --saffron:    #C9922F;
  --saffron-lt: #E4B457;
  --ember:      #8C3A1E;
  --sage:       #6B7256;
  --muted:      #8A8272;

  --serif: "Cormorant Garamond", "Hoefler Text", Garamond, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --arabic: "Noto Naskh Arabic", "Geeza Pro", serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 62ch;
  --rule: 1px solid rgba(244,239,230,.14);
  --rule-dark: 1px solid rgba(14,13,11,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--saffron); color:var(--ink); }

.wrap{ width:min(1240px,100% - var(--gutter)*2); margin-inline:auto; }
.wrap--narrow{ width:min(760px,100% - var(--gutter)*2); }

/* ---------- Type scale ---------------------------------------------------- */

h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; margin:0; line-height:1.06; letter-spacing:-.015em; }

.display{ font-size:clamp(3.2rem,11vw,9rem); line-height:.92; letter-spacing:-.035em; }
.h1{ font-size:clamp(2.5rem,6vw,4.75rem); }
.h2{ font-size:clamp(2rem,4.4vw,3.5rem); }
.h3{ font-size:clamp(1.5rem,2.4vw,2.125rem); }

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--saffron);
  margin:0 0 1.5rem;
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.3; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ display:none; }
.eyebrow--center::before{ content:""; width:2rem; height:1px; background:currentColor; opacity:.3; }

.lede{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.5;
  color:var(--bone-dim);
  max-width:var(--measure);
}

p{ max-width:var(--measure); }
.arabic{ font-family:var(--arabic); direction:rtl; unicode-bidi:isolate; }

/* ---------- Buttons ------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--sans); font-size:.75rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2rem; border:1px solid var(--saffron); color:var(--saffron);
  background:transparent; cursor:pointer;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn:hover,.btn:focus-visible{ background:var(--saffron); color:var(--ink); }
.btn--solid{ background:var(--saffron); color:var(--ink); }
.btn--solid:hover,.btn--solid:focus-visible{ background:var(--saffron-lt); border-color:var(--saffron-lt); }
.btn--ghost{ border-color:rgba(244,239,230,.35); color:var(--bone); }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn--dark{ border-color:rgba(14,13,11,.35); color:var(--ink); }
.btn--dark:hover,.btn--dark:focus-visible{ background:var(--ink); color:var(--bone); }
.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; }

:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--saffron-lt); outline-offset:3px;
}

/* ---------- Image slots --------------------------------------------------- */
/* A slot shows a designed surface on its own; drop a file into assets/img/
   and it fills in. Nothing breaks in between.                                */

.slot{
  position:relative; overflow:hidden;
  background-color:var(--ink-soft);
  background-image:
    radial-gradient(110% 85% at 25% 15%, rgba(201,146,47,.42), transparent 64%),
    radial-gradient(95% 80% at 80% 85%, rgba(140,58,30,.48), transparent 62%),
    repeating-linear-gradient(38deg, rgba(244,239,230,.040) 0 2px, transparent 2px 9px);
  background-size:cover; background-position:center;
}
/* Same for the slots: the photo arrives as an inline background-image. */
.slot.has-img{ background-color:#100E0B; }
.slot::after{
  content:attr(data-caption);
  position:absolute; inset:auto 0 0 0;
  padding:1.5rem 1.4rem .95rem;
  font-family:var(--sans); font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,239,230,.72);
  background:linear-gradient(to top, rgba(14,13,11,.86), transparent);
  pointer-events:none;
}
.slot--tall{ aspect-ratio:3/4; }
.slot--wide{ aspect-ratio:16/10; }
.slot--square{ aspect-ratio:1; }

/* ---------- Header -------------------------------------------------------- */

.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:1.1rem var(--gutter);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:rgba(14,13,11,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:rgba(244,239,230,.10);
  padding-block:.7rem;
}
.brand{ text-decoration:none; line-height:1; }
.brand__name{ font-family:var(--serif); font-size:1.5rem; letter-spacing:.02em; }
.brand__sub{
  display:block; font-size:.5625rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); margin-top:.3rem;
}
.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  text-decoration:none; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-dim); position:relative; padding-block:.35rem;
  transition:color .35s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--saffron); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{ color:var(--bone); }
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav .btn{ padding:.7rem 1.3rem; }
.nav .btn::after{ display:none; }

.nav-toggle{
  display:none; background:none; border:0; color:var(--bone);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; padding:.5rem;
}

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center;
    background:rgba(14,13,11,.98); gap:2rem; font-size:1.1rem;
    transform:translateY(-100%); transition:transform .55s var(--ease); visibility:hidden;
  }
  .nav.is-open{ transform:translateY(0); visibility:visible; }
  .nav a{ font-size:.9rem; }
}

/* ---------- Hero ---------------------------------------------------------- */

.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:9rem var(--gutter) clamp(2.5rem,6vh,4.5rem);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background-color:#17120C;
  background-image:
    radial-gradient(70% 55% at 68% 30%, rgba(201,146,47,.60), transparent 66%),
    radial-gradient(60% 55% at 14% 82%, rgba(140,58,30,.62), transparent 64%),
    radial-gradient(90% 70% at 50% 50%, rgba(107,114,86,.20), transparent 70%),
    repeating-linear-gradient(46deg, rgba(244,239,230,.035) 0 2px, transparent 2px 11px);
  background-size:cover; background-position:center;
}
/* Once a real photograph loads it replaces the wash outright (set inline by
   site.js); only the backdrop colour behind it needs to change. */
.hero__bg.has-img{ background-color:#100E0B; }
/* A photograph is far brighter than the painted fallback, so the scrim has to
   work much harder: a heavy wedge down the left for the type to sit on, and a
   foot gradient for the stat row. The food stays legible on the right. */
.hero__bg.has-img::after{
  background:
    linear-gradient(100deg,
      rgba(12,11,9,.94) 0%,
      rgba(12,11,9,.88) 30%,
      rgba(12,11,9,.60) 55%,
      rgba(12,11,9,.34) 78%,
      rgba(12,11,9,.52) 100%),
    linear-gradient(to top, rgba(12,11,9,.94) 0%, rgba(12,11,9,.10) 42%, rgba(12,11,9,.45) 100%);
}
@media (max-width:820px){
  /* No room for a wedge on a phone — flatten it so the text always wins. */
  .hero__bg.has-img::after{
    background:linear-gradient(to top, rgba(12,11,9,.94) 12%, rgba(12,11,9,.72) 55%, rgba(12,11,9,.80) 100%);
  }
}
/* The wedge is directional: it darkens the side the type sits on. In RTL the
   type moves to the right, so the gradient has to mirror with it (100deg →
   260deg) or the headline lands on the brightest part of the photograph. */
[dir="rtl"] .hero__bg.has-img::after{
  background:
    linear-gradient(260deg,
      rgba(12,11,9,.94) 0%,
      rgba(12,11,9,.88) 30%,
      rgba(12,11,9,.60) 55%,
      rgba(12,11,9,.34) 78%,
      rgba(12,11,9,.52) 100%),
    linear-gradient(to top, rgba(12,11,9,.94) 0%, rgba(12,11,9,.10) 42%, rgba(12,11,9,.45) 100%);
}
@media (max-width:820px){
  [dir="rtl"] .hero__bg.has-img::after{
    background:linear-gradient(to top, rgba(12,11,9,.94) 12%, rgba(12,11,9,.72) 55%, rgba(12,11,9,.80) 100%);
  }
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 45%, transparent 30%, rgba(14,13,11,.55) 100%),
    linear-gradient(to top, rgba(14,13,11,.95) 4%, rgba(14,13,11,.30) 55%, rgba(14,13,11,.60) 100%);
}
.hero__inner{ position:relative; z-index:1; width:min(1240px,100%); margin-inline:auto; }
.hero__kicker{
  font-size:.6875rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--saffron); margin:0 0 1.6rem;
}
.hero__title{ margin:0; }
.hero__title em{
  display:block; font-style:italic; color:var(--saffron-lt);
  font-size:.42em; letter-spacing:-.01em; margin-top:.5rem;
}
.hero__line{
  margin:2.2rem 0 2.6rem; max-width:46ch;
  font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.5; color:var(--bone-dim);
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.9rem 2.2rem; margin-top:3rem;
  padding-top:1.6rem; border-top:var(--rule);
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.hero__meta strong{ color:var(--bone); font-weight:500; }

/* ---------- Sections ------------------------------------------------------ */

.section{ padding:clamp(5rem,12vh,9.5rem) 0; }
/* On the pale grounds the dark-section greys and the saffron accents fall
   below 4.5:1. Darken them there rather than dulling the palette everywhere.
   --saffron itself is left alone: .btn--solid still needs it as a background. */
.section--light, .section--bone{ --muted:#6B6455; }
.section--light .info dt, .section--bone .info dt,
.section--light .step__num, .section--bone .step__num{ color:var(--ember); }

.section--light{ background:var(--parchment); color:var(--ink); }
.section--light .lede{ color:#4A443A; }
.section--light .eyebrow{ color:var(--ember); }
.section--bone{ background:var(--bone); color:var(--ink); }
.section--bone .eyebrow{ color:var(--ember); }
.section--bone .lede{ color:#4A443A; }
.section--tight{ padding-block:clamp(3.5rem,8vh,6rem); }

.grid{ display:grid; gap:clamp(2rem,5vw,5rem); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid--split{ grid-template-columns:1fr 1fr; align-items:center; }
@media (max-width:860px){ .grid--split{ grid-template-columns:1fr; } }

/* ---------- Guarantee band ------------------------------------------------ */

.guarantee{
  background:var(--ember); color:var(--bone);
  padding:clamp(4rem,10vh,7rem) 0; text-align:center;
  position:relative; overflow:hidden;
}
.guarantee::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 3px, transparent 3px 14px);
}
.guarantee > *{ position:relative; }
.guarantee blockquote{
  margin:0 auto; max-width:20ch;
  font-family:var(--serif); font-size:clamp(2rem,5.2vw,4rem); line-height:1.12;
  letter-spacing:-.02em;
}
.guarantee cite{
  display:block; margin-top:2.2rem; font-style:normal;
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(244,239,230,.72);
}

/* ---------- Pull quote ---------------------------------------------------- */

.pull{
  margin:0; padding:clamp(2rem,4vw,3.5rem) 0;
  border-top:var(--rule); border-bottom:var(--rule);
}
.section--light .pull,.section--bone .pull{ border-color:rgba(14,13,11,.16); }
.pull blockquote{
  margin:0; font-family:var(--serif); font-size:clamp(1.6rem,3.2vw,2.6rem);
  line-height:1.28; letter-spacing:-.015em; max-width:24ch;
}
.pull cite{
  display:block; margin-top:1.6rem; font-style:normal;
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}

/* ---------- Menu ---------------------------------------------------------- */

.dish{
  padding:1.9rem 0; border-bottom:var(--rule-dark);
  display:grid; grid-template-columns:1fr auto; gap:.5rem 2rem; align-items:baseline;
}
.section:not(.section--light):not(.section--bone) .dish{ border-bottom-color:rgba(244,239,230,.13); }
.dish__name{ font-family:var(--serif); font-size:clamp(1.35rem,2.2vw,1.75rem); line-height:1.2; }
.dish__ar{ font-family:var(--arabic); font-size:1rem; color:var(--muted); margin-left:.7rem; }
.dish__price{
  font-family:var(--sans); font-size:.8125rem; letter-spacing:.12em;
  color:var(--ember); white-space:nowrap;
}
.dish__desc{ grid-column:1/-1; margin:.55rem 0 0; color:#5A5346; font-size:.9375rem; max-width:60ch; }
.section:not(.section--light):not(.section--bone) .dish__desc{ color:var(--muted); }
.dish__tag{
  display:inline-block; margin-top:.7rem; font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sage); border:1px solid currentColor;
  padding:.28rem .6rem;
}

/* ---------- Steps --------------------------------------------------------- */

.step{ position:relative; padding-top:2.4rem; border-top:2px solid var(--saffron); }
.step__num{
  position:absolute; top:-1.1rem; left:0;
  font-family:var(--serif); font-size:2.6rem; color:var(--saffron); line-height:1;
  background:inherit; padding-right:.7rem;
}
.section--light .step__num,.section--bone .step__num{ background:transparent; }
.step h3{ margin-bottom:.8rem; }
.step p{ font-size:.9375rem; color:var(--muted); }
.section--light .step p,.section--bone .step p{ color:#5A5346; }

/* ---------- Press --------------------------------------------------------- */

.press-item{
  display:grid; grid-template-columns:minmax(140px,180px) 1fr auto; gap:1rem 2.5rem;
  align-items:baseline; padding:2rem 0; border-bottom:var(--rule);
  text-decoration:none; color:inherit;
  transition:padding-left .5s var(--ease), background .5s var(--ease);
}
.press-item:hover{ padding-left:1rem; background:rgba(244,239,230,.03); }
.press-item__outlet{
  font-family:var(--sans); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--saffron);
}
.press-item__title{ font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.25; }
.press-item__date{ font-size:.6875rem; letter-spacing:.14em; color:var(--muted); white-space:nowrap; }
.press-item__quote{
  grid-column:2/-1; margin:.9rem 0 0; font-size:.9375rem; color:var(--muted);
  font-style:italic; max-width:60ch;
}
@media (max-width:760px){
  .press-item{ grid-template-columns:1fr; gap:.5rem; }
  .press-item__quote{ grid-column:1; }
}

/* ---------- Rating / reviews ---------------------------------------------- */

.rating{ display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap; }
.rating__score{ font-family:var(--serif); font-size:clamp(3.5rem,8vw,6rem); line-height:1; color:var(--saffron); }
.rating__stars{ letter-spacing:.2em; color:var(--saffron); font-size:1.1rem; }
.rating__meta{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

.review{
  padding:2rem; border:var(--rule);
  display:flex; flex-direction:column; gap:1.2rem;
  background:rgba(244,239,230,.02);
}
.section--light .review,.section--bone .review{ border-color:rgba(14,13,11,.14); background:rgba(14,13,11,.02); }
.review blockquote{ margin:0; font-family:var(--serif); font-size:1.25rem; line-height:1.45; }
.review cite{
  font-style:normal; font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-top:auto;
}

/* ---------- Order form ---------------------------------------------------- */

.form{ display:grid; gap:1.6rem; max-width:640px; }
.field{ display:grid; gap:.55rem; }
.field label{
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; color:inherit;
  background:transparent; border:0; border-bottom:1px solid rgba(14,13,11,.25);
  padding:.75rem 0; border-radius:0;
  transition:border-color .4s var(--ease);
}
.section:not(.section--light):not(.section--bone) .field input,
.section:not(.section--light):not(.section--bone) .field select,
.section:not(.section--light):not(.section--bone) .field textarea{
  border-bottom-color:rgba(244,239,230,.25);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--saffron);
}
.field textarea{ resize:vertical; min-height:5rem; }
.field select option{ background:var(--parchment); color:var(--ink); }
.form__note{ font-size:.8125rem; color:var(--muted); max-width:52ch; }

/* ---------- Info list ----------------------------------------------------- */

.info dt{
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--saffron); margin-top:2rem;
}
.info dt:first-child{ margin-top:0; }
.info dd{ margin:.6rem 0 0; font-family:var(--serif); font-size:1.35rem; line-height:1.45; }
.info dd a{ text-decoration:none; border-bottom:1px solid rgba(201,146,47,.5); }
.info dd a:hover{ border-bottom-color:var(--saffron); }
.info small{ display:block; font-family:var(--sans); font-size:.75rem; color:var(--muted); margin-top:.35rem; letter-spacing:.04em; }

/* ---------- Footer -------------------------------------------------------- */

.site-foot{ background:var(--ink); color:var(--bone); padding:clamp(4rem,9vh,6.5rem) 0 2.5rem; border-top:var(--rule); }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3rem; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-grid h4{
  font-family:var(--sans); font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--saffron); margin-bottom:1.2rem;
}
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.foot-grid a{ text-decoration:none; color:var(--bone-dim); font-size:.9375rem; transition:color .3s var(--ease); }
.foot-grid a:hover{ color:var(--saffron); }
.foot-bottom{
  margin-top:4rem; padding-top:1.8rem; border-top:var(--rule);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:.6875rem; letter-spacing:.12em; color:var(--muted);
}

/* ---------- Reveal -------------------------------------------------------- */

/* Scoped to .js so that if the script never runs — blocked, failed, old
   browser — every word on the page is still there. Content first. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* Hidden by clipping, not by an off-canvas offset. `left:-9999px` is harmless
   in LTR (overflow past the inline start is not scrollable) but in RTL that
   same offset overflows past the inline END, giving the document 9999px of
   scrollable width and pushing every page off screen. Clip works both ways. */
.skip{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  background:var(--saffron); color:var(--ink);
  padding:1rem 1.5rem; z-index:200; text-decoration:none;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{
  position:fixed; width:auto; height:auto; overflow:visible;
  clip:auto; clip-path:none;
  top:1rem; inset-inline-start:1rem;
}

/* ==========================================================================
   Added for the photo-led rebuild: press clippings, the app band, guest
   voices, and figure treatments now that real photographs are in place.
   ========================================================================== */

/* ---------- Figures (real photos, with credit) ---------------------------- */

.fig{ margin:0; position:relative; }
.fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.fig--tall img{ aspect-ratio:3/4; }
.fig--wide img{ aspect-ratio:16/10; }
.fig--square img{ aspect-ratio:1; }
.fig figcaption{
  margin-top:.9rem; font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.fig--framed img{ border:1px solid rgba(244,239,230,.12); }

/* A duotone-ish warm lift so guest phone snaps sit together as one set. */
.fig--warm img{ filter:saturate(1.04) contrast(1.03); }

/* ---------- Press clippings ----------------------------------------------- */

.clips{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
@media (max-width:820px){ .clips{ grid-template-columns:1fr; } }
/* The lead clipping runs two-up so the publisher's page shows whole rather
   than being cropped to a banner. Collapses to one column on small screens. */
.clip--lead{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:auto auto auto auto;
  column-gap:clamp(2rem,4vw,3.5rem);
  align-content:center;
}
.clip--lead .clip__frame{ grid-column:1; grid-row:1/span 4; align-self:center; }
.clip--lead .clip__meta{ grid-column:2; grid-row:1; align-self:end; }
.clip--lead .clip__head{ grid-column:2; grid-row:2; }
.clip--lead .clip__dek{ grid-column:2; grid-row:3; }
.clip--lead .clip__go{ grid-column:2; grid-row:4; align-self:start; justify-self:start; }
@media (max-width:820px){
  .clip--lead{ grid-template-columns:1fr; }
  .clip--lead > *{ grid-column:1 !important; grid-row:auto !important; }
}

.clip{ display:block; text-decoration:none; color:inherit; }
.clip__frame{
  background:#fff; padding:.7rem;
  box-shadow:0 26px 70px rgba(0,0,0,.5);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
  overflow:hidden;
}
.clip__frame img{ width:100%; display:block; }
.clip:hover .clip__frame,.clip:focus-visible .clip__frame{
  transform:translateY(-8px); box-shadow:0 36px 90px rgba(0,0,0,.6);
}
.clip__meta{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:baseline; }
.clip__outlet{ font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--saffron); }
.clip__date{ font-size:.6875rem; letter-spacing:.14em; color:var(--muted); }
/* These are <span>s so they can live inside the <a> that wraps each clipping;
   they have to be blockified by hand or the whole card runs together inline. */
.clip__head{ display:block; font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.2; margin:.7rem 0 0; }
.clip__dek{ display:block; margin:.8rem 0 0; font-size:.9375rem; color:var(--muted); font-style:italic; max-width:56ch; }
.clip__go{
  display:inline-flex; clear:both; align-items:center; gap:.5rem; margin-top:1.1rem;
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone);
  border-bottom:1px solid var(--saffron); padding-bottom:.25rem;
}
.section--light .clip__outlet,.section--bone .clip__outlet{ color:var(--ember); }
.section--light .clip__go,.section--bone .clip__go{ color:var(--ink); }

/* ---------- The app band --------------------------------------------------- */

.app-band{
  background:var(--ink-soft); color:var(--bone);
  padding:clamp(4.5rem,11vh,8rem) 0; position:relative; overflow:hidden;
}
.app-band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 82% 30%, rgba(201,146,47,.28), transparent 65%),
    radial-gradient(55% 65% at 10% 85%, rgba(140,58,30,.30), transparent 65%);
}
.app-band > *{ position:relative; }
.badge{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid var(--saffron); color:var(--saffron);
  padding:.45rem 1rem; font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:1.8rem;
}
.badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--saffron);
}
.perk{ margin-top:2.5rem; }
.perk ul{ margin:0; padding:0; display:grid; gap:1.8rem; }
.perk li{ list-style:none; display:grid; grid-template-columns:2.2rem 1fr; gap:1.2rem; align-items:baseline; }
.perk__mark{
  font-family:var(--serif); font-size:1.15rem; color:var(--saffron); line-height:1.35;
  letter-spacing:.02em;
}
/* Class the two parts rather than styling bare <span>, or the description's
   colour cascades into the heading and greys it out. */
.perk__title{
  display:block; font-family:var(--serif); font-size:1.3rem; font-weight:400;
  color:var(--bone); margin-bottom:.35rem; line-height:1.25;
}
.perk__note{ display:block; color:var(--muted); font-size:.9375rem; line-height:1.6; }

/* ---------- Guest voices --------------------------------------------------- */

.voices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.5rem; }
.voice{
  border:var(--rule); padding:2rem; display:flex; flex-direction:column; gap:1.1rem;
  background:rgba(244,239,230,.02);
}
.section--light .voice,.section--bone .voice{ border-color:rgba(14,13,11,.13); background:rgba(14,13,11,.02); }
.voice blockquote{ margin:0; font-family:var(--serif); font-size:1.2rem; line-height:1.45; }
.voice__who{ margin-top:auto; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.voice__stars{ color:var(--saffron); letter-spacing:.18em; font-size:.8rem; }
.section--light .voice__stars,.section--bone .voice__stars{ color:var(--ember); }

/* The owner's replies — his voice, set apart from the guests'. */
.reply{
  margin-top:1.2rem; padding-top:1.2rem; border-top:1px dashed rgba(201,146,47,.4);
  font-size:.9375rem; font-style:italic; color:var(--bone-dim);
}
.section--light .reply,.section--bone .reply{ color:#4A443A; }
.reply::before{
  content:"Mohd replied"; display:block; font-style:normal; font-size:.5625rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--saffron); margin-bottom:.5rem;
}
.section--light .reply::before,.section--bone .reply::before{ color:var(--ember); }

/* ---------- Topic chips ---------------------------------------------------- */

.topics{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; padding:0; list-style:none; }
.topics li{
  border:1px solid rgba(244,239,230,.2); padding:.5rem 1rem;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim);
}
.topics b{ color:var(--saffron); font-weight:500; margin-left:.5rem; }
.section--light .topics li,.section--bone .topics li{ border-color:rgba(14,13,11,.18); color:#4A443A; }
.section--light .topics b,.section--bone .topics b{ color:var(--ember); }

/* ---------- Gallery strip --------------------------------------------------- */

.strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.6rem; }
.strip img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }

/* A 3:4 figure in a half-width column runs ~800px tall and leaves the text
   column stranded in whitespace. Cap it on desktop; cover handles the crop. */
@media (min-width:861px){
  .grid--split .fig--tall img{ height:min(70vh,620px); aspect-ratio:auto; }
}

/* ==========================================================================
   A told story — set as a short exchange so the reader hears it rather than
   reads a paragraph about it. The reply is the beat, so it gets the weight.
   ========================================================================== */

.tale{ background:var(--ink); color:var(--bone); }
.tale__setup{ font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.55; color:var(--bone-dim); max-width:46ch; }
.tale__close{ font-size:1.0625rem; line-height:1.75; color:var(--muted); max-width:52ch; }
.tale__close em{ color:var(--bone-dim); font-style:italic; }

.exchange{ display:grid; gap:clamp(2rem,4vw,3rem); margin:clamp(2.5rem,6vw,4rem) 0; }
.exchange__turn{ position:relative; padding-left:2.4rem; }
.exchange__turn::before{
  content:"\2014"; position:absolute; left:0; top:.1em;
  color:var(--saffron); opacity:.55; font-family:var(--serif); font-size:1.4rem;
}
.exchange__said{
  margin:0; font-family:var(--serif); line-height:1.24; letter-spacing:-.01em;
  font-size:clamp(1.5rem,3.4vw,2.3rem); color:var(--bone-dim);
}
.exchange__who{
  display:block; margin-top:.9rem;
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
/* His answer is the point of the story — brighter, larger, no hedging. */
.exchange__turn--reply::before{ opacity:1; }
.exchange__turn--reply .exchange__said{
  color:var(--bone); font-size:clamp(1.75rem,4.4vw,3rem);
}
.exchange__turn--reply .exchange__who{ color:var(--saffron); }

/* ==========================================================================
   Bilingual + contact: language switch, floating WhatsApp button, and the
   RTL / Arabic-typography layer that the /ar/ pages switch on.
   ========================================================================== */

/* ---------- Language switch ------------------------------------------------ */

.lang{
  display:inline-flex; align-items:stretch; border:1px solid rgba(244,239,230,.25);
  flex-shrink:0;
}
.lang a{
  display:flex; align-items:center; padding:.5rem .7rem;
  font-size:.6875rem; letter-spacing:.1em; text-decoration:none;
  color:var(--bone-dim); transition:background .35s var(--ease), color .35s var(--ease);
}
.lang a[aria-current]{ background:var(--saffron); color:var(--ink); }
.lang a:not([aria-current]):hover{ color:var(--bone); }
.lang a::after{ display:none; }
.lang a + a{ border-inline-start:1px solid rgba(244,239,230,.25); }
.lang .ar-label{ font-family:var(--arabic); font-size:.8125rem; line-height:1; }

/* ---------- Floating "chat with us" --------------------------------------- */

.chat-fab{
  position:fixed; inset:auto 1.5rem 1.5rem auto; z-index:90;
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.85rem 1.25rem;
  background:var(--ink-soft); color:var(--bone);
  border:1px solid rgba(244,239,230,.16);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  text-decoration:none;
  font-size:.75rem; letter-spacing:.1em;
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.chat-fab:hover,.chat-fab:focus-visible{
  background:#128C4A; border-color:#128C4A; color:#fff; transform:translateY(-2px);
}
.chat-fab svg{ flex-shrink:0; }
.chat-fab__mark{ fill:#25D366; transition:fill .4s var(--ease); }
.chat-fab:hover .chat-fab__mark,.chat-fab:focus-visible .chat-fab__mark{ fill:#fff; }
@media (max-width:560px){
  .chat-fab{ inset:auto 1rem 1rem auto; padding:.8rem; gap:0; }
  .chat-fab__label{ display:none; }
}
[dir="rtl"] .chat-fab{ inset:auto auto 1.5rem 1.5rem; }
@media (max-width:560px){ [dir="rtl"] .chat-fab{ inset:auto auto 1rem 1rem; } }

/* ---------- Arabic typography ---------------------------------------------- */

[lang="ar"]{
  --serif: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --sans: "Tajawal", "Noto Kufi Arabic", system-ui, sans-serif;
}
/* Arabic sits smaller on the same point size and has no capitals, so the
   display sizes come down a touch and everything gets more leading. */
[lang="ar"] body{ font-size:clamp(1.0625rem,1rem + .25vw,1.125rem); line-height:1.95; }
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{ line-height:1.35; letter-spacing:0; }
[lang="ar"] .display{ font-size:clamp(2.75rem,9vw,7rem); line-height:1.15; letter-spacing:0; }
[lang="ar"] .h1{ font-size:clamp(2.1rem,5vw,3.9rem); }
[lang="ar"] .h2{ font-size:clamp(1.75rem,3.8vw,2.9rem); }
[lang="ar"] .h3{ font-size:clamp(1.35rem,2.2vw,1.85rem); }
[lang="ar"] .lede{ line-height:1.85; }
/* Letter-spacing is meaningless in a joined script and breaks the joins. */
[lang="ar"] .eyebrow,[lang="ar"] .btn,[lang="ar"] .nav a,[lang="ar"] .brand__sub,
[lang="ar"] .hero__kicker,[lang="ar"] .hero__meta,[lang="ar"] .foot-grid h4,
[lang="ar"] .info dt,[lang="ar"] .field label,[lang="ar"] .voice__who,
[lang="ar"] .clip__outlet,[lang="ar"] .dish__tag,[lang="ar"] .rating__meta,
[lang="ar"] .fig figcaption,[lang="ar"] .step p,[lang="ar"] .badge,
[lang="ar"] .exchange__who,[lang="ar"] .reply::before,[lang="ar"] .foot-bottom{
  letter-spacing:0; text-transform:none;
}
[lang="ar"] .btn{ font-size:.8125rem; }
[lang="ar"] .eyebrow{ font-size:.8125rem; }
/* Latin runs inside Arabic text — phone numbers, WBEZ, the address. */
[lang="ar"] .ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* ---------- RTL flips ------------------------------------------------------ */

[dir="rtl"] .nav a::after{ transform-origin:right; }
[dir="rtl"] .press-item:hover{ padding-left:0; padding-right:1rem; }
[dir="rtl"] .step__num{ left:auto; right:0; padding-right:0; padding-left:.7rem; }
[dir="rtl"] .exchange__turn{ padding-left:0; padding-right:2.4rem; }
[dir="rtl"] .exchange__turn::before{ left:auto; right:0; }
[dir="rtl"] .reply{ border-top-style:dashed; }
[dir="rtl"] .voice,[dir="rtl"] .review{ text-align:right; }
[dir="rtl"] .guarantee blockquote,[dir="rtl"] .pull blockquote{ margin-inline:auto; }
[dir="rtl"] .info dd a{ direction:rtl; }