@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url(assets/fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/fraunces-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/inter-tight-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ==========================================================================
   RESTAURANT MENU · by Fayaline
   Change the colours here. Everything else follows.
   ========================================================================== */
:root {
  --bg:      #16110d;   /* page (warm charcoal) */
  --bg-2:    #1f1813;   /* cards, bars */
  --ink:     #f2e9da;   /* main text (cream) */
  --ink-2:   #b9ab98;   /* descriptions */
  --ink-3:   #958877;   /* small labels */
  --accent:  #e2793f;   /* ember: prices, active tab, details */
  --line:    rgba(242, 233, 218, .12);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter Tight', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --pad: clamp(20px, 5vw, 56px);
}
/* Daytime café? Swap in these lighter colours:
   --bg:#f5efe6; --bg-2:#ece3d6; --ink:#1d1814; --ink-2:#5d5248; --ink-3:#8a7d70; --accent:#b4532a; --line:rgba(29,24,20,.12); */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 132px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--bg); }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 10px; }

/* ---------- layout: photo side + menu ---------- */
body { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.side__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: settle 2.4s var(--ease) forwards; }
@keyframes settle { to { transform: scale(1); } }
.side::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,17,13,.35) 0%, rgba(22,17,13,0) 30%, rgba(22,17,13,.25) 55%, rgba(22,17,13,.92) 100%); }
.side__in { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--pad); display: grid; gap: 18px; }
.kicker { font: 500 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); opacity: .85; }
.name { font: 300 clamp(72px, 9vw, 148px)/.86 var(--serif); font-variation-settings: 'opsz' 144, 'SOFT' 50; letter-spacing: -.035em; }
.status { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 14px; border-radius: 999px; background: rgba(22,17,13,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #7dc58b; box-shadow: 0 0 0 4px rgba(125,197,139,.18); }
.status.closed i { background: #c96f5b; box-shadow: 0 0 0 4px rgba(201,111,91,.18); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(242,233,218,.35); text-decoration: none; font-weight: 500; font-size: 15px; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--main { background: var(--accent); border-color: var(--accent); color: #1a0f08; }
.btn--main:hover { background: var(--ink); border-color: var(--ink); }

/* ---------- sticky bar: tabs + filters ---------- */
.menu { min-width: 0; }
.bar { position: sticky; top: 0; z-index: 10; background: rgba(22,17,13,.9); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid var(--line); }
.bar__brand { display: none; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 14px var(--pad) 10px; scroll-padding: 0 var(--pad); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: 9px 15px; border-radius: 999px; text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: background .3s var(--ease), color .3s var(--ease); white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 var(--pad) 14px; }
.filters button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 7px 13px 7px 11px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; transition: all .25s var(--ease); }
.filters button::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 1px solid currentColor; transition: all .25s var(--ease); }
.filters button[aria-pressed="true"] { background: rgba(226,121,63,.14); border-color: var(--accent); color: var(--ink); }
.filters button[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--bg); }
.filters__count { font-size: 13px; color: var(--ink-3); margin-left: 4px; }

/* ---------- sections ---------- */
#sections { padding: 0 var(--pad); max-width: 820px; }
.sec { padding: clamp(56px, 8vw, 96px) 0 8px; }
.sec[hidden] { display: none; }
.sec__head { display: grid; gap: 10px; margin-bottom: 26px; }
.sec__num { font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.sec__name { font: 300 clamp(40px, 5vw, 60px)/1 var(--serif); font-variation-settings: 'opsz' 120, 'SOFT' 50; letter-spacing: -.025em; }
.sec__note { font: italic 300 18px/1.45 var(--serif); color: var(--ink-2); }

.dish { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0; border-top: 1px solid var(--line); }
.dish[hidden] { display: none; }
.dish--photo { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 18px; align-items: start; }
.dish__img { grid-row: span 3; width: 96px; height: 96px; border-radius: 14px; object-fit: cover; background: var(--bg-2); }
.dish__top { display: flex; align-items: baseline; gap: 10px; }
.dish__name { font: 400 21px/1.25 var(--serif); font-variation-settings: 'opsz' 36; letter-spacing: -.005em; }
.dish__dots { flex: 1; min-width: 20px; border-bottom: 1px dotted rgba(242,233,218,.28); transform: translateY(-5px); }
.dish__price { font: 400 19px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--accent); white-space: nowrap; }
.dish__desc { color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 34em; }
.dish__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dish__tags:empty { display: none; }
.tag { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--line); font: 600 10.5px/1 var(--sans); letter-spacing: .08em; color: var(--ink-2); }
.tag--hot { border-color: rgba(226,121,63,.4); }
.tag--hot::before { content: ''; width: 9px; height: 13px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26'%3E%3Cpath d='M10 2c0 2-2 3-2 5 3 0 8 3 8 9 0 6-5 9-8 9S1 22 2 15c1-4 5-6 6-8 0-2 1-4 2-5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26'%3E%3Cpath d='M10 2c0 2-2 3-2 5 3 0 8 3 8 9 0 6-5 9-8 9S1 22 2 15c1-4 5-6 6-8 0-2 1-4 2-5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.tag--pick { border-color: transparent; background: rgba(226,121,63,.16); color: var(--accent); letter-spacing: .1em; text-transform: uppercase; padding: 0 9px; }
.dish--out .dish__name, .dish--out .dish__desc { color: #958877; }
.dish--out .dish__name { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(242,233,218,.4); }
.dish--out .dish__img { opacity: .45; filter: grayscale(1); }
.dish__out { font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #958877; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; white-space: nowrap; align-self: center; }
.sec--special { margin-top: clamp(40px, 6vw, 64px); padding: clamp(28px, 4vw, 40px) clamp(20px, 3.5vw, 36px) 12px; border-radius: 22px; background: linear-gradient(160deg, rgba(226,121,63,.14), rgba(226,121,63,.04) 60%); box-shadow: inset 0 0 0 1px rgba(226,121,63,.28); }
.sec--special .sec__name { font-style: italic; }
.sec--special .dish:first-of-type { border-top-color: rgba(226,121,63,.28); }
.empty { padding: 60px var(--pad) 0; color: var(--ink-2); font: italic 300 20px/1.5 var(--serif); max-width: 30em; }

/* ---------- footer info ---------- */
.info { margin-top: clamp(80px, 10vw, 140px); padding: clamp(48px, 6vw, 72px) var(--pad) 48px; background: var(--bg-2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(24px, 4vw, 56px); }
.info h2 { font: 500 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.info p { color: var(--ink-2); }
.info__note { grid-column: 1 / -1; }
.hours { border-collapse: collapse; width: 100%; max-width: 320px; font-size: 15px; }
.hours td { padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.hours td + td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.today td { color: var(--ink); font-weight: 500; }
.hours tr.today td:first-child::after { content: ' · today'; color: var(--accent); font-weight: 400; }
.info__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.info__links a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: rgba(242,233,218,.35); }
.info__links a:hover { text-decoration-color: var(--accent); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-top: 18px; font-size: 14px; }
.legend .tag { margin-left: 10px; } .legend .tag:first-child { margin-left: 0; }
.updated { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); padding-top: 22px; border-top: 1px solid var(--line); }

/* ---------- reveal ---------- */
.js .dish, .js .sec__head { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .is-in { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .js .dish, .js .sec__head { opacity: 1; transform: none; transition: none; } .side__photo { animation: none; transform: none; } }

/* ---------- phone & tablet ---------- */
@media (max-width: 900px) {
  body { display: block; }
  .side { position: relative; height: 78svh; min-height: 520px; }
  .name { font-size: clamp(72px, 22vw, 120px); }
  .bar__brand { display: block; position: absolute; left: 0; top: 0; z-index: 2; height: 60px; width: calc(var(--pad) + 112px); padding-left: var(--pad); font: 400 22px/60px var(--serif); background: linear-gradient(90deg, var(--bg) 82%, rgba(22,17,13,0)); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
  .bar.is-stuck .bar__brand { opacity: 1; }
  .bar.is-stuck .tabs { padding-left: calc(var(--pad) + 112px); scroll-padding-left: calc(var(--pad) + 112px); }
  #sections { max-width: none; }
  .info { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .actions .btn { flex: 1 1 auto; justify-content: center; padding: 0 16px; }
  .dish--photo { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 14px; }
  .dish__img { width: 76px; height: 76px; border-radius: 12px; }
  .dish__name { font-size: 19.5px; }
  .dish__price { font-size: 18px; }
}