/* ==========================================================================
   HomeFamilyReport — estilo compartilhado das páginas internas
   A landing page (index.html) tem o CSS inline para carregar mais rápido.
   Estes tokens são os mesmos dela — mude aqui e lá se trocar a identidade.
   ========================================================================== */

:root{
  /* only light impede o Chrome do Android de escurecer a pagina sozinho */
  color-scheme: only light;
  --ink:#111111;
  --body:#242424;
  --muted:#6b6b6b;
  --rule:#d4d4d4;
  --accent:#a81d24;
  --ok:#1f6b2c;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',Times,serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;background:#ffffff;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
}

body{
  font-family:var(--serif);
  color:var(--body);
  background:#ffffff;
  font-size:19px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.col{max-width:700px;margin:0 auto;padding:0 20px;}

a{color:var(--ink);}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- Masthead ---------- */
.masthead{text-align:center;padding:22px 0 0;}
.wordmark{
  font-family:var(--serif);font-weight:700;font-size:44px;line-height:1;
  letter-spacing:-1.4px;color:var(--ink);text-decoration:none;display:inline-block;
}
.wordmark span{color:var(--accent);}
.motto{
  font-family:var(--sans);font-size:10px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--muted);margin-top:10px;
}
.rule-double{border-top:4px solid var(--ink);border-bottom:1px solid var(--ink);height:0;margin-top:15px;}

.folio{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--sans);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted);padding:7px 0;border-bottom:1px solid var(--ink);
}

.sections{
  display:flex;gap:18px;overflow-x:auto;padding:9px 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;
}
.sections a{color:var(--ink);text-decoration:none;white-space:nowrap;padding-bottom:3px;}
.sections a.on{color:var(--accent);border-bottom:2px solid var(--accent);}

/* ---------- Página ---------- */
.page{padding-bottom:70px;}

.flag{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--accent);text-align:center;margin:28px 0 12px;
}

h1{
  font-family:var(--serif);font-size:40px;line-height:1.08;letter-spacing:-.8px;
  font-weight:700;color:var(--ink);text-align:center;margin-bottom:16px;
}

.sub{
  font-size:21px;line-height:1.46;font-style:italic;color:#3f3f3f;
  text-align:center;max-width:600px;margin:0 auto 20px;
}

.byline{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:12px;letter-spacing:.3px;color:var(--muted);
  text-align:center;padding:11px 0;margin-bottom:26px;
}
.byline a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);}
.byline a:hover{border-bottom-color:var(--accent);}
.byline b{color:var(--ink);font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;}
.byline .dot{color:var(--rule);margin:0 8px;}

p{margin:0 0 20px;}
strong{color:var(--ink);}

h2{
  font-family:var(--serif);font-size:27px;line-height:1.2;font-weight:700;
  letter-spacing:-.4px;color:var(--ink);
  margin:38px 0 10px;padding-top:14px;border-top:1px solid var(--ink);
}

h3{
  font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);
  margin:26px 0 8px;letter-spacing:-.1px;
}

ul,ol{margin:0 0 20px 22px;}
li{margin-bottom:9px;line-height:1.6;}

blockquote{
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:18px 0;margin:28px 0;
  font-size:23px;line-height:1.36;font-weight:700;font-style:italic;
  color:var(--ink);text-align:center;
}

figure{margin:26px 0;}
figure img{width:100%;height:auto;display:block;}
figcaption{
  font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--muted);
  padding:8px 0 10px;border-bottom:1px solid var(--rule);
}

.note{
  border:1px solid var(--ink);border-left:5px solid var(--accent);background:#fff;
  font-family:var(--sans);font-size:15px;line-height:1.55;
  padding:13px 15px;margin:24px 0;
}
.note b{color:var(--ink);}

dl{margin:0 0 20px;}
dt{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink);margin-top:16px;}
dd{margin:5px 0 0;}

/* ---------- Página do autor ---------- */
.author-head{
  margin-top:26px;
  display:flex;gap:18px;align-items:flex-start;
  border-bottom:1px solid var(--rule);padding-bottom:22px;margin-bottom:26px;
}
.author-initials{
  flex:0 0 68px;height:68px;border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:26px;font-weight:700;color:var(--ink);
}
.author-head h1{text-align:left;font-size:32px;margin-bottom:6px;}
.author-role{
  font-family:var(--sans);font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;
}
.author-bio{font-size:17.5px;line-height:1.6;}

/* ---------- Lista de artigos ---------- */
.archive{border-top:1px solid var(--ink);margin:10px 0 30px;}
.archive-item{
  display:block;text-decoration:none;color:inherit;
  padding:17px 0;border-bottom:1px solid var(--rule);
}
.archive-item .kicker{
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:5px;
}
.archive-item h4{
  font-family:var(--serif);font-size:21px;line-height:1.26;font-weight:700;
  color:var(--ink);margin-bottom:5px;
}
.archive-item:hover h4{color:var(--accent);}
.archive-item p{
  font-size:16.5px;line-height:1.5;color:var(--muted);margin:0 0 6px;
}
.archive-item .when{
  font-family:var(--sans);font-size:11px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted);
}

/* ---------- Matéria de capa ---------- */
.lead-item{border-top:1px solid var(--ink);margin-top:0;padding-top:22px;}
.lead-item h4{font-size:31px;line-height:1.14;letter-spacing:-.5px;}
.lead-item p{font-size:19px;color:var(--body);font-style:italic;}

/* ---------- Rodapé ---------- */
footer{
  margin-top:44px;border-top:4px solid var(--ink);padding:18px 0 60px;
  font-family:var(--sans);font-size:11px;line-height:1.7;color:var(--muted);
}
footer p{margin-bottom:10px;}
footer a{color:var(--muted);}
.footer-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:12px;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--rule);
}
.footer-links a{text-decoration:none;}
.footer-links a:hover{text-decoration:underline;}
.footer-links span{color:var(--rule);}
.footer-legal{text-align:center;}

@media(max-width:480px){
  body{font-size:18px;}
  .folio{justify-content:center;}
  .wordmark{font-size:31px;letter-spacing:-.9px;}
  h1{font-size:30px;letter-spacing:-.5px;}
  .author-head h1{font-size:26px;}
  .sub{font-size:19px;}
  h2{font-size:23px;}
  blockquote{font-size:20px;}
  .folio .side{display:none;}
  .lead-item h4{font-size:25px;}
  .lead-item p{font-size:17.5px;}
  .author-head{gap:14px;}
  .author-initials{flex-basis:54px;height:54px;font-size:21px;}
}