/* =============================================================
   FASE 03B — Assinatura, acento, navegação contextual

   Regra da cor:
     tinta  = conteúdo
     cinza  = estrutura
     acento = atenção

   E a regra que mantém isto compatível com a decisão do primeiro
   dia: a única cor com ÁREA é a do trabalho. O acento madebyrc
   nunca tem área — só linha, glifo e contorno. Com um case no
   ecrã, o acento é no máximo um traço de 1×5px no cabeçalho.

   PARA REVERTER: apagar o <link> deste ficheiro e do script,
   repor o <header> a partir de madebyrc-site-v2-fase03, e desfazer
   a correção retroativa no fase-01b.css.
   ============================================================= */

:root {
  --accent: #A33B1F;
}

/* =============================================================
   1. ASSINATURA
   «made by» não é um segundo logótipo: é uma preposição que só
   fica completa no nome. Por isso fica por cima, mais pequena, e
   em cinza — estrutura a apontar para conteúdo.
   ============================================================= */

.masthead__inner { align-items: flex-end; }

.masthead__name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.masthead__by {
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.25;
  color: var(--mute);
}

.masthead__who {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.45;
  color: var(--ink);
}

/* =============================================================
   2. NAVEGAÇÃO CONTEXTUAL
   O sinal é uma graduação — o mesmo traço de 1px que marca as
   divisões da régua do Método. A navegação passa a ser uma medida
   da página, e a secção onde estás é a graduação em que estás.

   Dois sinais, nunca um: a graduação a acento E o texto de cinza
   para tinta. Entre o acento e o cinza há 1,29:1 de contraste —
   depender só da cor excluiria quem tem daltonismo.
   ============================================================= */

.masthead__nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
  width: 1px;
  height: 5px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .35s var(--ease);
}

.masthead__nav a[aria-current] {
  color: var(--ink);
}

.masthead__nav a[aria-current]::before { opacity: 1; }

/* Indicador de secção para telemóvel, onde não há navegação. */
.masthead__here {
  display: none;
  position: relative;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: .7rem;
}

.masthead__here::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -2.5px;
  width: 1px;
  height: 5px;
  background: var(--accent);
}

.masthead__here:empty { visibility: hidden; }

/* Abaixo dos 760px a navegação de três itens sai e fica só a
   secção atual. Indicação em vez de menu: cabe numa linha, e num
   ecrã onde se navega por scroll três links repetem o que o
   polegar já faz. A navegação por secções continua disponível
   através dos cabeçalhos, que é o mecanismo real de quem usa
   leitor de ecrã. */
@media (max-width: 759px) {
  .masthead__nav { display: none; }
  .masthead__here { display: block; }
}

/* =============================================================
   3. HERO — a seta do convite
   O único elemento acionável do primeiro ecrã. Cor = atenção,
   literalmente. Só o glifo: o texto e o filete ficam em tinta.
   ============================================================= */

.hero .cta .cta__arrow { color: var(--accent); }

/* =============================================================
   4. FOCO
   Só existe para quem navega por teclado, e o foco é atenção —
   é a aplicação mais pura do princípio. 6,17:1 no papel, muito
   acima dos 3:1 exigidos a indicadores não textuais.
   ============================================================= */

:focus-visible { outline-color: var(--accent); }

/* =============================================================
   5. HOVER DO MÉTODO
   A graduação da etapa observada passa de 7px a 13px e de cinza a
   acento: uma marca menor promove-se a marca maior. A régua
   re-marca-se em função da atenção — sem elemento novo, sem
   deslocamento, sem escala, sem sombra.

   O segundo sinal é a descrição a passar de grafite a tinta,
   para que nada dependa só do tom.
   ============================================================= */

@media (hover: hover) and (min-width: 760px) {
  .step::before { transition: height .25s var(--ease), background-color .25s var(--ease); }
  .step__body { transition: color .25s var(--ease); }

  .step:hover::before {
    height: var(--tick-major);
    background: var(--accent);
  }

  .step:hover .step__body { color: var(--ink); }
}