/* ============================== Y2K SOCIAL PROFILE ==============================
   the aboutme page stylesheet. the crown jewel. the magnum opus.
   everything in here makes a div look like internet explorer 5.
   i am both proud and ashamed                                             === */

/* different background image for this page. the !important is because
   style.css sets the body bg and i need to override it. yes i know */
body {
  background-image: url(../assets/hero-img2.webp) !important;
}

/* ============================== NAVBAR OVERRIDES ========================== */
/* constrain the nav buttons to the same max-width as the page content
   so they don't stretch to the viewport edges on 1440p+ screens           === */

.page-aboutme .navbar-bg {
  /* push content inward so buttons stay within ~960px on wide screens,
     while the gradient background still bleeds edge-to-edge             */
  padding-left: max(6px, calc((100% - 960px) / 2));
  padding-right: max(6px, calc((100% - 960px) / 2));
}

.profile-page {
  max-width: 960px;
  margin: 0 auto;
  box-shadow: none;
  padding: 0;
  background: none;
}

/* -- the faux IE browser window. titlebar, toolbar, address bar, viewport,
   statusbar. the whole enchilada. it's not actually a browser obviously
   but if you squint it looks like one and that's good enough for me -- */
.browser-window {
  background: var(--win-surface);
  padding: 6px;
  margin-top: 16px;
  box-shadow: var(--win-shadow-raised);
  display: flex;
  flex-direction: column;
}

.browser-titlebar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-win98);
  font-weight: bolder;
  letter-spacing: 0.1em;
  background: var(--gradient-titlebar);
  color: white;
  padding: 4px 2px 4px 6px;
  margin-bottom: 2px;
  user-select: none;
}

.browser-titlebar img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.browser-titlebar-text {
  flex: 1;
  padding-left: 2px;
}

.browser-titlebar-controls {
  display: flex;
  gap: 2px;
}

.browser-titlebar-controls span {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--win-surface);
  border: none;
  box-shadow: inset 1px 1px white, inset -1px -1px black;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: black;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.browser-titlebar-controls span:hover {
  background-color: #e0e0e0;
}

.browser-titlebar-controls span:active {
  box-shadow: inset 1px 1px black, inset -1px -1px white;
  background-color: #d0d0d0;
}

.browser-titlebar-controls span.disabled {
  color: #777;
  cursor: not-allowed;
  background-color: #cfcfcf;
}

.browser-titlebar-controls span.disabled:hover,
.browser-titlebar-controls span.disabled:active {
  background-color: #cfcfcf;
  box-shadow: inset 1px 1px white, inset -1px -1px black;
}

.browser-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  background: var(--win-surface);
  border-bottom: 1px solid gray;
  font-family: var(--font-win98);
  font-size: 0.75rem;
}

.browser-toolbar-btn {
  padding: 2px 8px;
  font-family: var(--font-win98);
  font-size: 0.75rem;
  background-color: var(--win-surface);
  border: none;
  box-shadow: inset 1px 1px white, inset -1px -1px black;
  cursor: default;
  color: black;
}

.browser-toolbar-btn:active {
  box-shadow: inset 1px 1px black, inset -1px -1px white;
  background-color: #d0d0d0;
}

.browser-address-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: var(--win-surface);
  border-bottom: 1px solid gray;
  font-family: var(--font-win98);
  font-size: 0.8rem;
}

.browser-address-bar label {
  font-weight: bolder;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.browser-address-input {
  flex: 1;
  padding: 2px 4px;
  border: solid gray 2px;
  box-shadow: var(--win-shadow-inset);
  font-family: var(--font-win98);
  font-size: 0.8rem;
  background: white;
  color: black;
}

.browser-viewport {
  flex: 1;
  background: white;
  border: solid gray 2px;
  box-shadow: var(--win-shadow-inset);
  overflow-y: auto;
  padding: 0;
}

.browser-statusbar {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  margin-top: 2px;
  background: var(--win-surface);
  font-family: var(--font-win98);
  font-size: 0.75rem;
  color: black;
  gap: 8px;
}

.browser-statusbar span:first-child {
  flex: 1;
  border: solid gray 1px;
  box-shadow: inset 1px 1px gray;
  padding: 1px 4px;
  background: var(--win-surface);
}

.browser-statusbar-zone {
  border: solid gray 1px;
  box-shadow: inset 1px 1px gray;
  padding: 1px 8px;
}

/* -- the actual "webpage" content that lives inside the fake browser.
   it's a webpage inside a webpage. very inception of me -- */
.page-content {
  font-family: var(--font-body);
  color: #333;
  line-height: 1.6;
}

/* the blue profile banner at the top. like myspace but professional(ish) */
.page-profile-header {
  background: linear-gradient(180deg, #003366 0%, #006699 100%);
  color: white;
  padding: 20px 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.page-profile-header > * {
  position: relative;
  z-index: 1;
}

/* the tron grid behind the profile header. pure CSS ::after with perspective
   transforms. i spent way too long getting the angles right on this */
.page-profile-header::after {
  content: '';
  position: absolute;
  top: -200%;
  left: -40%;
  right: -40%;
  bottom: -60%;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 2px, transparent 2px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 2px, transparent 2px, transparent 48px);
  pointer-events: none;
  z-index: 0;
  transform: perspective(500px) rotateX(30deg) rotateZ(-14deg);
  transform-origin: center 100%;
}

.page-profile-header .profile-hero-pfp {
  border: 3px solid white;
  width: 160px;
  height: 160px;
  object-fit: cover;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  flex-shrink: 0;
  align-self: center;
}

.page-profile-header h1 {
  font-family: 'Georgia', serif;
  font-size: 2rem;
  margin: 0 0 4px 0;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.page-profile-header .profile-tagline {
  font-family: var(--font-body);
  font-size: 1rem;
  opacity: 0.9;
  margin: 0 0 10px 0;
  font-style: italic;
}

.page-profile-header dl {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 3px 14px;
  font-size: 0.85rem;
  margin: 0;
}

.page-profile-header dt {
  font-weight: bold;
  opacity: 0.8;
  white-space: nowrap;
}

.page-profile-header dd {
  margin: 0;
}

.page-profile-nav {
  background: #004477;
  display: flex;
  gap: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 2px solid #002244;
  flex-wrap: wrap;
}

.page-profile-nav a {
  padding: 7px 18px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-family: var(--font-win98);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-right: 1px solid rgba(255,255,255,0.15);
  transition: background 0.1s;
  cursor: pointer;
}

.page-profile-nav a:hover {
  background: rgba(255,255,255,0.2);
  color: white;
}

.page-profile-nav a.active {
  background: rgba(255,255,255,0.25);
  color: white;
  border-bottom: 2px solid white;
  font-weight: bold;
}

.page-profile-nav a.external-link {
  font-size: 0.75rem;
  opacity: 0.7;
  padding: 7px 12px;
}

.page-profile-nav a.external-link:hover {
  opacity: 1;
}

/* -- fake pages. each "page" is just a div that gets .active toggled by JS.
   it's a single-page app built entirely wrong and i love it -- */
.fake-page {
  display: none;
}

.fake-page.active {
  display: block;
  min-height: 500px;
}

/* section headings. georgia serif with a blue underline. very "web 1.0 personal site" */
.page-section {
  padding: 16px 24px;
  border-bottom: 1px solid #ddd;
  margin: 0 2px;
}

.page-section:last-child {
  border-bottom: none;
}

.page-section-title {
  font-family: 'Georgia', serif;
  font-size: 1.15rem;
  font-weight: bold;
  color: #003366;
  margin: 0 0 10px 0;
  padding-bottom: 4px;
  border-bottom: 2px solid #006699;
}

.page-section p {
  margin: 6px 0;
}

/* -- two-column layout. left sidebar is 280px, right takes the rest.
   like a newspaper except the news is about me -- */
.profile-columns {
  display: flex;
  gap: 0;
  align-items: stretch;
}

.profile-left {
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #f0f0f0;
  border-right: 1px solid #ddd;
}

.profile-left .page-section {
  padding: 12px 16px;
}

.profile-left .page-section-title {
  font-size: 0.95rem;
}

.profile-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width:800px;
  gap: 0;
  min-width: 0;
  background: white;
}

/* -- the interests/details table. very "about me" on a forum profile -- */
.profile-details-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.profile-details-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
  line-height: 1.4;
}

.profile-details-table td:first-child {
  font-weight: bold;
  white-space: nowrap;
  width: 70px;
  color: #555;
}

/* -- blinkies! the tiny pixelated badges. no personal site is complete
   without these. image-rendering: pixelated so they stay crunchy -- */
.blinkies-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.blinkies-row img {
  height: 20px;
  image-rendering: pixelated;
}

/* -- fake music player. green text on black background like a terminal.
   the text scrolls with a marquee animation. no actual audio plays.
   it's a vibe not a utility -- */
.music-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #1a1a2e;
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  border: 1px solid #333;
  overflow: hidden;
  max-width: 100%;
}

.music-player-label {
  color: #0f0;
}

.music-player-title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

.music-player-title span {
  display: inline-block;
  animation: marquee-scroll 12s linear infinite;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.music-player-controls {
  display: flex;
  gap: 3px;
}

.music-player-controls button {
  background: #333;
  color: #0f0;
  border: 1px solid #555;
  font-family: monospace;
  font-size: 0.65rem;
  padding: 1px 5px;
  cursor: pointer;
}

.music-player-controls button:hover {
  background: #444;
}

/* -- visitor counter. hardcoded to 000042 because it's the answer to
   everything and also because i don't have a backend -- */
.visitor-counter {
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  padding: 6px;
  background: #111;
  color: #0f0;
  border-top: 1px solid #333;
  letter-spacing: 2px;
}

/* -- maximize/close animations for the browser window.
   the close animation is 100ms of pure drama -- */
.browser-window.maximized {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  margin: 0;
  max-width: none;
}

.browser-window.maximized .browser-viewport {
  flex: 1;
}

.browser-window.closing {
  animation: win-close-snap 100ms steps(2, end) forwards;
}

@keyframes win-close-snap {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  70% {
    opacity: 1;
    transform: scale(0.985);
    filter: brightness(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(0.97);
    filter: brightness(0.7);
  }
}

.music-player-title span.paused {
  animation-play-state: paused;
}

/* -- steam image toggle. loads game icons from valve's CDN.
   respects privacy by not loading until you say so -- */
.steam-toggle-box {
  margin-top: auto;
  padding: 8px 10px;
  border-top: 1px solid #bbb;
  background: #e8e8e8;
  font-size: 0.72rem;
}

.steam-toggle-label {
  cursor: pointer;
  font-family: var(--font-win98);
  color: #000;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
}

.steam-toggle-label input[type="checkbox"] {
  margin: 0;
}

.steam-disclaimer {
  margin: 3px 0 0;
  font-size: 0.6rem;
  color: #555;
  line-height: 1.3;
}

/* -- the game explorer. a two-pane split view like windows explorer.
   left side = game list, right side = review. it took me forever
   to get this looking right and i'm still not entirely happy -- */
.game-explorer {
  display: flex;
  border: 2px solid;
  border-color: #808080;
  box-shadow: 1px 1px 0 #000, inset 2px 2px #fff;
  min-height: 360px;
  max-height: 520px;
  background: white;
  margin: 20px 0px;
}

/* left pane: the list of games with hours played. scrollable */
.game-list {
  flex: 0 0 220px;
  width: 220px;
  background: white;
  border-right: 2px solid #808080;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.game-list-header,
.game-detail-header {
  font-family: var(--font-win98);
  font-size: 0.72rem;
  color: #333;
  padding: 3px 8px;
  background: linear-gradient(180deg, #e8e8e8 0%, #d4d0c8 100%);
  border-bottom: 2px solid;
  border-bottom-color: #808080;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 #fff;
}

.game-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--font-win98);
  font-size: 0.8rem;
  color: #000;
  border-bottom: 1px dotted #ccc;
}

.game-list-item:hover {
  background: #e8e8f0;
}

.game-list-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-list-item small {
  font-size: 0.65rem;
  color: #888;
  white-space: nowrap;
}

.game-list-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: #c0c0c0;
  border: 1px solid #aaa;
  display: none;
}

.game-list-icon.loaded {
  display: block;
  background: none;
  border: none;
}

/* selected game gets that classic windows blue highlight. the little
   triangle before the name is content: '\25B8' which is ▸. unicode rules */
.game-list-item.selected {
  background: #0a246a;
  color: white;
}

.game-list-item.selected span::before {
  content: '\25B8\00a0';
}

.game-list-item.selected small {
  color: #aac;
}

/* yes i styled the scrollbar AGAIN. specifically for the game list. ocd */
.game-list::-webkit-scrollbar {
  width: 16px;
}

.game-list::-webkit-scrollbar-track {
  background: #c0c0c0;
  border-left: 1px solid #888;
}

.game-list::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 1px outset #fff;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
}

.game-list::-webkit-scrollbar-button {
  background: #c0c0c0;
  border: 1px outset #fff;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
  height: 16px;
}

/* right pane: the review + artwork. each game gets its own .game-detail div */
.game-detail-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
}

.game-detail {
  display: none;
  flex-direction: row;
  gap: 16px;
  padding: 16px 20px;
}

.game-detail.active {
  display: flex;
  flex: 1;
}

/* the actual review text and metadata */
.game-review-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* the tall game capsule art on the right. 2:3 aspect ratio like steam */
.game-artwork-sidebar {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.game-capsule {
  width: 150px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 2px solid #808080;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.15), inset 2px 2px #fff;
  background: #c0c0c0;
}

.game-capsule-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-win98);
  font-size: 0.72rem;
  color: #666;
  background: linear-gradient(135deg, #d4d0c8 0%, #c0c0c0 100%);
  letter-spacing: 0.3px;
  text-align: center;
  padding: 8px;
}

.game-capsule-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-capsule-img.loaded {
  display: block;
  filter: brightness(0.88) saturate(0.8);
}

.game-capsule-img.loaded + .game-capsule-placeholder {
  display: none;
}

.game-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--font-win98);
  font-size: 0.78rem;
}

.game-verdict {
  padding: 2px 8px;
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: 0.3px;
  border: solid black 1px;
}

.game-verdict.recommended {
  background: #90EE90;
}

.game-verdict.not-recommended {
  background: #FFB6C1;
}

.game-hrs {
  color: #666;
  font-family: var(--font-win98);
}

.game-early-access {
  color: #0066cc;
  font-size: 0.68rem;
  border: 1px solid #0066cc;
  padding: 1px 6px;
  font-family: var(--font-win98);
}

.game-review-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid #006699;
  font-style: italic;
  background: #fafaf5;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  flex: 1;
}

.game-steam-link {
  font-family: var(--font-win98);
  font-size: 0.68rem;
  color: #006699;
  text-decoration: none;
  text-align: center;
  line-height: 1.4;
}

.game-steam-link:hover {
  color: #003366;
  text-decoration: underline;
}

.backlog-list {
  padding-left: 8px;
  line-height: 1.8;
  list-style: none;
}

.backlog-list li {
  color: #555;
}

.backlog-list li::before {
  content: '\25B8\00a0';
  color: #888;
}

/* -- status badges. green = playing, pink = stalled. very traffic light -- */
.status-badge {
  font-family: var(--font-win98);
  font-size: 0.68rem;
  padding: 1px 8px;
  border: solid black 1px;
  font-weight: bold;
  letter-spacing: 0.3px;
  display: inline-block;
}

.status-badge.status-playing {
  background: #90EE90;
  color: #000;
}

.status-badge.status-stalled {
  background: #FFB6C1;
  color: #000;
}

/* -- the little status bar at the bottom of the game explorer.
   "9 games - 3,695 total hours" is concerning even to me -- */
.game-explorer-status {
  margin-top: auto;
  font-family: var(--font-win98);
  font-size: 0.65rem;
  color: #555;
  padding: 3px 8px;
  background: var(--win-surface);
  border-top: 2px solid;
  border-top-color: #808080;
  box-shadow: inset 0 1px 0 #fff;
}

/* -- mobile game explorer stacks vertically. art goes beside the review -- */
@media (max-width: 768px) {
  .game-explorer {
    flex-direction: column;
    min-height: auto;
    max-height: none;
  }
  .game-list {
    flex: none;
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 2px solid #888;
  }
  .game-detail {
    flex-direction: column;
  }
  .game-artwork-sidebar {
    flex: none;
    flex-direction: row;
    width: 100%;
    align-items: flex-start;
    gap: 12px;
  }
  .game-capsule {
    width: 100px;
    flex-shrink: 0;
  }
}

/* -- bookshelf. 2-column grid with alternating row backgrounds and
   little colored spines on the left. very cozy. very library -- */
.book-shelf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 12px;
}

.book-card {
  display: flex;
  gap: 12px;
  background: var(--win-surface-light);
  border: solid gray 1px;
  padding: 10px 12px;
  align-items: stretch;
  cursor: default;
}

.book-card:nth-child(odd) {
  border-right: none;
}

.book-card:nth-child(n+3) {
  border-top: none;
}

.book-card:nth-child(4n+3),
.book-card:nth-child(4n+4) {
  background: #f0f0f0;
}

.book-spine {
  flex: 0 0 8px;
  background: #444;
  border-radius: 1px;
  min-height: 40px;
}

@media (max-width: 768px) {
  .book-shelf {
    grid-template-columns: 1fr;
  }
  .book-card:nth-child(odd) {
    border-right: solid gray 1px;
  }
  .book-card:nth-child(n+2) {
    border-top: none;
  }
  .book-card:nth-child(even) {
    background: #f0f0f0;
  }
  .book-card:nth-child(odd) {
    background: var(--win-surface-light);
  }
}

.book-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.book-title {
  font-family: 'Georgia', serif;
  font-weight: bold;
  font-size: 1.02rem;
  color: #2a1a00;
}

.book-author {
  font-size: 0.82rem;
  color: #886644;
  font-style: italic;
}

.book-blurb {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #555;
  margin: 6px 0 0;
}

.book-progress {
  margin-top: 6px;
  height: 8px;
  background: #e0ddd4;
  border: 1px solid #bbb;
  overflow: hidden;
}

.book-progress-bar {
  height: 100%;
  background: linear-gradient(to right, #006699, #3399cc);
  transition: width 0.3s;
}

.book-progress-label {
  font-size: 0.72rem;
  color: #888;
  font-family: var(--font-win98);
  margin-top: 2px;
}

/* -- subpage sidebar layout used by music and musings pages.
   180px sidebar on the left, content takes the rest.
   kind of like windows explorer if you squint -- */
.subpage-columns {
  display: flex;
  gap: 0;
  align-items: stretch;
  min-height: 300px;
  width: 100%;
}

.subpage-sidebar {
  flex: 0 0 180px;
  width: 180px;
  background: #f0f0f0;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  font-family: var(--font-win98);
  font-size: 0.8rem;
}

.subpage-sidebar-header {
  font-size: 0.72rem;
  color: #333;
  padding: 3px 8px;
  background: linear-gradient(180deg, #e8e8e8 0%, #d4d0c8 100%);
  border-bottom: 2px solid #808080;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 #fff;
  font-weight: bold;
}

.subpage-sidebar-link {
  display: block;
  padding: 6px 10px;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.subpage-sidebar-link:hover {
  background: #e0e0e8;
}

.subpage-sidebar-link.active {
  background: #0a246a;
  color: white;
}

.subpage-sidebar-footer {
  padding: 10px;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  border-top: 1px solid #ddd;
  line-height: 1.4;
}

.subpage-sidebar-footer p {
  margin: 0;
}


.subpage-content {
  flex: 1;
  min-width: 0;
  min-height: 500px;
  background: white;
}

/* album toggle sits in the music sidebar. same idea as the steam toggle */
.subpage-sidebar .album-toggle-box {
  margin-top: 0;
  border: none;
  box-shadow: none;
}

/* music sections. JS toggles which one is visible */
.music-section {
  display: none;
}

.music-section.active {
  display: block;
}

/* musing entries. same deal. JS picks which one shows */
.musing-entry {
  display: none;
}

.musing-entry.active {
  display: block;
}

/* easter egg musing reveal. fades in from slightly below.
   the trigger is a near-invisible middot in the sidebar footer.
   you weren't supposed to find this */
.musing-entry.ee-revealed {
  display: block;
  animation: ee-fadein 1.2s ease forwards;
}

@keyframes ee-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.musing-ee-trigger {
  display: block;
  text-align: center;
  font-size: 0.55rem;
  color: rgba(0,0,0,0.04);
  cursor: default;
  user-select: none;
  padding: 3px 0 0;
  line-height: 1;
}


/* -- the musings page. made to look like a composition notebook.
   ruled lines, red margin, drop caps, the whole nine yards.
   this was one of those "what if i just..." moments at 2am -- */
#fp-musings .subpage-content {
  position: relative;
  background-color: #fefef6;
  background-image:
    repeating-linear-gradient(
      transparent,
      transparent 27px,
      #d0d0e0 27px,
      #d0d0e0 28px
    );
  background-position: 0 12px; /* offset matches .page-section padding-top so the 28px grid aligns */
}

/* push text to the right of the red margin line */
#fp-musings .subpage-content .page-section {
  padding-left: 60px;
  padding-top: 12px;
}

/* the red vertical margin line. every composition notebook has one */
#fp-musings .subpage-content::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 48px;
  width: 1px;
  background: #cc6666;
  z-index: 1;
  pointer-events: none;
}

/* relative positioning so the ink stamps can be positioned absolutely */
.musing-entry {
  position: relative;
}

/* italic georgia titles because we're writing in a diary here.
   line-height: 28px locks the title to exactly one ruled-line slot */
#fp-musings .page-section-title {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 28px;
  color: #1a1a4e;
  border-bottom: none;
  padding-bottom: 0;
  margin: 0;
  display: block;
}

/* the little date under each entry title.
   margin-bottom: 0 and line-height: 28px keep it on the ruled grid */
.musing-date {
  display: block;
  font-family: var(--font-win98);
  font-size: 0.68rem;
  line-height: 28px;
  color: #999;
  margin-bottom: 0;
  letter-spacing: 0.3px;
}

/* paragraphs are line-height: 28px to align with the ruled lines. math! */
#fp-musings .page-section p {
  text-indent: 1.5em;
  line-height: 28px;
  margin: 0;
  padding: 0;
}

#fp-musings .page-section p:first-of-type {
  text-indent: 0;
}

/* pull quotes. the fancy indented bits.
   no vertical margin/padding - keep everything on the 28px grid */
#fp-musings blockquote {
  border-left: 3px solid #8888aa;
  margin: 0 10px 0 0;
  padding: 0 12px;
  font-style: italic;
  color: #555;
  background: rgba(0,0,0,0.02);
  line-height: 28px;
}

/* faded red ink stamps in the corner. uses data-stamp attribute content.
   rotated -12deg because nothing in a real notebook is ever straight */
.musing-entry[data-stamp]::after {
  content: attr(data-stamp);
  position: absolute;
  top: 20px;
  right: 16px;
  font-family: var(--font-system);
  font-size: 1.8rem;
  color: rgba(180, 60, 60, 0.15);
  transform: rotate(-12deg);
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: bold;
}

/* drop cap on the first letter of each entry. very manuscript. very fancy */
.musing-entry .page-section p:first-of-type::first-letter {
  font-family: 'Georgia', serif;
  font-size: 2.8rem;
  float: left;
  line-height: 0.8;
  margin-right: 6px;
  margin-top: 4px;
  color: #1a1a4e;
  font-weight: bold;
}

/* the musings sidebar pretends to be a leather-bound journal spine.
   layered gradients doing the lord's work here. i stared at leather
   swatches on google images for way too long to get these browns right */
#fp-musings .subpage-sidebar {
  position: relative;
  background:
    repeating-linear-gradient(
      120deg,
      transparent 0px,
      transparent 2px,
      rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0.03) 4px
    ),
    linear-gradient(180deg, #5c3a1e 0%, #4a2e14 40%, #3d250f 100%);
  border-right: 3px solid #2a1a08;
  box-shadow: inset -2px 0 4px rgba(0,0,0,0.3);
}

/* fake stitching along the spine. dashed border doing all the work.
   it's the little details that nobody notices but i would know */
#fp-musings .subpage-sidebar::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 4px;
  width: 0;
  border-right: 1px dashed #8b6b4a;
  pointer-events: none;
}

#fp-musings .subpage-sidebar-header {
  background: linear-gradient(180deg, #4a3018 0%, #3a2210 100%);
  color: #e8d8c0;
  border-bottom: 2px solid #2a1a08;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

#fp-musings .subpage-sidebar-link {
  color: #f0e6d6;
  border-bottom: 1px solid #6b4a2a;
}

#fp-musings .subpage-sidebar-link:hover {
  background: rgba(255,255,255,0.1);
}

#fp-musings .subpage-sidebar-link.active {
  background: #2a1a08;
  color: #fff;
}

#fp-musings .subpage-sidebar-footer {
  color: #c8b89c;
  border-top: 1px solid #6b4a2a;
}

/* genre groups use real <fieldset> elements because win98 fieldsets
   looked like this. the border-color trick gives you that etched look
   without any extra elements. microsoft knew what they were doing sometimes */
.genre-group {
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 12px 16px;
  margin: 0;
}

.genre-group legend {
  font-family: var(--font-win98);
  font-size: 0.82rem;
  font-weight: bold;
  padding: 0 6px;
  color: #003366;
}

.genre-group p {
  margin: 0 0 8px;
  font-style: italic;
  color: #666;
  font-size: 0.88rem;
}

/* winamp playlists. green text on dark background. it really whips
   the llama's ass. if you know you know. if you don't then i'm sorry
   for your childhood */
.winamp-playlist {
  margin: 0 0 16px;
  border: 2px solid #000;
}

.winamp-titlebar {
  background: linear-gradient(90deg, #1a1a2e 0%, #2a2a4e 100%);
  color: #00ff00;
  font-family: var(--font-win98);
  font-size: 0.75rem;
  font-weight: bold;
  padding: 3px 8px;
  letter-spacing: 0.5px;
}

.winamp-tracklist {
  background: #0a0a1a;
  padding: 4px 0;
}

.winamp-track {
  font-family: var(--font-win98);
  font-size: 0.78rem;
  color: #ccffcc;
  padding: 2px 10px;
  line-height: 1.6;
}

.winamp-track:hover {
  background: #1a1a3e;
  color: #fff;
}

.winamp-num {
  color: #00aa00;
  display: inline-block;
  width: 20px;
  text-align: right;
  margin-right: 6px;
}

/* deep cuts section. the albums your friend with the weird taste
   would have recommended. flex layout with little badges */
.deep-cut {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

.deep-cut:last-child {
  border-bottom: none;
}

.deep-cut-badge {
  flex-shrink: 0;
  font-family: var(--font-win98);
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 2px 6px;
  background: #90EE90;
  border: solid black 1px;
  white-space: nowrap;
}

.deep-cut-info {
  flex: 1;
  min-width: 0;
}

.deep-cut-info b {
  font-size: 0.95rem;
  color: #003366;
}

.deep-cut-info p {
  margin: 4px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #555;
}

@media (max-width: 768px) {
  .subpage-columns {
    flex-direction: column;
  }
  .subpage-sidebar {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }
}

/* guestbook styling. win98 fieldset borders again because consistency
   is a virtue i occasionally practice */
.guestbook-group {
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 14px;
  margin: 8px 0;
}

.guestbook-group legend {
  font-family: var(--font-win98);
  font-size: 0.82rem;
  padding: 0 6px;
  color: #333;
}

/* tiny info bar text. 0.68rem is basically squinting */
.guestbook-info {
  font-family: var(--font-win98);
  font-size: 0.68rem;
  color: #888;
  text-align: right;
  margin-top: 4px;
}

/* property sheet overrides. the aboutme version of the skills tabs
   gets extra treatment because this page deserves nice things */
.page-section .prop-sheet {
  margin-top: 8px;
  position: relative;
  z-index: 0; /* stacking context so the language logo sits behind the body */
  overflow: visible;
}

/* hide the skill badges from the home page version. here we use
   the colored border instead because we're fancy like that */
.page-section .prop-sheet-panel .skill-badge {
  display: none;
}

/* thick colored top border on each panel. the color matches the language */
.page-section .prop-sheet-panel .panel-inset {
  border-top-width: 3px;
}

/* colored bars on top of each tab. like chrome tabs but in 1998.
   each language gets its brand color because branding matters even
   in a personal website that twelve people will see */
.page-section .prop-sheet > label {
  overflow: visible;
}

.page-section .prop-sheet > label::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 3px;
}

/* the actual colors. always visible no matter which tab is selected */
.page-section .prop-sheet > label[for="skill-cpp"]::before  { background-color: #00599C; }
.page-section .prop-sheet > label[for="skill-asm"]::before  { background-color: #008000; }
.page-section .prop-sheet > label[for="skill-html"]::before { background-color: #E44D26; }
.page-section .prop-sheet > label[for="skill-css"]::before  { background-color: #264DE4; }
.page-section .prop-sheet > label[for="skill-js"]::before   { background-color: #F7DF1E; }

/* language logos that peek out from behind the tab body. inline SVG
   data URIs because i'm not adding 5 image files for tiny logos.
   the drop-shadow gives them depth. they look like little stickers */
.page-section .prop-sheet::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 8px;
  width: 44px;
  height: 44px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0; /* behind the body so it peeks out from behind like a shy creature */
  pointer-events: none;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.25));
  opacity: 0.85;
}

/* c++ - bjarne would be proud. blue hexagon svg */
.page-section .prop-sheet > input[type="radio"]:nth-of-type(1):checked ~ .prop-sheet-body .panel-inset { border-top-color: #00599C; }
.page-section .prop-sheet:has(#skill-cpp:checked)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4L4 20v24l28 16 28-16V20L32 4z' fill='%2300599C'/%3E%3Cpath d='M32 8L8 22v20l24 14 24-14V22L32 8z' fill='%23004482'/%3E%3Ctext x='50%25' y='56%25' text-anchor='middle' font-family='Arial' font-weight='bold' font-size='20' fill='white'%3EC++%3C/text%3E%3C/svg%3E");
}

/* x86 asm - green chip icon. mov eax, drip */
.page-section .prop-sheet > input[type="radio"]:nth-of-type(2):checked ~ .prop-sheet-body .panel-inset { border-top-color: #008000; }
.page-section .prop-sheet:has(#skill-asm:checked)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='8' width='48' height='48' rx='4' fill='%23006600'/%3E%3Crect x='12' y='12' width='40' height='40' rx='2' fill='%23008800'/%3E%3Ctext x='50%25' y='42%25' text-anchor='middle' font-family='Courier New' font-weight='bold' font-size='11' fill='%2300ff00'%3Ex86%3C/text%3E%3Ctext x='50%25' y='68%25' text-anchor='middle' font-family='Courier New' font-weight='bold' font-size='11' fill='%2300ff00'%3EASM%3C/text%3E%3C/svg%3E");
}

/* html - the classic orange shield. the 5 is for html5 obviously */
.page-section .prop-sheet > input[type="radio"]:nth-of-type(3):checked ~ .prop-sheet-body .panel-inset { border-top-color: #E44D26; }
.page-section .prop-sheet:has(#skill-html:checked)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 4l4 48 20 12 20-12 4-48H8z' fill='%23E44D26'/%3E%3Cpath d='M32 10v46l14-8.4L49.6 10H32z' fill='%23F16529'/%3E%3Ctext x='50%25' y='60%25' text-anchor='middle' font-family='Arial' font-weight='bold' font-size='16' fill='white'%3E5%3C/text%3E%3C/svg%3E");
}

/* css - blue shield. the irony of hand-drawing the css logo in svg
   inside a css file is not lost on me */
.page-section .prop-sheet > input[type="radio"]:nth-of-type(4):checked ~ .prop-sheet-body .panel-inset { border-top-color: #264DE4; }
.page-section .prop-sheet:has(#skill-css:checked)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 4l4 48 20 12 20-12 4-48H8z' fill='%23264DE4'/%3E%3Cpath d='M32 10v46l14-8.4L49.6 10H32z' fill='%232965F1'/%3E%3Ctext x='50%25' y='60%25' text-anchor='middle' font-family='Arial' font-weight='bold' font-size='16' fill='white'%3E3%3C/text%3E%3C/svg%3E");
}

/* js - the yellow square. you know the one */
.page-section .prop-sheet > input[type="radio"]:nth-of-type(5):checked ~ .prop-sheet-body .panel-inset { border-top-color: #F7DF1E; }
.page-section .prop-sheet:has(#skill-js:checked)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23F7DF1E'/%3E%3Ctext x='62%25' y='72%25' text-anchor='middle' font-family='Arial' font-weight='bold' font-size='28' fill='%23333'%3EJS%3C/text%3E%3C/svg%3E");
}

/* text containers inside the fake pages. georgia font for that
   corporate mission statement energy */
.page-section .text-container {
  margin-bottom: 10px;
}

.page-section .text-container h3 {
  margin-top: 0;
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #003366;
}

/* cursor: help on album cards because hovering shows a tooltip.
   question mark cursor is the universal "there's more here" signal */
.album-card {
  cursor: help;
}

/* album art toggle checkbox. lets you load cover art from musicbrainz.
   hidden behind a toggle because external requests = privacy thing */
.album-toggle-box {
  margin-top: 14px;
  padding: 5px 8px;
  background: var(--win-surface);
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  font-size: 0.72rem;
}

.album-toggle-label {
  cursor: pointer;
  font-family: var(--font-win98);
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
}

.album-toggle-label input[type="checkbox"] {
  margin: 0;
}

.album-disclaimer {
  margin: 2px 0 0;
  font-size: 0.58rem;
  color: #888;
  line-height: 1.3;
}

/* album grid. 5 columns on desktop because i have a lot of albums
   and i'm not sorry about it */
.album-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 14px;
}

/* album card base styles. each card is a flex column with the
   sleeve on top and the label text below */
.album-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.album-sleeve {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border: solid gray 2px;
  box-shadow: var(--win-shadow-inset);
}

.album-art-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 2;
}

.album-art-img.loaded {
  display: block;
  filter: brightness(0.88) saturate(0.8);
}

.album-art-img.loaded + .album-art-placeholder {
  display: none;
}

.album-art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 8px;
  gap: 4px;
}

.placeholder-title {
  font-family: var(--font-win98);
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

.placeholder-artist {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-style: italic;
  opacity: 0.8;
}

.album-label {
  font-family: var(--font-win98);
  font-size: 0.68rem;
  line-height: 1.3;
  color: #333;
}

.album-label span {
  display: block;
  color: #666;
  font-size: 0.62rem;
}

/* vinyl sleeve variant. the record peeks out the right side like
   it's trying to escape. pure CSS disc with radial gradients.
   i am unreasonably proud of this one */
.album-vinyl {
  position: relative;
  z-index: 0; /* stacking context so the disc stays behind the sleeve but doesn't clip through the floor */
}

.album-vinyl .album-sleeve {
  position: relative;
  overflow: visible;
}

/* the actual vinyl disc. radial gradients for the grooves.
   positioned to peek out the right side of the sleeve */
.album-vinyl .album-sleeve::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  width: 90%;
  height: 90%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #333 30%, #1a1a1a 32%, #222 56%, #111 58%, #222 60%, #2a2a2a 100%);
  z-index: -1;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

/* the little center label on the record. the math to center this
   on the disc that's offset to the right was. an experience */
.album-vinyl .album-sleeve::after {
  content: '';
  position: absolute;
  /* disc is 90% wide offset 8px right, so center = right: calc(45% - 8px). geometry */
  top: 50%;
  right: calc(45% - 8px);
  width: 16px;
  height: 16px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #888 20%, #c0c0c0 22%, #aaa 80%, #999 100%);
  z-index: -1;
}

/* CD jewel case variant. the thick left border with a gradient
   simulates the plastic spine. border-image doing things i didn't
   know border-image could do */
.album-cd .album-sleeve {
  border-left: 8px solid;
  border-image: linear-gradient(180deg, #f0f0f0 0%, #aaa 15%, #e0e0e0 40%, #999 55%, #d8d8d8 75%, #bbb 100%) 1;
}

/* ghost of a disc visible through the clear plastic. barely there
   but if you remove it something feels wrong */
.album-cd .album-sleeve::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76%;
  height: 76%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.06);
  background: radial-gradient(circle, rgba(0,0,0,0.05) 28%, transparent 30%, rgba(0,0,0,0.03) 58%, transparent 60%);
  z-index: -2;
  pointer-events: none;
}

/* diagonal light streak across the jewel case. the subtle plastic
   reflection that makes it look 3D. z-index: 3 so it sits on top
   of the album art when loaded */
.album-cd .album-sleeve::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    transparent 30%,
    rgba(255,255,255,0.18) 40%,
    rgba(255,255,255,0.06) 46%,
    transparent 52%
  );
  z-index: 3;
  pointer-events: none;
}

/* responsive album grid. 5 → 4 → 3 → 2 columns as the screen shrinks.
   democracy dies in darkness but album grids die at 480px */
@media (max-width: 900px) {
  .album-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .album-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .album-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* guestbook form. the dream is that someone actually signs this
   one day. inputs styled to look like win98 text fields because
   everything must be consistent. the submit button is just .mybtn
   but rebuilt inline because i couldn't be bothered to import */
.guestbook-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.guestbook-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.guestbook-field label {
  font-family: var(--font-win98);
  font-size: 0.78rem;
  color: #333;
}

.guestbook-field input,
.guestbook-field textarea {
  padding: 3px 6px;
  border: solid gray 2px;
  box-shadow: var(--win-shadow-inset);
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: white;
  color: black;
  resize: vertical;
}

.guestbook-field textarea {
  min-height: 80px;
}

.guestbook-submit {
  align-self: flex-end;
  padding: 4px 20px;
  font-family: var(--font-win98);
  font-size: 0.8rem;
  background: linear-gradient(330deg, gray -95%, darkgray 0%, lightgray 45%);
  border: solid grey 2px;
  box-shadow: 1px 1px black, inset 2px 2px white;
  cursor: pointer;
}

.guestbook-submit:active {
  box-shadow: inset 2px 2px gray;
  border: solid black 2px;
  background: linear-gradient(330deg, lightgray -45%, gray 0%, darkgray 95%);
}

/* disabled state for the decorative-only guestbook. greyed out
   with a not-allowed cursor so it's clear nothing works here */
.guestbook-field input:disabled,
.guestbook-field textarea:disabled {
  background: #f0f0f0;
  color: #aaa;
  cursor: not-allowed;
}

.guestbook-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.guestbook-entries {
  margin-top: 0;
  background: white;
  min-height: 80px;
  padding: 12px;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
}

.guestbook-empty {
  font-family: var(--font-win98);
  font-size: 0.8rem;
  color: #888;
  text-align: center;
  padding: 24px;
}

/* individual signed entries. laid out like an old-school guestbook row.
   name on the left, date floated right, message below with a hairline divider */
.guestbook-entry {
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}
.guestbook-entry:last-child {
  border-bottom: none;
}
.guestbook-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.guestbook-entry-name {
  font-family: var(--font-win98);
  font-size: 0.8rem;
  font-weight: bold;
  color: #003388;
}
.guestbook-entry-name a {
  color: #003388;
}
.guestbook-entry-name a:hover {
  color: #cc0000;
}
.guestbook-entry-date {
  font-family: var(--font-win98);
  font-size: 0.7rem;
  color: #999;
}
.guestbook-entry-msg {
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
  color: #222;
  white-space: pre-wrap;
}

/* the classic win98 tooltip. pale yellow background, 1px black border.
   if you've used a computer before 2005 you know exactly what this looks
   like. z-index 10000 because it should be on top of literally everything */
.win98-tooltip {
  position: absolute;
  background: #ffffe1;
  border: 1px solid #000;
  padding: 3px 6px;
  font-family: var(--font-win98);
  font-size: 0.72rem;
  color: #000;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 10000;
  max-width: 280px;
  line-height: 1.4;
  white-space: normal;
}

/* subtle glow on the active navigation link. text-shadow doing
   the bare minimum to indicate "you are here" */
.page-profile-nav a.active {
  text-shadow: 0 0 6px rgba(255,255,255,0.4);
}

/* cursor: default because section titles aren't clickable and i want
   to make that very clear. managing expectations */
.page-section-title {
  cursor: default;
}

/* pointer cursor on game list items because they ARE clickable */
.game-list-item {
  cursor: pointer;
}

/* responsive overrides. profile columns stack vertically on mobile
   because two-column layouts on a phone are a crime against humanity */
@media (max-width: 768px) {
  .profile-columns {
    flex-direction: column;
  }
  .profile-left {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }
  .page-profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .page-profile-header dl {
    grid-template-columns: auto 1fr;
    text-align: left;
  }
  .page-profile-nav {
    flex-wrap: wrap;
  }
}