/* ==========================================================================
   Lyra Kitchen — shared shell
   Brand tokens sampled from the Lyra medallion.

   The page runs dark end to end: every section stands on ink and carries
   one of the restaurant's own photographs, so type is cream and gold on
   near black. --gold (#c8a02a) is the gold for that. The dark golds,
   --gold-ink and --gold-ink-2 (#5a440a), are kept for the two things that
   are still paper: the menu book's pages and the booking card. They fail
   on anything dark, and --gold fails on anything light, so neither may
   cross over.
   ========================================================================== */

:root{
  --paper:#ece2cc;
  --paper-2:#ded2b6;
  --line:#cfc0a0;
  --ink:#171310;
  --ink-2:#0b0a09;
  --gold:#c8a02a;
  --gold-ink:#5a440a;
  --gold-ink-2:#5a440a;
  --gold-hi:#f6ec8e;
  /* the gold for small caps standing on a photographic ground: --gold is
     mid-luminance and cannot clear 4.5:1 over anything but flat ink */
  --gold-lit:#f3e6a6;
  --muted:#514736;
  --chalk:#ece4d4;
  --tessera:#070707;
  --head:'Cinzel',serif;
  --body:'EB Garamond',Georgia,serif;
  --script:'Alex Brush',cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
/* type and everything set in rem grow with the screen: 16px at 1280, 20px at
   1920, 24px at 2560, never below 15 or above 26 */
html{scroll-behavior:smooth;font-size:clamp(15px,0.625vw + 8px,26px)}
/* No texture on the body. The sections are translucent over it, so a dot
   grid here reads straight through the photographs as a screen door. */
body{
  background:var(--ink-2);color:var(--paper);
  font-family:var(--body);font-size:1.12rem;line-height:1.7;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--head);font-weight:500;line-height:1.15}
h2{font-size:clamp(2rem,4.4vw,3.4rem);text-align:center;margin:12px 0 20px;letter-spacing:.04em}
section{padding:7.5rem 0}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 20px;z-index:100;font-family:var(--head);font-size:.75rem;letter-spacing:.25em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

.container{width:min(72rem,92vw);margin:auto}
.script{font-family:var(--script);font-weight:400;color:var(--gold-ink);font-size:2.4rem;line-height:1}

/* rule-flanked section label */
.orn{display:flex;align-items:center;gap:16px;justify-content:center;color:var(--gold-lit);font-size:.8rem;letter-spacing:.4em;text-transform:uppercase;font-family:var(--head)}
.orn::before,.orn::after{content:"";width:60px;height:1px;background:rgba(200,160,42,.7)}

/* mosaic stone ground */
.stone{position:relative;isolation:isolate}
.stone::before{content:"";position:absolute;inset:0;background:url(../img/tessera.svg) repeat;background-size:230px;opacity:.4;pointer-events:none;z-index:-1}

/* medallion lockup */
.logo{display:inline-flex;align-items:center;gap:.8rem}
.logo img{width:3.25rem;height:3.25rem;flex:none}
.logo b{display:block;font-family:var(--head);font-weight:500;font-size:.98rem;letter-spacing:.36em;text-transform:uppercase;line-height:1;color:var(--ink)}
.logo i{display:block;font-family:var(--script);font-style:normal;font-size:1.35rem;line-height:.92;margin:1px 0 0 .12em;letter-spacing:0;text-transform:none;color:var(--gold-ink)}

/* buttons */
.btn{display:inline-block;padding:1.05em 2.6em;border:1px solid var(--ink);color:var(--ink);font-family:var(--head);font-size:.8rem;letter-spacing:.25em;text-transform:uppercase;position:relative;transition:.4s;background:none;cursor:pointer}
.btn::after{content:"";position:absolute;inset:4px;border:1px solid rgba(23,19,16,.35);transition:.4s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:hover::after{border-color:rgba(236,226,204,.5)}
.btn.gold{border-color:var(--gold-ink);color:var(--gold-ink)}
.btn.gold:hover{background:var(--gold-ink);color:var(--paper)}
.btn.gold:hover::after{border-color:rgba(236,226,204,.5)}

/* light buttons, for type sitting on the dark mosaic */
.btn.light{border-color:rgba(236,228,212,.75);color:var(--chalk)}
.btn.light::after{border-color:rgba(236,228,212,.35)}
.btn.light:hover{background:var(--chalk);color:var(--tessera)}
.btn.light:hover::after{border-color:rgba(7,7,7,.35)}
.btn.light.solid{border-color:var(--gold);color:var(--gold)}
.btn.light.solid::after{border-color:rgba(200,160,42,.4)}
.btn.light.solid:hover{background:var(--gold);color:var(--tessera)}
.btn.light.solid:hover::after{border-color:rgba(7,7,7,.4)}

/* ---- navigation ------------------------------------------------------- */
.nav{position:relative;z-index:40;padding:1.6rem 0;background:var(--ink-2)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(112,85,12,.3)}
.nav.overlay{position:absolute;top:0;left:0;right:0;background:none;padding:3.4rem 0 0}
.nav.overlay .container{width:min(72rem,calc(100vw - 8rem))}
.nav.overlay::after{display:none}
.nav .container{display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--head);font-size:.75rem;letter-spacing:.25em;text-transform:uppercase}
.nav ul{display:flex;gap:1.9rem;list-style:none}
.nav ul a{border-bottom:1px solid transparent;transition:.3s;padding-bottom:2px}
.nav ul a:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.nav ul a[aria-current="page"]{border-color:var(--gold-ink);color:var(--gold-ink)}

.nav-toggle{display:none;background:none;border:1px solid var(--gold-ink);color:var(--gold-ink);font-family:var(--head);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;padding:10px 16px;cursor:pointer}

@media(max-width:860px){
  /* the bar wraps so the two link lists, when open, drop under the logo
     and the button as one full-width column, in page order */
  .nav .container{justify-content:space-between;flex-wrap:wrap;row-gap:0}
  .nav-toggle{display:block;order:3}
  .nav .logo{order:1}
  .nav ul{display:none}
  .nav[data-open="true"] ul{
    display:grid;flex-basis:100%;width:100%;gap:0;text-align:center;
  }
  .nav[data-open="true"] #nav-left{order:4;border-top:1px solid rgba(112,85,12,.3);margin-top:20px;padding-top:6px}
  .nav[data-open="true"] #site-menu{order:5;padding-bottom:6px}
  .nav[data-open="true"] ul li{border-bottom:1px solid rgba(112,85,12,.16)}
  .nav[data-open="true"] ul li:last-child{border-bottom:0}
  .nav[data-open="true"] #nav-left li:last-child{border-bottom:1px solid rgba(112,85,12,.16)}
  .nav[data-open="true"] ul a{display:block;padding:16px 0;border:0}
  .nav.overlay[data-open="true"]{background:var(--paper);position:relative}
}

/* ---- footer ----------------------------------------------------------- */
footer{background:var(--ink-2);color:var(--paper);text-align:center;padding:4.4rem 0 4rem}
footer .logo{justify-content:center}
footer .logo img{width:4.1rem;height:4.1rem}
footer .logo b{color:var(--paper);font-size:1.12rem}
footer .logo i{color:var(--gold);font-size:1.65rem}
footer nav{display:flex;justify-content:center;gap:1.6rem;margin:1.5rem 0;font-family:var(--head);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;flex-wrap:wrap}
footer nav a{transition:.3s}
footer nav a:hover{color:var(--gold)}
footer small{color:rgba(236,226,204,.86);font-style:italic}

/* ---- scroll reveal ---------------------------------------------------- */
.reveal{opacity:0;transform:translateY(30px);transition:1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ---- shared text blocks ------------------------------------------------ */
/* Cream set below about .85 alpha stops clearing 4.5:1 over the lighter
   parts of a ground. .lede-dark went with the light sections. */
.lede{text-align:center;max-width:56ch;margin:0 auto;color:rgba(236,226,204,.88)}

/* nav sitting over the dark hero mosaic */
.nav.overlay .logo b{color:var(--chalk)}
.nav.overlay .logo i{color:var(--gold)}
.nav.overlay ul a{color:rgba(236,228,212,.88)}
.nav.overlay ul a:hover,.nav.overlay ul a[aria-current="page"]{color:var(--gold);border-color:var(--gold)}
.nav.overlay .nav-toggle{border-color:rgba(200,160,42,.7);color:var(--gold)}
@media(max-width:860px){
  .nav.overlay{padding:30px 0 0}
  .nav.overlay .container{width:min(1140px,calc(100vw - 52px))}
  .nav.overlay[data-open="true"]{background:var(--tessera)}
  .nav.overlay[data-open="true"]{padding-bottom:14px}
  .nav.overlay[data-open="true"] #nav-left{border-top-color:rgba(200,160,42,.3)}
  .nav.overlay[data-open="true"] ul li,.nav.overlay[data-open="true"] #nav-left li:last-child{border-bottom-color:rgba(200,160,42,.16)}
  .nav.overlay[data-open="true"] ul li:last-child{border-bottom:0}
}

/* On the home hero the medallion sits right under the bar, so the nav's own
   lockup would be a second mark in the same axis. Drop it where the two
   would collide; the mobile bar keeps it, since the links are folded away. */
@media(min-width:861px){
  .nav.overlay .logo{display:none}
}