/* MeshVault v4 shell: the shelf-edge nav strip and the footer sheet.
   Markup is stamped by scripts/sync-shell.mjs between <!-- mv:nav --> and <!-- mv:footer --> markers.
   Depends on tokens.css and tape.css. The phone menu is a native popover: it opens, closes on
   Escape and on outside click without JavaScript; site.js only closes it after an in-page link. */

.skip-link{position:absolute;left:var(--s-4);top:var(--s-2);z-index:calc(var(--z-menu) + 1);padding:var(--s-2) var(--s-4);background:var(--tape-black);color:var(--on-tape-black);font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none;outline:none;box-shadow:var(--focus-ring)}

/* The strip is the front edge of a shelf: laminate face, a lit top arris, a lip, a cast shadow on the wall. */
.mv-nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--shelf);border-bottom:1px solid var(--rule-strong);box-shadow:var(--shelf-cast)}
.mv-nav__in{display:flex;align-items:center;gap:var(--s-6);max-width:var(--wrap);min-height:var(--nav-h);margin:0 auto;padding:0 var(--gutter)}
.mv-brand{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap-min);color:var(--ink);font:400 1.625rem/1 var(--font-display);letter-spacing:-.005em;text-decoration:none;white-space:nowrap}
.mv-brand img{display:block;width:28px;height:28px}
.mv-brand:hover{text-decoration:none}

.mv-nav__links{display:flex;align-items:center;gap:var(--s-2);margin:0 0 0 auto;padding:0;list-style:none}
.mv-nav__links li{margin:0}
/* The anchor is the 44px hit area; the tape inside is the visible label. */
.mv-nav__links a,.mv-menu__links a{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 var(--s-1);text-decoration:none;color:inherit;border-radius:var(--r-card)}
.mv-nav__links a .tape{transition:transform var(--dur-2) var(--ease-out)}
/* Labels are stuck by hand: each sits a hair off level. */
.mv-nav__links li:nth-child(1) .tape{rotate:-.6deg}
.mv-nav__links li:nth-child(2) .tape{rotate:.4deg}
.mv-nav__links li:nth-child(3) .tape{rotate:-.3deg}
.mv-nav__links li:nth-child(4) .tape{rotate:.7deg}
.mv-nav__links li:nth-child(5) .tape{rotate:-.4deg}
.mv-nav__links a:hover .tape{transform:translateY(-1px)}
.mv-nav__links a:active .tape{transform:translateY(1px)}
.mv-nav__links a:focus-visible,.mv-menu__links a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* The current section is marked in markup: its label is black tape (no tape--white). */
.mv-nav__links .tape,.mv-menu__links .tape{display:inline-block;white-space:nowrap}
/* Strip labels are 8 modules tall: small tape, not buttons. */
.mv-nav__links .tape{padding:var(--u) calc(var(--u) * 2.5);line-height:calc(var(--u) * 6)}
.mv-nav__cta{flex:none}
.mv-nav__menu{display:none}

/* Phone and tablet: labels move into the drawer. */
@media (max-width:1199px){
  .mv-nav__in{gap:var(--s-3)}
  .mv-nav__links{display:none}
  .mv-nav__cta{margin-left:auto}
  .mv-nav__menu{display:inline-flex}
}
@media (max-width:599px){
  /* The hero carries the primary action on phones; the drawer repeats it. */
  .mv-nav__cta{display:none}
  .mv-nav__menu{margin-left:auto}
}
@media (max-width:479px){
  .mv-brand{font-size:1.375rem}
  .mv-brand img{width:24px;height:24px}
}
/* Drawer: a card slid out from under the shelf. */
.mv-menu{position:fixed;inset:var(--nav-h) 0 auto 0;width:auto;max-height:calc(100dvh - var(--nav-h));margin:0;padding:var(--s-6) var(--gutter) var(--s-8);overflow:auto;border:0;background:var(--card);color:var(--ink);box-shadow:var(--lift-3);transition:opacity var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out),display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete}
.mv-menu:popover-open{opacity:1;translate:0 0}
@starting-style{.mv-menu:popover-open{opacity:0;translate:0 calc(-1 * var(--s-2))}}
.mv-menu::backdrop{background:rgba(35,35,39,.16)}
.mv-menu__links{display:grid;gap:var(--s-2);margin:0 0 var(--s-6);padding:0;list-style:none}
.mv-menu__links a{min-height:var(--s-12)}
.mv-menu__cta{margin:0 0 var(--s-6)}
.mv-menu__mail{margin:0;font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
@media (min-width:1200px){.mv-menu{display:none}}
/* Browsers without popover: show the labels in a wrapping row instead of a dead button. */
@supports not selector(:popover-open){
  .mv-nav__menu,.mv-menu{display:none}
  @media (max-width:1199px){.mv-nav__in{flex-wrap:wrap;padding-block:var(--s-2)}.mv-nav__links{display:flex;flex-wrap:wrap;order:3;width:100%;margin:0}}
}

/* Footer: a sheet of card stock pinned to the wall. */
.mv-foot{padding:var(--s-24) var(--gutter) var(--s-12);background:var(--wall-deep);border-top:1px solid var(--rule)}
.mv-foot__sheet{position:relative;max-width:var(--wrap);margin:0 auto;padding:var(--s-12) clamp(var(--s-6),4vw,var(--s-12)) var(--s-8);background:var(--card);box-shadow:var(--lift-2);border-radius:var(--r-card)}
.mv-foot__top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:var(--s-10) var(--s-8)}
.mv-foot__brand p{margin:var(--s-4) 0 0;font:400 var(--t-md)/var(--lh-ui-lg) var(--font-text);color:var(--ink-2)}
.mv-foot__brand .mv-foot__line{font:400 var(--t-xl)/1.15 var(--font-display);color:var(--ink);max-width:14em}
.mv-foot__h{margin:0 0 var(--s-4)}
.mv-foot ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-1)}
.mv-foot li a,.mv-foot__contact a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap-min);min-width:var(--tap-min);font:500 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.mv-foot li a:hover,.mv-foot__contact a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.mv-foot li a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.mv-foot__contact{display:flex;flex-wrap:wrap;gap:0 var(--s-6);margin-top:var(--s-4)}
.mv-foot__contact svg{width:16px;height:16px;fill:currentColor}
.mv-foot__tail{display:grid;gap:var(--s-2);margin-top:var(--s-10);padding-top:var(--s-6);border-top:1px solid var(--rule)}
.mv-foot__tail p{margin:0;max-width:none;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}
.mv-foot__tail .mv-foot__seller{font-size:var(--t-sm);color:var(--ink-2)}
.mv-foot__tail a{color:inherit}
@media (max-width:959px){.mv-foot__top{grid-template-columns:repeat(3,minmax(0,1fr))}.mv-foot__brand{grid-column:1/-1}}
@media (max-width:599px){.mv-foot{padding-top:var(--s-16)}.mv-foot__top{grid-template-columns:1fr 1fr}.mv-foot__sheet{padding:var(--s-8) var(--s-5) var(--s-6)}}

@media (prefers-reduced-motion:reduce){
  .mv-menu,.mv-nav__links a .tape{transition:none}
}