/* ============================================================================
   Ducey's on the Lake — version 2, "The Ledger"
   ----------------------------------------------------------------------------
   Same brand colours as v1 (navy #134074 / gold #FFCD2A, both lifted from the
   live basslake.com theme). Everything else is deliberately different:

   v1                                  v2
   --------------------------------    --------------------------------
   centred full-viewport hero          the Dine index IS the opening plate
   all-dark, photography everywhere    bone paper ground, photography as punctuation
   Playfair Display / Lato             Fraunces / Archivo / IBM Plex Mono
   photo cards with emoji              typeset menu with leaders to the price
   eyebrow + h2 + rule, repeated       two-column ledger, mono marginalia, hairlines
   pill buttons                        underlined type links

   The ordering engine (js/order.js) is shared with v1 completely unchanged, so
   the class hooks it generates — .item-card, .cat-btn, .service-card, .emj and
   the rest — are restyled here rather than renamed. `.emj` is hidden outright:
   emoji were the single biggest reason v1 read as a toy.

   Single visual world by choice: a printed menu from a lodge dining room. No
   light/dark swap, but every colour including the body ground is painted from
   a token, so the page holds on any host background.
============================================================================ */

/* ------------------------------------------------------------------ tokens */
:root {
  /* the brand, unchanged from v1 */
  --navy:      #134074;
  --navy-deep: #0B1B30;
  --navy-ink:  #06111F;
  --gold:      #FFCD2A;
  --gold-deep: #A87C0C;

  /* paper. cooler and greyer than the usual cream so it reads as stock,
     not as the default warm-cream look */
  --paper:       #E9E4D8;
  --paper-lit:   #F3EFE6;
  --paper-shade: #D8D1C0;

  --rule:      rgba(11, 27, 48, .22);
  --rule-soft: rgba(11, 27, 48, .1);
  --rule-dark: rgba(233, 228, 216, .2);

  --ink:       #0B1B30;
  --ink-muted: #4A5A70;
  --on-dark:        #E9E4D8;
  --on-dark-muted:  #94A3B8;

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --rail: 168px;          /* the marginalia column */
  --pad:  clamp(20px, 4.5vw, 76px);
  --maxw: 1560px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* the masthead is fixed, so anchor targets have to stop clear of it */
[id] { scroll-margin-top: 5.5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

/* ---- the mono marginalia voice: labels, meta, numerals ---- */
.meta {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
}
.meta-gold { color: var(--gold-deep); }
/* .meta defaults to the paper-ground colour; over photography and on dark
   bands it has to flip, or it sits invisible on its own background */
.plate .meta { color: rgba(233, 228, 216, .8); }
.band-dark .meta, .colophon .meta, .row-dark .meta { color: var(--on-dark-muted); }
.band-dark .meta-gold, .plate .meta-gold { color: var(--gold); }

/* prices and any aligned figures */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* type link: a rule under the words, no pill */
.tlink {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  padding-bottom: .3rem;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  transition: color .3s, border-color .3s, transform .4s var(--ease);
}
.tlink:hover { color: var(--gold-deep); transform: translateY(-1px); }
.on-dark .tlink:hover, .plate .tlink:hover { color: var(--gold); }

.tlink-solid {
  border-bottom: 0;
  background: var(--ink); color: var(--paper-lit);
  padding: .9rem 1.6rem;
  transition: background .3s, color .3s, transform .4s var(--ease);
}
.tlink-solid:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

.tlink-gold { border-bottom: 0; background: var(--gold); color: var(--navy-deep); padding: .9rem 1.6rem; }
.tlink-gold:hover { background: #fff; color: var(--navy-deep); transform: translateY(-2px); }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* ==========================================================================
   MASTHEAD — a thin rule of type, not a floating bar
   ========================================================================== */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 2rem;
  padding: 1.05rem var(--pad);
  background: transparent;
  transition: background .5s var(--ease), border-color .5s, padding .4s var(--ease);
  border-bottom: 1px solid transparent;
  mix-blend-mode: normal;
}
.masthead.solid {
  background: var(--paper);
  border-bottom-color: var(--rule);
  padding-block: .8rem;
}
/* while the opening plate is under it the masthead sits on photography */
.masthead:not(.solid) { color: var(--on-dark); }

.mh-mark {
  font-family: var(--display);
  font-size: 1.02rem; letter-spacing: -0.01em;
  font-variation-settings: 'WONK' 1, 'opsz' 20;
  white-space: nowrap;
}
.mh-mark small {
  display: block;
  font-family: var(--mono); font-size: .56rem; letter-spacing: .22em;
  text-transform: uppercase; opacity: .62; margin-top: .12rem;
}

.mh-nav { display: flex; gap: 1.9rem; justify-content: center; }
.mh-nav a {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500;
  opacity: .78; transition: opacity .3s, color .3s;
}
.mh-nav a:hover { opacity: 1; color: var(--gold-deep); }
.masthead:not(.solid) .mh-nav a:hover { color: var(--gold); }

.mh-end { display: flex; gap: 1.5rem; align-items: center; justify-content: flex-end; }

.mh-toggle { display: none; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

@media (max-width: 940px) {
  .masthead { grid-template-columns: 1fr auto; }
  .mh-toggle { display: block; }
  .mh-nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 82vw);
    flex-direction: column; justify-content: center; gap: 1.6rem;
    padding: 5rem 2.4rem;
    background: var(--navy-ink); color: var(--on-dark);
    transform: translateX(100%); transition: transform .55s var(--ease);
    border-left: 1px solid var(--rule-dark);
    z-index: 120;
  }
  .mh-nav.open { transform: none; }
  .mh-nav a { font-size: .84rem; opacity: 1; }
  .mh-end .tlink { display: none; }
}

/* ==========================================================================
   OPENING PLATE — the Dine index is the hero. Hovering a venue swaps the
   photograph behind it, so the opening screen is the navigation rather than
   a decorative headline with two buttons under it.
   ========================================================================== */
.plate {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7rem var(--pad) clamp(2rem, 5vh, 4rem);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.plate-media { position: absolute; inset: 0; z-index: -2; background: var(--navy-ink); }
.plate-shot {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s var(--ease), transform 6s var(--ease);
}
.plate-shot.on { opacity: 1; transform: scale(1.09); }
/* Three passes, not one. The plate photography is bright resort interior, and
   type sits at the top corners AND along the bottom, so the scrim has to hold
   both bands without flattening the middle of the picture. */
.plate::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(6,17,31,.8) 0%, rgba(6,17,31,.34) 16%, rgba(6,17,31,0) 30%),
    linear-gradient(to top, rgba(6,17,31,.95) 0%, rgba(6,17,31,.66) 40%, rgba(6,17,31,.24) 76%, rgba(6,17,31,0) 100%),
    linear-gradient(to right, rgba(6,17,31,.55) 0%, rgba(6,17,31,.15) 52%, rgba(6,17,31,.35) 100%);
}

.plate-top {
  position: absolute; top: 6.2rem; left: var(--pad); right: var(--pad);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
}
.plate-top p { margin: 0; max-width: 46ch; }
.plate-top p:last-child { text-align: right; }
@media (max-width: 720px) {
  .plate-top { flex-direction: column; gap: .35rem; }
  .plate-top p:last-child { text-align: left; }
}

/* the index itself */
.index { border-top: 1px solid var(--rule-dark); }
.index-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(.8rem, 2.5vw, 2.4rem);
  width: 100%;
  padding: clamp(.8rem, 1.9vh, 1.5rem) 0;
  border-bottom: 1px solid var(--rule-dark);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: padding-left .5s var(--ease), color .35s;
}
.index-row:hover, .index-row:focus-visible { padding-left: 1rem; color: var(--gold); }
.index-row .ix { font-family: var(--mono); font-size: .66rem; opacity: .55; }
.index-row .nm {
  font-family: var(--display);
  font-size: clamp(1.65rem, 4.4vw, 3.6rem);
  font-variation-settings: 'WONK' 1, 'opsz' 60;
  line-height: 1;
  letter-spacing: -0.03em;
}
.index-row .hr { font-family: var(--mono); font-size: .68rem; opacity: .68; text-align: right; white-space: nowrap; }
.index-row .go {
  font-family: var(--mono); font-size: .9rem;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .35s, transform .45s var(--ease);
}
.index-row:hover .go, .index-row:focus-visible .go { opacity: 1; transform: none; }

@media (max-width: 780px) {
  .index-row { grid-template-columns: 1.8rem 1fr auto; }
  .index-row .hr { grid-column: 2 / -1; text-align: left; font-size: .62rem; opacity: .55; }
  .index-row .go { display: none; }
}

/* ==========================================================================
   LEDGER — every content block is a row: mono label in the rail, content in
   the wide column, hairline between. This is the page's spine.
   ========================================================================== */
.ledger { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.row {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(3rem, 7vw, 6.5rem) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.row:first-of-type { border-top: 0; }
@media (max-width: 860px) { .row { grid-template-columns: 1fr; gap: 1.6rem; } }

.row-label { position: sticky; top: 6rem; }
.row-label .n { display: block; font-family: var(--mono); font-size: .66rem; color: var(--gold-deep); letter-spacing: .14em; }
.row-label .t { display: block; margin-top: .4rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 860px) { .row-label { position: static; } }

.row-body h2 { font-size: clamp(1.9rem, 4vw, 3.15rem); max-width: 18ch; }
.row-body h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.row-body p { margin: 1.35rem 0 0; max-width: 62ch; color: var(--ink-muted); }
.row-body p.lead { font-size: 1.12rem; color: var(--ink); max-width: 56ch; }
.row-body > *:first-child { margin-top: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; margin-top: 2.4rem; }

/* dark rows invert the whole band */
.row-dark {
  background: var(--navy-ink);
  color: var(--on-dark);
  border-top-color: transparent;
}
.row-dark .row-body p { color: var(--on-dark-muted); }
.row-dark .row-body p.lead { color: var(--on-dark); }
.row-dark .row-label .t { color: var(--on-dark-muted); }
.row-dark .row-label .n { color: var(--gold); }
.band { border-top: 1px solid var(--rule); }
.band-dark { background: var(--navy-ink); color: var(--on-dark); }
.band-dark .ledger .row { border-top-color: var(--rule-dark); }

/* figures */
.fig { position: relative; overflow: hidden; }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.fig figcaption {
  margin-top: .7rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.band-dark .fig figcaption { color: var(--on-dark-muted); }

.fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); margin-top: 2.6rem; }
.fig-pair .fig:first-child { aspect-ratio: 3 / 4; }
.fig-pair .fig:last-child  { aspect-ratio: 3 / 4; margin-top: clamp(2rem, 6vw, 5rem); }
@media (max-width: 620px) { .fig-pair { grid-template-columns: 1fr; } .fig-pair .fig:last-child { margin-top: 0; } }

/* ==========================================================================
   THE MENU — set like a printed menu. Three columns, name leadered to price,
   description beneath in mono. No cards, no photographs, no emoji.
   ========================================================================== */
.menu-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(1rem, 3vw, 2.6rem);
  padding-bottom: 2rem;
}
.menu-tab {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-variation-settings: 'WONK' 1, 'opsz' 40;
  letter-spacing: -0.02em;
  color: var(--rule);
  cursor: pointer;
  transition: color .4s var(--ease);
  line-height: 1.1;
}
.menu-tab:hover { color: var(--ink-muted); }
.menu-tab.on { color: var(--ink); }
.band-dark .menu-tab { color: rgba(233,228,216,.28); }
.band-dark .menu-tab:hover { color: var(--on-dark-muted); }
.band-dark .menu-tab.on { color: var(--gold); }

.menu-cols { columns: 3; column-gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 1100px) { .menu-cols { columns: 2; } }
@media (max-width: 700px)  { .menu-cols { columns: 1; } }

.menu-group { break-inside: avoid; margin-bottom: 2.8rem; }
.menu-group > h3 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600;
  color: var(--gold-deep);
  padding-bottom: .7rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
}
.band-dark .menu-group > h3 { color: var(--gold); border-bottom-color: var(--rule-dark); }
.menu-group .note {
  font-size: .78rem; color: var(--ink-muted); margin: 0 0 1.1rem; line-height: 1.5;
}
.band-dark .menu-group .note { color: var(--on-dark-muted); }

.mrow { padding: .5rem 0; }
.mrow-top { display: flex; align-items: baseline; gap: .5rem; }
.mrow .nm { font-size: .93rem; font-weight: 500; letter-spacing: .005em; }
.mrow .leader { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }
.band-dark .mrow .leader { border-bottom-color: var(--rule-dark); }
.mrow .pr { font-family: var(--mono); font-size: .84rem; font-variant-numeric: tabular-nums; }
.mrow .ds { margin: .18rem 0 0; font-size: .76rem; line-height: 1.5; color: var(--ink-muted); max-width: 42ch; }
.band-dark .mrow .ds { color: var(--on-dark-muted); }

/* ==========================================================================
   VENUES — type beside the photograph, never over it. A 12-column grid where
   each entry alternates which side it sits on.
   ========================================================================== */
.venue-row {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--rule);
}
.band-dark .venue-row { border-top-color: var(--rule-dark); }
.venue-row .v-fig  { grid-column: 1 / 7; aspect-ratio: 4 / 3; overflow: hidden; }
.venue-row .v-body { grid-column: 8 / 13; }
.venue-row.flip .v-fig  { grid-column: 7 / 13; order: 2; }
.venue-row.flip .v-body { grid-column: 1 / 6; order: 1; }
.venue-row .v-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.venue-row:hover .v-fig img { transform: scale(1.04); }
@media (max-width: 820px) {
  .venue-row .v-fig, .venue-row .v-body,
  .venue-row.flip .v-fig, .venue-row.flip .v-body { grid-column: 1 / -1; order: 0; }
  .venue-row .v-fig { aspect-ratio: 16 / 10; }
}
.venue-row h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .5rem; }
.venue-row .v-kick { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.band-dark .venue-row .v-kick { color: var(--gold); }
.venue-row p { margin: 1rem 0 0; font-size: .92rem; color: var(--ink-muted); }
.band-dark .venue-row p { color: var(--on-dark-muted); }
.v-hours { margin-top: 1.3rem; display: grid; gap: .3rem; }
.v-hours span { font-family: var(--mono); font-size: .7rem; color: var(--ink-muted); }
.band-dark .v-hours span { color: var(--on-dark-muted); }
.v-hours b { color: var(--ink); font-weight: 600; }
.band-dark .v-hours b { color: var(--on-dark); }
.venue-row .row-actions { margin-top: 1.8rem; }

/* ==========================================================================
   COLOPHON — dense printed masthead rather than a marketing footer
   ========================================================================== */
.colophon { background: var(--navy-ink); color: var(--on-dark); padding: clamp(3rem, 7vw, 5.5rem) 0 2.5rem; }
.colophon .ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2.6rem; }
.col-block h4 { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .9rem; }
.col-block p, .col-block a { display: block; font-size: .87rem; color: var(--on-dark-muted); margin: 0 0 .3rem; }
.col-block a:hover { color: var(--gold); }
.colophon-end {
  max-width: var(--maxw); margin: 3rem auto 0; padding: 1.6rem var(--pad) 0;
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted);
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
[data-r] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-r].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-r] { opacity: 1; transform: none; transition: none; } }