* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #000080 radial-gradient(#ffffff 1px, transparent 1.5px) 0 0 / 37px 41px;
  color: #fff;
  font-family: "Times New Roman", Times, serif;
}

a { color: #ffff66; }
a:hover { color: #ff66ff; }

.page {
  max-width: 1000px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.comic { font-family: "Comic Sans MS", "Comic Neue", cursive; font-weight: bold; }

.site-title {
  font-size: 40px;
  line-height: 1.1;
  color: #ffff00;
  text-shadow: 3px 3px 0 #ff00ff;
  text-align: center;
  margin: 0;
  text-decoration: none;
}
.site-title:hover { color: #ffff00; }

.marquee {
  width: 100%;
  overflow: hidden;
  background: #000;
  border: 2px inset #c0c0c0;
  color: #00ff00;
  font: 14px "Courier New", monospace;
  padding: 3px 0;
  white-space: nowrap;
}
.marquee span { display: inline-block; padding-left: 100%; animation: mq 16s linear infinite; }

@keyframes mq { to { transform: translateX(-100%); } }
@keyframes blink { 50% { opacity: 0; } }

.updated { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.new { color: #ff0; font-weight: bold; animation: blink 1s steps(1) infinite; }

/* Main frame: sidebar + content */
.frame {
  width: 100%;
  display: grid;
  flex: 1;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 6px;
  padding: 6px;
  border: 3px ridge #c0c0c0;
  background: rgba(0, 0, 64, 0.85);
}
.sidebar {
  border: 2px groove #c0c0c0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: start;
}
.content { padding: 8px; font-size: 15px; line-height: 1.4; }

.photo {
  width: 100%;
  aspect-ratio: 1;
  border: 2px inset #c0c0c0;
  background: repeating-linear-gradient(45deg, #223 0 5px, #334 5px 10px);
  font: 10px ui-monospace, monospace;
  color: #aab;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  object-position: top;
}
.nav-title { color: #0ff; text-align: center; font-weight: bold; }

.btn {
  display: block;
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  text-align: center;
  font: bold 12px Arial, Helvetica, sans-serif;
  padding: 4px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { color: #000; background: #d4d4d4; }
.btn:active, .btn.active { border-style: inset; }
.btn.active { background: #ffff00; }
.btn.yellow { background: #ffff00; }

/* Content typography */
.h1 { font-size: 22px; color: #ff66ff; margin: 0; }
.h2 {
  font: bold 18px Arial, Helvetica, sans-serif;
  color: #0ff;
  border-bottom: 2px dashed #0ff;
  margin: 6px 0;
}
.content p { margin: 6px 0 12px; }
.content ul { margin: 0 0 12px; padding-left: 22px; }
.muted { color: #aaf; }
.small { font-size: 12px; }

/* 88x31 badges */
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  width: 88px;
  height: 31px;
  color: #fff;
  font: bold 10px Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  text-decoration: none;
}
.badge:hover { color: #fff; filter: brightness(1.15); }

/* Retro tables */
.table { width: 100%; border-collapse: collapse; border: 2px outset #c0c0c0; font-size: 14px; }
.table td, .table th { padding: 6px; border: 1px solid #808080; vertical-align: top; text-align: left; }
.table th { background: #c0c0c0; color: #000; font: bold 13px Arial, Helvetica, sans-serif; padding: 4px 6px; }
.num { text-align: right !important; font: bold 16px "Courier New", monospace; color: #0f0; }
.table th.num { font: bold 13px Arial, Helvetica, sans-serif; color: #000; }
.label { font: bold 13px Arial, Helvetica, sans-serif; color: #0ff; }

.writing-list { display: flex; flex-direction: column; gap: 6px; }
.writing-list .desc { font-size: 13px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.box {
  border: 2px groove #c0c0c0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  align-self: start;
}
.box input, .box textarea {
  border: 2px inset #c0c0c0;
  font: 13px "Times New Roman", Times, serif;
  padding: 2px 4px;
  width: 100%;
}
form.box { align-self: stretch; }
.row { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.row .btn { padding: 3px 10px; }

.cal-head { color: #ffff66; font-size: 14px; }
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font: 12px "Courier New", monospace;
}
.cal span { padding: 4px 0; border: 1px solid #808080; color: #557; }
.cal .dow { border: none; color: #0ff; font-weight: bold; }
.cal .blank { border: none; }
.cal .open { background: #000; color: #0f0; }
.cal .today { background: #ff00ff; color: #fff; }

/* Footer */
.counter { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.counter b {
  background: #000;
  color: #0f0;
  font: bold 16px "Courier New", monospace;
  padding: 1px 4px;
  border: 2px inset #888;
  letter-spacing: 2px;
}
.footer-links { font-size: 13px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.footer-links .guestbook { color: #ff66ff; }

/* Phones */
@media (max-width: 640px) {
  .page { padding: 16px 16px 20px; }
  .site-title { font-size: 28px; }
  .frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .sidebar .photo, .sidebar .nav-title { grid-column: 1 / -1; }
  .sidebar .photo { width: 160px; justify-self: center; }
  /* odd number of buttons: last one spans the full row */
  .sidebar .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .table { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee span { animation: none; padding-left: 8px; }
  .new { animation: none; }
}

/* Stats box */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 12px;
}
.stats div {
  background: #000;
  border: 2px inset #c0c0c0;
  padding: 6px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.stats b { font: bold 22px "Courier New", monospace; color: #0f0; }
.stats span { font-size: 12px; color: #aaf; }

.mobile-only { display: none; }
.table .when { white-space: nowrap; font-size: 13px; color: #aaf; }
.table th.when { color: #000; }

@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table .when { display: none; }
  .mobile-only { display: block; }
}