/* ==========================================================================
   Mezinjer for Restaurants (/restaurants)
   Loaded after site.css, so it shares the homepage tokens (ink, cream, paper,
   gold, serif headings, .btn, .eyebrow, nav, footer, .sample-chat).
   Everything page-specific is prefixed .rs-.
   No inline styles anywhere: the Worker's CSP is style-src 'self'.
   ========================================================================== */

.rs-page { --rs-brass: #91713c; --rs-rule: #d9c9a5; }

/* ---------- Header sits over the hero photo ---------- */
.rs-frame { position: relative; }
.rs-header { position: absolute; top: 0; left: 0; right: 0; z-index: 3; color: var(--cream); }
.rs-brand { display: flex; align-items: center; gap: 22px; }
.rs-brand-label {
  display: flex; align-items: center; min-height: 42px; padding-left: 22px;
  border-left: 1px solid #ffffff40;
  font-size: 11px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: #d4dad7;
}
.rs-header .navlinks .btn { min-height: 42px; padding: 10px 18px; }

/* ---------- Hero ---------- */
section.rs-top { position: relative; isolation: isolate; padding: 0; }
.rs-page h1, .rs-page h2 { text-wrap: balance; }
.rs-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; z-index: -2; display: block; }
.rs-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* Ink gradient keeps the copy readable where it meets the photo */
.rs-top::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, #15232ab3 0, #15232a00 24%),
    linear-gradient(90deg, var(--ink) 0, var(--ink) 36%, #15232add 43%, #15232a80 53%, #15232a00 68%);
}
.rs-hero {
  display: grid; grid-template-columns: minmax(0, 600px) 1fr; align-items: end; gap: 30px;
  min-height: clamp(620px, 48vw, 720px); padding: 148px 0 70px;
}
.rs-hero-copy h1 { font-size: clamp(46px, 4.7vw, 68px); margin: 18px 0 24px; }
.rs-hero-copy h1 em { display: block; font-style: normal; color: var(--gold); }
.rs-hero-copy > p { max-width: 450px; color: #d1d8d6; font-size: 17px; }

/* Small illustrative card, overlapping the hero edge as in the mockup */
.rs-note {
  justify-self: end; width: 262px; margin-bottom: -96px; position: relative; z-index: 2;
  background: var(--paper); color: var(--ink); border-radius: 6px; padding: 18px 20px 16px;
  box-shadow: 0 18px 40px #0b141959;
}
.rs-note-kicker { font-size: 9px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: var(--rs-brass); }
.rs-note-title { font: 22px/1.15 var(--serif); letter-spacing: -0.3px; margin: 0 0 12px; }
.rs-note blockquote { margin: 0; padding: 1px 0 1px 12px; border-left: 2px solid var(--gold); font-size: 13px; line-height: 1.5; }
.rs-note-foot { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ---------- Bridge line ---------- */
.rs-bridge { width: min(1200px, calc(100% - 80px)); margin: auto; padding: 30px 0 0; }
.rs-bridge span {
  display: flex; align-items: center; gap: 24px;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.rs-bridge span::before, .rs-bridge span::after { content: ""; flex: 1; height: 1px; background: #b9c0c0; }
.rs-bridge span::after { margin-right: 300px; }

/* ---------- Where it lives ---------- */
section.rs-places { padding: 58px 0 70px; }
.rs-eyebrow { color: var(--rs-brass); letter-spacing: 3.6px; }
.rs-eyebrow span { color: var(--ink); }
.rs-places h2 { font-size: clamp(38px, 4.6vw, 64px); margin: 14px 0 36px; }
.rs-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rs-card picture { display: block; }
.rs-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.rs-card h3 { font: 25px/1.2 var(--serif); letter-spacing: -0.4px; margin: 20px 0 6px; }
.rs-card p { color: var(--muted); font-size: 15px; }

/* ---------- See the experience ---------- */
section.rs-experience { background: #eeebe3; border-block: 1px solid var(--line); padding: 78px 0; }
.rs-experience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.rs-experience h2 { margin: 14px 0 18px; }
.rs-experience-copy > p { max-width: 470px; color: var(--muted); }
.rs-ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.rs-ticks li::before { content: "✦"; color: var(--gold); margin-right: 9px; }
.rs-chat-wrap { width: 100%; max-width: 460px; justify-self: end; }
.rs-chat .bubble.user { margin-left: 48px; }
.rs-chat .bubble.mez { margin-right: 28px; }
.rs-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.rs-link { display: inline-block; padding: 4px 11px; border: 1px solid #d1ae6c80; border-radius: 999px; font-size: 12px; color: var(--gold); }
.rs-chat-note { text-align: center; margin-top: 12px; }

/* ---------- How it works ---------- */
section.rs-how { padding: 74px 0 80px; }
.rs-how h2 { font-size: clamp(36px, 4.2vw, 58px); margin-bottom: 40px; }
.rs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.rs-steps li { padding: 2px 34px; border-left: 1px solid var(--rs-rule); }
.rs-steps li:first-child { padding-left: 0; border-left: 0; }
.rs-num { display: block; font: 30px/1 var(--serif); color: var(--gold); }
.rs-steps h3 { font: 23px/1.25 var(--serif); letter-spacing: -0.3px; margin: 14px 0 8px; }
.rs-steps p { color: var(--muted); font-size: 15px; max-width: 300px; }

/* ---------- Closing ---------- */
section.rs-close { position: relative; isolation: isolate; overflow: hidden; padding: 104px 0 96px; text-align: center; }
.rs-close-photo { position: absolute; inset: 0; z-index: -2; display: block; }
.rs-close-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.rs-close::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 75% at 50% 50%, #15232af0 0, #15232ab8 55%, #15232a4d 100%);
}
.rs-close-inner { max-width: 780px; }
.rs-star { display: block; width: 46px; height: 46px; margin: 0 auto; }
.rs-close h2 { font-size: clamp(34px, 3.6vw, 50px); max-width: 720px; margin: 20px auto 16px; }
.rs-close p { color: #cbd3cf; font-size: 16px; max-width: 560px; margin: 0 auto; }
.rs-close .actions { justify-content: center; margin-top: 30px; }
.rs-close .contact-line { margin-top: 18px !important; }

/* ---------- Medium screens: card stops overlapping the bridge ---------- */
@media (max-width: 1150px) {
  .rs-note { width: 240px; }
  .rs-bridge span::after { margin-right: 270px; }
}
@media (max-width: 1000px) {
  .rs-bridge { width: calc(100% - 48px); }
  .rs-hero-photo { width: 66%; }
  .rs-steps li { padding: 2px 22px; }
}

/* ---------- Phones and small tablets: one column ---------- */
@media (max-width: 899px) {
  .rs-top { display: flex; flex-direction: column; }
  .rs-top::after { display: none; }
  .rs-hero { display: contents; }
  .rs-hero-copy { order: 1; width: calc(100% - 48px); margin: 0 auto; padding: 120px 0 34px; }
  /* Full 3:2 photo, no crop, so the bag, bowl and flatbread all stay in frame */
  .rs-hero-photo { order: 2; position: relative; width: 100%; height: auto; z-index: 0; }
  .rs-hero-photo img { height: auto; aspect-ratio: 3 / 2; }
  .rs-hero-photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--ink) 0, #15232a99 12%, #15232a00 34%);
  }
  .rs-note { order: 3; width: min(340px, calc(100% - 48px)); margin: -46px 24px 32px auto; }
  .rs-bridge span { white-space: normal; text-align: center; letter-spacing: 2.2px; }
  .rs-cards { grid-template-columns: 1fr; gap: 34px; max-width: 560px; }
  .rs-experience-grid { grid-template-columns: 1fr; gap: 34px; }
  .rs-chat-wrap { justify-self: stretch; max-width: 520px; }
  .rs-steps { grid-template-columns: 1fr; }
  .rs-steps li, .rs-steps li:first-child { padding: 22px 0; border-left: 0; border-top: 1px solid var(--rs-rule); }
  .rs-steps li:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 740px) {
  .rs-hero-copy { width: calc(100% - 36px); padding-top: 104px; }
  .rs-hero-copy h1 { font-size: 46px; letter-spacing: -1.4px; }
  .rs-hero-copy > p { font-size: 16px; }
  .rs-note { width: calc(100% - 36px); margin: -40px 18px 28px; }
  .rs-bridge { width: calc(100% - 36px); padding-top: 26px; }
  .rs-bridge span { gap: 14px; font-size: 10px; }
  section.rs-places { padding: 44px 0 50px; }
  .rs-places h2 { font-size: 38px; margin-bottom: 28px; }
  .rs-card h3 { font-size: 23px; margin-top: 16px; }
  section.rs-experience { padding: 52px 0; }
  .rs-chat .bubble.user { margin-left: 28px; }
  .rs-chat .bubble.mez { margin-right: 10px; }
  section.rs-how { padding: 52px 0 56px; }
  .rs-how h2 { font-size: 36px; margin-bottom: 28px; }
  section.rs-close { padding: 72px 0 70px; }
  .rs-close::after { background: radial-gradient(ellipse 120% 70% at 50% 50%, #15232aeb 0, #15232ac2 60%, #15232a80 100%); }
  .rs-close .btn { width: 100%; max-width: 360px; }
}
@media (max-width: 560px) {
  .rs-brand-label { display: none; }
}
@media (max-width: 390px) {
  .rs-hero-copy h1 { font-size: 40px; }
  .rs-header .navlinks .btn { padding: 9px 12px; font-size: 12px; }
}