/* --- Classic Web Theme --- */
:root {
  --bg: #f0f0ff;
  --text: #000;
  --link: #0000ee;
  --link-visited: #551a8b;
  --accent: #0066cc;
  --panel: #fff;
  --border: #808080;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg) url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22%3E%3Crect width=%2224%22 height=%2224%22 fill=%22%23f0f0ff%22/%3E%3Cpath d=%22M0 24L24 0M-6 18L6 6M18 30L30 18%22 stroke=%22%23e8e8ff%22 stroke-width=%221%22/%3E%3C/svg%3E') fixed;
  color: var(--text);
  font-family: "Times New Roman", Times, serif;
}

.page {
  max-width: 860px;
  margin: 24px auto;
  padding: 0 12px;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: linear-gradient(#fff, #e6e6ff);
  border: 2px solid var(--border);
  box-shadow: inset 0 1px #fff, inset 0 -1px #c0c0ff, 0 2px 0 #c0c0c0;
}
.site-header .logo {
  width: 72px; height: 72px;
}
.site-header .site-title h1 {
  margin: 0;
  font-size: 32px;
}
.site-header .tagline {
  margin: 4px 0 0;
  color: #333;
}

.ticker {
  margin: 12px 0;
  background: #ffffcc;
  border: 2px ridge #ccaa00;
  padding: 6px 10px;
  color: #333;
}

.navbar {
  text-align: center;
  margin: 10px 0 16px;
}
.navbar a {
  color: var(--link);
  text-decoration: underline;
}
.navbar a:visited { color: var(--link-visited); }
.navbar .sep { color: #888; margin: 0 6px; }

.rainbow {
  height: 6px;
  border: 0;
  background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
  margin: 8px 0 16px;
}

.panel {
  background: var(--panel);
  border: 2px outset var(--border);
  padding: 12px;
  margin: 16px 0;
}
.panel h2 {
  margin-top: 0;
  border-bottom: 1px dotted #999;
}

blockquote {
  margin: 8px 0 0 0;
  padding: 8px 12px;
  background: #f8f8ff;
  border-left: 4px solid #c0c0ff;
  font-style: italic;
}

.star-list { list-style: none; padding-left: 0; }
.star-list li { padding-left: 18px; position: relative; margin: 6px 0; }
.star-list li::before {
  content: "★";
  position: absolute; left: 0; top: 0;
  color: #cc0000;
}

.badge-box { display: flex; gap: 8px; flex-wrap: wrap; }
.button {
  display: inline-block;
  padding: 6px 10px;
  background: linear-gradient(#fff, #e0e0ff);
  border: 2px outset var(--border);
  color: #000;
  text-decoration: none;
}
.button:active { border-style: inset; }

/* Work: timeline and projects */
.timeline { list-style: none; padding-left: 0; margin: 8px 0 16px; border-left: 3px double #999; }
.timeline li { margin: 10px 0 10px 12px; padding-left: 10px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 10px; height: 10px; background: #fff; border: 2px solid #666; border-radius: 50%; }
.timeline .period { font-family: monospace; background: #ffffdd; border: 1px solid #e0e0a0; padding: 0 4px; display: inline-block; }
.timeline .role { font-weight: bold; margin-top: 4px; }
.timeline .where { font-style: italic; }
.timeline .desc { color: #333; }
.timeline .role { display: block; }
.timeline .where { display: inline-flex; align-items: center; gap: 6px; }
.company-logo { width: 24px; height: 24px; object-fit: contain; image-rendering: auto; vertical-align: middle; }
/* inline MIT svg removed in favor of file */

.projects-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
  gap: 16px; 
  margin-top: 12px;
  align-items: stretch;
}

.project-card { 
  border: 3px outset #c0c0c0; 
  background: linear-gradient(135deg, #fff 0%, #f8f8ff 50%, #f0f0ff 100%);
  padding: 14px; 
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #d0d0d0, 2px 2px 4px rgba(0,0,0,0.3);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
  pointer-events: none;
}

.project-card h4 { 
  margin: 0 0 8px; 
  color: #000080;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
  border-bottom: 1px dotted #999;
  padding-bottom: 4px;
}

.project-card p {
  margin: 8px 0;
  color: #333;
  line-height: 1.4;
  flex-grow: 1;
}

.project-card .tags { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 4px; 
  margin: 10px 0 8px 0; 
}

.project-card .tags span { 
  border: 2px inset #e0e0e0; 
  background: linear-gradient(#fafafa, #e8e8e8);
  padding: 2px 8px; 
  font-size: 11px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: #004080;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-card .actions { 
  display: flex; 
  gap: 6px; 
  margin-top: auto;
  padding-top: 12px;
  justify-content: center;
}

.project-card .button {
  font-size: 12px;
  padding: 4px 12px;
  background: linear-gradient(#e6e6ff, #c8c8ff);
  border: 2px outset #a0a0ff;
  color: #000080;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-card .button:hover {
  background: linear-gradient(#f0f0ff, #d8d8ff);
}

.project-status {
  display: inline-block;
  padding: 3px 8px;
  margin: 6px 0;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  border: 2px inset #c0c0c0;
  background: linear-gradient(#f8f8f8, #e0e0e0);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.buttons-88 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.btn88 {
  display: inline-block;
  width: 88px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  background: linear-gradient(#333, #111);
  border: 1px solid #000;
}
.btn88:hover { filter: brightness(1.2); }

.guestbook fieldset { border: 2px groove var(--border); padding: 10px; }
.guestbook legend { padding: 0 6px; }
.guestbook label { display: block; margin: 8px 0; }
.guestbook input, .guestbook textarea { width: 100%; box-sizing: border-box; font-family: inherit; }
.guestbook button { margin-top: 6px; }

.site-footer {
  text-align: center;
  margin: 24px 0 12px;
  color: #333;
}
.hit-counter { font-family: monospace; letter-spacing: 2px; margin-bottom: 6px; }
.hit-counter .digit { display: inline-block; background: #000; color: #0f0; padding: 2px 4px; margin: 0 1px; }
.badges { margin-top: 6px; }
.badge { display: inline-block; border: 1px solid #999; background: #eee; padding: 2px 6px; margin: 2px; font-size: 12px; }
.updated { margin-top: 6px; font-size: 12px; color: #666; }

.webring { text-align: center; }
.webring .controls a { margin: 0 6px; }

/* Cookbook & Library */
.table-retro {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  border: 2px groove var(--border);
}
.table-retro th, .table-retro td {
  border: 1px solid #999;
  padding: 6px 8px;
}
.table-retro thead th {
  background: linear-gradient(#f8f8ff, #e6e6ff);
}
.table-retro.small td, .table-retro.small th { padding: 4px 6px; }

.stars { color: #cc0000; letter-spacing: 1px; }
.stars .off { color: #bbb; }

.book-list { list-style: none; padding: 0; }
.book-list li { display: grid; grid-template-columns: 2fr 1.2fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px dotted #aaa; }
.book-title { font-weight: bold; }
.book-author { color: #333; font-style: italic; }

/* Library shelf and scrollers */
.library-marquee { margin: 6px 0 8px; background: #f7f7ff; border: 1px solid #c9c9ff; padding: 4px 6px; }
.bookshelf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72px;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 4px;
  border: 2px inset var(--border);
  background: linear-gradient(#e6e6ff, #d8d8ff);
}
.book-spine {
  display: inline-block;
  height: 120px;
  width: 64px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  color: #fff;
  border: 2px ridge #333;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
  text-decoration: none;
  animation: shimmer 4s linear infinite;
}
.book-spine:hover { filter: brightness(1.1); }
.book-spine.red { background: linear-gradient(#b22222, #7f0000); }
.book-spine.blue { background: linear-gradient(#1e90ff, #004ea1); }
.book-spine.green { background: linear-gradient(#2e8b57, #1c5f3a); }
.book-spine.gold { background: linear-gradient(#f0c420, #b38b00); color: #301; }
.book-spine.teal { background: linear-gradient(#20b2aa, #0a6b66); }
.book-spine.maroon { background: linear-gradient(#800000, #4b0000); }
.book-spine.purple { background: linear-gradient(#6a5acd, #3e2f8f); }
.book-spine.brown { background: linear-gradient(#8b4513, #5a2d0c); }
.book-spine.navy { background: linear-gradient(#001f3f, #00112a); }
.book-spine.olive { background: linear-gradient(#808000, #505000); }

/* Cover tiles */
.bookshelf.covers { grid-auto-columns: 110px; gap: 10px; scroll-snap-type: x mandatory; }
.book-cover { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; scroll-snap-align: start; }
.cover-img { width: 100px; height: 150px; border: 2px ridge #333; box-shadow: 0 2px 0 #999; background: #ddd; }
.cover-title { max-width: 100px; text-align: center; font-size: 12px; }

@keyframes shimmer {
  0% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
  50% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
  100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
}

.scrollbox {
  max-height: 220px;
  overflow: auto;
  border: 2px groove var(--border);
  padding: 6px 8px;
  background: #fff;
  margin-top: 8px;
}

/* Athletics */
.medal { display: inline-block; padding: 2px 6px; border: 1px solid #444; color: #000; font-weight: bold; }
.medal.gold { background: linear-gradient(#ffd700, #e6c200); }
.medal.silver { background: linear-gradient(#c0c0c0, #a9a9a9); }
.medal.bronze { background: linear-gradient(#cd7f32, #b06a29); }
.log-list { list-style: none; padding: 0; }
.log-list .date { font-family: monospace; background: #ffffdd; border: 1px solid #e0e0a0; padding: 0 4px; margin-right: 6px; }

/* SVG medals */
.medals { align-items: center; justify-content: center; width: 100%; perspective: 600px; }
.medal-svg { width: 88px; height: 116px; display: inline-block; transform-style: preserve-3d; transform-origin: 50% 55%; animation: spinY 6s linear infinite; }

@keyframes spinY {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* Classic link styling */
a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover, a:focus { background: #ffff99; }

/* Blink text (nostalgia!) */
.blink { animation: blink 1s step-start infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.under-construction {
  margin-top: 10px;
  display: inline-block;
  padding: 12px 24px;
  background: repeating-linear-gradient(45deg, #ff0, #ff0 12px, #000 12px, #000 24px);
  color: #f94040;
  border: 3px inset #444;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* 88x31 Button styling */
.web88x31 img {
  margin: 2px;
  border: 1px solid #666;
  vertical-align: top;
}

/* Simple construction hammer animation */
.construction-worker {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 6px;
  vertical-align: middle;
  position: relative;
  background: linear-gradient(135deg, #ffcc00 0%, #ff9900 50%, #cc6600 100%);
  border: 2px solid #333;
  border-radius: 3px;
}

.construction-worker::before {
  content: "🔨";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  animation: hammerSwing 0.8s ease-in-out infinite;
}

@keyframes hammerSwing {
  0%, 100% { transform: translateY(-50%) rotate(-15deg) scale(1); }
  50% { transform: translateY(-50%) rotate(15deg) scale(1.1); }
}

/* Reduce motion opt-in */
@media (prefers-reduced-motion: reduce) {
  marquee { animation: none; }
  .medal-svg { animation: none; }
  .construction-worker::before { animation: none; }
}