/* Old-book / parchment look */
:root{
  --paper:#f6efe3;
  --ink:#2b220f;
  --accent:#d7c29a;
}
html,body{
  height:100%;
  margin:0;
  background: var(--paper);
  font-family: 'EB Garamond', 'Libre Baskerville', Georgia, serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{
  background-image: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.02) 100%);
}
.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4rem 1.5rem;
}
.text-wrap{
  max-width:900px;
  /* parchment / paper look built from layered gradients + ruled lines */
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(to bottom, rgba(60,80,100,0.06) 0 1px, transparent 1px 40px),
    radial-gradient(circle at 10% 10%, rgba(0,0,0,0.03), transparent 8%),
    radial-gradient(circle at 80% 40%, rgba(0,0,0,0.02), transparent 6%),
    linear-gradient(180deg, rgba(255,250,240,0.9), rgba(245,235,210,0.95));
  background-blend-mode: normal, multiply, multiply, normal;
  padding:3.6rem 3.4rem;
  /* leave space for a notebook margin and perforation */
  padding-left:64px;
  /* ruled lines start within the padding */
  background-position: 0 0;
  border-radius:10px;
  box-shadow: 0 12px 40px rgba(3,3,3,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
  border:1px solid rgba(80,60,30,0.06);
}
.lead{
  margin:0;
  /* Legible handwritten / printed-like look */
  font-family: 'Patrick Hand', 'Dancing Script', 'EB Garamond', 'Libre Baskerville', Georgia, serif;
  font-size:20px;
  line-height:1.75;
  letter-spacing:0.6px;
  text-align:justify;
  color:var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 6px 18px rgba(40,30,20,0.06);
  text-rendering:optimizeLegibility;
}

/* torn / perforated left edge to mimic a ripped notebook sheet */
.text-wrap::before{
  content:'';
  position:absolute;
  left:-22px;
  top:-6px;
  bottom:-6px;
  width:44px;
  pointer-events:none;
  /* repeating scallops to imitate torn/perforated edge */
  background-image: radial-gradient(circle at 10px 10px, var(--paper) 0 6px, transparent 6px 9px);
  background-repeat: repeat-y;
  background-size: 20px 20px;
  filter: drop-shadow(2px 0 2px rgba(0,0,0,0.05));
}

/* vertical margin rule (blue-ish) like notebook */
.text-wrap::after{
  content:'';
  position:absolute;
  left:44px;
  top:18px;
  bottom:18px;
  width:2px;
  background: linear-gradient(180deg, rgba(70,110,150,0.18), rgba(70,110,150,0.12));
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.credit{
  margin-top:1.2rem;
  font-size:13px;
  color: #5a4e3a;
}
/* Slightly larger on wider displays */
@media(min-width:900px){
  .lead{ font-size:22px; }
}
@media(min-width:1400px){
  .lead{ font-size:24px; }
}

/* Cursor trail elements */
.trail{
  position:fixed;
  pointer-events:none;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  mix-blend-mode:multiply;
  will-change:transform,opacity;
}
@keyframes trailFade{
  from{ opacity:0.95; transform:translate(-50%,-50%) scale(1); }
  to{ opacity:0; transform:translate(-50%,-50%) scale(2.2); }
}
/* subtle paper texture using pseudo-element on body */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image: radial-gradient(circle at 10% 10%, rgba(0,0,0,0.02), transparent 6%), radial-gradient(circle at 80% 40%, rgba(0,0,0,0.015), transparent 8%);
  opacity:0.9;
  pointer-events:none;
}