/* As Leis de Mithra — fundo preto, uma coluna, nada mais. */

:root{
  --preto:  #000;
  --texto:  #e8e8e8;
  --suave:  #9a9a9a;
  --fraco:  #5c5c5c;
  --linha:  #262626;
}

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

body{
  margin:0;
  background:var(--preto);
  color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

main{
  width:min(100% - 44px, 640px);
  margin-inline:auto;
  padding-block:clamp(60px,11vw,110px) 64px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── título ─────────────────────────────────────────────── */
h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;
  font-size:clamp(2.6rem,9vw,4rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 .25em;
}
.autor{
  margin:0;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fraco);
}

/* ── caixa de aviso ─────────────────────────────────────── */
.aviso{
  margin:clamp(40px,7vw,60px) 0 clamp(48px,8vw,72px);
  padding:28px 26px 26px;
  border:1px solid var(--linha);
  border-radius:12px;
}
.aviso__titulo{
  margin:0 0 18px;
  font-size:1rem;
  color:var(--texto);
}

.linha{ display:flex; gap:10px; }

input[type=email]{
  flex:1 1 auto;
  min-width:0;
  padding:13px 16px;
  font-family:inherit;
  font-size:1rem;
  color:var(--texto);
  background:#0d0d0d;
  border:1px solid var(--linha);
  border-radius:8px;
  outline:none;
  transition:border-color .2s;
}
input[type=email]::placeholder{ color:var(--fraco); }
input[type=email]:focus{ border-color:#5a5a5a; }
input[type=email]:user-invalid{ border-color:#7a3434; }

button{
  flex:0 0 auto;
  padding:13px 24px;
  font-family:inherit;
  font-size:.95rem;
  font-weight:500;
  color:#000;
  background:var(--texto);
  border:1px solid var(--texto);
  border-radius:8px;
  cursor:pointer;
  transition:opacity .2s;
}
button:hover{ opacity:.82; }
button:disabled{ opacity:.5; cursor:default; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

#form-status{
  margin:12px 2px 0;
  min-height:1.4em;
  font-size:.88rem;
  color:var(--suave);
}
#form-status.is-error{ color:#e08585; }

form.is-done .linha{ display:none; }
form.is-done #form-status{ margin:0; font-size:1rem; color:var(--texto); }

/* ── sinopse ────────────────────────────────────────────── */
.sinopse p{
  margin:0 0 1.5em;
  color:var(--suave);
  text-align:justify;
  hyphens:auto;
}
.sinopse p:last-child{ margin-bottom:0; }
.sinopse em{ color:var(--texto); font-style:italic; }

/* ── rodapé ─────────────────────────────────────────────── */
footer{
  margin-top:clamp(48px,8vw,72px);
  padding-top:24px;
  border-top:1px solid var(--linha);
  font-size:.78rem;
  color:var(--fraco);
}

/* ── telas estreitas ────────────────────────────────────── */
@media (max-width:520px){
  body{ font-size:16px; }
  main{ width:min(100% - 36px, 640px); }
  .aviso{ padding:22px 20px; }
  .linha{ flex-direction:column; }
  button{ width:100%; }
  .sinopse p{ text-align:left; }
}

/* sem mensagem, a linha de status não ocupa espaço */
#form-status:empty{ margin:0; min-height:0; }