:root{
  --pad:24px;
  --gray:#666;
  --logo-h:182px;          /* logo height on desktop */
  --header-gap:28px;       /* space between logo and title */
}

/* ========== Base ========== */
*{ box-sizing:border-box }
html,body{ margin:0 }
body{
  font: clamp(15px,1.6vw,18px)/1.65 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#111;
}

/* ========== Header (normal block, scrolls away) ========== */
.masthead{
  background:#fff;         /* keeps header clean over content */
}
.masthead-inner{
  width:80%;
  max-width:1400px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:var(--header-gap);
  padding:14px 0;
}
.logo-top img{
  height:var(--logo-h);
  width:auto;
}
.site-hero{
  font-size:62px;
  font-weight:800;
  line-height:1.15;
  max-width:34ch;          /* wrap to ~2 lines */
}

/* ========== Main container ========== */
.container{
  width:80%;
  max-width:1400px;
  margin:16px auto 0;      /* small gap below header */
}

/* ========== Sections & Posts ========== */
.section-title{
  font-size:32px;
  margin:24px 0 0;
}
.post{
  margin:20px 0 60px;
  padding:28px;
  background:#f7f7f7;
  border:1px solid #e0e0e0;
  border-radius:14px;
  box-shadow:0 2px 4px rgba(0,0,0,0.04);
}
.post-title{
  font-size:22px;
  font-weight:700;
  margin:0 0 8px;
}
.post-meta{
  margin:0 0 20px;
  padding:0 0 10px;
  border-bottom:1px solid #ddd;
  color:var(--gray);
  font-style:italic;
}
.post-content{
  font-size:16px;
  line-height:1.65;
}
.post-content > *:last-child{ margin-bottom:0 }
.post-content ul{ margin:16px 0 16px 24px }

.embed-box{
  border:2px dashed #999;
  min-height:220px;
  padding:24px;
  text-align:center;
}

/* ========== Pagination ========== */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  list-style:none;
  padding:0;
  margin:36px 0 12px;
}
.page-item{ display:flex }
.page-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 14px;
  border:1px solid #e0e0e0;
  border-radius:9999px;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.page-link:hover{
  border-color:#111;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}
.page-item.active .page-link{
  background:#111;
  border-color:#111;
  color:#fff;
}
.page-item.disabled .page-link{
  opacity:.45;
  pointer-events:none;
}
.page-item .page-link span[aria-hidden="true"]{ font-weight:700 }

/* ========== Footer ========== */
.footer{
  border-top:1px solid #ddd;
  padding:16px var(--pad);
  color:var(--gray);
  text-align:center;
}

/* ========== Responsive (<= 900px) ========== */
@media (max-width:900px){
  :root{ --logo-h:72px; --header-gap:12px }

  .masthead-inner{
    width:100%;
    padding:10px 16px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .site-hero{
    font-size: clamp(22px,6vw,28px);
    max-width:100%;
  }

  .container{
    width:100%;
    padding:0 16px;
    margin-top:12px;
  }

  .section-title{
    font-size: clamp(18px,4.6vw,22px);
    margin:18px 0 6px;
  }

  .post{
    margin:22px 0;
    padding:18px;
    border-radius:12px;
  }
  .post-title{ font-size: clamp(17px,4.8vw,20px) }
  .post-meta{
    font-size:.9em;
    margin:0 0 14px;
    padding:0 0 8px;
  }
  .post-content{ font-size:.95em; line-height:1.6 }
  .embed-box{ min-height:140px; padding:14px }
}

/* ========== Extra-small (<= 360px) ========== */
@media (max-width:360px){
  .post{ padding:14px }
  .post-content{ font-size:.92em }
}

/* ========== Pagination mobile tweak (<= 700px) ========== */
@media (max-width:700px){
  .pagination{ gap:6px; margin:28px 0 8px }
  .page-link{ min-width:34px; height:34px; padding:0 10px }
}