/* =====================================================================
   DRAFT 4 · NOCE (walnut)
   Dark and warm, like the amber wood and bottles behind the counter.
   A full screen photo hero that settles as you scroll, cream type,
   sand for actions. The menu is a ledger: item code, unit and serving
   size in Geist Mono, a small photo per row, tap a row for details. Geist + Geist Mono
   (mono only for codes and quantities).
   ===================================================================== */
:root {
  --font: "Geist", system-ui, sans-serif;
  --bg: #131209; --surface: #1f1f1f; --text: #f3ebde; --soft: #b5aa9a; --line: #313131; --accent: #d9b88c;
}
.mono { font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; line-height: 20px; }
.btn { background: var(--accent); color: #1a1408; }
.btn.ghost { color: var(--text); }
.btn.ghost:hover { background: var(--text); color: var(--bg); }
.nav { background: color-mix(in srgb, #181818 72%, transparent); }
.nav .wtag { color: var(--accent); }
.phone b { color: var(--text); }
.tbc { background: #3a3220; color: #f2d79a; }
.textlink { color: var(--accent); }

.hero-full { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: flex-end; }
.hero-full .unroll.full { position: absolute; inset: 0; }
.hero-full .unroll.full::after { content: ""; position: absolute; inset: 0; background: rgba(19, 18, 9, 0.55); }
.hero-full .lid { background: var(--bg); }
.hero-full .over { position: relative; z-index: 2; padding-bottom: var(--s900); width: 100%; }
.hero-full .hero-sub { margin-top: var(--s300); color: #d9cfbf; }

.cats.ledgercats { display: flex; flex-direction: column; }
.cats.ledgercats .cat-tile { display: grid; grid-template-columns: 1fr auto 160px; gap: var(--s300); align-items: center; padding: var(--s300) 0; text-decoration: none; color: var(--text); box-shadow: inset 0 -1px 0 var(--line); transition: transform 500ms var(--ease); }
.cats.ledgercats .cat-tile:hover { transform: translateX(8px); }
.cats.ledgercats .cat-name { grid-column: 1; grid-row: 1; font-size: 24px; line-height: 32px; font-weight: 600; }
.cats.ledgercats .cat-it { grid-column: 2; grid-row: 1; color: var(--accent); }
.cats.ledgercats .cat-img { grid-column: 3; grid-row: 1; display: block; height: 96px; overflow: hidden; border-radius: 12px; }
.cats.ledgercats img { width: 100%; height: 100%; object-fit: cover; }
.n-pic { height: 480px; border-radius: 24px; }
.n-pic .lid { background: var(--bg); }

.tagsec { background: #181818; }
.ordering { background: var(--bg); }
.ord-card { background: var(--surface); }
.band { margin: 0 var(--s300); border-radius: 24px; }
.band .lid { background: var(--bg); }
.tp-img img { border-radius: 24px; }

/* ledger menu: small photo on every row, tap a row to open its details */
.mode-ledger .item { box-shadow: inset 0 -1px 0 var(--line); transition: background-color 300ms var(--ease); }
.mode-ledger .item.open { background: #181818; }
.mode-ledger .line { display: grid; grid-template-columns: 1fr auto; gap: var(--s300); align-items: center; padding-right: var(--s200); }
.mode-ledger .row { display: grid; grid-template-columns: 64px 1fr 120px 140px auto; gap: var(--s300); align-items: center; width: 100%; padding: var(--s100); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mode-ledger .thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; transition: transform 500ms var(--ease); }
.mode-ledger .row:hover .thumb { transform: scale(1.04); }
.mode-ledger .nm { display: flex; flex-direction: column; }
.mode-ledger .unit, .mode-ledger .sv { color: var(--soft); }
.mode-ledger .chev { display: inline-flex; align-items: center; gap: var(--s50); color: var(--accent); }
.mode-ledger .chev .ph { font-size: 16px; transition: transform 500ms var(--ease); }
.mode-ledger .item.open .chev .ph { transform: rotate(180deg); }
.mode-ledger .more { padding: var(--s100) var(--s200) var(--s400) 100px; }
.mode-ledger .cat-head { padding-bottom: var(--s200); }
.mode-ledger .item:hover { background: #181818; }
.diet { background: #2c3a2f; color: #cfe0c8; }
.pick { color: var(--accent); }
.pick.on { color: #a9c3a2; }
.tab { background: var(--surface); }
.tab[aria-pressed="true"] { background: var(--accent); color: #1a1408; }

.hours .hrow.today { color: var(--accent); }
.foot { background: #000000; --line: #272727; }
.drawer .sheet { background: #1f1f1f; }
.step button, .callbox, .empty-list { background: #272727; color: var(--text); }
.listchip { background: var(--accent); color: #1a1408; }
.listchip b { background: #1a1408; color: var(--accent); }

@media (max-width: 900px) {
  .mode-ledger .line { grid-template-columns: 1fr; gap: 0; padding: 0 0 var(--s100); }
  .mode-ledger .row { grid-template-columns: 56px 1fr auto; gap: var(--s200); }
  .mode-ledger .thumb { width: 56px; height: 56px; }
  .mode-ledger .unit, .mode-ledger .sv, .mode-ledger .chev .lbl { display: none; }
  .mode-ledger .pick { justify-self: start; margin-left: 72px; }
  .mode-ledger .more { padding: var(--s100) var(--s100) var(--s300); }
  .cats.ledgercats .cat-tile { grid-template-columns: 1fr 96px; }
  .cats.ledgercats .cat-it { display: none; }
  .cats.ledgercats .cat-img { grid-column: 2; grid-row: 1; height: 72px; }
  .n-pic { height: 340px; }
}
@media (max-width: 560px) { .band { margin: 0 var(--s200); } .hero-full .over { padding-bottom: var(--s700); } }
.mode-ledger .nm .tbc { align-self: flex-start; margin: var(--s25) 0; }
/* inner page heads: the photo is dimmed into the dark background */
.ph-img img { height: 320px; opacity: 0.85; }
.search-box { background: #1f1f1f; }