/* Docklands Den home page (/). Phone first (390), then iPad (768+) and desktop (1100+). Tokens from tokens.css only.
   The idea: their printed menu. Cream paper, Den green, sand used sparingly, the name in Shrikhand as on their menu titles,
   and one band of Den green (Find us) carrying their "d" mark large, the way it sits on their shopfront and packaging. */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding-inline: var(--s-4); }
.skip { position: absolute; inset-inline-start: var(--s-2); top: -60px; z-index: 20; padding: var(--s-3) var(--s-4); background: var(--ink); color: #fff; border-radius: var(--r-sm); }
.skip:focus { top: var(--s-2); }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 10; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 60px; }
.brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; min-height: 48px; }
.brand img { width: 40px; height: 40px; }
.demo-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); font: 700 12px/1.4 var(--font-body); letter-spacing: .02em; }
.bar-links { display: flex; align-items: center; gap: var(--s-1); }
.bar-links a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 var(--s-3); border-radius: var(--r-md); font-weight: 600; font-size: var(--t-sm); text-decoration: none; color: var(--ink); }
.bar-links a:hover { background: var(--surface); }
.bar-links a[href="#find"] { display: none; }
.bar-call { color: var(--brand) !important; }
.bar-call span { display: none; }
.bar-call::after { content: "Call"; }

/* Buttons (extends base.css .btn) */
.btn.big { white-space: nowrap; min-height: 56px; padding: 0 var(--s-6); font-size: var(--t-lg); border-radius: var(--r-md); }
.btn.outline { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand); }
.btn.outline:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); box-shadow: inset 0 0 0 2px var(--brand); }
.btn.sand { background: var(--signal); color: var(--signal-ink); }
.btn.sand:hover { background: color-mix(in srgb, var(--signal) 82%, #fff); }

/* Hero: the photo first on a phone (the food sells it), then the name, what they cook, open or not, and the two ways to order. */
.hero { display: grid; gap: var(--s-5); padding-top: 0; padding-bottom: var(--s-10); }
.hero-photo { margin: 0 calc(var(--s-4) * -1); aspect-ratio: 16 / 11; overflow: hidden; background: var(--surface); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero h1 { margin: 0; color: var(--brand); font-size: 46px; line-height: 1; }
.tagline { margin: var(--s-3) 0 0; font-size: var(--t-lg); line-height: 1.4; max-width: 30ch; text-wrap: pretty; }
.status { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; font-weight: 700; font-size: var(--t-md); }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); flex: none; }
.status[data-state="open"] .dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.status[data-state="closed"] .dot { background: var(--signal-text); }
.actions { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.aside { margin: var(--s-4) 0 0; color: var(--ink-2); font-size: var(--t-sm); }

/* From the menu: real photos and real prices (from the edited menu), a swipe row on a phone. */
.dishes { padding-bottom: var(--s-12); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.sec-head h2, .about h2, .book h2, .find h2 { margin: 0; font-size: var(--t-2xl); line-height: 1.1; color: var(--ink); }
.more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--brand); text-underline-offset: 4px; }
.dish-row { list-style: none; margin: 0 calc(var(--s-4) * -1); padding: 0 var(--s-4) var(--s-2); display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-4); scrollbar-width: none; }
.dish-row::-webkit-scrollbar { display: none; }
.dish-row li { scroll-snap-align: start; }
.dish { display: block; text-decoration: none; border-radius: var(--r-lg); }
.dish img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--surface); }
.dish-name { display: block; margin-top: var(--s-2); font-weight: 700; line-height: 1.3; }
.dish-price { display: block; margin-top: 2px; font: 700 var(--t-md)/1.2 var(--font-display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dish:hover .dish-name { text-decoration: underline; text-underline-offset: 3px; }
.dish:hover img { filter: brightness(1.04); }

/* Find us: the one green band, with their "d" mark big behind it. */
.find { position: relative; overflow: hidden; background: var(--brand); color: var(--brand-ink); padding: var(--s-12) 0; }
.find-mark { position: absolute; width: 360px; height: 360px; inset-inline-end: -120px; top: -60px; color: rgba(255, 255, 255, .07); pointer-events: none; }
.find-in { position: relative; }
.find h2 { color: var(--brand-ink); }
.find-grid { display: grid; gap: var(--s-10); margin-top: var(--s-6); }
.find .label { margin: 0 0 var(--s-2); font-weight: 700; font-size: var(--t-sm); color: var(--signal); }
.find .big { margin: 0 0 var(--s-3); font: 800 var(--t-xl)/1.25 var(--font-display); }
.find .tel { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-variant-numeric: tabular-nums; }
.find .tel:hover { text-decoration: underline; text-underline-offset: 4px; }
.halal, .ig { margin: var(--s-5) 0 0; }
.ig a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 700; text-underline-offset: 4px; }
.hours table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 9px 0; text-align: start; font-weight: 400; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.hours td { text-align: end; }
.hours tr.today th, .hours tr.today td { font-weight: 700; color: var(--signal); }
.find :focus-visible { outline-color: var(--signal); }

/* About and bookings */
.about { display: grid; gap: var(--s-6); padding-top: var(--s-12); padding-bottom: var(--s-10); }
.about-text p { margin: var(--s-3) 0 0; font-size: var(--t-md); line-height: 1.6; max-width: 60ch; }
.about-photo { margin: 0; }
.about-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); background: var(--surface); }
.book { position: relative; display: grid; gap: var(--s-5); padding-top: var(--s-8); padding-bottom: var(--s-12); }
.book::before { content: ""; position: absolute; top: 0; inset-inline: var(--s-4); border-top: 1px solid var(--line); }
.book p { margin: var(--s-3) 0 0; max-width: 52ch; font-size: var(--t-md); line-height: 1.55; }

.foot { background: var(--surface); padding: var(--s-8) 0 calc(var(--s-8) + env(safe-area-inset-bottom)); color: var(--ink-2); font-size: var(--t-sm); }
.foot p { margin: 0 0 var(--s-2); }
.foot-name { font-size: var(--t-xl); color: var(--brand); margin-bottom: var(--s-3) !important; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-underline-offset: 3px; }

/* Small phones */
@media (max-width: 359px) {
  .hero h1 { font-size: 40px; }
  .dish-row { grid-auto-columns: 72%; }
}

/* iPad and up */
@media (min-width: 700px) {
  .wrap { padding-inline: var(--s-8); }
  .book::before { inset-inline: var(--s-8); }
  .bar-links a[href="#find"] { display: inline-flex; }
  .bar-call span { display: inline; }
  .bar-call::after { content: none; }
  .hero { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-8); padding-top: var(--s-8); padding-bottom: var(--s-12); }
  .hero-photo { order: 2; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
  .hero h1 { font-size: var(--t-5xl); }
  .actions { max-width: 360px; }
  .dish-row { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-4); overflow: visible; }
  .find { padding: var(--s-16) 0; }
  .find-mark { width: 520px; height: 520px; inset-inline-end: -140px; top: -90px; }
  .find-grid { grid-template-columns: 1fr 1fr; gap: var(--s-10) var(--s-8); }
  .find-block.hours { grid-column: 1 / -1; max-width: 420px; }
  .about { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-10); padding-top: var(--s-16); }
  .book { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-8); }
  .sec-head h2, .about h2, .book h2, .find h2 { font-size: var(--t-3xl); }
}

/* Desktop */
@media (min-width: 1100px) {
  .hero { grid-template-columns: 5fr 6fr; gap: var(--s-12); padding-top: var(--s-12); padding-bottom: var(--s-16); }
  .hero-photo { aspect-ratio: 4 / 3; }
  .hero h1 { font-size: var(--t-6xl); }
  .tagline { font-size: var(--t-xl); }
  .actions { max-width: none; grid-template-columns: auto auto; justify-content: start; }
  .dish-row { grid-template-columns: repeat(6, 1fr); }
  .find-grid { grid-template-columns: 1fr 1fr 1.1fr; }
  .find-block.hours { grid-column: auto; max-width: none; }
  .find-mark { width: 640px; height: 640px; inset-inline-end: -120px; top: -160px; }
  .about { grid-template-columns: 6fr 5fr; }
}