/* ==========================================================================
   DRAWER — menu mobile de tela cheia
   Prefixo: drawer-
   Tokens usados: --fg --rule --dark --display --pad --nav-h --ease

   Escopo de tom no próprio elemento: o drawer vive fora de qualquer
   <section>, então não herda --fg de ninguém.
   ========================================================================== */

.drawer{
  position:fixed;inset:0;z-index:200;
  background:var(--dark);
  display:flex;flex-direction:column;
  padding:26px var(--pad);
  transform:translateX(100%);
  transition:transform .5s var(--ease);
}
/* [hidden] é removido pelo script antes de animar. Ele existe para o estado
   inicial: sem ele, leitor de tela e Tab alcançam os links do menu fechado. */
.drawer[hidden]{display:none}
.drawer.is-open{transform:none}

/* padding-inline:0 porque o .wrap aqui está DENTRO de um bloco que já
   aplicou --pad. É a única exceção à regra do grid em toda a biblioteca,
   e existe para o topo do drawer alinhar com o topo da nav. */
.drawer-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:56px;min-height:var(--nav-h);padding-inline:0;
}
.drawer-logo{line-height:0;display:block}
.drawer-logo img{height:22px;width:auto;display:block}
.drawer-close{background:none;border:none;color:var(--fg);padding:6px;line-height:0}

.drawer-nav{display:flex;flex-direction:column}
.drawer-link{
  font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;
  padding:16px 0;border-bottom:1px solid var(--rule);color:var(--fg);
}
.drawer-cta{margin-top:34px;align-self:flex-start}

@media(prefers-reduced-motion:reduce){
  .drawer{transition:none}
}