/* Rybka site-wide styles, shared by every page. Page-only styles stay in the page.
   Tokens come from Walk v2. Where menu.html already used a value (--paper, --paper-tex
   and the header and footer sizes), that value is kept, so the menu looks the same. */

:root{
  --tile:#F3EFE6;--duck:#CFE3DC;--seafoam:#B5D6CD;--seaglass:#8EB4BF;--navy:#263850;--navy-dk:#1b2a3c;
  --birch:#E3B58C;--oak:#A86F3E;--pothos:#5E8A3C;--red:#D7322E;--red-dk:#a52521;--on-red:#FFFCF5;
  --glow:#F7C873;--ink:#171c24;--paper:#F8F4EC;--paper-2:#EEE6D3;
  --wall-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='w' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .14 0 0 0 0 .2 0 0 0 .5 -.2'/%3E%3C/filter%3E%3Cfilter id='s' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .5 0 0 0 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='.55'/%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='.45'/%3E%3C/svg%3E");
  --birch-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300'%3E%3Cfilter id='b' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0025 .06' numOctaves='4' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .33 0 0 0 0 .16 0 0 0 1.5 -.62'/%3E%3C/filter%3E%3Cfilter id='b2' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.001 .2' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 1.2 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b2)' opacity='.6'/%3E%3C/svg%3E");
  --paper-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .24 0 0 0 .13 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --wear-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='k' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .965 0 0 0 0 .945 0 0 0 0 .9 7 0 0 0 -4.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --serif:'Young Serif',Georgia,'Times New Roman',serif;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Caveat','Bradley Hand',cursive;
  --hand:'Patrick Hand SC','Patrick Hand','Comic Sans MS',cursive;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
html.motion{scroll-behavior:smooth}
body{margin:0;font:400 17px/1.55 var(--sans);color:var(--navy);background:var(--duck) var(--wall-tex);overflow-x:clip}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:inherit;text-underline-offset:3px}
p{margin:0 0 .8em}
h1,h2,h3{font-weight:400;margin:0}
.kicker{font:700 13px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px;opacity:.85}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--paper);padding:12px 16px;border-radius:6px;font-weight:600}
.skip:focus{top:10px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;font:700 16px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn-book{background:var(--red);color:var(--on-red);box-shadow:0 2px 0 var(--red-dk),0 10px 18px -10px rgba(120,28,24,.8)}
.btn-book:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--red-dk),0 14px 22px -12px rgba(120,28,24,.8)}
.btn-book:active{transform:translateY(1px);box-shadow:0 1px 0 var(--red-dk)}
.btn-ghost{border:2px solid var(--navy);color:var(--navy);background:rgba(248,244,236,.6)}
.btn-ghost:hover{background:var(--paper)}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* header (partials/header.html). On phones it hides as you scroll down and slides back in when you scroll up
   (the script in the header partial); --hdr is its height while it shows, 0 while hidden. From 960px it is sticky
   and 76px tall, as Walk v2, and --hdr is 76px. The sticky menu chips and the walk sit just below it. */
:root{--hdr:0px}
@media (max-width:959px){
  .js .site{position:sticky;top:0;z-index:40;transition:transform .3s ease,box-shadow .3s ease}
  .js .site.is-floating{box-shadow:0 10px 22px -16px rgba(23,28,36,.7)}
  .js .site.is-away{transform:translateY(-100%);box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.js .site{transition:none}}
.site{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;padding:8px 16px 0;background:var(--duck) var(--wall-tex)}
.brand{display:block;border-radius:6px}
.brand img{width:auto;height:57.2px;margin-top:-2.95px}
.site nav{order:3;flex:1 1 100%;display:flex;justify-content:space-between;margin-top:6px;border-top:1.5px dashed rgba(38,56,80,.28)}
.site nav a{display:inline-flex;align-items:center;min-height:46px;padding:0 4px;font-weight:600;font-size:16px;text-decoration:none}
.site nav a:hover,.site nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px}
@media (min-width:760px){
  .site{flex-wrap:nowrap;padding:10px 32px}
  .brand img{height:68.2px;margin-top:-4.1px}
  .site nav{order:0;flex:0 1 auto;margin:0 14px 0 auto;border:0;gap:28px}
}
@media (min-width:960px){
  :root{--hdr:76px}
  html{scroll-padding-top:var(--hdr)}
  .site{position:sticky;top:0;z-index:40;height:var(--hdr);padding:0 32px;border-bottom:1.5px solid rgba(38,56,80,.14)}
  .brand img{height:64px;margin-top:0}
  .site nav{margin:0 12px 0 auto;gap:26px}
}

/* shared page parts: hero, ctas, ink line and reveal (used by several pages; a page only sets what differs) */
.hero{padding:40px 0 44px;text-align:center}
.hero h1{font:400 clamp(46px,12vw,84px)/.98 var(--serif);letter-spacing:-.015em}
@media (min-width:760px){.hero{padding:56px 0 60px}}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0 0}
.ink-line{display:block;width:min(320px,80%);height:14px;margin:-6px 0 16px;overflow:visible}
.ink-line path{fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round}
.motion .rv{transition:opacity .8s ease,transform 1s cubic-bezier(.2,.75,.2,1)}
.motion .rv:not(.in){opacity:0;transform:translateY(28px) rotate(var(--r1,0deg))}

/* paper and tape (Walk v2) */
.paper{position:relative;background:var(--paper) var(--paper-tex);border-radius:2px 3px 2px 3px;box-shadow:0 1px 1px rgba(23,28,36,.16),0 22px 36px -22px rgba(23,28,36,.6)}
.tape-top::before{content:"";position:absolute;top:-14px;left:calc(50% - 52px);width:104px;height:28px;transform:rotate(-2.5deg);background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 45%),rgba(227,190,148,.55);box-shadow:0 1px 2px rgba(23,28,36,.12);clip-path:polygon(0 0,4% 10%,1% 22%,4% 34%,0 46%,4% 58%,1% 70%,4% 84%,0 100%,100% 100%,96% 88%,99% 76%,96% 64%,100% 52%,96% 40%,99% 28%,96% 16%,100% 0)}

/* menu teaser (partials rendered by tools/build_site.py into <!-- menu:teaser -->) */
.menu-teaser .dishes{list-style:none;margin:16px 0 0;padding:0}
.menu-teaser .dish{padding:16px 4px;border-top:1.5px dashed rgba(23,28,36,.35)}
.menu-teaser .dish:first-child{border-top:0}
.menu-teaser .dish-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.menu-teaser .dish h3{font:400 21px/1.15 var(--serif);flex:0 1 auto}
.menu-teaser .leader{flex:1 1 20px;min-width:16px;border-bottom:2px dotted rgba(23,28,36,.5);transform:translateY(-5px)}
.menu-teaser .price{flex:none;margin-left:auto;font:700 19px/1 var(--sans);font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap}
.menu-teaser .dish p{margin:6px 0 0;font-size:15.5px;max-width:52ch;color:var(--navy)}
.menu-teaser .supper{margin:14px 0 0;padding:14px 16px;border:2px solid var(--navy);border-radius:14px 16px 12px 15px;font-size:16px;text-align:center}
.menu-teaser .supper strong{font:700 23px/1 var(--script);display:block;margin-bottom:4px}
@media (min-width:960px){.menu-teaser .dish h3{font-size:24px}.menu-teaser .price{font-size:21px}}

/* footer (partials/footer.html) */
.foot{padding:44px 16px 40px;background:var(--navy) var(--wall-tex);color:var(--tile);text-align:center}
.foot .brand{display:block;width:92px;margin:0 auto 18px}
.foot .brand img{width:92px;height:auto}
.foot p{margin:0 0 14px;font-size:16px}
.foot .copy{margin:18px 0 0;font-size:14px;opacity:.85}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 22px;max-width:720px;margin:0 auto}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.foot a[href^="tel:"]{white-space:nowrap}
.foot :focus-visible{outline-color:var(--glow)}

/* reduced motion: no animation or smooth scrolling, on any page */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}