/* Fixed header and slide-out menu */
.site-header {
  height: 96px;
  padding: 0 3.5%;
  background: #8ca482;
  color: #253b25;
  box-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.site-header--prepare { opacity:0; transform:translateY(-110%); }
.site-header--prepare.site-header--reveal { animation:site-header-reveal .9s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes site-header-reveal {
  from { opacity:0; transform:translateY(-110%); }
  to { opacity:1; transform:translateY(0); }
}
.site-logo { display:block; width:112px; height:88px; position:relative; top:14px; text-shadow:none; }
.site-logo img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.header-actions { display:flex; align-items:center; gap:24px; margin-left:auto; transform:translateY(14px); }
.header-instagram { display:flex; align-items:center; justify-content:center; width:30px; height:30px; color:#253b25; transition:color .2s ease; }
.header-instagram:hover,
.header-instagram:focus-visible { color:#fff; }
.header-instagram:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.header-instagram svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; }
.header-instagram__dot { fill:currentColor; stroke:none; }
.menu-toggle { width:auto; height:auto; padding:16px 0; justify-content:center; gap:18px; border:0; border-radius:0; color:#253b25; background:transparent; transform:none; transition:color .2s ease; }
.menu-toggle:hover,
.menu-toggle:focus-visible { color:#fff; }
.menu-toggle span { display:none; }
.menu-toggle span:first-child { display:block; width:25px; height:1px; background:currentColor; }
.menu-toggle b { font-family:serif; font-size:20px; font-weight:400; letter-spacing:.15em; }
.site-nav { z-index:30; display:block; background:rgba(28,38,27,.62); transform:none; transition:opacity .35s ease, visibility .35s ease; }
.nav-panel { position:absolute; top:0; right:0; width:min(500px, 100%); height:100%; padding:128px 90px; background:#f8fbed; transform:translateX(100%); transition:transform .42s cubic-bezier(.22,.61,.36,1); overflow-y:auto; }
.menu-close { position:absolute; top:22px; right:24px; display:grid; width:74px; height:74px; place-items:center; padding:0; border:0; background:#8ca482; color:#fff; font:300 32px/1 Arial,sans-serif; cursor:pointer; }
.menu-close:hover,
.menu-close:focus-visible { background:#718d69; }
.menu-close:focus-visible { outline:2px solid #253b25; outline-offset:3px; }
.sidebar-menu,
.sidebar-menu .sub-menu { margin:0; padding:0; list-style:none; }
.sidebar-menu { display:flex; flex-direction:column; align-items:flex-start; gap:46px; }
.sidebar-menu li { margin:0; }
.site-nav a { color:#293229; font-family:serif; font-size:23px; letter-spacing:.13em; text-decoration:none; }
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a { color:#718d69; }
.sidebar-menu .sub-menu { display:flex; flex-direction:column; gap:14px; margin:18px 0 0 1em; }
.sidebar-menu .sub-menu a { font-size:17px; }
.menu-open { overflow:hidden; }
.menu-open .site-nav { opacity:1; visibility:visible; }
.menu-open .nav-panel { transform:translateX(0); }
.menu-open .menu-toggle { visibility:hidden; }
.menu-open .header-instagram { visibility:hidden; }
.menu-open .menu-toggle { position:fixed; top:22px; right:calc(min(500px, 100%) - 476px); z-index:40; width:102px; height:84px; padding:0; border:0; border-radius:0; background:#8ca482; color:#fff; transform:none; }
.menu-open .menu-toggle span { display:block; position:absolute; top:50%; left:50%; width:28px; margin:0; transform:translate(-50%,-50%) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { display:block; transform:translate(-50%,-50%) rotate(-45deg); }
.menu-open .menu-toggle span:nth-child(3) { display:none; }
.menu-open .menu-toggle b { display:none; }
@media (max-width:700px) {
  .site-header { height:78px; padding:0 18px; }
  .site-logo { width:88px; height:68px; top:4px; }
  .header-actions { gap:16px; transform:translateY(4px); }
  .header-instagram { width:26px; height:26px; }
  .header-instagram svg { width:21px; height:21px; }
  .menu-toggle { width:auto; height:auto; padding:12px 0; gap:10px; transform:none; }
  .menu-toggle b { font-size:15px; }
  .menu-toggle span:first-child { width:22px; }
  .nav-panel { width:min(390px, 92%); padding:102px 48px; }
  .menu-close { top:16px; right:16px; width:62px; height:62px; font-size:28px; }
  .sidebar-menu { gap:34px; }
  .site-nav a { font-size:19px; }
  .menu-open .menu-toggle { top:16px; right:16px; width:62px; height:62px; }
}