:root{
  --paper:#f3ead4;
  --paper-2:#efe1c6;
  --ink:#23201b;
  --muted:#5f594b;
  --rule:rgba(35,32,27,.12);
  --green:#1f5a46;
  --green-2:#2a6b55;
  --focus:#2a6b55;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --container:72ch;

  /* Faixas (inspiradas na referência) */
  --band-hero: #03A9F4;
  --band-sub: #d7e3ef;
  --band-a: #ead3a6;
  --band-b: #cfe0d8;
  --band-c: #efe1c6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:20px/1.85 ui-serif, Georgia, "Times New Roman", Times, serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
::selection{background:rgba(42,107,85,.25)}

/* Layout em faixas (sem bordas arredondadas) */
.band{
  width:100%;
}
.band__inner{
  max-width:calc(var(--container) + 2rem);
  margin:0 auto;
  padding:1.15rem 1rem;
}
.site-footer{display:flex}
.site-footer .band__inner{
  width:100%;
  max-width:none;
}
.band--hero{
  background:var(--band-hero);
  color:#f7f2e6;
  min-height:300px;
  display:flex;
  align-items:flex-end;
}
.band--hero .band__inner{padding:2rem 1rem}
.site-title{
  margin:0;
  font-weight:800;
  letter-spacing:.02em;
  font-size:3.1rem;
  line-height:1;
}
.site-subtitle{
  margin:.75rem 0 0;
  font:750 1.35rem/1.2 ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing:.01em;
}
.site-subtitle--hero{
  color:rgba(247,242,230,.88);
}
.site-nav{
  margin-top:1rem;
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap;
}
.site-link{
  color:#f7f2e6;
  text-decoration:none;
  font:750 .95rem/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding:.7rem .9rem;
  border:1px solid rgba(255,255,255,.18);
}
.site-link:focus-visible{outline:2px solid rgba(255,255,255,.7); outline-offset:2px}

.list{
  display:flex;
  flex-direction:column;
  gap:0;
}

.reader-title{
  margin:0;
  font:900 2.35rem/1.05 ui-serif, Georgia, "Times New Roman", Times, serif;
}
.reader-body{
  background:var(--band-c);
}
.prose{
  font-size:20px;
}
.prose p{margin:.95rem 0}
.prose article::after{content:""; display:block; clear:both}
.capitular::first-letter{
  float:left;
  font:900 3.2em/0.9 ui-serif, Georgia, "Times New Roman", Times, serif;
  margin:.05em .12em 0 0;
  color:var(--ink);
}
.rule{
  border:0;
  border-top:1px solid rgba(0,0,0,.08);
  margin:1.2rem 0;
}
.date{
  margin:.25rem 0 1rem;
  color:rgba(35,32,27,.68);
  font:750 .95rem/1.3 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.section-title{
  margin:1.2rem 0 .6rem;
  font:900 1.2rem/1.15 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing:.01em;
}
.banner{
  width:100%;
  height:auto;
  display:block;
  border:1px solid rgba(35,32,27,.12);
  margin:1rem 0 1.1rem;
}
.figure{margin:1rem 0}
.figure img{
  max-width:100%;
  height:auto;
  display:block;
  border:1px solid rgba(35,32,27,.12);
}
.figure--right{
  float:right;
  margin:0 0 1rem 1rem;
}
.blog-photos{
  list-style:none;
  padding:0;
  margin:1rem 0 0;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.blog-photos img{
  width:128px;
  height:128px;
  object-fit:cover;
  border:1px solid rgba(35,32,27,.12);
}
.quote{
  margin:1rem 0;
  padding:12px 14px;
  border:1px solid rgba(35,32,27,.12);
  background:rgba(255,255,255,.18);
  overflow:auto;
  font:700 .9rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space:pre;
}
.tags small{color:rgba(35,32,27,.7)}
.back{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font:750 .95rem/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:inherit;
  text-decoration:none;
  padding:.7rem .9rem;
  border:1px solid rgba(35,32,27,.18);
}
.back--spaced{margin-bottom:1.15rem}
.back:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

.footer{
  margin:0;
  color:var(--muted);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size:.9rem;
  text-align:center;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer p{
  margin:0;
  width:100%;
  text-align:center;
}
.footer a{color:inherit}

/* Reactions */
.band-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.band-title{
  margin:0;
  font:900 2.05rem/1.05 ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing:.01em;
}
.band-actions{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
}
.band-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1rem;
  border:1px solid rgba(35,32,27,.18);
  background:rgba(255,255,255,.18);
  font:850 .95rem/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  text-decoration:none;
  color:#23201b;
}
.band-link:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

.reactions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.reaction{
  all:unset;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(35,32,27,.18);
  background:rgba(255,255,255,.22);
  padding:8px 10px;
  font:850 .85rem/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#23201b;
  user-select:none;
}
.reaction:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.reaction.is-on{background:rgba(42,107,85,.18)}
.reaction.is-disabled{cursor:not-allowed; opacity:.55}
.reaction .emoji{font-size:1.05rem; line-height:1}
.reaction .count{min-width:1.2ch; text-align:right}
.reactions--full .reaction{padding:10px 12px; font-size:.9rem}
.reactions--full .reaction .emoji{font-size:1.15rem}

/* Livro (HTML puro, sem componente) */
.book{
  display:grid;
  grid-template-columns:18px 1fr;
  align-items:stretch;
  border:1px solid rgba(35,32,27,.16);
  overflow:hidden;
  background:rgba(255,255,255,.20);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  width:min(220px, 100%);
  aspect-ratio:4/5;
  margin:1.1rem 0;
}
.book__spine{
  background: #03A9F4;
}
.book__body{
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.book__title{
  margin:0;
  font:900 18px/1.08 ui-serif, Georgia, "Times New Roman", Times, serif;
}
.book__author{
  margin:6px 0 0;
  font:650 13px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:rgba(35,32,27,.7);
}
.book__cta{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(35,32,27,.18);
  padding:9px 11px;
  background:rgba(255,255,255,.22);
  font:800 13px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  text-decoration:none;
  color:#23201b;
}
.book__cta:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.book__arrows{letter-spacing:.06em}

@media (min-width: 900px){
  .site-title{font-size:3.8rem}
  .site-subtitle{font-size:1.7rem}
  .reader-title{font-size:2.9rem}
  .band-title{font-size:2.35rem}
}