/* ==== RESET & BASE ==== */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: system-ui, sans-serif; line-height: 1.5; }
body { margin:0; background:#ffffcc; }

/* ==== CONTAINER ==== */
.container { max-width: 900px; margin:0 auto; padding:0 1rem; }

/* ==== TYPOGRAPHY ==== */
h1 { font: 700 4rem/1.1 "Just Skinny", cursive, sans-serif; margin:0.5rem 0; }
.byline { font: 1.25rem/1.4 "Just Skinny", cursive, sans-serif; margin:0; }
h2 { font: 700 2rem/1.2 "Just Skinny", cursive, sans-serif; }

/* ==== HEADER ==== */
#titlewrap { text-align:center; padding:2rem 0; }
#titleing { max-width:90%; height:auto; display:block; margin:1rem auto; }

/* ==== DIVIDERS ==== */
.divider { border:none; height:2px; background:#555; margin:2rem 0; }

/* ==== COMIC ==== */
#comic-wrap { text-align:center; margin:2rem auto; }
#comic-date { 
  display:block; font-weight:700; color:#333; margin-bottom:.75rem; 
}
#comic {
  display:inline-block;
  max-width:95%;
  background:#fff;
  border:4px solid #555;
  border-radius:0;               /* square corners */
  padding:1rem;
  box-shadow:-8px 8px 0 #000;    /* your beloved shadow */
}
#comicpanel {
  display:block;
  max-width:100%;
  height:auto;
  box-shadow:0 4px 8px rgba(0,0,0,.15);
}

/* ==== SOCIAL GRID ==== */
.social-grid {
  display:flex; flex-wrap:wrap; gap:2rem; justify-content:center;
  margin:1.5rem 0;
}
.social-link {
  text-decoration:none; color:inherit; text-align:center; flex:1 1 180px;
}
.social-link img { max-width:80px; height:auto; margin-bottom:.5rem; }

/* ==== FOOTER ==== */
footer { padding:2rem 0; font-size:.9rem; }

/* ==== RESPONSIVE ==== */
@media (max-width: 600px) {
  h1 { font-size:2.8rem; }
  .social-grid { flex-direction:column; align-items:center; }
}