/* Eumneme shell: a sparse header (mark + serif wordmark, three links, one black "Get started") and the footer.
   Markup is stamped by scripts/sync-shell.mjs between <!-- mv:nav --> and <!-- mv:footer --> markers.
   Depends on tokens.css and ui.css. The phone menu is a native popover: it opens, closes on Escape
   and on outside click without JavaScript. site.js mirrors aria-expanded, closes it after an in-page
   link, and closes it when the desktop nav is showing (960px). */

.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);border-radius:var(--mk-r-btn);background:var(--mk-ink);color:#FFFFFF;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)}

/* Header: paper, then a hairline once the page scrolls. */
.mv-nav{position:sticky;top:0;z-index:var(--z-nav);background:color-mix(in srgb,var(--mk-paper) 90%,transparent);-webkit-backdrop-filter:saturate(1.1) blur(14px);backdrop-filter:saturate(1.1) blur(14px);transition:box-shadow var(--dur-3) var(--mk-ease)}
.mv-nav.is-scrolled{box-shadow:0 1px 0 var(--mk-line)}
/* Home: the header floats on the sky until the page scrolls. */
.home-body .mv-nav{transition:background-color var(--dur-3) var(--mk-ease),box-shadow var(--dur-3) var(--mk-ease),-webkit-backdrop-filter var(--dur-3) var(--mk-ease),backdrop-filter var(--dur-3) var(--mk-ease)}
.home-body .mv-nav:not(.is-scrolled){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.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:.4em;min-height:var(--tap-min);color:var(--mk-ink);font:500 1.5rem/1 var(--mk-serif);letter-spacing:-.015em;text-decoration:none;white-space:nowrap}
.mv-brand:hover{text-decoration:none}
.mv-brand .mk-mark{width:1.35em;height:1.35em;background:var(--mk-gold,currentColor);-webkit-mask:url(/assets/kodros/mark.svg) center/contain no-repeat;mask:url(/assets/kodros/mark.svg) center/contain no-repeat}

.mv-nav__links{margin:0 auto;padding:0;list-style:none}
.mv-nav__links li{display:contents;margin:0}
.mv-nav__cta{flex:none}
/* Kodros 2026-11-02: the nav action is a small gold pill on every page. */
.mv-nav .mv-nav__cta{min-height:40px;padding:0 20px;border:0;border-radius:999px;background:linear-gradient(180deg,#DDBB6E 0%,#C79F50 100%);color:#21180A;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px -10px rgba(140,100,30,.55);transition:filter var(--dur-2) var(--mk-ease),box-shadow var(--dur-2) var(--mk-ease)}
@media (max-width:479px){.mv-nav .mv-nav__cta{min-height:36px;padding:0 14px}}
.mv-nav .mv-nav__menu{min-height:40px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.6);border-color:rgba(184,146,74,.3)}
@media (max-width:599px){.home-body .mv-nav__cta{display:none}.home-body .mv-nav__menu{margin-left:auto}}
/* Phones: the bar keeps the mark and Menu only; the download button lives in the menu. */
@media (max-width:479px){.mv-nav .mv-nav__cta{display:none}.mv-nav .mv-nav__menu{margin-left:auto}}
.mv-nav .mv-nav__cta:hover{filter:brightness(1.05);color:#21180A;text-decoration:none}
.mv-nav__menu{display:none;margin-left:auto}

/* Tablet and phone: links move into the drawer.
   `width < 960px` (not max-width: 959px) so a fractional 959px viewport cannot show both. */
@media (width < 960px){
  .mv-nav__in{gap:var(--s-3)}
  .mv-nav__links{display:none}
  .mv-nav__cta{flex:0 1 auto;min-width:0;margin-left:auto}
  .mv-nav__menu{display:inline-flex;flex:none;margin-left:0;white-space:nowrap}
}
@media (max-width:479px){
  .mv-brand{font-size:1.3125rem}
  .mv-nav__in{gap:var(--s-2)}
  .mv-nav__cta,.mv-nav__menu{padding:0 var(--s-3)}
  .mv-nav__cta{white-space:nowrap;font-size:var(--t-xs)}
}

/* Drawer: a white card under the header. */
.mv-menu{position:fixed;inset:calc(var(--nav-h) - 4px) var(--s-3) auto var(--s-3);width:auto;max-height:calc(100dvh - var(--nav-h) - var(--s-4));margin:0;padding:var(--s-5);overflow:auto;border:1px solid var(--mk-line);border-radius:var(--mk-r-card);background:#FFFFFF;color:var(--mk-ink);box-shadow:var(--lift-3);transition:opacity var(--dur-2) var(--mk-ease),translate var(--dur-2) var(--mk-ease),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(17,17,19,.18)}
.mv-menu__links{display:grid;gap:0;margin:0 0 var(--s-5);padding:0;list-style:none}
.mv-menu__links li + li{border-top:1px solid var(--mk-line)}
.mv-menu__links a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 var(--s-1);color:var(--mk-ink);font:500 var(--t-md)/1 var(--font-ui);text-decoration:none}
.mv-menu__links a::after{content:"";width:8px;height:8px;border-top:1.6px solid var(--mk-muted);border-right:1.6px solid var(--mk-muted);rotate:45deg}
.mv-menu__links a[aria-current]{font-weight:600}
.mv-menu__links a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-chip)}
.mv-menu__cta{display:grid;gap:var(--s-2);margin:0 0 var(--s-5)}
.mv-menu__cta .btn,.mv-menu__cta .tape--button{width:100%}
.mv-menu__mail{margin:0;font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--mk-ink-2)}
@media (width >= 960px){
  .mv-menu,.mv-menu:popover-open,.mv-menu::backdrop{display:none;transition:none}
}
/* Scroll lock only while the phone drawer is open. */
@media (width < 960px){
  html:has(.mv-menu:popover-open){overflow:hidden}
}
.mv-menu{overscroll-behavior:contain}
@supports not selector(:popover-open){
  .mv-nav__menu,.mv-menu{display:none}
  @media (max-width:959px){.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: wordmark and one line, one call to action, four link groups, then the company and the page's own note. */
.mv-foot{margin-top:var(--s-16);border-top:1px solid var(--mk-line);background:var(--mk-paper)}
.mv-foot__bar{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,5vw,72px) var(--gutter) var(--s-8);border:0;border-radius:0;background:none}
.mv-foot__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-10) var(--s-12);align-items:start}
.mv-foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4)}
.mv-foot .mv-brand{font-size:2rem}
.mv-foot__tag{margin:0;max-width:22em;font:400 var(--t-md)/1.5 var(--font-ui);color:var(--mk-ink-2)}
.mv-foot__brand .btn{margin-top:var(--s-2)}
.mv-foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-8) var(--s-6)}
.mv-foot__h{margin:0 0 var(--s-2);font:600 var(--t-xs)/var(--lh-ui) var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mk-muted)}
.mv-foot__links{display:grid;gap:0;margin:0;padding:0;list-style:none}
.mv-foot__links a{display:inline-flex;align-items:center;min-height:var(--tap-min);color:var(--mk-ink);font:500 var(--t-sm)/var(--lh-ui) var(--font-ui);text-decoration:none}
.mv-foot__links a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.mv-foot__links a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--mk-gold);text-decoration-thickness:2px;text-underline-offset:.25em}
.mv-foot__links a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
.mv-foot__tail{display:grid;gap:var(--s-1);margin-top:clamp(28px,4vw,48px);padding-top:var(--s-5);border-top:1px solid var(--mk-line)}
.mv-foot__tail p{margin:0;max-width:none;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--mk-muted)}
.mv-foot__tail a{color:inherit}
@media (max-width:959px){.mv-foot__top{grid-template-columns:minmax(0,1fr)}.mv-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  .mv-menu,.mv-nav{transition:none}
}