/* jadistel.com — registro em tipografia de publicação. mobile primeiro. */

:root {
  --papel:       #f7f8fa;
  --tinta:       #14161a;
  --tinta-2:     #5b6270;
  --filete:      #d2d6de;
  --borda:       #14161a;
  --marca:       rgba(224, 161, 30, .30);
  --marca-forte: #b07c12;
  --serif: Tinos, "Times New Roman", "Liberation Serif", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:       #0e0f12;
    --tinta:       #e9e8e4;
    --tinta-2:     #9aa1ad;
    --filete:      #2b2f37;
    --borda:       #3b414c;
    --marca:       rgba(240, 180, 41, .17);
    --marca-forte: #f0b429;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--marca); color: var(--tinta); }

a { color: inherit; }

/* correr de leitura: nome à esquerda, seção corrente à direita */
.correr {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1.15rem;
  padding-top: max(.65rem, env(safe-area-inset-top));
  background: color-mix(in oklab, var(--papel) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filete);
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .02em;
}

.correr a { text-decoration: none; white-space: nowrap; }
.correr a:hover, .correr a:focus-visible { color: var(--marca-forte); }

.correr .aqui {
  color: var(--tinta-2);
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.15rem 4rem;
}

/* ---------- cabeçalho do documento ---------- */

.capa { padding: 2.75rem 0 0; }

/* home: quatro linhas e o rodapé, tudo numa tela */
body.curta main {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2rem;
}

body.curta .capa { padding-top: 0; }

/* a página se escreve: linha de filiação datilografada, depois nome, linhas e pé */
.cursor {
  display: inline-block;
  width: .5em;
  height: 1.05em;
  margin-left: .12em;
  background: var(--marca-forte);
  vertical-align: -.16em;
  animation: piscar 1.05s steps(1) infinite;
}

@keyframes piscar { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

@keyframes subir {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

body.curta h1        { animation: subir .75s cubic-bezier(.16, 1, .3, 1) .62s both; }
body.curta .sub      { animation: subir .7s cubic-bezier(.16, 1, .3, 1) .78s both; }
body.curta .linha    { animation: subir .6s cubic-bezier(.16, 1, .3, 1) both; }
body.curta .linha:nth-child(1) { animation-delay: .96s; }
body.curta .linha:nth-child(2) { animation-delay: 1.05s; }
body.curta .linha:nth-child(3) { animation-delay: 1.14s; }
body.curta .linha:nth-child(4) { animation-delay: 1.23s; }
body.curta .celula:nth-child(1) .linha { animation-delay: .96s; }
body.curta .celula:nth-child(2) .linha { animation-delay: 1.05s; }
body.curta .celula:nth-child(3) .linha { animation-delay: 1.14s; }
body.curta .celula:nth-child(4) .linha { animation-delay: 1.23s; }
body.curta .pe       { animation: subir .6s cubic-bezier(.16, 1, .3, 1) 1.4s both; }
body.curta .quadro { margin-top: 2.5rem; }

.pe {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.25rem;
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--tinta-2);
}

.pe a { text-decoration: none; box-shadow: inset 0 -1px 0 var(--filete); }
.pe a:hover, .pe a:focus-visible { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--marca-forte); }

.orgao {
  margin: 0;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .015em;
  line-height: 1.5;
  color: var(--tinta-2);
}

h1 {
  margin: .5rem 0 0;
  font-size: clamp(2.25rem, 11vw, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.022em;
}

h1 sup {
  font-size: .3em;
  font-weight: 400;
  vertical-align: super;
  color: var(--tinta-2);
  margin-left: .12em;
}

.sub {
  margin: .6rem 0 0;
  font-size: 1.1875rem;
  color: var(--tinta-2);
}

.sessao {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filete);
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--tinta-2);
}

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

section { margin-top: 2.75rem; }

h2 {
  margin: 0 0 .85rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

h2 .num {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--marca-forte);
  margin-right: .55rem;
}

p { margin: 0; }
p + p { margin-top: .55rem; }

.texto { text-align: justify; hyphens: auto; }
.texto + .texto { text-indent: 1.25em; }

.kw { margin-top: .9rem; }
.kw b { font-weight: 700; }

/* ---------- quadro ---------- */

.legenda {
  margin: 1.75rem 0 .5rem;
  font-size: 1rem;
}

.quadro { border-top: 1px solid var(--borda); }

.linha {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: .15rem .85rem;
  min-height: 4.75rem;
  padding: .95rem .8rem;
  border-bottom: 1px solid var(--borda);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .3s ease;
}

.linha .reg { grid-column: 1; font-size: 1.125rem; font-weight: 700; }
.linha .desc { grid-column: 1; color: var(--tinta-2); }

.linha .fim {
  grid-column: 1;
  margin-top: .15rem;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}

.linha .seta {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--tinta-2);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), color .2s ease;
}

.linha > * { position: relative; z-index: 1; }

/* o marca-texto é passado da esquerda para a direita, como caneta */
.linha::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--marca);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.linha.viva::before { transform: scaleX(1); }

/* no dedo, quem manda no preenchimento é a animação do clique, não o :active */
@media (hover: hover) {
  .linha:active::before { transform: scaleX(1); }
}

/* toque: a linha enche como barra de progresso e o link abre no fim. vence as outras regras */
.linha.tocando::before {
  transform-origin: 0 50%;
  transform: scaleX(var(--enche, 0));
  transition: transform var(--dur, 620ms) linear;
}

@media (hover: none) {
  body.curta .linha {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* switch nativo esticado sobre a linha: invisível, mas o toque nele é o que faz o iPhone vibrar */
.celula { position: relative; }

.toque {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 2;
  opacity: .01;
  -webkit-appearance: auto;
  appearance: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.linha.saindo::before { transform-origin: 100% 50%; transform: scaleX(0); }
.linha.morta::before { display: none; }

.linha.viva .seta { transform: translate(3px, -3px); color: var(--tinta); }
.linha:focus-visible { outline: 2px solid var(--marca-forte); outline-offset: -2px; }

@media (hover: hover) {
  .linha:hover::before { transform: scaleX(1); }
  .linha:hover .seta { transform: translate(3px, -3px); color: var(--tinta); }
}

/* item sem destino público: entra como registro, não como link */
.linha.morta { color: var(--tinta-2); }
.linha.morta .reg { color: var(--tinta); }
.linha.morta .selo {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--tinta-2);
  letter-spacing: .04em;
}

.fonte {
  margin-top: .55rem;
  font-size: 1rem;
  color: var(--tinta-2);
}

/* ---------- pulso: o que está acontecendo agora ---------- */

.pulso {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: 1.5rem;
  padding: .85rem .8rem;
  border: 1px solid var(--filete);
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--tinta-2);
  line-height: 1.45;
}

.pt {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: .35em;
  border-radius: 50%;
  background: var(--marca-forte);
  animation: bater 2.6s ease-in-out infinite;
}

@keyframes bater {
  0%, 100% { opacity: .3; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1); }
}

.pulso a { text-decoration: none; box-shadow: inset 0 -1px 0 var(--tinta-2); color: var(--tinta); }
.pulso a:hover, .pulso a:focus-visible { box-shadow: inset 0 -2px 0 var(--marca-forte); }

/* ---------- referências ---------- */

.ref {
  position: relative;
  margin-bottom: 1rem;
  padding-left: .75rem;
  scroll-margin-top: 4.5rem;
  transition: background .25s ease;
}

.ref::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  bottom: .15em;
  width: 3px;
  background: var(--marca-forte);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.ref.viva { background: var(--marca); }
.ref.viva::before { transform: scaleY(1); }

.ref a { text-decoration: none; box-shadow: inset 0 -1px 0 var(--tinta-2); overflow-wrap: anywhere; }
.ref a:hover, .ref a:focus-visible { box-shadow: inset 0 -2px 0 var(--marca-forte); }

.cit {
  text-decoration: none;
  padding: .1em .12em;
  box-shadow: inset 0 -1px 0 var(--filete);
  transition: background .22s ease, box-shadow .22s ease;
}

.cit.viva, .cit:focus-visible { background: var(--marca); box-shadow: inset 0 -1px 0 var(--marca-forte); }

.ferramentas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.4rem;
}

.cita {
  appearance: none;
  border: 1px solid var(--filete);
  background: transparent;
  color: var(--tinta-2);
  font-family: var(--mono);
  font-size: 1rem;
  padding: .6rem .9rem;
  min-height: 2.75rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cita:hover, .cita:focus-visible { background: var(--marca); color: var(--tinta); border-color: var(--marca-forte); }
.cita:focus-visible { outline: 2px solid var(--marca-forte); outline-offset: 2px; }

/* ---------- nota de rodapé ---------- */

.nota {
  margin-top: 3rem;
  padding-top: 1rem;
  font-size: 1rem;
  color: var(--tinta-2);
}

.nota::before {
  content: "";
  display: block;
  width: 5cm;
  max-width: 55%;
  border-top: 1px solid var(--filete);
  margin-bottom: .8rem;
}

.nota a { text-decoration: none; box-shadow: inset 0 -1px 0 var(--filete); }
.nota a:hover, .nota a:focus-visible { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--marca-forte); }

/* ---------- tela grande: o número da seção vai para a margem ---------- */

@media (min-width: 48rem) {
  body { font-size: 17px; }
  main { max-width: 44rem; padding-bottom: 6rem; }
  .capa { padding-top: 4.5rem; }
  section { margin-top: 3.5rem; }

  h2 {
    position: relative;
    padding-left: 4.25rem;
  }

  h2 .num {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    text-align: right;
    width: 3.25rem;
  }

  .quadro, .legenda, .fonte, .texto, .kw, .pulso, .ref, .ferramentas { margin-left: 4.25rem; }
  .linha { padding-left: .9rem; }
  body.curta .quadro, body.curta .pe { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- impressão: sai A4 com margens da ABNT ---------- */

@page { size: A4; margin: 3cm 2cm 2cm 3cm; }

@media print {
  :root {
    --papel: #fff; --tinta: #000; --tinta-2: #333;
    --filete: #999; --borda: #000; --marca: transparent;
  }
  body { background: #fff; color: #000; font-size: 12pt; }
  .correr, .ferramentas, .pulso, .seta { display: none; }
  main { max-width: none; padding: 0; }
  h2, .quadro, .legenda, .fonte, .texto, .kw, .ref { margin-left: 0; padding-left: 0; }
  h2 .num { position: static; width: auto; margin-right: .55rem; color: #000; }
  .linha { min-height: 0; break-inside: avoid; }
  .ref a, .cit { box-shadow: none; }
  section { break-inside: avoid-page; }
}