/* T06 Ember — a dark, candlelit restaurant page.
   
   Where the others sit on cream, this sits on near-black warmed with brown. The library needed a
   ground that isn't paper: T01 and T02 read as siblings largely because they share one.

   Nav model: a fixed left rail. The restaurant's name, the sections and the order button stay put
   while everything scrolls past them — unlike T01's snap reel, T02's separate pages or T03's top bar.
   Menu: one continuous ledger with monospaced prices and category headings that stick as you pass.
   Motion: a slow fade-and-rise as each section arrives. Nothing moves on scroll. */

:root {
  /* Warm dark. The brown in the black is what stops it feeling like a dashboard. */
  --bg:         #14110D;
  --bg-soft:    #1A1611;
  --bg-card:    #1F1A14;
  --bg-raised:  #251F17;
  --ink:        #F5ECD9;
  --ink-soft:   #D8C9AD;
  --ink-muted:  #A89A83;
  --ink-faint:  #948A78;            /* was #6E6555 — 3.3:1 on this ground */
  --line:       rgba(245,236,217,.13);
  --line-bright:rgba(245,236,217,.26);

  --brand:      #E8853F;            /* tenant colour overrides this via brand-tokens.js */
  --brand-ink:  #14110D;            /* brand-tokens.js flips this if the brand is dark */
  --brand-readable: var(--brand);   /* darkened for small text on light grounds */
  --brand-on-dark:  var(--brand);   /* lightened for small text here, which is the usual case */
  --brand-deep: #B86530;

  --wa:         #25D366;
  --wa-deep:    #0F7A40;            /* #128C4A is 4.31:1 with white — just under the floor */

  --display: 'Fraunces', Georgia, serif;
  --sans:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-ui: var(--sans);

  --rail: 232px;
  --r:    18px;
  --r-pill: 99px;
  --pad: clamp(22px, 5vw, 76px);
}

* { box-sizing: border-box; }
/* Any rule with an explicit display (flex, grid) beats the hidden attribute's UA style, which is how
   an empty order dock ends up on screen saying "0 on your table". Make hidden mean hidden. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top, 0px);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.05; }
h1 em, .sec-title em { font-style: italic; color: var(--brand-on-dark); }

.skip { position: absolute; clip-path: inset(50%); }
.skip:focus { clip-path: none; inset-inline-start: 12px; top: 12px; z-index: 99;
  background: var(--bg-raised); padding: 10px 16px; border-radius: 10px; }

/* ── The rail ──────────────────────────────────────────────────────────────── */
.rail {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--rail); z-index: 40;
  display: flex; flex-direction: column; gap: 22px;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 22px calc(22px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
  border-inline-end: 1px solid var(--line);
}
.rail-mark { font-family: var(--display); font-size: 1.5rem; line-height: 1.1; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.rail-nav a {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-muted); padding: 9px 10px; border-radius: 9px;
  border-inline-start: 2px solid transparent;
}
.rail-nav a:hover { color: var(--ink); background: rgba(245,236,217,.05); }
.rail-nav a[aria-current="true"] { color: var(--ink); border-inline-start-color: var(--brand); }
.rail-foot { margin-top: auto; display: grid; gap: 12px; }

.lang { display: flex; gap: 4px; flex-wrap: wrap; }
.lang button {
  font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .06em; cursor: pointer;
  padding: 7px 11px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: none; color: var(--ink-muted); min-height: 36px;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: .86rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 12px 20px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  min-height: 46px; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-lg { padding: 15px 26px; font-size: .92rem; min-height: 54px; }
.btn-wa { background: var(--wa-deep); color: #fff; }
.btn-wa:hover { background: var(--wa); color: #08150D; }
.btn-line { border-color: var(--line-bright); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); background: rgba(245,236,217,.05); }
.link { font: inherit; font-size: .84rem; background: none; border: 0; cursor: pointer;
  color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }

/* ── Page ──────────────────────────────────────────────────────────────────── */
.page { margin-inline-start: var(--rail); }
section { padding: clamp(56px, 9vh, 104px) var(--pad); border-bottom: 1px solid var(--line); }
.sec-title { font-size: clamp(1.7rem, 3.4vw, 2.7rem); margin-bottom: 26px; }
.eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-on-dark); margin: 0 0 14px; }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--ink-soft); max-width: 54ch; margin: 18px 0 26px; }

/* Sections arrive with a slow rise. Nothing tracks the scroll — this is a still room. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Opening ───────────────────────────────────────────────────────────────── */
.open { position: relative; min-height: 86vh; display: grid; align-content: center;
  padding-block: clamp(70px, 12vh, 140px); }
.open-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.open-media img { width: 100%; height: 100%; object-fit: cover; opacity: .32;
  filter: saturate(.85) contrast(1.05); }
.open::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 20% 30%, transparent, var(--bg) 78%); }
.open-body, .facts { position: relative; z-index: 2; }
.open h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); letter-spacing: -.02em; max-width: 16ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.speaks { margin-top: 18px; color: var(--ink-muted); font-size: .94rem; max-width: 52ch; }
.facts { display: flex; gap: 26px; flex-wrap: wrap; list-style: none; margin: 40px 0 0; padding: 0;
  font-size: .86rem; color: var(--ink-muted); }
.facts b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.facts .halal { color: var(--brand-on-dark); font-weight: 700; }

/* ── How it works ──────────────────────────────────────────────────────────── */
.how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.how li { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.how li b { display: block; font-family: var(--mono); font-size: 1.5rem; color: var(--brand-on-dark); margin-bottom: 8px; }
.how li span { color: var(--ink-soft); }

/* ── Tonight ───────────────────────────────────────────────────────────────── */
.signals { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.signals span { font-size: .84rem; color: var(--ink-soft); background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 16px; }
.signals .live { color: var(--wa); }
.rituals { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ritual { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.ritual .when { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-on-dark); }
.ritual h3 { font-size: 1.4rem; margin: 6px 0 8px; }
.ritual p { color: var(--ink-muted); font-size: .92rem; margin: 0 0 12px; }
.ritual .pr { font-family: var(--mono); color: var(--ink); }
.ritual .was { color: var(--ink-muted); text-decoration: line-through; margin-inline-start: 8px; font-size: .86rem; }

/* ── The ledger ────────────────────────────────────────────────────────────── */
.menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.search input {
  font: inherit; font-size: .94rem; color: var(--ink); background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 11px 18px; min-height: 46px; min-width: 240px;
}
.search input:focus { outline: none; border-color: var(--brand); }

.ledger { margin-top: 10px; }
.lcat { margin-bottom: 34px; }
.lcat > h3 {
  position: sticky; top: 0; z-index: 5;
  font-size: 1.3rem; padding: 14px 0 10px; margin: 0 0 4px;
  background: linear-gradient(180deg, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.lcat > h3 small { font-family: var(--mono); font-size: .76rem; color: var(--ink-faint); font-weight: 400; }

.lrow {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.lrow:hover { background: rgba(245,236,217,.03); }
.lrow .ln { font-family: var(--display); font-size: 1.16rem; }
.lrow .lp { font-family: var(--mono); font-size: .98rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.lrow .ld { grid-column: 1 / -1; color: var(--ink-muted); font-size: .9rem; line-height: 1.45; max-width: 68ch; }
.lrow .ltags { grid-column: 1 / -1; display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
.ltags span { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; }
.lrow .ladd {
  grid-column: 1 / -1; justify-self: start; margin-top: 10px;
  font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: none; border: 1px solid var(--line-bright); border-radius: var(--r-pill);
  color: var(--brand-on-dark); padding: 9px 16px; cursor: pointer; min-height: 44px;
}
.lrow .ladd:hover { border-color: var(--brand); background: rgba(232,133,63,.1); }
.lrow.soldout .ln { text-decoration: line-through; color: var(--ink-faint); }
.noresult { color: var(--ink-muted); }

/* ── Your table ────────────────────────────────────────────────────────────── */
.table-wrap { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.table-controls { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.party { display: flex; gap: 7px; }
.party button { font: inherit; font-family: var(--mono); cursor: pointer; min-width: 46px; min-height: 46px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: none; color: var(--ink-muted); }
.party button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.budget { display: flex; align-items: center; gap: 12px; font-size: .84rem; color: var(--ink-muted); }
.budget input { accent-color: var(--brand); }
.budget b { font-family: var(--mono); color: var(--ink); }

.tablelist { list-style: none; margin: 0 0 18px; padding: 0; }
.tablelist li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line); }
.tablelist .n { font-family: var(--display); font-size: 1.04rem; }
.tablelist .n small { display: block; font-family: var(--sans); font-size: .74rem; color: var(--ink-faint);
  letter-spacing: .1em; text-transform: uppercase; }
.tablelist .q { display: flex; align-items: center; gap: 8px; font-family: var(--mono); }
.tablelist .q button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: none; color: var(--ink); font: inherit; cursor: pointer; }
.tablelist .p { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.total { margin-inline-end: auto; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.total b { font-family: var(--mono); font-size: 1.5rem; color: var(--ink); letter-spacing: 0; text-transform: none; }

/* ── Reserve, catering, guests, story, visit ───────────────────────────────── */
.reserve-card, .card, .pack, .quote {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px;
}
.packs, .quotes, .visit-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.packs { margin-bottom: 20px; }
.pack h3, .card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.pack p, .card p { color: var(--ink-muted); font-size: .92rem; }
.pack .pr { font-family: var(--mono); color: var(--ink); }
.quote blockquote { margin: 0 0 12px; font-family: var(--display); font-size: 1.1rem; line-height: 1.4; }
.quote .who { font-size: .82rem; color: var(--ink-muted); }
.quote .stars { color: var(--brand-on-dark); letter-spacing: 1px; }

.story-wrap { display: grid; gap: 30px; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
.portrait img { border-radius: var(--r); aspect-ratio: 4/5; object-fit: cover; }
.story-body p { color: var(--ink-soft); max-width: 62ch; }
.story-body h3 { font-size: 1.3rem; margin: 22px 0 8px; }

.hours { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hours td { padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink-muted); }
.hours td:last-child { text-align: end; font-family: var(--mono); color: var(--ink); }
.hours tr.today td { color: var(--ink); }
.hours tr.today td:first-child { color: var(--brand-on-dark); font-weight: 700; }
.map iframe { width: 100%; height: 190px; border: 0; border-radius: 12px; margin-top: 14px; filter: grayscale(.4) brightness(.85); }
.inline { color: var(--brand-on-dark); border-bottom: 1px solid currentColor; font-size: .9rem; }
.qr img { margin: 12px 0; border-radius: 10px; background: #fff; padding: 8px; }

.foot { padding: 40px var(--pad) calc(60px + env(safe-area-inset-bottom, 0px)); color: var(--ink-faint); font-size: .86rem; }
.foot a { color: var(--ink-muted); border-bottom: 1px solid var(--line-bright); }

/* ── Dock ──────────────────────────────────────────────────────────────────── */
.dock {
  position: fixed; z-index: 50; inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: calc(var(--rail) + 16px); inset-inline-end: 16px;
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-raised); border: 1px solid var(--line-bright); border-radius: var(--r-pill);
  padding: 10px 12px 10px 22px; box-shadow: 0 20px 50px -24px #000;
}
.dock > span { font-size: .84rem; color: var(--ink-muted); }
.dock b { font-family: var(--mono); color: var(--ink); }
.dock > b { margin-inline-start: auto; font-size: 1.1rem; }

/* ── Narrow ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* The rail becomes a bar: a fixed column costs too much of a phone's width. */
  .rail {
    position: sticky; inset: 0 auto auto 0; width: auto; flex-direction: row; align-items: center;
    gap: 14px; padding: 10px 16px calc(10px); border-inline-end: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail-nav { flex-direction: row; margin: 0; gap: 2px; }
  .rail-nav a { border-inline-start: 0; border-bottom: 2px solid transparent; white-space: nowrap; min-height: 44px;
    display: inline-flex; align-items: center; }
  .rail-nav a[aria-current="true"] { border-bottom-color: var(--brand); }
  .rail-foot { margin: 0 0 0 auto; grid-auto-flow: column; align-items: center; }
  .rail-foot .btn span { display: none; }
  .rail-foot .btn { padding: 10px 14px; }
  .page { margin-inline-start: 0; }
  .dock { inset-inline-start: 12px; inset-inline-end: 12px; }
  .story-wrap { grid-template-columns: 1fr; }
  .lcat > h3 { top: 58px; }
}
@media (max-width: 560px) {
  .open h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .table-foot .btn { width: 100%; }
  .dock > span { display: none; }
}

/* RTL: the rail flips side with logical properties; text direction is per-element so English
   punctuation inside an Urdu line does not jump to the wrong end. */
[dir="rtl"] .open h1, [dir="rtl"] .lede, [dir="rtl"] p, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  unicode-bidi: plaintext;
}

/* Touch targets: the rail becomes a horizontal bar on a phone, so its mark, language pills and
   links all need the 44px a thumb expects. */
@media (pointer: coarse), (max-width: 900px) {
  .rail-mark { min-height: 44px; display: inline-flex; align-items: center; }
  .lang button { min-height: 44px; padding: 10px 14px; }
  .rail-nav a { min-height: 44px; }
  .link, .inline { min-height: 44px; display: inline-flex; align-items: center; }
  .tablelist .q button { width: 44px; height: 44px; }
  .party button { min-width: 48px; min-height: 48px; }
}