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

body{
  font-family:'Nunito',system-ui,sans-serif;
  background:#fdf6e3;
  color:#3b2412;
  line-height:1.7;
}

a{color:#b5451f;text-decoration:none;transition:color .2s}
a:hover{color:#d4652e;text-decoration:underline}

/* ── Header ── */
.header{
  background:linear-gradient(135deg,#d4883e 0%,#c04a1a 100%);
  text-align:center;
  padding:2rem 1.5rem 1.5rem;
  border-bottom:3px solid #8b3010;
}
.header img{
  width:100px;height:100px;
  border-radius:50%;
  border:3px solid #fdf6e3;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.header h1{
  font-family:'Righteous',cursive;
  font-size:1.8rem;
  color:#fdf6e3;
  margin-top:.8rem;
  letter-spacing:1px;
}
.header h1 a{color:#fdf6e3}
.header h1 a:hover{color:#ffd580;text-decoration:none}

/* ── Nav ── */
nav{
  background:#c04a1a;
  padding:.7rem 1.5rem;
  text-align:center;
  border-bottom:3px solid #8b3010;
  position:sticky;top:0;z-index:100;
}
nav a{
  color:#fdf6e3;
  margin:0 1.2rem;
  font-family:'Righteous',cursive;
  font-size:1.05rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:color .2s;
}
nav a:hover{color:#ffd580;text-decoration:none}
nav a.active{color:#ffd580}

/* ── Container ── */
.container{max-width:800px;margin:0 auto;padding:2rem 1.5rem}

/* ── Article ── */
article h1{
  font-family:'Righteous',cursive;
  font-size:1.6rem;
  color:#3b2412;
  margin-bottom:.5rem;
  letter-spacing:.5px;
}
article .meta{
  color:#a08060;
  font-size:.88rem;
  margin-bottom:1.5rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
}
article .content{color:#5c3d24;font-size:1rem}
article .content p{margin-bottom:1rem}
article .content h3{
  font-family:'Righteous',cursive;
  color:#8b3010;
  margin:1.5rem 0 .8rem;
  font-size:1.15rem;
  letter-spacing:.3px;
}
article .content ul,article .content ol{margin:0 0 1rem 1.5rem}
article .content li{margin-bottom:.3rem}
article .content img{max-width:100%;border-radius:8px;margin:1rem 0}
article .content blockquote{
  border-left:3px solid #c04a1a;
  padding:.5rem 1rem;
  margin:1rem 0;
  color:#7a5030;
  background:#fff8ee;
  border-radius:0 6px 6px 0;
}
article .content iframe{
  border-radius:8px;
  margin:1rem 0;
}
article .back-link{
  display:inline-block;
  margin-top:2rem;
  color:#c04a1a;
  font-weight:700;
  font-family:'Righteous',cursive;
  letter-spacing:.3px;
}
article .back-link:hover{color:#d4652e;text-decoration:none}

/* ── Page content (contact, etc.) ── */
.page-content{color:#5c3d24;font-size:1rem}
.page-content p{margin-bottom:1rem}
.page-content h2{
  font-family:'Righteous',cursive;
  color:#8b3010;
  margin:2rem 0 .8rem;
  font-size:1.35rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  border-bottom:2px solid #e0c9a6;
  padding-bottom:.4rem;
}
.page-content h3{
  font-family:'Righteous',cursive;
  color:#3b2412;
  margin:1.2rem 0 .6rem;
  font-size:1.1rem;
  letter-spacing:.3px;
}
.page-content ul{margin:0 0 1rem 1.5rem}
.page-content li{margin-bottom:.4rem}
.page-content strong{color:#3b2412}

/* ── Footer ── */
footer{
  background:#3b2412;
  text-align:center;
  padding:2rem;
  color:#d4b896;
  font-size:.85rem;
  border-top:4px solid #c04a1a;
  margin-top:2rem;
}
footer a{color:#ffd580;transition:color .2s}
footer a:hover{color:#ffe0a0;text-decoration:underline}

/* ── Responsive ── */
@media(max-width:600px){
  .header h1{font-size:1.4rem}
  .container{padding:1.2rem .8rem}
  nav a{margin:0 .5rem;font-size:.9rem}
  article h1{font-size:1.3rem}
}