/* Lyra Kitchen — the whole menu.

   The home page's menu book opened flat: three sheets of the same paper
   laid on the bar, under the same photograph the book stands on. The
   vocabulary is the book's (Cinzel small caps, the script line, the dotted
   leader to the price in dark gold) so the page reads as the book's pages,
   not a second design. Everything here is paper, so --gold-ink and --muted
   are allowed; nothing on the dark bar uses them. */

.menu-page{background:var(--ink-2)}
.bar{position:relative;isolation:isolate;padding:4.5rem 0 6rem}
/* The photograph is a band at the top of the bar, not the whole height of
   the page: cover over a page this tall would blow the frame up until only
   a black corner showed. The band fades into the flat ink below it. */
.bar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:150svh;z-index:-1;pointer-events:none;
  background:url(../img/ground/menu.webp) 20% 20% / cover no-repeat;opacity:.42;
}
.bar::after{
  content:"";position:absolute;left:0;right:0;top:0;height:150svh;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(11,10,9,0) 0,rgba(11,10,9,0) 45%,rgba(11,10,9,.9) 85%,var(--ink-2) 100%);
}

/* the nav stands on ink here, as it does over the hero at home */
.menu-page .nav .logo b{color:var(--chalk)}
.menu-page .nav .logo i{color:var(--gold)}
.menu-page .nav ul a{color:rgba(236,228,212,.88)}
.menu-page .nav ul a:hover,.menu-page .nav ul a[aria-current="page"]{color:var(--gold);border-color:var(--gold)}
.menu-page .nav-toggle{border-color:rgba(200,160,42,.7);color:var(--gold)}
.menu-page .nav[data-open="true"] ul{border-top-color:rgba(200,160,42,.3)}
.menu-page .nav[data-open="true"] ul li{border-bottom-color:rgba(200,160,42,.16)}

/* the head of the page, on the bar */
.menu-head{text-align:center;margin-bottom:3.6rem}
.menu-head h1{font-size:clamp(2.4rem,5vw,3.8rem);letter-spacing:.06em;margin:12px 0 18px}
.sheets{display:flex;justify-content:center;gap:0;margin:2.2rem auto 0;font-family:var(--head);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;flex-wrap:wrap}
.sheets a{padding:.9em 1.6em;border:1px solid rgba(200,160,42,.55);margin:-1px 0 0 -1px;color:var(--gold-lit);transition:.3s}
.sheets a:hover,.sheets a:focus-visible{background:var(--gold);color:var(--ink-2)}

/* a sheet of the menu */
.sheet{
  background:var(--paper);color:var(--ink);width:min(60rem,100%);margin:0 auto 2.6rem;
  padding:clamp(2rem,5vw,4.2rem) clamp(1.3rem,5vw,4.4rem) clamp(2rem,4vw,3.4rem);
  box-shadow:inset 0 0 50px rgba(23,19,16,.08),0 30px 60px -30px rgba(0,0,0,.8);
  border:1px solid rgba(23,19,16,.12);position:relative;
}
.sheet::before{content:"";position:absolute;inset:10px;border:1px solid rgba(90,68,10,.28);pointer-events:none}
.sheet>header{text-align:center;margin-bottom:2.4rem}
.sheet h2{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin:0 0 4px}
.sheet .script{display:block;font-size:2rem;color:var(--gold-ink)}

/* a course on the sheet */
.course{padding:1.6rem 0 1.1rem;border-top:1px solid rgba(90,68,10,.22)}
.course:first-of-type{border-top:0}
.course h3{font-size:1.15rem;letter-spacing:.22em;text-transform:uppercase;text-align:center;margin-bottom:2px}
.course .script{font-size:1.65rem;margin-bottom:8px;text-align:center}
.course .note{text-align:center;font-style:italic;color:var(--muted);max-width:60ch;margin:.25rem auto 1rem;font-size:1rem;line-height:1.55}
.course h4{font-family:var(--head);font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink);margin:1.4rem 0 .6rem;break-after:avoid}
.course ul{list-style:none;columns:2;column-gap:3.2rem;margin-top:.6rem}
.course .group ul{margin-top:0}
.course li{break-inside:avoid;padding:.5rem 0}
.row{display:flex;align-items:baseline;gap:10px}
.row .name{display:flex;align-items:baseline;gap:8px;flex:1;font-family:var(--head);font-weight:500;font-size:.86rem;letter-spacing:.04em;line-height:1.35}
.row .name::after{content:"";flex:1;min-width:1.2rem;border-bottom:1px dotted rgba(23,19,16,.45);margin-bottom:4px}
.row b{font-family:var(--head);font-weight:600;color:var(--gold-ink);font-size:.86rem;white-space:nowrap;text-align:right}
.row abbr{text-decoration:none;font-size:.6rem;letter-spacing:.08em;color:var(--gold-ink);border:1px solid rgba(90,68,10,.4);padding:0 4px;line-height:1.5;font-weight:400;cursor:help}
.course li p{font-size:.98rem;line-height:1.5;color:var(--muted);font-style:italic;margin-top:3px;padding-right:2.5rem}

/* the foot of the sheet */
.sheet>footer{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid rgba(90,68,10,.22);text-align:center;font-size:.92rem;color:var(--muted);line-height:1.55}
/* the allergen note stands on ink: it is set in the paper's own colour so it reads */
.sheet>footer{color:rgba(236,226,204,.88)}
.sheet .legend{font-family:var(--head);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem}
.sheet .legend abbr{text-decoration:none;border:1px solid rgba(200,160,42,.6);padding:0 4px;margin:0 2px 0 10px;color:var(--gold-lit)}
.sheet .foot{font-style:italic;max-width:64ch;margin:.3rem auto 0}

.reserve{text-align:center;margin-top:1.4rem}
.btn.gold{border-color:var(--gold);color:var(--gold-lit)}
.btn.gold:hover{background:var(--gold);color:var(--ink-2)}

@media(max-width:760px){
  .bar{padding-top:2.6rem}
  .bar::before{background-position:50% 0;opacity:.3}
  .course ul{columns:1}
  .sheet .script{font-size:1.6rem}
  .course li p{padding-right:0}
  .sheets a{flex:1 1 auto;text-align:center}
}