/* ============================================================
   MERIDIANA — folha de estilo
   Direção: uma editora literária que publica à meia-noite.
   Preto-ameixa, amora e latão. Nada de vermelho de site adulto.
   ============================================================ */

:root{
  /* Cor */
  --night:      #171016;
  --velvet:     #201620;
  --raise:      #2B1E29;
  --mulberry:   #8B2F5C;
  --mulberry-2: #A94272;
  --brass:      #B08D4F;
  --brass-dim:  #6E5730;
  --silk:       #F0E6E9;
  --dusk:       #A58B96;
  --hair:       rgba(240,230,233,.11);
  --hair-2:     rgba(240,230,233,.055);

  /* Tipo */
  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --body: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --ui: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Escala */
  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem;
  --s5:3.25rem; --s6:5rem; --s7:8rem;

  --measure: 42rem;   /* largura ideal de leitura — ~64 caracteres no corpo atual */
  --wide: 68rem;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

body{
  margin:0;
  background:var(--night);
  color:var(--silk);
  font-family:var(--body);
  /* Georgia desenha pequeno para o corpo nominal. Num site cujo produto é
     leitura de 6 a 8 minutos, o tamanho é acessibilidade, não estética. */
  font-size:1.15rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (min-width:768px){
  body{ font-size:1.25rem; line-height:1.7; }
}

/* Fundo: um halo de amora muito discreto, como luz de abajur */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60rem 40rem at 78% -10%, rgba(139,47,92,.16), transparent 62%),
    radial-gradient(44rem 34rem at 8% 108%, rgba(176,141,79,.07), transparent 60%);
}
body > *{ position:relative; z-index:1; }

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--mulberry); color:var(--silk); }

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

/* ---------- utilitários ---------- */
.wrap{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--s3); }
.read{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--s3); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.eyebrow{
  font-family:var(--ui);
  font-size:.78125rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
}

.rule{ height:1px; background:var(--hair); border:0; margin:var(--s4) 0; }

/* ============================================================
   CABEÇALHO
   ============================================================ */
.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3);
  padding-block:var(--s3);
  border-bottom:1px solid var(--hair-2);
}

.brand{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--silk);
  line-height:1;
}
.brand small{
  display:block;
  font-family:var(--ui);
  font-size:.5625rem;
  letter-spacing:.3em;
  color:var(--dusk);
  margin-top:.45rem;
  font-weight:500;
}

.lang{ display:flex; align-items:center; gap:.6rem; font-family:var(--ui); font-size:.75rem; letter-spacing:.1em; }
.lang a{
  text-decoration:none; color:var(--dusk);
  padding:.3rem .1rem; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.lang a:hover{ color:var(--silk); }
.lang a[aria-current="true"]{ color:var(--brass); border-bottom-color:var(--brass); }
.lang span{ color:var(--hair); }

/* ============================================================
   CAPA (home)
   ============================================================ */
.cover{ padding-block:var(--s6) var(--s5); }

.cover h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.75rem,9vw,6rem);
  line-height:.94;
  letter-spacing:-.015em;
  margin:var(--s3) 0 0;
}
.cover h1 em{
  font-style:italic;
  color:var(--mulberry-2);
}

.cover .lede{
  max-width:34rem;
  margin-top:var(--s3);
  color:var(--dusk);
  font-size:1.1875rem;
  line-height:1.65;
}

/* ============================================================
   ÍNDICE — a assinatura da casa.
   Não é grade de cards. É sumário de antologia.
   ============================================================ */
.index{ padding-block:var(--s4) var(--s6); }

.index-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); padding-bottom:var(--s2);
  border-bottom:1px solid var(--hair);
}
.index-head .count{ font-family:var(--ui); font-size:.8125rem; color:var(--dusk); letter-spacing:.08em; }

.entry{
  display:grid;
  grid-template-columns:3.25rem 1fr auto;
  gap:var(--s3);
  align-items:baseline;
  padding-block:var(--s3);
  border-bottom:1px solid var(--hair-2);
  text-decoration:none;
  color:inherit;
  transition:background .25s;
}
.entry:hover, .entry:focus-visible{ background:linear-gradient(90deg, rgba(139,47,92,.10), transparent 70%); }

.entry .num{
  font-family:var(--display);
  font-size:.9375rem;
  color:var(--brass-dim);
  letter-spacing:.06em;
  transition:color .25s;
}
.entry:hover .num{ color:var(--brass); }

.entry .t{
  font-family:var(--display);
  font-size:clamp(1.375rem,3.4vw,1.875rem);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 .35rem;
  transition:color .25s;
}
.entry:hover .t{ color:var(--mulberry-2); }

.entry .hook{ color:var(--dusk); font-size:1.0625rem; line-height:1.6; margin:0; max-width:36rem; }

.entry .meta{
  font-family:var(--ui);
  font-size:.78125rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass-dim);
  white-space:nowrap;
}

@media (max-width:640px){
  .entry{ grid-template-columns:2.25rem 1fr; }
  .entry .meta{ grid-column:2; margin-top:.5rem; }
}

/* ============================================================
   PÁGINA DE LEITURA
   ============================================================ */

/* Assinatura: a lombada de latão que preenche conforme se lê */
.spine{
  position:fixed; top:0; left:0; bottom:0; width:2px;
  background:var(--hair-2); z-index:40;
}
.spine i{
  display:block; width:100%; height:0;
  background:linear-gradient(180deg,var(--brass),var(--mulberry));
  transition:height .12s linear;
}
@media (max-width:640px){ .spine{ width:2px; } }

.story-head{ padding-block:var(--s5) var(--s4); }
.story-head .kicker{ margin-bottom:var(--s3); }
.story-head h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.25rem,6.5vw,3.75rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 var(--s3);
}
.story-head .byline{
  font-family:var(--ui); font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dusk);
  display:flex; flex-wrap:wrap; gap:.9rem; align-items:center;
}
.story-head .byline span{ color:var(--brass-dim); }

.prose{ padding-bottom:var(--s5); }
.prose p{ margin:0 0 1.5em; }

/* Capitular */
.prose > p:first-of-type::first-letter{
  float:left;
  font-family:var(--display);
  font-size:4.75rem;
  line-height:.78;
  padding:.08em .12em 0 0;
  color:var(--mulberry-2);
  font-weight:400;
}

.prose em{ color:#F7EEF1; }

.break{
  text-align:center; color:var(--brass-dim);
  letter-spacing:1em; margin:var(--s5) 0; font-size:.8125rem;
}

/* ============================================================
   A PONTE — o fim do conto vira convite. Sem banner, sem grito.
   ============================================================ */
.bridge{
  border-top:1px solid var(--hair);
  margin-top:var(--s4);
  padding-top:var(--s4);
  padding-bottom:var(--s6);
}
.bridge .line{
  font-family:var(--display);
  font-size:clamp(1.5rem,4.5vw,2.125rem);
  font-style:italic;
  line-height:1.25;
  margin:0 0 var(--s3);
  color:var(--silk);
}
.bridge .line b{ font-style:normal; font-weight:400; color:var(--mulberry-2); }
.bridge p{ color:var(--dusk); font-size:1.0625rem; margin:0 0 var(--s3); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--ui); font-size:.875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:1rem 1.75rem;
  background:var(--mulberry); color:var(--silk);
  border:0; border-radius:1px; cursor:pointer;
  text-decoration:none;
  transition:background .22s, transform .22s;
}
.btn:hover{ background:var(--mulberry-2); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn .arw{ transition:transform .22s; }
.btn:hover .arw{ transform:translateX(4px); }

.btn-ghost{
  background:transparent; color:var(--silk);
  border:1px solid var(--hair);
}
.btn-ghost:hover{ background:var(--raise); border-color:var(--brass-dim); }

/* ============================================================
   PORTÃO 18+
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:100;
  background:var(--night);
  display:flex; align-items:center; justify-content:center;
  padding:var(--s3);
}
.gate[hidden]{ display:none; }
.gate .panel{ max-width:26rem; text-align:center; }
.gate h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.75rem,6vw,2.5rem); line-height:1.1;
  margin:var(--s3) 0;
}
.gate p{ color:var(--dusk); font-size:1.0625rem; margin:0 0 var(--s4); }
.gate .row{ display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap; }
.gate .fine{ margin-top:var(--s4); font-size:.8125rem; color:var(--brass-dim); font-family:var(--ui); letter-spacing:.04em; }

/* ============================================================
   QUIZ
   ============================================================ */
.quiz{ min-height:100svh; display:flex; flex-direction:column; }
.quiz-body{ flex:1; display:flex; align-items:center; padding-block:var(--s5); }

.progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background:var(--hair-2); z-index:50;
}
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--brass),var(--mulberry-2));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

.step{ display:none; }
.step.on{ display:block; animation:rise .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }

.step .n{ font-family:var(--ui); font-size:.78125rem; letter-spacing:.22em; color:var(--brass); text-transform:uppercase; }
.step h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.875rem,6vw,3rem); line-height:1.06;
  letter-spacing:-.015em; margin:var(--s2) 0 var(--s4);
}

.opts{ display:grid; gap:.75rem; }
.opt{
  display:flex; align-items:center; gap:var(--s3);
  width:100%; text-align:left;
  padding:1.15rem var(--s3);
  background:var(--velvet);
  border:1px solid var(--hair-2);
  border-radius:2px;
  color:var(--silk);
  font-family:var(--body); font-size:1.15rem;
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .2s;
}
.opt:hover{ background:var(--raise); border-color:var(--mulberry); transform:translateX(3px); }
.opt .dot{
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--brass-dim); flex:none;
  transition:background .2s, box-shadow .2s;
}
.opt:hover .dot{ background:var(--mulberry-2); box-shadow:0 0 0 4px rgba(169,66,114,.18); }

/* Resultado */
.loading{ text-align:center; }
.loading .pulse{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.5rem,5vw,2.25rem); color:var(--dusk);
  animation:breathe 1.7s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:.35} 50%{opacity:1} }

.result{ text-align:center; }
.result .big{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.25rem,8vw,4rem); line-height:1.02;
  margin:var(--s3) 0;
}
.result .big b{ font-weight:400; color:var(--mulberry-2); font-style:italic; }
.result p{ color:var(--dusk); max-width:26rem; margin:0 auto var(--s4); }

/* Saida secundaria do resultado: a que nao ganhou a primeira posicao.
   Discreta de proposito — presente, sem competir com o botao. */
.result .alt{ margin:var(--s3) auto 0; }
.result .alt a{
  font-family:var(--ui); font-size:.875rem; letter-spacing:.04em;
  color:var(--brass-dim); text-decoration:none;
  border-bottom:1px solid var(--hair-2); padding-bottom:.15rem;
}
.result .alt a:hover{ color:var(--silk); border-bottom-color:var(--brass-dim); }
.result .fine{
  margin:var(--s4) auto 0; font-family:var(--ui); font-size:.75rem;
  color:var(--brass-dim); letter-spacing:.04em;
}
[hidden]{ display:none !important; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.foot{
  border-top:1px solid var(--hair-2);
  padding-block:var(--s4) var(--s5);
  font-family:var(--ui); font-size:.8125rem; color:var(--brass-dim);
  line-height:1.85;
}
.foot .nav{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3); }
.foot .nav a{ color:var(--dusk); text-decoration:none; letter-spacing:.06em; }
.foot .nav a:hover{ color:var(--silk); }
.foot .disc{ max-width:44rem; }

/* ============================================================
   LEIA TAMBEM - fim do conto
   Reusa .entry do indice de proposito: o sumario de antologia e
   elemento de assinatura, e repeti-lo aqui mantem a identidade.
   NAO redefine grid-template-columns - herdar de .entry faz o
   bloco seguir sozinho a media query de 640px do site.
   Vem DEPOIS da ponte, em peso visual menor, para nao competir
   com o quiz, que e a saida primaria.
   ============================================================ */
.more{
  border-top:1px solid var(--hair);
  padding-top:var(--s3);
  padding-bottom:var(--s5);
}
.more .eyebrow{ display:block; margin:0 0 var(--s1); }
.more .entry{ padding-block:var(--s2); }
.more .entry .t{ font-size:clamp(1.0625rem,2.6vw,1.25rem); margin-bottom:.2rem; }
.more .entry .hook{ font-size:.9375rem; line-height:1.55; }
.more .entry .meta{ font-size:.6875rem; }
.more .entry:last-of-type{ border-bottom:0; }