:root{
  --bg:#eef1fa; --paper:#ffffff; --ink:#2b2340; --soft:#6d6787;
  --mint:#6fbf9e; --sun:#f6d365; --line:#d9def0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Nunito","Trebuchet MS",sans-serif; line-height:1.7; font-size:18px;
}
.wrap{max-width:680px; margin:0 auto; padding:0 20px 60px}
header{padding:48px 0 24px; text-align:center}
header h1{
  font-family:"Caveat","Comic Sans MS",cursive; font-size:3.4rem; margin:0; line-height:1;
}
header h1 a{color:var(--ink); text-decoration:none}
header p{margin:8px 0 0; color:var(--soft)}
nav{display:flex; gap:20px; justify-content:center; padding:10px 0 26px}
nav a{color:var(--ink); text-decoration:none; border-bottom:3px solid var(--sun)}
nav a:hover{border-color:var(--mint)}
article{
  background:var(--paper); border:2px solid var(--line); border-radius:14px;
  padding:26px 28px; margin-bottom:26px;
}
article h2{font-family:"Caveat","Comic Sans MS",cursive; font-size:2.2rem; margin:0 0 2px; line-height:1.1}
article h2 a{color:var(--ink); text-decoration:none}
.date{color:var(--soft); font-size:.9rem; margin:0 0 14px}
article img{max-width:100%; border-radius:10px}
a{color:#3f7f66}
.comments{margin-top:26px}
.comments h3{font-family:"Caveat","Comic Sans MS",cursive; font-size:1.8rem; margin:0 0 10px}
.comment{border-left:4px solid var(--mint); padding:6px 14px; margin:0 0 14px; background:#f7f9ff; border-radius:0 8px 8px 0}
.comment b{display:block; font-size:.9rem; color:var(--soft)}
footer{text-align:center; color:var(--soft); font-size:.85rem; padding-top:10px}

/* ---- the shaking word (links to the video) ---- */
.shake{color:inherit; text-decoration:underline dotted var(--soft); display:inline-block; cursor:default}
.shake:hover{
  animation:shake .28s infinite; color:#7a1f3d; text-decoration-color:#7a1f3d; cursor:pointer;
}
@keyframes shake{
  0%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-2px,1px) rotate(-3deg)}
  40%{transform:translate(2px,-2px) rotate(2deg)}
  60%{transform:translate(-1px,2px) rotate(-2deg)}
  80%{transform:translate(2px,1px) rotate(3deg)}
  100%{transform:translate(0,0) rotate(0)}
}

/* ---- text that appears / disappears (see script.js) ---- */
.late{opacity:0; transition:opacity 2.5s ease; pointer-events:none}
.late.show{opacity:1; pointer-events:auto}
.late.gone{opacity:0; transition:opacity 1.2s ease}

/* ---- video page ---- */
body.dark{background:#0d0b14; color:#cfc9e0}
body.dark video{width:100%; border-radius:6px; background:#000}
body.dark a{color:#9a93b5}

@media (prefers-reduced-motion:reduce){
  .shake:hover{animation:none}
  .late{transition:none}
}
@media (max-width:500px){ body{font-size:17px} header h1{font-size:2.8rem} article{padding:20px} }