/* Workhouse Collective menu, on every page.
   The burger is three little waves. It opens a blush "sea" of links; hover one and a photo surfaces.
   While people read, the bar hides on the way down and slides back, in blush, on the way up.
   Without menu.js the header simply stays as it was. */
:root { --blush: #EBCFC1; --blush-deep: #E2BBA8; }

/* ---------- The bar ---------- */
header.has-menu { transition: transform .5s cubic-bezier(.2,.8,.2,1), background .4s, color .4s, box-shadow .4s; }
header.has-menu nav.right { align-items: center; gap: 22px; }
header.has-menu nav.right a.in-menu { display: none; }
header.has-menu.scrolled { background: color-mix(in srgb, var(--blush) 94%, transparent); backdrop-filter: blur(10px); color: var(--ink, #3A2824); box-shadow: 0 1px 0 rgba(58, 40, 36, .1); }
header.has-menu.scrolled.down:not(.menu-open) { transform: translateY(-110%); }
header.has-menu.menu-open { z-index: 101; background: transparent; box-shadow: none; backdrop-filter: none; color: var(--ink, #3A2824); }
header.has-menu.menu-open nav.left { visibility: hidden; }

/* ---------- The burger: three waves that drift, then a cross ---------- */
.wc-burger { position: relative; width: 44px; height: 44px; margin: -12px -10px -12px 0; border: 0; background: none; color: inherit; cursor: pointer; flex: none; }
.wc-burger i { position: absolute; left: 10px; right: 10px; height: 6px; overflow: hidden;
  -webkit-mask: radial-gradient(circle at 50% 120%, transparent 3px, #000 3.5px 5px, transparent 5.5px) 0 0 / 8px 6px repeat-x;
          mask: radial-gradient(circle at 50% 120%, transparent 3px, #000 3.5px 5px, transparent 5.5px) 0 0 / 8px 6px repeat-x;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s, top .45s; animation: wc-swell 2.4s ease-in-out infinite; }
.wc-burger i::after { content: ""; position: absolute; inset: 0; background: currentColor; }
.wc-burger i:nth-child(1) { top: 11px; } .wc-burger i:nth-child(2) { top: 19px; animation-delay: -.8s; } .wc-burger i:nth-child(3) { top: 27px; animation-delay: -1.6s; }
@keyframes wc-swell { 50% { transform: translateX(4px); } }
.menu-open .wc-burger i { -webkit-mask: none; mask: none; height: 1.5px; top: 21px; animation: none; }
.menu-open .wc-burger i:nth-child(1) { transform: rotate(45deg); }
.menu-open .wc-burger i:nth-child(2) { opacity: 0; }
.menu-open .wc-burger i:nth-child(3) { transform: rotate(-45deg); }
.wc-burger:focus-visible { outline: 1.5px solid var(--accent, #8C4E19); outline-offset: 2px; border-radius: 4px; }

/* ---------- The blush sea ---------- */
body.wc-locked { overflow: hidden; }
.wc-menu { position: fixed; inset: 0; z-index: 100; overflow: hidden; visibility: hidden; pointer-events: none; transition: visibility 0s .8s; }
.wc-menu.on { visibility: visible; pointer-events: auto; transition: none; }
.wc-menu .water { position: absolute; left: -10%; right: -10%; bottom: 0; height: 0; background: linear-gradient(var(--blush), var(--blush-deep)); transition: height .8s cubic-bezier(.6,0,.2,1); }
.wc-menu .water::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 24px;
  background: radial-gradient(circle at 50% 0, transparent 18px, var(--blush) 19px) 0 0 / 48px 24px repeat-x; animation: wc-drift 6s linear infinite; }
@keyframes wc-drift { to { background-position: 48px 0; } }
.wc-menu.on .water { height: 110%; transition-duration: .9s; }
.wc-menu nav { position: absolute; inset: 0; display: grid; align-content: center; gap: clamp(0px, .5vw, 6px); padding: 100px var(--gutter, 24px) 80px; overflow-y: auto; }
.wc-menu nav a { justify-self: start; color: var(--ink, #3A2824); font: 300 clamp(44px, 6.4vw, 100px)/1.02 var(--serif, "Cormorant Garamond", Georgia, serif); letter-spacing: -.035em;
  opacity: 0; transform: translateY(60px); transition: opacity .5s, transform .7s cubic-bezier(.2,.8,.2,1), color .3s; }
.wc-menu nav a em { font-weight: 500; }
.wc-menu nav a sup { font: 400 12px var(--sans, "Inter", sans-serif); letter-spacing: .1em; vertical-align: top; margin-left: 8px; opacity: .5; }
.wc-menu.on nav a { opacity: 1; transform: none; animation: wc-bob 3.6s ease-in-out infinite; }
.wc-menu nav a:hover, .wc-menu nav a:focus-visible, .wc-menu nav a[aria-current] { color: var(--accent, #8C4E19); font-style: italic; outline: none; }
@keyframes wc-bob { 50% { transform: translateY(-6px); } }
.wc-menu .surf { position: absolute; right: 8vw; top: 50%; width: clamp(180px, 24vw, 340px); height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  transform: translateY(-50%) rotate(4deg) scale(.9); opacity: 0; transition: opacity .4s, transform .6s cubic-bezier(.2,.8,.2,1); box-shadow: 0 30px 60px rgba(58, 40, 36, .22); pointer-events: none; }
.wc-menu .surf.on { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }
.wc-menu .foot { position: absolute; left: var(--gutter, 24px); right: var(--gutter, 24px); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; gap: 16px;
  color: var(--ink, #3A2824); font: 300 12px var(--sans, "Inter", sans-serif); opacity: 0; transition: opacity .4s; }
.wc-menu.on .foot { opacity: .7; transition-delay: .5s; }
.wc-menu .foot a { border-bottom: 1px solid currentColor; }

@media (max-width: 820px) {
  header.has-menu nav.right a { display: none; }
  .wc-menu .surf { display: none; }
  .wc-menu nav a { font-size: clamp(40px, 11vw, 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .wc-burger i, .wc-menu nav a, .wc-menu .water::before { animation: none !important; }
}

/* Work with us: the one button in the header (hidden on phones, where it's in the menu) */
header.has-menu nav.right a.wc-cta { border: 1px solid currentColor; border-radius: 40px; padding: 7px 16px 6px; line-height: 1; }
header.has-menu nav.right a.wc-cta::after { display: none; }
header.has-menu nav.right a.wc-cta:hover, header.has-menu nav.right a.wc-cta[aria-current] { background: rgba(128,110,100,.14); }