/* Mila Studios: the header and the footer, the same on every page (Braden, 30 Sep 2026).
   Source of truth: output/website/mila-site-minimal/assets/chrome.css. _build_pages.py copies it into
   mila-site/assets/ and writes the same header and footer markup into every page except scorecard.html.
   Every page loads this file after its own stylesheet, so nothing in site.css or minimal.css reaches the
   header or the footer. Every value here is literal, so the two stylesheets can never make them differ.

   The frame: the logo and the button sit on the page's content edges (the same frame as the sections,
   1320px of content with a gutter of 20 to 64px). Inside it, a three-column grid (1fr auto 1fr) keeps the
   links on the true center of the page whatever the logo and button widths are. */

/* ---------------------------------------------------------------- header */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:8px 0;margin:0;box-sizing:border-box;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;
  background:transparent;box-shadow:none;transition:background .3s,box-shadow .3s}
#nav *,#nav *::before,#nav *::after{box-sizing:border-box}
#nav .nav-frame{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  width:100%;max-width:calc(1320px + 2 * clamp(20px,4.2vw,64px));height:70px;margin:0 auto;padding:0 clamp(20px,4.2vw,64px)}
#nav .logo-link{grid-column:1;justify-self:start;display:inline-flex;align-items:center;text-decoration:none;line-height:0}
#nav .logo-link img{height:40px;width:auto;max-width:none;filter:brightness(0) invert(1);transition:filter .3s}
#nav .logo-light{display:block}
#nav .logo-dark{display:none}
#nav .links{grid-column:2;justify-self:center;display:flex;gap:30px;align-items:center;white-space:nowrap}
#nav .navright{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px}
#nav .links a{color:#EDEADC;text-decoration:none;font-family:'League Spartan','Helvetica Neue',Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.12em;font-size:.73rem;font-weight:500;line-height:1.5;opacity:.92;padding:0 0 3px;transition:color .3s,opacity .3s}
#nav .btn{display:inline-block;font-family:'League Spartan','Helvetica Neue',Arial,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;font-size:.76rem;line-height:1.5;padding:16px 30px;margin:0;border:0;border-radius:999px;text-decoration:none;cursor:pointer;
  background:#EDEADC;color:#80314E;white-space:nowrap;transform:none;transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s}
#nav .btn:hover{background:#fff;color:#80314E;transform:translateY(-2px)}
#nav .navtoggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#nav .navtoggle span{display:block;width:22px;height:2px;border-radius:2px;background:#EDEADC;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .18s,background .3s}
#nav.open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav.open .navtoggle span:nth-child(2){opacity:0}
#nav.open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* solid once you scroll, or from the top on pages that open light (site.js sets the class) */
#nav.solid,#nav.always-solid{background:rgba(237,234,220,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(67,83,76,.14)}
#nav.solid .logo-link img,#nav.always-solid .logo-link img{filter:none}
#nav.solid .logo-light,#nav.always-solid .logo-light{display:none}
#nav.solid .logo-dark,#nav.always-solid .logo-dark{display:block}
#nav.solid .links a,#nav.always-solid .links a{color:#43534C}
#nav.solid .navtoggle span,#nav.always-solid .navtoggle span,#nav.open .navtoggle span{background:#43534C}
/* on the light bar the button becomes the standard wine pill, or it would vanish into the bar */
#nav.solid .btn,#nav.always-solid .btn{background:#80314E;color:#EDEADC}
#nav.solid .btn:hover,#nav.always-solid .btn:hover{background:#6d2942;color:#EDEADC}

/* the dropdowns: site A's look, opening on hover or focus */
#nav .drop{position:relative;display:inline-flex;align-items:center}
#nav .drop>a{display:inline-flex;align-items:center}
#nav .drop>a::after{content:"";display:inline-block;width:0;height:0;margin-left:7px;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.55}
#nav .drop:hover>a::after{opacity:1}
#nav .drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
#nav .menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:272px;display:block;
  background:rgba(237,234,220,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px;padding:9px;
  box-shadow:0 26px 60px -30px rgba(36,29,27,.55);border:1px solid rgba(67,83,76,.12);
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;z-index:120}
#nav .drop:hover .menu,#nav .drop:focus-within .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
#nav .links .menu a{display:block;padding:11px 14px;border-radius:9px;text-decoration:none;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  text-transform:none;letter-spacing:0;font-size:.94rem;font-weight:600;line-height:1.25;color:#43534C;opacity:1;white-space:normal}
#nav .links .menu a small{display:block;font-size:.78rem;font-weight:400;color:#8b7f78;margin-top:3px;letter-spacing:0}
#nav .links .menu a:hover{background:rgba(128,49,78,.09);color:#80314E}
#nav .links .menu a:hover small{color:#80314E;opacity:.7}

@media (prefers-color-scheme:dark){
  #nav.solid,#nav.always-solid{background:rgba(20,16,19,.94);box-shadow:0 1px 0 rgba(244,240,231,.14)}
  #nav.solid .logo-link img,#nav.always-solid .logo-link img{filter:brightness(0) invert(1)}
  #nav.solid .logo-light,#nav.always-solid .logo-light{display:block}
  #nav.solid .logo-dark,#nav.always-solid .logo-dark{display:none}
  #nav.solid .links a,#nav.always-solid .links a{color:#F4F0E7}
  #nav.solid .navtoggle span,#nav.always-solid .navtoggle span{background:#EDE7DC}
  #nav.solid .btn,#nav.always-solid .btn{background:#EDEADC;color:#80314E}
  #nav.solid .btn:hover,#nav.always-solid .btn:hover{background:#fff;color:#80314E}
  #nav .menu{background:rgba(30,24,28,.98);border-color:rgba(244,240,231,.14)}
  #nav .links .menu a{color:#EDE7DC}
  #nav .links .menu a small{color:rgba(244,240,231,.5)}
  #nav .links .menu a:hover{background:rgba(128,49,78,.34);color:#fff}
}

/* the phone menu: the hamburger opens the links as a full-width panel under the bar */
@media (max-width:900px){
  #nav .navright .btn{font-size:.62rem;letter-spacing:.1em;padding:10px 15px}
  #nav .navtoggle{display:inline-flex}
  #nav .links{position:absolute;top:100%;left:0;right:0;display:block;white-space:normal;background:#EDEADC;
    box-shadow:0 18px 40px -18px rgba(44,35,32,.4);border-top:1px solid rgba(67,83,76,.12);padding:6px 0 12px;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .3s ease,opacity .22s ease,visibility .22s}
  #nav.open .links{max-height:86svh;overflow-y:auto;opacity:1;visibility:visible}
  #nav .links a{display:block;color:#43534C;font-size:.82rem;letter-spacing:.1em;padding:14px 26px;opacity:1;border-bottom:1px solid rgba(67,83,76,.07)}
  #nav .links .drop{display:block}
  #nav .drop::after{display:none}
  #nav .menu{display:block;position:static;background:none;box-shadow:none;border:0;padding:0;margin:0;min-width:0;opacity:1;visibility:visible;transform:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  #nav .links .menu a{padding:12px 26px 12px 44px;font-size:.74rem;opacity:.85;border-radius:0}
  #nav .links .menu a small{font-size:.72rem;opacity:.72;letter-spacing:.02em}
  #nav.open{background:rgba(237,234,220,.985);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(67,83,76,.14)}
  #nav.open .logo-link img{filter:none}
  #nav.open .logo-light{display:none}
  #nav.open .logo-dark{display:block}
  #nav.solid .links a,#nav.always-solid .links a{color:#43534C}
}
@media (max-width:900px) and (prefers-color-scheme:dark){
  #nav .links{background:#1e181c;border-top-color:rgba(244,240,231,.12);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
  #nav .links a,#nav.solid .links a,#nav.always-solid .links a{color:#EDE7DC;border-bottom-color:rgba(244,240,231,.08)}
  #nav .links .menu a{color:#EDE7DC}
  #nav .links .menu a small{color:rgba(244,240,231,.55)}
  #nav.open{background:#1e181c;box-shadow:0 1px 0 rgba(244,240,231,.12)}
  #nav.open .logo-link img{filter:brightness(0) invert(1)}
  #nav.open .logo-light{display:block}
  #nav.open .logo-dark{display:none}
  #nav.open .navtoggle span{background:#EDE7DC}
}

/* ---------------------------------------------------------------- footer */
.site-foot{display:block;margin:0;background:#dcdbce;color:#58524d;padding:56px 0 44px;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:.84rem;line-height:1.55;text-align:left}
.site-foot *,.site-foot *::before,.site-foot *::after{box-sizing:border-box}
.site-foot .sf-frame{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 48px;align-items:center;
  width:100%;max-width:calc(1320px + 2 * clamp(20px,4.2vw,64px));margin:0 auto;padding:0 clamp(20px,4.2vw,64px)}
.site-foot img{display:block;height:30px;width:auto;max-width:none;margin:0;opacity:1;filter:none}
.site-foot .logo-on-dark{display:none}
.site-foot nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 28px;position:static;padding:0;background:none;box-shadow:none}
.site-foot nav a{color:inherit;text-decoration:none;font-size:.84rem;font-family:inherit;text-transform:none;letter-spacing:0;opacity:1}
.site-foot nav a:hover{color:#80314E}
.site-foot .small{grid-column:1 / -1;margin:0;font-size:.76rem;color:inherit}
@media (prefers-color-scheme:dark){
  .site-foot{background:#0e0b0d;color:rgba(244,240,231,.74)}
  .site-foot .logo-on-light{display:none}
  .site-foot .logo-on-dark{display:block}
  .site-foot nav a:hover{color:#d7a7b9}
}
@media (max-width:700px){.site-foot .sf-frame{grid-template-columns:minmax(0,1fr)}.site-foot nav{justify-content:flex-start}}