/* ===========================================================================
   MMOF concepts - shared motion + chrome layer

   Behaviour taken from the live mmof.com:
     header 150px -> 80px past 30px of scroll, logo 60px -> 30px
     nav underline scales in from the left, .3s ease-out
     menu panel slides in from the right over a rgba(0,0,0,.8) scrim, 650ms
   Here the menu is full page, which is the one deliberate change.

   Each concept sets its own palette through these variables, so the same
   stylesheet gives three different looks.
   =========================================================================== */

:root{
  --m-menu-bg:#8C2344;      /* full page menu fill      */
  --m-menu-fg:#ffffff;      /* menu text                */
  --m-menu-accent:#F0B489;  /* menu hover               */
  --m-accent:#8C2344;       /* nav underline, burger    */
  --m-ocm:650ms;            /* live site: data-cad=650  */
  --m-ease:cubic-bezier(.2,.7,.2,1);
}

/* ------------------------------------------------------------------ menu */
.m-burger{
  width:46px;height:46px;flex:none;padding:0;position:relative;
  background:transparent;border:0;cursor:pointer;
}
.m-burger i{
  position:absolute;left:9px;right:9px;height:2px;background:var(--m-accent);
  border-radius:2px;transition:transform .4s var(--m-ease),opacity .25s ease,right .3s ease;
}
.m-burger i:nth-child(1){top:15px}
.m-burger i:nth-child(2){top:22px;right:15px}
.m-burger i:nth-child(3){top:29px}
.m-burger:hover i:nth-child(2){right:9px}

.m-scrim{
  position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transition:opacity var(--m-ocm) ease,visibility var(--m-ocm);
}
.m-scrim.on{opacity:1;visibility:visible}

.m-menu{
  position:fixed;inset:0;z-index:800;background:var(--m-menu-bg);
  transform:translateX(101%);
  /* visibility keeps the closed panel out of the tab order and the a11y tree.
     It flips at the end of the transition, so the slide still shows. */
  visibility:hidden;
  transition:transform var(--m-ocm) var(--m-ease),visibility var(--m-ocm);
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  font-family:'Archivo',system-ui,sans-serif;
}
.m-menu.on{transform:translateX(0);visibility:visible}

.m-menu-top{
  display:flex;align-items:center;height:76px;flex:none;
  padding:0 clamp(22px,4vw,54px);
}
.m-menu-brand{
  display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--m-menu-fg);font-weight:600;font-size:26px;letter-spacing:.03em;
}
.m-close{
  margin-left:auto;width:46px;height:46px;padding:0;position:relative;border:0;
  background:transparent;cursor:pointer;border-radius:50%;
  transition:background .25s ease,transform .35s var(--m-ease);
}
.m-close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.m-close i{
  position:absolute;left:12px;right:12px;top:22px;height:2px;
  background:var(--m-menu-fg);border-radius:2px;
}
.m-close i:nth-child(1){transform:rotate(45deg)}
.m-close i:nth-child(2){transform:rotate(-45deg)}

.m-menu-body{
  flex:1;display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(30px,5vw,80px);
  align-content:center;
  padding:clamp(24px,4vw,54px) clamp(22px,4vw,54px) clamp(40px,6vw,70px);
}
@media(max-width:900px){.m-menu-body{grid-template-columns:1fr;align-content:start}}

.m-nav{list-style:none;margin:0;padding:0}
.m-nav li{
  border-top:1px solid rgba(255,255,255,.18);
  opacity:0;transform:translateY(26px);
  transition:opacity .5s ease,transform .6s var(--m-ease);
  transition-delay:calc(var(--i) * 55ms);
}
.m-nav li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.m-menu.on .m-nav li{opacity:1;transform:none}
.m-nav a{
  display:flex;align-items:baseline;gap:18px;text-decoration:none;
  color:var(--m-menu-fg);padding:clamp(12px,1.6vw,20px) 0;
  font-family:'Archivo Condensed','Archivo Narrow','Arial Narrow','Archivo',sans-serif;
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:1;
  font-size:clamp(30px,5.2vw,62px);
  transition:color .25s ease,padding-left .35s var(--m-ease);
}
.m-nav .num{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;
  color:rgba(255,255,255,.45);flex:none;width:34px;transition:color .25s ease;
}
.m-nav a:hover{color:var(--m-menu-accent);padding-left:14px}
.m-nav a:hover .num{color:var(--m-menu-accent)}

.m-meta{
  align-self:center;
  opacity:0;transform:translateY(26px);
  transition:opacity .5s ease .28s,transform .6s var(--m-ease) .28s;
}
.m-menu.on .m-meta{opacity:1;transform:none}
.m-meta h4{
  font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 14px;
}
.m-meta p,.m-meta a{
  display:block;color:rgba(255,255,255,.9);font-size:17px;line-height:1.75;
  margin:0 0 26px;text-decoration:none;max-width:34ch;
}
.m-meta a:hover{color:var(--m-menu-accent)}

body.m-locked{overflow:hidden}

/* ------------------------------------------------- nav underline on hover */
.m-underline{position:relative}
.m-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--m-accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .3s ease-out;
}
.m-underline:hover::after,.m-underline.active::after{transform:scaleX(1)}

/* ----------------------------------------------------------- scroll reveal */
[data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .8s var(--m-ease);
}
[data-reveal].in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
  .m-menu,.m-scrim,.m-nav li,.m-meta{transition-duration:.01ms}
}