/* ==========================================================================
   Portfólio — Jean Freitas
   Direção "Instrumento": a página é a leitura de um instrumento de medição.
   Device estrutural: a RÉGUA — uma linha vertical que atravessa a página
   inteira e onde toda medida se alinha. A monoespaçada só aparece em valor
   medido; rótulo e texto corrido são sempre Inter.
   ========================================================================== */

:root {
  --fundo:       #0E1116;
  --superficie:  #151A21;
  --linha:       #212A35;
  --linha-forte: #313D4C;
  --texto:       #E6EDF3;
  --suave:       #8B99A9;
  --azul:        #4B93FF;
  --ok:          #3FB950;

  --regua: 9rem;
  --coluna: 58rem;
  --margem: clamp(1.25rem, 5vw, 3rem);

  color-scheme: dark;
}

[data-tema="claro"] {
  --fundo:       #FFFFFF;
  --superficie:  #F6F8FA;
  --linha:       #DDE3EA;
  --linha-forte: #B9C3CE;
  --texto:       #131920;
  --suave:       #59656F;
  --azul:        #1F5FD0;
  --ok:          #157F36;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }

::selection { background: var(--azul); color: #fff; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- estrutura */

.envelope {
  max-width: calc(var(--coluna) + var(--regua));
  margin: 0 auto;
  padding: 0 var(--margem);
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.marca {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.marca span { color: var(--suave); font-weight: 400; }

.botao-tema {
  background: none;
  border: 1px solid var(--linha);
  color: var(--suave);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.botao-tema:hover { color: var(--texto); border-color: var(--linha-forte); }

section { padding-block: clamp(3rem, 8vw, 5.5rem); }

/* ------------------------------------------------------------------ abertura */

.abertura { padding-top: clamp(2rem, 6vw, 4rem); }

.abertura h1 {
  font-size: clamp(2rem, 5.2vw, 3.125rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  max-width: 20ch;
}

.abertura .entrada {
  margin-top: 1.5rem;
  max-width: 54ch;
  color: var(--suave);
  font-size: 1.0625rem;
}

.abertura .entrada strong { color: var(--texto); font-weight: 500; }

/* ---------------------------------------------------------------- a régua */

.leitura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--regua);
  margin-top: 2.75rem;
}

.leitura > * {
  border-top: 1px solid var(--linha);
  padding-block: 0.8rem;
  min-width: 0;
}

.leitura > *:nth-last-child(-n + 2) { border-bottom: 1px solid var(--linha); }

.leitura .rotulo { padding-right: 1.5rem; }

.leitura .rotulo small {
  display: block;
  color: var(--suave);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.valor {
  border-left: 1px solid var(--linha);
  padding-left: 1.25rem;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.valor em { font-style: normal; color: var(--suave); font-size: 0.8125rem; }
.valor.confere { color: var(--ok); }

/* A única sequência animada da página: os valores assentam na carga,
   como o ponteiro de um instrumento parando. */
@media (prefers-reduced-motion: no-preference) {
  .assenta .valor {
    animation: assentar 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  /* Os filhos alternam rótulo/valor, e nth-of-type conta elementos div —
     não a classe. Por isso os valores caem nas posições pares. */
  .assenta .valor:nth-of-type(2) { animation-delay: 0.15s; }
  .assenta .valor:nth-of-type(4) { animation-delay: 0.26s; }
  .assenta .valor:nth-of-type(6) { animation-delay: 0.37s; }
  .assenta .valor:nth-of-type(8) { animation-delay: 0.48s; }
}

@keyframes assentar {
  from { opacity: 0; transform: translateY(0.4rem); }
  to   { opacity: 1; transform: none; }
}

.nota {
  margin-top: 1.25rem;
  color: var(--suave);
  font-size: 0.8125rem;
  max-width: 62ch;
}

/* ----------------------------------------------------------------- seções */

.titulo-secao {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  max-width: 26ch;
}

.subtitulo-secao {
  margin-top: 0.9rem;
  color: var(--suave);
  max-width: 60ch;
}

/* --------------------------------------------------------------- projetos */

.projeto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--regua);
  border-top: 1px solid var(--linha);
  padding-block: 1.75rem;
}

.projetos .projeto:last-of-type { border-bottom: 1px solid var(--linha); }

.projeto .corpo { padding-right: 1.5rem; min-width: 0; }

.identificador {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--azul);
  letter-spacing: 0.04em;
}

.projeto h3 {
  margin-top: 0.35rem;
  font-size: 1.1875rem;
}

.projeto .resumo {
  margin-top: 0.7rem;
  color: var(--suave);
  max-width: 58ch;
  font-size: 0.9375rem;
}

.pilha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.pilha li {
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  color: var(--suave);
}

.projeto .medida {
  border-left: 1px solid var(--linha);
  padding-left: 1.25rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.medida .numero {
  display: block;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.medida .unidade {
  display: block;
  font-size: 0.75rem;
  color: var(--suave);
  font-family: Inter, system-ui, sans-serif;
  margin-top: 0.15rem;
}

.medida .extra {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.75rem;
  color: var(--suave);
  line-height: 1.5;
}

.acoes { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.abrir {
  display: inline-block;
  background: var(--azul);
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 5px;
  padding: 0.45rem 1rem;
}

[data-tema="claro"] .abrir { color: #fff; }
.abrir:hover { filter: brightness(1.1); }

.em-preparo {
  font-size: 0.8125rem;
  color: var(--suave);
  border: 1px dashed var(--linha-forte);
  border-radius: 5px;
  padding: 0.4rem 0.8rem;
}

/* ------------------------------------------------------------------ método */

/* A faixa sangra até as bordas da janela sem deslocar nada: o fundo vem de uma
   sombra espalhada, recortada na horizontal. O conteúdo continua exatamente na
   mesma coluna das outras seções — margem negativa aqui desalinhava. */
.metodo {
  background: var(--superficie);
  box-shadow: 0 0 0 100vmax var(--superficie);
  clip-path: inset(0 -100vmax);
}

.metodo-grade { margin-top: 2.5rem; }

.metodo-grade h3 {
  font-size: 0.9375rem;
  font-weight: 600;
}

.metodo-grade .detalhe {
  margin-top: 0.3rem;
  color: var(--suave);
  font-size: 0.8125rem;
  line-height: 1.5;
  max-width: 52ch;
}

/* ----------------------------------------------------------------- contato */

.contato { padding-block: clamp(3rem, 8vw, 5rem); }

.contato h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }

.canais {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
}

.canais a {
  display: inline-block;
  border: 1px solid var(--linha-forte);
  border-radius: 5px;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  font-size: 0.9375rem;
}

.canais a:hover { border-color: var(--azul); color: var(--azul); }

.rodape {
  border-top: 1px solid var(--linha);
  padding-block: 1.75rem 3rem;
  color: var(--suave);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* --------------------------------------------------------------- celular */

@media (max-width: 40rem) {
  :root { --regua: 0px; }

  .leitura,
  .projeto,
  .metodo-grade .leitura { grid-template-columns: minmax(0, 1fr); }

  .leitura > * { border-top: none; padding-block: 0.35rem; }
  .leitura .rotulo { border-top: 1px solid var(--linha); padding-top: 0.85rem; padding-right: 0; }
  .leitura > *:nth-last-child(-n + 2) { border-bottom: none; }
  .leitura > *:last-child { border-bottom: 1px solid var(--linha); padding-bottom: 0.85rem; }

  .valor,
  .projeto .medida {
    border-left: none;
    padding-left: 0;
  }

  .projeto .corpo { padding-right: 0; }

  .projeto .medida {
    margin-top: 1.25rem;
    border-top: 1px solid var(--linha);
    padding-top: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
  }

  .medida .numero { font-size: 1.25rem; }
  .medida .extra { flex-basis: 100%; margin-top: 0.4rem; }
}