@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Playfair+Display:wght@400;500&display=swap');

:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #1c1c1e;
  --muted: #6e6e73;
  --accent: #3b82f6;
  --max-width: 720px;
}

body.dark {
  --bg: #0f1115;
  --surface: #16181d;
  --text: #e8e8ea;
  --muted: #9ca3af;
  --accent: #8ea6ff;
}

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

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.85;
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

.topbar {
  display: flex; justify-content: space-between; align-items:center;
  padding: 24px; max-width:1100px; margin:auto;
}

.site-title { font-family:'Playfair Display', serif; font-size:1.6rem; }
.theme-btn {
  background:transparent; border:1px solid var(--muted); color:var(--muted);
  border-radius:50px; padding:6px 14px; cursor:pointer;
}
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }

.container { max-width: var(--max-width); margin:40px auto 100px auto; padding:0 24px; }

/* Homepage links */
.piece-link {
  display:block; padding:22px 0; border-bottom:1px solid rgba(0,0,0,0.06); cursor:pointer;
  transition: color 0.2s ease;
}
body.dark .piece-link { border-bottom:1px solid rgba(255,255,255,0.08); }
.piece-link:hover { color: var(--accent); }
.piece-title { font-size:1.3rem; font-weight:500; }
.meta { font-size:0.95rem; color:var(--muted); margin-top:4px; }

/* Essay */
.reading .container { max-width:760px; }
.essay {
  font-family: 'Inter', sans-serif; font-size:1.15rem; letter-spacing:0.01em;
}
.essay h1 { font-family: 'Playfair Display', serif; font-size:2.5rem; margin-bottom:2rem; color: var(--accent); }
.essay h3 { font-size:1.4rem; margin:2rem 0 1rem; color: var(--accent); }
.essay p { margin-bottom:1.5rem; text-align: justify; text-justify: inter-word; }
.essay .intro { font-style: italic; background: rgba(124,156,255,0.08); padding:0.8rem 1rem; border-left:4px solid var(--accent); border-radius:6px; margin-bottom:2rem; }
.essay .corrections { background: rgba(124,156,255,0.06); padding:1rem 1.2rem; border-left:4px solid var(--accent); border-radius:6px; margin-top:2rem; list-style: disc; list-style-position: inside; }
.essay blockquote { margin:2rem 0; padding:1rem 1.2rem; border-left:4px solid var(--accent); background: rgba(124,156,255,0.05); font-style: italic; border-radius:5px; }

/* Back button */
.back { display:inline-block; margin-bottom:40px; color:var(--muted); cursor:pointer; }
.back:hover { color:var(--accent); }

/* Fade in */
.essay p, .essay h1, .essay h3, .essay .corrections { opacity:0; transform: translateY(15px); animation:fadeInUp 0.7s ease forwards; }
@keyframes fadeInUp { to { opacity:1; transform:translateY(0); } }

/* LIS piece unique styling */
.lis-piece { --accent:#7c9cff; }

/* Responsive */
@media (max-width:768px) { html{font-size:16px;} .essay h1{font-size:2rem;} .essay p{font-size:1.08rem;} .essay h3{font-size:1.2rem;} }
@media (max-width:480px){html{font-size:15px;}}

/* ===== Fun Reading Enhancements ===== */
.lis-piece article {
  background: rgba(255,255,255,0.03);
  padding: 2rem 1.5rem;
  border-radius: 12px;
}

.lis-piece section {
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(124,156,255,0.1);
}

.lis-piece .highlight {
  background: rgba(124,156,255,0.15);
  padding: 0.1rem 0.3
}


/* ======================== */
/* LIS Piece Fun Enhancements (No Drop Caps) */
/* ======================== */

/* Cards for sections */
.lis-piece section {
  background: rgba(255,255,255,0.04);
  padding: 1.8rem 2rem;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lis-piece section:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

/* Highlight key sentences */
.lis-piece .highlight {
  background: rgba(124,156,255,0.25);
  padding: 0.12rem 0.3rem;
  border-radius: 4px;
  font-weight: 500;
}

/* Callout / spoiler boxes */
.lis-piece .callout {
  display: inline-block;
  background: rgba(255,107,107,0.12);
  border-left: 4px solid #ff6b6b;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  color: #ff6b6b;
  font-weight: 500;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

/* Badges for endings */
.lis-piece .badge {
  display: inline-block;
  background: #ff6b6b;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  margin-right: 0.5rem;
}

/* Staggered fade-in for sections */
.lis-piece section {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.8s ease forwards;
}
.lis-piece section:nth-child(1){animation-delay:0.2s;}
.lis-piece section:nth-child(2){animation-delay:0.4s;}
.lis-piece section:nth-child(3){animation-delay:0.6s;}
.lis-piece section:nth-child(4){animation-delay:0.8s;}
.lis-piece section:nth-child(5){animation-delay:1s;}
@keyframes fadeUp {
  to { opacity:1; transform: translateY(0); }
}

/* Alternating subtle backgrounds for easier eye tracking */
.lis-piece section:nth-child(odd) { background: rgba(255,255,255,0.03); }
.lis-piece section:nth-child(even){ background: rgba(255,255,255,0.06); }

/* Smooth link styling */
.lis-piece a {
  color: var(--accent);
  text-decoration: underline dotted;
  transition: color 0.2s ease;
}
.lis-piece a:hover {
  color: #fff;
}

/* Paragraph spacing for breathing room */
.lis-piece p {
  margin-bottom: 1.8rem;
}

/* Responsive tweaks */
@media (max-width:768px){
  .lis-piece section { padding: 1.4rem 1.6rem; }
  .lis-piece .badge { font-size: 0.85rem; padding:0.2rem 0.5rem; }
}

/* Easter egg / thank you section */
.lis-piece .easter-egg {
  background: rgba(124,156,255,0.07);
  border-left: 4px solid var(--accent);
  padding: 1.5rem 2rem;
  border-radius: 12px;
  text-align: center;
  font-style: italic;
}

.lis-piece .easter-egg a {
  color: var(--accent);
  text-decoration: underline;
}

.lis-piece .easter-egg .small-print {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.8rem;
}