/* ====== Fonts ====== */
@font-face {
  font-family: "CaslonTitling";
  src: url("../fonts/caslon-titling.woff2") format("woff2"),
       url("../fonts/caslon-titling.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ====== Base / Background ====== */
html, body { height: 100%; margin: 0; }
body{
  background:
    #c0c0c0
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVR4nGNgQAAbDAYDNlkMCQAevADxoK8l9wAAAABJRU5ErkJggg==')
    repeat;
  /* Body uses a text serif, not Titling */
  font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  line-height: 1.55;
  color:#111;
}

/* Headings + logo use Caslon Titling */
h1, h2, h3, h4, h5, h6,
.post-title,
.logo {
  font-family: "CaslonTitling", Georgia, "Times New Roman", serif;
  letter-spacing: 0.5px;
}


/* Container frame */
.frame{
  max-width:980px; margin:16px auto; background:#fff;
  border:3px ridge #c0c0c0;
  box-shadow:0 0 0 4px #fff, 0 0 0 8px #c0c0c0;
  font-family: inherit; /* inherit from body */
}


/* Container frame */
.frame{
  max-width:980px; margin:16px auto; background:#fff;
  border:3px ridge #c0c0c0;
  box-shadow:0 0 0 4px #fff, 0 0 0 8px #c0c0c0;
  font-family:inherit; /* inherit site default */
}

/* ====== Header / Nav ====== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(#fdfdfd,#efefef);
  border-bottom:2px groove #c0c0c0;
}
.logo{
  font-family:'CaslonTitling', Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size:28px; letter-spacing:1px;
}
.logo span{ font-size:14px; vertical-align:super; }

.nav{ list-style:none; padding:0; margin:0; display:flex; gap:8px; }
.nav a{
  display:inline-block; padding:6px 10px;
  border:2px outset #bdbdbd; background:#f5f5f5;
  text-decoration:underline; color:#0000ee;
}
.nav a:visited{ color:#551A8B; }
.nav a:hover{ text-decoration:none; }
.nav a:active{ border-style:inset; }

.main{ padding:16px; }

/* ====== Hero ====== */
.hero{ display:grid; grid-template-columns:1.2fr 1fr; gap:16px; align-items:start; }
.hero h1{ font-size:36px; margin:0 0 8px; }
.hero h1 span{
  /* keep the playful color headline; remove if you want fully austere */
  background:linear-gradient(90deg,#ff6ad5,#6ad5ff);
  -webkit-background-clip:text; color:transparent;
}
.tag{ font-weight:bold; }
.pitch{ margin:10px 0 14px; }
.hit-counter{ display:flex; align-items:center; gap:8px; font-size:12px; }

/* ====== Faux marquee ====== */
.marquee{
  overflow:hidden; border:2px inset #bbb; padding:6px; background:#ffffe0;
  font-size:12px; white-space:nowrap;
}
.marquee span{ display:inline-block; padding-left:100%; animation:scroll 16s linear infinite; }
@keyframes scroll{ to{ transform:translateX(-100%); } }

/* Stickers */
.stickers{ display:flex; gap:8px; margin-top:8px; }
.stickers img{ image-rendering:pixelated; border:2px ridge #bdbdbd; }

/* ====== Lists / Archive ====== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.postlist{ list-style:none; padding:0; }
.postlist li{ margin:6px 0; }
.postlist small{ color:#333; margin-left:6px; }

/* ====== Posts ====== */
.post-head{ border-bottom:1px solid #ddd; margin-bottom:10px; }
.post-title{ font-size:28px; margin:0; }
.post-meta{
  font-family:"Courier New", Courier, monospace; /* retro byline */
  font-size:12px; color:#444;
}
.post-body p{ line-height:1.6; }

/* Code blocks */
code, pre{ font-family:"Courier New", Courier, monospace; }
pre{ background:#f7f7f7; padding:8px; border:1px solid #ddd; overflow:auto; }

/* ====== Buttons & badges ====== */
.btn{
  display:inline-block; padding:6px 10px;
  border:2px outset #bdbdbd; background:#f5f5f5;
  text-decoration:underline; color:#0000ee;
}
.btn:active{ border-style:inset; }
.badges{ display:flex; gap:6px; justify-content:center; }

/* ====== Footer (centered, 90s style) ====== */
.footer{
  padding:12px 16px; border-top:2px groove #c0c0c0; background:#f7f7f7; font-size:12px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.footer .copyright{ text-align:center; }

/* ====== Links ====== */
a{ color:#0000ee; text-decoration:underline; }
a:hover{ text-decoration:none; }
a:visited{ color:#551A8B; }

/* ====== giscus / embeds (ensure visible) ====== */
.giscus, #guestbook{ display:block; min-height:320px; }
.giscus-frame{ width:100%; }

/* ====== Helpers ====== */
/* Author list page links look like normal links but line up neatly */
ul.postlist a{ text-decoration:underline; }