/* CUSTOMIZE HERE: edit these variables and the whole site updates.
   Written mobile-first: the base styles are for phones, and the
   @media (min-width) blocks at the bottom add layout for larger screens. */
:root{
  --river:#1d3b45;
  --river-dark:#142a32;
  --limestone:#ecefe9;
  --signal:#e2a82c;
  --ink:#1a1f21;
  --muted:#4d585b;
  --paper:#fbfcfa;
  --font-head:Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --max:62rem;
  --pad:1.25rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:1.0625rem/1.6 var(--font-body);color:var(--ink);background:var(--limestone);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}
h1,h2{font-family:var(--font-head);line-height:1.15;color:var(--river)}
h1{font-size:clamp(2rem,8vw,3.25rem);margin:0 0 .4em}
h2{font-size:1.4rem;margin:1.6em 0 .4em;scroll-margin-top:5rem}
a{color:var(--river)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem;z-index:20}

/* header */
.top{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.7rem max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));background:var(--river)}
.brand{font:700 1.3rem var(--font-head);color:var(--paper);text-decoration:none}
.nav-toggle{background:none;border:2px solid var(--paper);color:var(--paper);padding:.45rem .9rem;border-radius:.4rem;font:600 1rem var(--font-body);min-height:2.75rem}
.top nav{display:none;width:100%;flex-direction:column;padding-top:.5rem}
.top nav.open{display:flex}
.top nav a{color:var(--paper);text-decoration:none;font-size:1.15rem;padding:.8rem 0;border-top:1px solid rgba(255,255,255,.18)}
.top nav a[aria-current="page"]{color:var(--signal);font-weight:700}
.head-actions{display:none}

/* buttons: 48px+ tall so they are easy to tap */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.6rem 1.2rem;border-radius:.5rem;background:var(--signal);color:var(--ink);font-weight:700;text-decoration:none;border:2px solid var(--signal)}
.btn:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--paper);border-color:var(--paper);color:var(--river)}
.btn-ghost-dark{background:transparent;border-color:currentColor;color:inherit}
.btn-big{min-height:3.5rem;font-size:1.1rem}
.cta{display:flex;flex-direction:column;gap:.75rem;margin:1.5rem 0}

/* bottom call/directions bar on phones */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;gap:.6rem;padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));background:var(--river-dark);box-shadow:0 -2px 10px rgba(0,0,0,.25)}
.dock .btn{flex:1}

/* hero */
.hero{background:var(--river);color:var(--paper);padding:2.5rem var(--pad) 0}
.hero-in{max-width:calc(var(--max) - 2 * var(--pad));margin:0 auto}
.hero h1{color:var(--paper)}
.hero .btn-ghost-dark{color:var(--paper)}

/* content */
.wrap{max-width:var(--max);margin:0 auto;padding:1.75rem var(--pad) 2.5rem}
.prose{max-width:40rem}
.lead,.small{color:var(--muted)}.small{font-size:.9rem}
.ticks{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 1.5rem}
.ticks li{padding:.35rem .8rem;background:var(--paper);border:1px solid #c5ccc4;border-radius:2rem;font-weight:600;font-size:.95rem}
.ticks li::before{content:"\2713";content:"\2713" / "";color:var(--river);margin-right:.4rem}
.facts{display:grid;gap:1.25rem}
.facts>div{border-left:5px solid var(--signal);padding-left:1rem}
.facts h2{margin-top:0}
.facts p{margin:0}

.feature{background:var(--paper);border-bottom:1px solid #c5ccc4}
.feature .wrap{display:grid;gap:1rem;padding-top:1.25rem;padding-bottom:1.5rem}
.feature h2{margin:0 0 .3em}.feature p{margin:0}

.photo{margin:1.75rem 0 0}
.photo img{display:block;width:100%;height:auto;border-radius:.5rem}

/* menu */
.chips{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0 .5rem}
.chips a{white-space:nowrap;padding:.55rem 1rem;border:2px solid var(--river);border-radius:2rem;text-decoration:none;font-weight:600;min-height:2.75rem}
.menu{list-style:none;padding:0;margin:0}
.menu li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid #c5ccc4}
.item .desc{display:block;color:var(--muted);font-size:.95rem}
.price{font-weight:700;white-space:nowrap}

/* footer */
.foot{display:grid;gap:1rem;padding:2rem max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad))) calc(6.75rem + env(safe-area-inset-bottom));background:var(--ink);color:var(--paper)}
.foot p{margin:0}.foot a{color:var(--signal)}.foot .small{color:#aab3b0}

/* tablets and desktops */
@media (min-width:48rem){
  .nav-toggle{display:none}
  .top{flex-wrap:nowrap;gap:1.5rem}
  .brand{margin-right:auto}
  .top nav{display:flex;flex-direction:row;width:auto;gap:1.5rem;padding:0}
  .top nav a{padding:.25rem 0;font-size:1rem;border-top:0;border-bottom:2px solid transparent}
  .top nav a:hover,.top nav a[aria-current="page"]{border-bottom-color:var(--signal)}
  .cta{flex-direction:row}
  .hero{padding:5rem var(--pad) 5.5rem}
  .facts{grid-template-columns:repeat(3,1fr)}
  .feature .wrap{grid-template-columns:repeat(2,1fr);gap:2.5rem}
  .foot{grid-template-columns:repeat(3,1fr)}
}

/* HERO LAYOUTS BY SCREEN WIDTH
   Phones and tablets (under 64rem): photo on top with the name over it, then the description and buttons (phones show the whole photo, tablets a light 4:3 crop).
   Laptops and desktops (64rem and up): text on the left, whole photo on the right.
   The photo is never cropped hard because it keeps its own shape (6:5). */
@media (max-width:63.99rem){
  /* .hero-in dissolves (display:contents) so the name, photo, text and buttons share one grid.
     The photo and the name sit in the same cell, so the name floats over the top of the photo.
     The darkening is a gradient that fades to fully transparent, so no solid box sits behind the text. */
  .hero{display:grid;padding:0 0 1.75rem}
  .hero-in{display:contents}
  .hero::after{content:"";grid-area:1/1;aspect-ratio:4/3;
    background:linear-gradient(rgba(20,42,50,.8),rgba(20,42,50,0) 45%),url("../images/hero.jpg") center 40%/cover}
  .hero h1{grid-area:1/1;align-self:start;position:relative;z-index:1;margin:0;padding:1.25rem var(--pad) 0;text-shadow:0 2px 8px rgba(0,0,0,.55)}
  .hero .cta{padding:0 var(--pad)}
}
@media (min-width:64rem){
  .foot{padding-bottom:2rem}
  .dock{display:none}
  .head-actions{display:flex;gap:.5rem}
  .head-actions .btn{min-height:2.5rem;padding:.3rem 1rem}
  .hero{position:relative;overflow:hidden;min-height:min(48.75vw,45rem);display:flex;align-items:center;background:var(--river)}
  .hero-in{position:relative;z-index:1;width:100%}
  .hero::after{content:"";position:absolute;top:0;bottom:0;right:0;width:min(65%,60rem);
    background:url("../images/hero.jpg") center/cover;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%);mask-image:linear-gradient(90deg,transparent 0,#000 25%)}
  .hero h1{text-shadow:0 2px 8px rgba(0,0,0,.5)}
  .hero .cta{flex-direction:column;align-items:flex-start}
}

/* phone-sized hero photo crop */
@media (max-width:47.99rem){.hero::after{aspect-ratio:6/5}}

/* draft banner: turn off with "draft": false in the site JSON file, then rebuild */
.draft{margin:0;padding:.5rem var(--pad);background:#fff3cd;color:#4a3b00;font-size:.9rem;text-align:center;border-bottom:1px solid #e0c36a}

/* menu page extras */
.wrap h3{font-family:var(--font-head);font-size:1.1rem;color:var(--river);margin:1.3em 0 .2em}
.menu-note{color:var(--muted);font-size:.95rem;margin:.4rem 0 .8rem}
.choices{padding-left:1.25rem;margin:.4rem 0}
.choices li{margin-bottom:.6rem}

/* hours and address strip under the hero */
.strip{margin:0;padding:.75rem var(--pad);background:var(--signal);color:var(--ink);font-weight:700;text-align:center}

/* menu page: clearer hierarchy and two columns on wide screens */
.menu-page h2{font-size:1.9rem;margin:2.4rem 0 .6rem;padding-top:.7rem;border-top:3px solid var(--signal)}
.menu-page h3{font:700 .85rem/1.2 var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .1rem}
.cols{columns:22rem;column-gap:3rem}
.grp{break-inside:avoid;padding-top:1.2rem}
.menu li{break-inside:avoid}
.solo .menu{max-width:32rem}