/* =====================================================================
   Jesus é a Eternidade — folha de estilo compartilhada
   Direção: edição impressa clássica (papel velino, tinta azul-noite,
   ouro velho). Títulos em IM Fell English; texto em Spectral.
   ===================================================================== */

:root{
  /* papel */
  --paper:#F3ECDC;        /* velino — fundo principal */
  --paper-2:#EAE0C8;      /* velino mais fundo — seções alternadas */
  --sheet:#FBF7EE;        /* folha clara — caixas, citações */
  /* tinta */
  --ink:#1D2232;          /* texto corrido */
  --muted:#5B5545;        /* texto secundário */
  --navy:#17285A;         /* azul-noite — títulos, links */
  --navy-deep:#0E1834;    /* faixas escuras e rodapé */
  /* ouro e rubrica */
  --gold:#9A7631;         /* filetes e ornamentos */
  --gold-ink:#7A5B22;     /* ouro legível para texto pequeno */
  --gold-lt:#D2B572;      /* ouro sobre fundo escuro */
  --rubric:#8E2B23;       /* vermelho de rubrica */
  --rule:#D3C5A3;         /* filetes finos */

  --f-display:"IM Fell English", "Iowan Old Style", Palatino, Georgia, serif;
  --f-text:"Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --measure:68ch;
  --gutter:clamp(16px, 4vw, 40px);
}

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

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-text);font-size:1.125rem;line-height:1.7;
  font-feature-settings:"onum" 1,"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:#E4D2A3;color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:10001}
.skip:focus{left:12px;top:12px}

/* ---------- utilidades tipográficas ---------- */
.smallcaps{font-variant-caps:all-small-caps;letter-spacing:.08em}
.fleuron{display:block;text-align:center;color:var(--gold);font-size:1.4rem;line-height:1;margin:0 auto}
.fleuron svg{width:72px;height:auto;display:inline-block}
.rule-double{border:0;height:4px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);margin:0}

/* =====================================================================
   CABEÇALHO
   ===================================================================== */
.mast{background:var(--paper);position:relative;z-index:1000;font-family:var(--f-text)}
.mast::after{content:"";display:block;height:4px;margin:0 var(--gutter);
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.mast-in{max-width:1180px;margin:0 auto;padding:14px var(--gutter) 12px;
  display:flex;align-items:center;gap:24px}
.mast-brand{font-family:var(--f-display);font-size:1.45rem;line-height:1.1;color:var(--navy);
  text-decoration:none;white-space:nowrap;margin-right:auto}
.mast-brand:hover{color:var(--ink)}
.mast-nav{display:flex;align-items:center;gap:4px}
.mast-nav > a,.mast-drop > button{
  font:inherit;font-size:1rem;color:var(--ink);text-decoration:none;background:none;border:0;
  padding:8px 12px;cursor:pointer;border-radius:2px;display:inline-flex;align-items:center;gap:6px}
.mast-nav > a:hover,.mast-drop > button:hover{color:var(--navy);text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:5px}
.mast-nav > a[aria-current="page"]{color:var(--navy);text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:5px;text-decoration-thickness:1px}
.mast-drop{position:relative}
.mast-drop > button .car{font-size:.7em;color:var(--gold-ink);transition:transform .2s}
.mast-drop.open > button .car{transform:rotate(180deg)}
.mast-panel{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:min(440px,90vw);background:var(--sheet);border:1px solid var(--rule);
  box-shadow:0 18px 40px rgba(29,34,50,.14);padding:10px}
.mast-drop.open .mast-panel{display:block}
.mast-panel a{display:block;padding:10px 14px;text-decoration:none;color:var(--ink);border-radius:2px}
.mast-panel a + a{border-top:1px solid #E7DDC6}
.mast-panel a:hover{background:var(--paper)}
.mast-panel a[aria-current="page"]{background:var(--paper)}
.mast-panel .t{display:block;font-family:var(--f-display);font-size:1.15rem;color:var(--navy);line-height:1.25}
.mast-panel .m{display:block;font-size:.85rem;color:var(--muted);font-style:italic}

.langbar{display:flex;gap:2px;align-items:center;border-left:1px solid var(--rule);padding-left:16px}
.langbar button{font:inherit;font-size:.82rem;letter-spacing:.06em;color:var(--muted);background:none;
  border:0;padding:6px 7px;cursor:pointer;border-radius:2px}
.langbar button:hover{color:var(--navy)}
.langbar button.on{color:var(--navy);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:4px}

.mast-toggle{display:none;font:inherit;font-size:1rem;color:var(--navy);background:none;
  border:1px solid var(--rule);padding:6px 14px;cursor:pointer;border-radius:2px}

@media (max-width:900px){
  .mast-in{flex-wrap:wrap;gap:10px}
  .mast-brand{font-size:1.25rem}
  .mast-toggle{display:inline-block}
  .mast-nav,.langbar{display:none;width:100%}
  .mast.open .mast-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--rule);padding-top:6px}
  .mast.open .langbar{display:flex;border-left:0;padding:8px 0 4px;justify-content:center;
    border-top:1px solid var(--rule)}
  .mast-nav > a,.mast-drop > button{padding:12px 4px;width:100%;justify-content:space-between}
  .mast-panel{position:static;transform:none;width:100%;box-shadow:none;border:0;
    background:transparent;padding:0 0 6px 12px}
  .mast-drop.open .mast-panel{display:block}
}

/* =====================================================================
   FRONTISPÍCIO — o topo de cada estudo
   ===================================================================== */
.frontis{background:var(--paper)!important;color:var(--ink)!important;text-align:center;
  padding:clamp(48px,7vw,88px) var(--gutter) clamp(36px,5vw,56px)!important;
  margin:0!important;border:0!important;position:relative;overflow:visible!important}
.frontis h1{font-family:var(--f-display)!important;font-weight:400!important;color:var(--navy)!important;
  font-size:clamp(2.3rem,5.4vw,4.1rem)!important;line-height:1.06!important;letter-spacing:0!important;
  max-width:18ch;margin:0 auto .3em!important;text-shadow:none!important}
.frontis h1 em{font-style:italic;color:inherit}
.frontis::after{content:"";display:block;order:9;width:min(560px,80%);height:4px;margin:clamp(28px,4vw,44px) auto 0;
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}

/* =====================================================================
   RODAPÉ / CÓLOFON
   ===================================================================== */
.colophon{background:var(--navy-deep);color:#D9D3C2;font-family:var(--f-text);
  padding:64px var(--gutter) 34px;margin-top:0;border-top:4px double var(--gold)}
.colophon a{color:#EDE4CC;text-decoration:none}
.colophon a:hover{color:var(--gold-lt);text-decoration:underline;text-underline-offset:4px}
.colo-in{max-width:1080px;margin:0 auto}
.colo-verse{font-family:var(--f-display);font-style:italic;font-size:clamp(1.35rem,2.6vw,1.9rem);
  line-height:1.35;color:#F3ECDC;text-align:center;max-width:30ch;margin:0 auto}
.colo-verse cite{display:block;font-family:var(--f-text);font-style:normal;font-size:.95rem;
  color:var(--gold-lt);margin-top:12px}
.colo-orn{color:var(--gold-lt);text-align:center;margin:0 0 22px}
.colo-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:52px;
  padding-top:30px;border-top:1px solid rgba(210,181,114,.35)}
.colo-cols h2{font-family:var(--f-display);font-weight:400;font-size:1.2rem;color:var(--gold-lt);margin:0 0 12px}
.colo-cols ul{list-style:none;margin:0;padding:0}
.colo-cols li{margin:0 0 8px;font-size:.98rem;line-height:1.45}
.colo-cols p{margin:0 0 8px;font-size:.98rem;line-height:1.55}
.colo-base{margin-top:40px;text-align:center;font-size:.85rem;color:#A9A291}
@media (max-width:760px){.colo-cols{grid-template-columns:1fr;gap:26px}}

/* botão "voltar ao topo" genérico usado em páginas longas */
.to-top{position:fixed;right:18px;bottom:18px;z-index:900;width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:var(--paper);border:0;cursor:pointer;font-size:1.1rem;
  box-shadow:0 6px 18px rgba(14,24,52,.25);display:none;align-items:center;justify-content:center}
.to-top.show{display:flex}

/* =====================================================================
   VERSÃO PARA IMPRIMIR
   ===================================================================== */
.print-wrap{text-align:center;margin-top:22px;position:relative;z-index:2}
.print-btn{font:inherit;font-size:.95rem;color:var(--navy);background:transparent;border:1px solid var(--gold);
  padding:7px 18px 7px 16px;cursor:pointer;border-radius:1px;display:inline-flex;align-items:center;gap:8px}
.print-btn::before{content:"";width:15px;height:15px;background:currentColor;flex:0 0 auto;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E") center/contain no-repeat}
.print-btn:hover{background:var(--navy);color:var(--paper);border-color:var(--navy)}

@media print{
  @page{margin:16mm 15mm 18mm}
  html,body{background:#fff!important}
  body{font-size:11pt;line-height:1.5}
  *,*::before,*::after{color:#111!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;
    -webkit-print-color-adjust:economy;print-color-adjust:economy}
  h1,h2,h3,h4{color:#17285A!important;break-after:avoid}
  .mast,.colophon,.to-top,.fab,.print-wrap,.langbar,.skip,.chip,.verses .vlabel,.tl-hint,.mast-toggle{display:none!important}
  .vbox,.acc-body{display:block!important}
  a{text-decoration:none!important}
  img,svg,figure,blockquote,.scripture,.vbox,table,tr{break-inside:avoid}
  p,li{orphans:3;widows:3}
  .frontis{padding:0 0 10mm!important}
  .frontis::after{border-color:#999!important}
  .band,.prayer,.closing,.figures{min-height:0!important;padding:6mm 0!important;border:0!important}
  .band img{display:none!important}
  .band .credit,.prayer .credit{position:static!important;display:block;margin-top:2mm;font-size:8pt}
  section{padding-top:6mm!important;padding-bottom:6mm!important}
}