/* ============================================================
   Crônicas — tema compartilhado
   Usado pelo hub (/index.html) e pelas páginas de campanha (/noar/...)
   ============================================================ */

:root{
  --ink:#0b0e13;          /* fundo: tinta quase preta */
  --ink-2:#11161e;        /* painéis/figuras */
  --bone:#e9e2d0;         /* texto principal, cor de osso */
  --bone-dim:#a59e8d;     /* secundário/legendas */
  --glow:#74dcb4;         /* acento arcano: brilho frio teal-verde */
  --glow-soft:rgba(116,220,180,.16);
  --rule:#222936;         /* fios/hairlines */
  --measure:60rem;
  --gutter:clamp(1.2rem,4vw,1.6rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:"Spectral",Georgia,serif;font-size:1.18rem;line-height:1.78;font-weight:400;
}
::selection{background:var(--glow-soft);color:#fff}
a{color:var(--glow);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:2px}

/* ---------- Hero / masthead (hub e campanha) ---------- */
.hero{
  position:relative;min-height:52vh;display:flex;justify-content:center;align-items:flex-end;
  padding-block:clamp(2rem,6vw,4rem);overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:saturate(.9) contrast(1.02)}
.hero::before{ /* véu de tinta + luar acima das nuvens */
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--glow-soft), transparent 55%),
    linear-gradient(180deg, rgba(11,14,19,.35) 0%, rgba(11,14,19,.7) 55%, var(--ink) 100%);
}
.masthead{position:relative;z-index:2;width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.78rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--glow);
  margin:0 0 1.1rem;font-weight:500;
}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{text-decoration:underline}
.hero h1{
  font-family:"Fraunces",Georgia,serif;font-weight:900;
  font-size:clamp(2.4rem,7.5vw,4.4rem);line-height:1;margin:0;
  letter-spacing:-.01em;color:#f3eedd;
  text-shadow:0 1px 40px rgba(116,220,180,.16);
}
.meta{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;
  color:var(--bone-dim);margin:1.4rem 0 0;letter-spacing:.04em;line-height:1.7;
}
.meta b{color:var(--bone);font-weight:500}

/* ---------- Hub (landing de campanhas) ---------- */
.hub{max-width:var(--measure);margin:0 auto;padding:clamp(2rem,6vw,3.5rem) var(--gutter) 2rem}
.hub .lead{color:var(--bone-dim);margin:0 0 2.4rem;font-size:1.05rem}
.cards{display:grid;gap:1.1rem}
.card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:5px;padding:1.4rem 1.5rem;
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.card:hover{border-color:var(--glow);transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,0,0,.4), 0 0 0 1px var(--glow-soft)}
.card h2{font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:1.7rem;margin:0 0 .4rem;color:#f3eedd}
.card .blurb{color:var(--bone-dim);font-size:1rem;line-height:1.6;margin:0 0 .9rem}
.card .status{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--glow)}
.card.soon{opacity:.55;pointer-events:none}
.card.soon .status{color:var(--bone-dim)}

/* ---------- Corpo do diário (página de entrada) ---------- */
.entry{max-width:var(--measure);margin:0 auto;padding:clamp(2.5rem,7vw,5rem) var(--gutter) 2rem}
.entry p{margin:0 0 1.5rem}
.entry p:first-of-type::first-letter{
  font-family:"Fraunces",Georgia,serif;font-weight:900;
  float:left;font-size:4.4rem;line-height:.78;padding:.32rem .6rem 0 0;
  color:var(--glow);text-shadow:0 0 26px rgba(116,220,180,.25);
}
.entry em{font-style:italic;color:#f1ead8}

/* ---------- Figuras / slots de imagem ---------- */
figure.fig{margin:2.6rem 0;}
.fig-img{display:block;width:100%;height:auto;border-radius:3px;border:1px solid var(--rule)}
.fig-fallback{
  display:none;aspect-ratio:3/2;width:100%;
  flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  background:
    radial-gradient(90% 70% at 50% 30%, var(--glow-soft), transparent 70%),
    var(--ink-2);
  border:1px dashed var(--rule);border-radius:3px;text-align:center;padding:1.5rem;
}
.fig-fallback span{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.82rem;letter-spacing:.06em;color:var(--bone-dim)}
.fig-fallback span:first-child{color:var(--glow);text-transform:lowercase}
.fig-fallback-hint{opacity:.7;font-size:.72rem !important}
figcaption{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.78rem;letter-spacing:.04em;color:var(--bone-dim);margin-top:.7rem;text-align:left}
figcaption .n{color:var(--glow)}

/* ---------- Assinatura / rodapé ---------- */
.sign{font-family:"Fraunces",Georgia,serif;font-style:italic;
  font-size:1.5rem;color:#f1ead8;margin:2.5rem 0 0}
.colophon{max-width:var(--measure);margin:0 auto;
  padding:2.5rem var(--gutter) 4rem;border-top:1px solid var(--rule)}
.colophon p{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.76rem;letter-spacing:.04em;color:var(--bone-dim);line-height:1.9;margin:.2rem 0}

/* ---------- Movimento (suave, respeitando preferências) ---------- */
@media (prefers-reduced-motion: no-preference){
  .masthead,.entry>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .entry>*{animation-delay:.05s}
  .cards>*{animation:fade .7s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}