@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700&family=Space+Mono:wght@400;700&display=swap');
*{ box-sizing: border-box; }
html, body{
  margin: 0;
  height: 100%;
  font-family: 'Space Mono', monospace;
  color: #2b2b1f;
  background: #f4ecd6;
}
.page{
  display: flex;
  height: 100%;
}
.page-left, .page-right{
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
  overflow-x: hidden;
}
.art-image{
  width: 100%;
  object-fit: cover;
  display: block;
  margin-bottom: 12px;
  height: 45%;
}
.entry-title{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.3em;
  text-align: center;
  margin: 6px 0 2px;
}
.entry-date{
  letter-spacing: 2px;
  font-size: 0.7em;
  color: #6b6242;
  text-align: center;
  margin-bottom: 14px;
}
.page-left p,
.page-right p{
  font-size: 0.78em;
  line-height: 1.7;
  text-align: justify;
  margin: 0 0 14px;
}
.squiggly{
  text-decoration: underline wavy #c0392b;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.shout{
  font-weight: 700;
  text-transform: uppercase;
}
mark{
  background: #f5b878;
  color: inherit;
  padding: 1px 6px;
  border-radius: 10px;
}
.cover-title{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 2em;
  margin: 10px 0 4px;
}
.cover-sub{
  letter-spacing: 3px;
  font-size: 0.8em;
  color: #6b6242;
  margin-bottom: 18px;
}
.cover-note{
  font-style: italic;
  font-size: 0.85em;
  color: #6b6242;
}

/* ═══════════════════════════════════════════════════
   noise noisy grain grainnny
   ═══════════════════════════════════════════════════ */


#noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; 
  height: 100vh; 
  pointer-events: none;
  z-index: 999999;
  background-image: url('img/ns02.png');
  background-repeat: repeat;
  background-size: auto;
  
  opacity: 0.12; 
}


/* ===== efeito dither ===== */
.dither-wrap{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.dither-wrap .art-image{
  filter: contrast(1.1) brightness(1.03);
}
.dither-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.85) 0px, rgba(0,0,0,0.85) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.85) 0px, rgba(0,0,0,0.85) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
  opacity: 0.18;
  pointer-events: none;
}