/* ===========================================================
   Personal Site — "Scrapbook" design system
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  --paper: #DFF0F9;
  --paper-alt: #CBE7F5;
  --ink: #232323;
  --ink-soft: #5B5F6B;
  --red: #E52521;
  --red-deep: #E0115F;
  --blue: #049CD8;
  --blue-deep: #4C5FD5;
  --gold: #FBD000;
  --gold-deep: #FF9F1C;
  --green: #43B047;
  --green-deep: #16C79A;
  --white: #EEF8FC;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(35, 35, 35, 0.10);
  --shadow-lift: 0 12px 28px rgba(35, 35, 35, 0.16);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Reserves the vertical scrollbar's width on every page, whether or
     not that page's content is actually tall enough to need
     scrolling. Without this, a short page (Trail Log with 1 hike,
     Videos with 1 video) renders with no scrollbar while every longer
     page does, and centered content - including the nav bar, which is
     identical HTML injected by nav.js on every page - shifts a few
     pixels right on the short pages to fill the space the missing
     scrollbar would have taken. This keeps the available width
     consistent everywhere instead. */
  overflow-y: scroll;
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(45deg, rgba(35,35,35,0.11) 0, rgba(35,35,35,0.11) 1px, transparent 1px, transparent 10px);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.55;
}

h1, h2, h3, .display {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.4em 0;
}

.label, .tag, time, .meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

a { color: inherit; }

img, video { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Layout shell ---------- */

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-wide {
  max-width: 1400px;
}

/* ---------- Nav: color-tabbed like sticky notes ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(45deg, rgba(35,35,35,0.11) 0, rgba(35,35,35,0.11) 1px, transparent 1px, transparent 10px);
  border-bottom: 3px solid var(--ink);
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.nav-tab {
  text-decoration: none;
  font-family: 'Space Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 8px 8px 2px 2px;
  padding: 8px 14px;
  transform: rotate(-1deg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 3px 3px 0 var(--ink);
}

.nav-tab:nth-child(8n+1) { background: var(--red); transform: rotate(-1.5deg); }
.nav-tab:nth-child(8n+2) { background: var(--blue); transform: rotate(1deg); }
.nav-tab:nth-child(8n+3) { background: var(--gold); transform: rotate(-0.5deg); }
.nav-tab:nth-child(8n+4) { background: var(--green); transform: rotate(1.5deg); }
.nav-tab:nth-child(8n+5) { background: var(--red-deep); transform: rotate(-1deg); }
.nav-tab:nth-child(8n+6) { background: var(--blue-deep); transform: rotate(0.5deg); }
.nav-tab:nth-child(8n+7) { background: var(--gold-deep); transform: rotate(-1.5deg); }
.nav-tab:nth-child(8n+8) { background: var(--green-deep); transform: rotate(1deg); }

.nav-tab:hover, .nav-tab:focus-visible {
  transform: translateY(-3px) rotate(0deg);
  box-shadow: 4px 6px 0 var(--ink);
}

.nav-tab[aria-current="page"] {
  background: var(--ink);
  color: var(--white);
}

/* ---------- Section header (used on interest pages) ---------- */

.page-header {
  padding: 48px 0 0;
  margin-bottom: 8px;
}

/* Pages whose header is followed directly by an intro paragraph (like
   Gaming, Movies, Books) already get natural breathing room from that
   paragraph's own spacing. Pages that jump straight from the header
   into tabs, a table, a poster-grid, or an article (Blog, Photos,
   Music, Golf, Trail Log, Videos) don't have that same buffer, and a
   bordered/boxed element sitting right under the tightened header
   looks noticeably more cramped than flowing text does at the same
   gap - so this adds it back, just for those non-paragraph cases.
   HTML comments between .page-header and the real first element
   (several pages have a "HOW TO ADD" instructional comment there)
   don't count as elements, so this still correctly targets the first
   actual thing on the page either way. */
.page-header + *:not(p) {
  margin-top: 24px;
}

/* Same stroke treatment "MikeSpace" uses in the footer - works well
   here since these titles are short single words (Golf, Music,
   Photos), unlike the blog hero card's title, which was kept
   stroke-free since a real post title there can run to a full
   sentence. margin-bottom overrides the base h1 rule's 0.4em - that's
   proportional to font-size, so it grew right along with the bigger
   size set here, adding extra gap beyond what .page-header's own
   spacing above controls. */
.page-header h1 {
  font-size: clamp(2.8rem, 6vw, 4rem);
  -webkit-text-stroke: 1.5px var(--ink);
  margin-bottom: 8px;
}

/* Each page's title now uses the exact same raw color as that page's
   own nav-tab (see .nav-tab:nth-child), using :has() to target by
   page rather than needing a class added to all 8 individual h1 tags.
   Some of these fail WCAG contrast pretty badly as large text on
   their own against this page's pale background - gold measured
   1.27:1, nowhere near the 3:1 minimum for large text - and were
   darkened through a couple of rounds to compensate before the black
   stroke below existed. Once the stroke was in place and doing real
   edge-definition work, explicitly reverted back to matching the
   raw nav-tab colors exactly, prioritizing brightness/vibrancy over
   the contrast target - a deliberate choice, not an oversight. If a
   page's nav "data-current" value or its nav-tab color ever changes,
   update the matching line here too. */
body:has(.site-nav[data-current="blog"]) .page-header h1 { color: var(--blue); }
body:has(.site-nav[data-current="photos"]) .page-header h1 { color: var(--gold); }
body:has(.site-nav[data-current="hikes"]) .page-header h1 { color: var(--green); }
body:has(.site-nav[data-current="gaming"]) .page-header h1 { color: var(--red-deep); }
body:has(.site-nav[data-current="music"]) .page-header h1 { color: var(--blue-deep); }
body:has(.site-nav[data-current="golf"]) .page-header h1 { color: var(--gold-deep); }
body:has(.site-nav[data-current="movies"]) .page-header h1 { color: var(--green-deep); }
body:has(.site-nav[data-current="books"]) .page-header h1 { color: var(--red); }
body:has(.site-nav[data-current="videos"]) .page-header h1 { color: var(--blue); }

.page-header .label {
  display: inline-block;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  margin-bottom: 10px;
}

/* ---------- Interest grid on the homepage ---------- */

.interest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 12px 0 32px;
}

.interest-card {
  position: relative;
  text-decoration: none;
  color: var(--ink);
  background: #EEF8FC;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  transform: rotate(0deg);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* A slight alternating tilt, like photos scattered on a corkboard -
   same idea as the polaroid galleries, just more subtle since these
   cards carry more text than a photo does. */
.interest-card:nth-child(4n+1) { transform: rotate(-1deg); }
.interest-card:nth-child(4n+2) { transform: rotate(0.8deg); }
.interest-card:nth-child(4n+3) { transform: rotate(-0.6deg); }
.interest-card:nth-child(4n+4) { transform: rotate(1deg); }

.interest-card:hover, .interest-card:focus-visible {
  transform: translateY(-6px) rotate(0deg) scale(1.02);
  box-shadow: 8px 10px 0 var(--ink);
}

.interest-card h3 { font-size: 1.25rem; margin-bottom: 6px; }
.interest-card p { margin: 0; color: var(--ink); font-size: 0.95rem; }

/* Card accent bars AND matching pastel backgrounds. Grid order is
   Photos, Trail Log, Gaming, Music, Golf, Movies, Books, Videos (see
   index.html) in a 4-column layout, so positions 4 apart (1&5, 2&6,
   3&7, 4&8) land in the same column on row 2 - colors are ordered so
   none of those pairs share a family (e.g. blue/blue-deep), which an
   earlier version got wrong (Photos/Golf both blue, etc. - visibly
   made each column look monochrome). No longer a 1:1 match to each
   section's own nav-tab color because of this reordering. If the card
   order in index.html changes, re-check this same 4-apart rule before
   just reassigning colors sequentially again. Background tints are
   solid pre-blended colors (10% accent color mixed into white), not a
   transparent rgba - the page's own striped background would
   otherwise show through inconsistently. */
.interest-card:nth-child(8n+1) { border-top: 8px solid var(--blue); background: #E6F5FB; }        /* Photos */
.interest-card:nth-child(8n+2) { border-top: 8px solid var(--gold-deep); background: #FFF5E8; }   /* Trail Log */
.interest-card:nth-child(8n+3) { border-top: 8px solid var(--green); background: #ECF7ED; }       /* Gaming */
.interest-card:nth-child(8n+4) { border-top: 8px solid var(--red-deep); background: #FCE7EF; }    /* Music */
.interest-card:nth-child(8n+5) { border-top: 8px solid var(--gold); background: #FFFAE6; }        /* Golf */
.interest-card:nth-child(8n+6) { border-top: 8px solid var(--blue-deep); background: #EDEFFB; }   /* Movies */
.interest-card:nth-child(8n+7) { border-top: 8px solid var(--red); background: #FCE9E9; }         /* Books */
.interest-card:nth-child(8n+8) { border-top: 8px solid var(--green-deep); background: #E8F9F5; }  /* Videos */

/* ---------- Homepage card double-link pattern ----------
   Each "Latest Updates" card (index.html) has TWO links stacked on
   top of each other: a full-card "catch-all" (goes to the category
   page) underneath, and a smaller one wrapping just the image/caption
   (goes straight to that specific item) on top.

   Both pointer-events AND z-index matter here, not just one:
   - pointer-events:none on the h3/[data-latest] wrapper stops THEM
     from being click targets, so a click over plain text/whitespace
     falls through to the catch-all beneath.
   - z-index is what actually lets .latest-update-link win where it
     overlaps the catch-all. .interest-card-catchall is
     position:absolute, which by itself already paints above ordinary
     static content — so .latest-update-link needs its OWN position +
     a higher z-index to sit above the catch-all specifically, not
     just above plain unpositioned text. Without that, the catch-all
     would win every click even over the image, regardless of
     pointer-events. */

.interest-card-catchall {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.interest-card h3,
[data-latest] {
  pointer-events: none;
}

.latest-update-link {
  position: relative;
  z-index: 2;
  display: block;
  pointer-events: auto;
  text-decoration: none;
  color: inherit;
}

/* ---------- Homepage "Latest Updates" card picture + caption ---------- */

.latest-update-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 8px;
  margin-top: 10px;
  box-shadow: var(--shadow);
}

.latest-update-caption {
  margin: 10px 0 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.4;
}

.latest-update-empty {
  margin: 10px 0 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- Split section (side-by-side columns, e.g. Movies / TV Shows) ---------- */

.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 700px) {
  .split-section {
    grid-template-columns: 1fr;
  }
}

/* ---------- Polaroid photo gallery (travel / hiking) ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  padding: 12px 0 56px;
  /* Keeps each card sized to its own content rather than stretched to
     match the tallest card in its row — matters since caption length
     varies (a 2-line title vs. a 1-line one). */
  align-items: start;
}

@media (max-width: 700px) {
  .gallery {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Not just "a.polaroid" anymore — album cover cards on photos.html are
   plain clickable divs now (they expand in place rather than
   navigating away), while individual album pages may still use a real
   <a>. This rule covers both. */
.gallery .polaroid {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ---------- Photo album preview overlay (photos.html) ----------
   Distinct from .lightbox-overlay (used for cycling real photos on
   individual album pages) — this is a separate component on purpose,
   since the content is different (one enlarged cover + blurb + a link
   button, no prev/next cycling). Visual language matches the lightbox
   for consistency, but the two never coexist on the same page. */

.album-preview-trigger {
  cursor: pointer;
}

.album-preview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(35, 35, 35, 0.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 20px;
}

.album-preview-overlay.is-open {
  display: flex;
}

.album-preview-columns {
  display: flex;
  gap: 32px;
  max-width: min(92vw, 1200px);
  width: 100%;
  align-items: flex-start;
}

.album-preview-col-left {
  flex: 0 0 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.album-preview-col-right {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
  text-align: left;
  color: var(--white);
}

@media (max-width: 700px) {
  .album-preview-columns {
    flex-direction: column;
    align-items: center;
  }
  .album-preview-col-left {
    flex-basis: auto;
    width: 100%;
  }
}

.album-preview-media-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.album-preview-media-link:hover .album-preview-img {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.album-preview-media-link:hover .album-preview-title {
  color: var(--blue);
}

.album-preview-img {
  width: 100%;
  max-height: 65vh;
  object-fit: cover;
  border: 4px solid var(--white);
  border-radius: 4px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.album-preview-title {
  font-family: 'Baloo 2', sans-serif;
  color: var(--white);
  margin: 16px 0 0;
  transition: color 0.15s ease;
}

.album-preview-blurb {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.album-preview-link {
  display: inline-block;
  background: var(--white);
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid var(--ink);
  margin-top: 14px;
}

.album-preview-link:hover {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

.album-preview-close {
  position: absolute;
  top: 20px;
  right: 28px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

.album-preview-close:hover {
  background: var(--red);
}

/* ---------- Game preview overlay (gaming.html) ----------
   Same two-column shape as .album-preview-overlay, but its own
   component — see the render-grid.js comment on ensureGamePreviewOverlay
   for why these aren't unified into one generic overlay. No link
   button here (unlike Photos) — individual per-game pages don't exist
   anymore, so there's nowhere else to send you. */

.game-preview-trigger {
  cursor: pointer;
}

.game-preview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(35, 35, 35, 0.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 20px;
}

.game-preview-overlay.is-open {
  display: flex;
}

.game-preview-columns {
  display: flex;
  gap: 32px;
  max-width: min(92vw, 1200px);
  width: 100%;
  align-items: flex-start;
}

.game-preview-col-left {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.game-preview-col-right {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
  text-align: left;
  color: var(--white);
}

@media (max-width: 700px) {
  .game-preview-columns {
    flex-direction: column;
    align-items: center;
  }
  .game-preview-col-left {
    flex-basis: auto;
    width: 100%;
  }
}

.game-preview-img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 4px solid var(--white);
  border-radius: 4px;
  box-shadow: var(--shadow);
}

/* Same per-platform colors already used for the gaming detail-list
   title text (.gaming-detail-title.platform-text-*) — reused here so
   a game's platform reads consistently everywhere it shows up on the
   site, not just in one place. Only overrides border-color; width/
   style stay the same 4px solid set above. */
.game-preview-img.platform-border-xbox { border-color: #107C10; }
.game-preview-img.platform-border-switch { border-color: #E60012; }
.game-preview-img.platform-border-ps5 { border-color: #0070D1; }
.game-preview-img.platform-border-3ds { border-color: #C40057; }
.game-preview-img.platform-border-steam { border-color: #2A6FB0; }
.game-preview-img.platform-border-wiiu { border-color: #009AC7; }
.game-preview-img.platform-border-ps2 { border-color: #003791; }
.game-preview-img.platform-border-gamecube { border-color: #6B3FA0; }
.game-preview-img.platform-border-ps1 { border-color: #4C4C9E; }
.game-preview-img.platform-border-gba { border-color: #5A4FCF; }
.game-preview-img.platform-border-snes { border-color: #8E7CC3; }

.game-preview-title {
  font-family: 'Baloo 2', sans-serif;
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  text-align: center;
  max-width: min(92vw, 1200px);
  width: 100%;
  margin: 0 0 24px;
}

/* Score gets its own large, tier-colored treatment at the top of the
   right column — 80+ green, 60-79 gold, below 60 red, using the
   site's existing accent palette. scoreText overrides (e.g.
   "Ongoing") aren't a real quality score, so they get the neutral
   white treatment instead of a color tier. */
.game-preview-score {
  display: block;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 14px;
}

.game-preview-score-high { color: var(--green); }
.game-preview-score-mid { color: var(--gold); }
.game-preview-score-low { color: var(--red); }
.game-preview-score-neutral { color: var(--white); }

.game-preview-fact {
  font-family: 'Space Mono', monospace;
  font-size: 0.88rem;
  margin-bottom: 8px;
  line-height: 1.4;
}

.game-preview-fact-label {
  color: rgba(238, 248, 252, 0.65);
  font-weight: 700;
  margin-right: 4px;
}

.game-preview-tags {
  display: flex;
  gap: 8px;
  margin: 10px 0 4px;
}

.game-preview-tag {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--white);
  color: var(--white);
}

.game-preview-notes {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(238, 248, 252, 0.25);
}

.game-preview-empty {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(238, 248, 252, 0.65);
  margin: 0;
}

.game-preview-close {
  position: absolute;
  top: 20px;
  right: 28px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

.game-preview-close:hover {
  background: var(--red);
}

.game-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-preview-prev { left: 20px; }
.game-preview-next { right: 20px; }

.game-preview-nav:hover {
  background: var(--blue);
}

@media (max-width: 700px) {
  .game-preview-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  .game-preview-prev { left: 8px; }
  .game-preview-next { right: 8px; }
}

/* ---------- Poster preview overlay (movies.html, books.html) ----------
   Same two-column shape as .game-preview-overlay, reused for both
   Movies and Books since their schemas are identical in shape — see
   the render-grid.js comment on ensurePosterPreviewOverlay. No
   platform border coloring here (doesn't apply), and no "view full
   page" link — same as Gaming, individual pages are gone. */

.poster-preview-trigger {
  cursor: pointer;
}

.poster-preview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(35, 35, 35, 0.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 20px;
}

.poster-preview-overlay.is-open {
  display: flex;
}

.poster-preview-columns {
  display: flex;
  gap: 32px;
  max-width: min(92vw, 1200px);
  width: 100%;
  align-items: flex-start;
}

.poster-preview-col-left {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.poster-preview-col-right {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
  text-align: left;
  color: var(--white);
}

@media (max-width: 700px) {
  .poster-preview-columns {
    flex-direction: column;
    align-items: center;
  }
  .poster-preview-col-left {
    flex-basis: auto;
    width: 100%;
  }
}

.poster-preview-img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 4px solid var(--white);
  border-radius: 4px;
  box-shadow: var(--shadow);
}

.poster-preview-title {
  font-family: 'Baloo 2', sans-serif;
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  text-align: center;
  max-width: min(92vw, 1200px);
  width: 100%;
  margin: 0 0 24px;
}

/* Same tiering as Gaming's popup score (80+ green, 60-79 gold, below
   60 red) — same 0-100 scale, same convention. */
.poster-preview-score {
  display: block;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 14px;
}

.poster-preview-score-high { color: var(--green); }
.poster-preview-score-mid { color: var(--gold); }
.poster-preview-score-low { color: var(--red); }
.poster-preview-score-neutral { color: var(--white); }

.poster-preview-details {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.poster-preview-close {
  position: absolute;
  top: 20px;
  right: 28px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

.poster-preview-close:hover {
  background: var(--red);
}

.poster-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-preview-prev { left: 20px; }
.poster-preview-next { right: 20px; }

.poster-preview-nav:hover {
  background: var(--blue);
}

@media (max-width: 700px) {
  .poster-preview-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  .poster-preview-prev { left: 8px; }
  .poster-preview-next { right: 8px; }
}

.album-count {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 4px;
}

.back-link {
  display: inline-block;
  text-decoration: none;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}

.back-link:hover { color: var(--red); }

.hike-album-link {
  display: inline-block;
  text-decoration: none;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}

.hike-album-link:hover { color: var(--blue); border-color: var(--blue); }

/* ---------- Poster covers (gaming / movies / books / videos index) ---------- */

.homepage-section-heading {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  margin: 0 0 8px;
}

.homepage-section-heading.heading-color-1 { color: var(--red-deep); }
.homepage-section-heading.heading-color-2 { color: var(--blue-deep); }
.homepage-section-heading.heading-color-3 { color: var(--gold-deep); }
.homepage-section-heading.heading-color-4 { color: var(--green); }

/* ---------- Tabs (used by golf and gaming pages) ---------- */

.tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 32px;
}

.tab-btn {
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 8px 8px 2px 2px;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tab-btn:hover, .tab-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 4px 5px 0 var(--ink);
}

.tab-btn.active {
  background: var(--ink);
  color: var(--white);
}

/* A tab that should stand out from the rest of its row (currently
   just the Search tab on photos.html) - red at rest, not just when
   active, so it's visually distinct from the plain white tabs next
   to it even before you click anything. */
.tab-btn-hot {
  background: var(--red);
  color: var(--white);
  border-color: var(--ink);
}

.tab-btn-hot:hover, .tab-btn-hot:focus-visible {
  background: var(--red-deep);
}

.tab-btn-hot.active {
  background: var(--red-deep);
  color: var(--white);
}

.tab-panel[hidden] {
  display: none;
}

/* ---------- Data table (golf rounds) ---------- */

.data-table-wrap {
  overflow-x: auto;
  margin-bottom: 44px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
}

.data-table th {
  background: var(--ink);
  color: var(--white);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: left;
  padding: 10px 16px;
}

.data-table td {
  padding: 9px 16px;
  border-bottom: 1px solid rgba(35, 35, 35, 0.12);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:nth-child(even) td {
  background: rgba(35, 35, 35, 0.03);
}

.vs-par-under { color: var(--green); font-weight: 700; }
.vs-par-over { color: var(--red); font-weight: 700; }

/* ---------- Golf: multi-metric trend charts (By Year tab) ---------- */

.golf-year-chart {
  max-width: 950px;
  margin: 0 auto 32px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--white);
  padding: 20px;
}

.golf-year-chart-title {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.3rem;
  text-align: center;
  margin: 0 0 12px;
}

.golf-handicap-window-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.golf-handicap-window-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.golf-handicap-window-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.golf-handicap-window-swatch-counting {
  background: var(--blue-deep);
}

.golf-handicap-window-swatch-other {
  background: var(--blue);
}

.golf-handicap-window-swatch-aged {
  background: rgba(4, 156, 216, 0.25);
  border: 1px solid var(--blue);
}

/* This .tabs bar sits AFTER the chart panels in markup (so it renders
   at the bottom, unlike every other .tabs bar on the site which sits
   above its panels) — needs its own top margin instead of relying on
   the generic .tabs bottom-margin convention. */
.golf-year-chart-tabs {
  margin: 16px 0 0;
  justify-content: center;
}

/* ---------- Expandable gaming summary rows ---------- */

.gaming-summary-row {
  cursor: pointer;
}

.gaming-summary-row:hover td,
.gaming-summary-row:focus-visible td {
  background: rgba(35, 35, 35, 0.06);
}

.row-caret {
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}

.gaming-summary-row.is-expanded .row-caret {
  transform: rotate(90deg);
}

.gaming-detail-row td {
  background: var(--paper-alt);
  padding: 10px 16px 16px 44px;
}

.gaming-detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gaming-detail-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Space Mono', monospace;
  font-size: 0.82rem;
}

.gaming-detail-title {
  /* Space Mono only ships weights 400/700 (not variable), so a
     mid-weight like 525 would silently snap to 400 with no visible
     effect. Inter is already loaded elsewhere on the site at 400/500/
     600, so switching just this text to Inter gets a real medium
     weight at no extra font-loading cost. */
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  font-weight: 500;
}

/* Platform-colored game titles inside expanded rows (every summary/
   crosstab tab except "All Games"). Xbox/Switch/PS5 reuse the same
   brand colors already used for poster-card borders elsewhere; the
   rest are new, chosen to stay visually distinct from each other and
   from the site's core palette. */
.gaming-detail-title.platform-text-xbox { color: #107C10; }
.gaming-detail-title.platform-text-switch { color: #E60012; }
.gaming-detail-title.platform-text-ps5 { color: #0070D1; }
.gaming-detail-title.platform-text-3ds { color: #C40057; }
.gaming-detail-title.platform-text-steam { color: #2A6FB0; }
.gaming-detail-title.platform-text-wiiu { color: #009AC7; }
.gaming-detail-title.platform-text-ps2 { color: #003791; }
.gaming-detail-title.platform-text-gamecube { color: #6B3FA0; }
.gaming-detail-title.platform-text-ps1 { color: #4C4C9E; }
.gaming-detail-title.platform-text-gba { color: #5A4FCF; }
.gaming-detail-title.platform-text-snes { color: #8E7CC3; }

/* No color/weight rule of its own — inherits both from its parent
   .gaming-detail-title (or .gaming-detail-title.platform-text-*), so
   the "(Platform)" annotation matches the title's color and boldness
   instead of standing apart in muted gray. */
.gaming-detail-platform {
}

.gaming-detail-score {
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- Gaming Year x Platform cross-tab ---------- */

.gaming-crosstab .status-row td {
  border-top: 2px solid var(--ink);
  font-style: italic;
  color: var(--ink-soft);
}

.gaming-crosstab .grand-total-row td {
  border-top: 3px solid var(--ink);
  font-weight: 700;
  background: rgba(35, 35, 35, 0.05);
}

.gaming-crosstab td.cross-total-col {
  font-weight: 700;
  background: rgba(35, 35, 35, 0.05);
}

/* ---------- Concerts (expanded row detail) ---------- */

.concert-detail-row {
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.concert-detail-row strong {
  color: var(--ink);
}

.concert-setlist {
  margin: 4px 0 12px 20px;
  padding: 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
}

.concert-setlist li {
  margin-bottom: 2px;
}

/* Openers shown as a muted secondary line under the artist name in the
   collapsed table row (not the expanded detail). */
.concert-openers-inline {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* Opener setlist sub-sections, inside the expanded row — visually
   distinguished from the headliner's own setlist (smaller, indented
   further, muted label) so it's clear at a glance who played what. */
.concert-opener-setlist-label strong {
  color: var(--ink-soft);
  font-weight: 700;
  font-style: italic;
}

.concert-opener-setlist {
  margin-left: 32px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.concert-detail-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0;
}

.concert-detail-photos img {
  width: 400px;
  height: 400px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 6px;
}

.concert-detail-blurb {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 8px 0 0;
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 28px 22px;
  padding-bottom: 56px;
}

.poster-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.poster-card .poster-img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.poster-card.platform-xbox .poster-img { border-color: #107C10; }
.poster-card.platform-switch .poster-img { border-color: #E60012; }
.poster-card.platform-ps5 .poster-img { border-color: #0070D1; }

.poster-card:hover .poster-img, .poster-card:focus-visible .poster-img {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.poster-card h3 { margin: 12px 0 2px; font-size: 1.05rem; }
.poster-card .meta { display: block; }

/* play-button overlay used for video posters */
.poster-card.is-video { position: relative; }
.poster-card.is-video .play-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* ---------- Review / detail page ---------- */

.review-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 28px;
}

.review-body {
  max-width: 70ch;
  margin-bottom: 44px;
}

.review-body p { margin: 0 0 14px; }
.review-body p:last-child { margin-bottom: 0; }

.polaroid {
  background: var(--white);
  border: 1px solid rgba(35,35,35,0.15);
  border-radius: 4px;
  padding: 12px 12px 20px;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery .polaroid:nth-child(4n+1) { transform: rotate(-3deg); }
.gallery .polaroid:nth-child(4n+2) { transform: rotate(2deg); }
.gallery .polaroid:nth-child(4n+3) { transform: rotate(-1.5deg); }
.gallery .polaroid:nth-child(4n+4) { transform: rotate(3deg); }

.polaroid:hover { transform: scale(1.04) rotate(0deg) !important; box-shadow: var(--shadow-lift); z-index: 2; }

/* Defensive, given .polaroid never sets its own explicit "display" so
   [hidden]'s default display:none should already apply cleanly - but
   this exact class of bug (a same-specificity rule silently
   overriding [hidden]) already bit the blog's Show More button once
   in this project, so this is here on purpose rather than assumed. */
.polaroid[hidden] {
  display: none;
}

/* ---------- Photo tag filter bar (per-page, filters one gallery) ---------- */

.photo-tag-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.photo-tag-pill {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.photo-tag-pill:hover {
  background: var(--paper);
  transform: translateY(-1px);
}

.photo-tag-pill.active {
  background: var(--blue-deep);
  color: var(--white);
  border-color: var(--blue-deep);
}

/* ---------- Global photo search page ---------- */

#photo-search-tags {
  margin: 0 0 28px;
}

.photo-search-tag-filter-input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}

.photo-search-tag-filter-input:focus {
  outline: none;
  border-color: var(--blue-deep);
}

.photo-search-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-search-year-bar,
.photo-search-month-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

#photo-search-heading {
  margin-bottom: 16px;
}

.photo-search-album-link {
  display: block;
  margin-top: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue-deep);
  text-decoration: none;
}

.photo-search-album-link:hover {
  text-decoration: underline;
}

.polaroid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.polaroid .caption {
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  margin-top: 10px;
  color: var(--ink);
}

.tape {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 70px;
  height: 22px;
  background: rgba(251, 208, 0, 0.75);
  border: 1px solid rgba(35,35,35,0.15);
}

/* ---------- Simple list cards (gaming / movies / books) ---------- */

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  padding-bottom: 56px;
}

.item-card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.item-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.item-card .meta { display: block; margin-bottom: 8px; }
.item-card p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

.pill {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1.5px solid var(--ink);
  margin-top: 8px;
}

/* ---------- Video section ---------- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding-bottom: 56px;
}

.video-card {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video-card video { width: 100%; background: #000; }

.video-card .video-info { padding: 14px 16px; }
.video-card h3 { font-size: 1.05rem; margin-bottom: 2px; }

/* ---------- Blog ---------- */

.post {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 26px;
  box-shadow: var(--shadow);
}

.post h2 { font-size: 1.5rem; margin-bottom: 4px; }
.post .meta { margin-bottom: 14px; }
.post p { margin: 0 0 12px; }
.post p:last-child { margin-bottom: 0; }
.post ul { margin: 0 0 12px; padding-left: 22px; }
.post li { margin-bottom: 6px; }
.post li:last-child { margin-bottom: 0; }

.show-more-posts-btn {
  display: block;
  margin: 24px auto 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 8px 8px 2px 2px;
  padding: 10px 22px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Without this, the button's own "display: block" above silently
   overrides the browser's default [hidden] { display: none } - both
   have equal CSS specificity, and this stylesheet loads after the
   browser's own, so it would otherwise win by source order. That
   left the button fully visible AND clickable during an active
   search despite JS correctly setting the hidden attribute - clicking
   it then revealed every post, not just the ones actually matching
   the search. */
.show-more-posts-btn[hidden] {
  display: none;
}

.show-more-posts-btn:hover, .show-more-posts-btn:focus-visible {
  background: var(--gold);
  transform: translateY(-2px);
  box-shadow: 4px 5px 0 var(--ink);
}

/* ---------- Blog search bar + tag filter cloud ---------- */

.blog-search-bar {
  margin-bottom: 24px;
}

.blog-search-input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Space Mono', monospace;
  font-size: 1rem;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.blog-search-input:focus {
  outline: none;
  border-color: var(--blue-deep);
}

.blog-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.blog-tag-cloud-pill {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.blog-tag-cloud-pill:hover {
  background: var(--paper);
  transform: translateY(-1px);
}

.blog-tag-cloud-pill.active {
  background: var(--blue-deep);
  color: var(--white);
}

.blog-tag-cloud-more {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: none;
  border: 2px dashed var(--ink-soft);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
}

.blog-tag-cloud-more:hover {
  color: var(--blue-deep);
  border-color: var(--blue-deep);
}

/* ---------- Tag pills shown on each individual post ---------- */

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed rgba(35, 35, 35, 0.15);
}

.post-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  border-radius: 20px;
  padding: 2px 10px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.post-tag:hover {
  color: var(--blue-deep);
  border-color: var(--blue-deep);
}

/* ---------- Empty state ---------- */

.empty-note {
  border: 2px dashed var(--ink-soft);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--ink-soft);
  font-family: 'Space Mono', monospace;
  font-size: 0.88rem;
}

/* ---------- Lightbox (click a polaroid to enlarge) ---------- */

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(35, 35, 35, 0.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 20px;
}

.lightbox-overlay.is-open {
  display: flex;
}

.lightbox-media-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: min(90vw, 900px);
}

.lightbox-image-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  border: 4px solid var(--white);
  border-radius: 4px;
  box-shadow: var(--shadow-lift);
}

.lightbox-tags-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  max-width: 140px;
}

.lightbox-tag-pill {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border-radius: 20px;
  padding: 5px 12px;
  text-align: center;
}

@media (max-width: 700px) {
  .lightbox-media-row {
    flex-direction: column;
  }
  .lightbox-tags-col {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
  }
}

.lightbox-caption {
  color: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  margin-top: 16px;
}

.lightbox-date-captured {
  display: inline-block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
}

.lightbox-album-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}

.lightbox-album-link:hover {
  text-decoration: underline;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

.lightbox-close:hover {
  background: var(--red);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-nav:hover {
  background: var(--blue);
}

@media (max-width: 700px) {
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* ---------- Interactive Map (homepage bottom section) ---------- */

#map,
#homepage-map {
  position: relative;
  z-index: 1;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.homepage-map-section {
  margin-top: 32px;
}

.homepage-map-section > p {
  margin-top: 12px;
  margin-bottom: 20px;
  color: var(--ink-soft);
}

.map-load-error {
  background: #fff3cd;
  border: 2px solid var(--gold-deep);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Leaflet's own tooltip styling is fairly plain by default - restyle
   just enough to feel consistent with the rest of the site without
   fighting Leaflet's internal positioning logic (which the !important
   overrides here are careful not to touch). */
.leaflet-tooltip {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--ink) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow) !important;
}

.leaflet-tooltip-top:before {
  border-top-color: var(--ink) !important;
}

/* Leaflet's default zoom control is two flat, borderless, fused-
   together gray squares - restyled here to match the site's actual
   button look (.tab-btn's bold border + offset shadow) rather than
   leaving Leaflet's own plain default chrome sitting on top of an
   otherwise playful page. */
.leaflet-control-zoom {
  border: none !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  width: 34px !important;
  height: 34px !important;
  line-height: 32px !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 1.2rem !important;
  font-weight: 700;
  color: var(--ink) !important;
  background: var(--white) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
  background: var(--gold) !important;
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--ink);
}

/* ---------- Map region detail overlay (homepage) ----------
   Same dark-overlay pattern as the game/poster preview popups, but
   built to hold a variable, sometimes large amount of content (New
   York alone has 30+ golf courses and 30+ concerts) - the panel itself
   scrolls internally rather than trying to fit everything on screen
   the way the other overlays' fixed-size content does.

   z-index is much higher here than the other overlays (100) on
   purpose - Leaflet's own zoom control sits at z-index:1000
   internally, which was silently painting on top of this overlay when
   it matched the other popups' z-index:100. Confirmed against
   Leaflet's own source, not guessed. */

.map-region-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(35, 35, 35, 0.92);
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.map-region-overlay.is-open {
  display: flex;
}

.map-region-panel {
  position: relative;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px;
}

.map-region-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

.map-region-close:hover {
  background: var(--red);
  color: var(--white);
}

.map-panel-title {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.6rem;
  margin: 0 0 16px;
  padding-right: 40px;
}

.map-panel-section {
  margin-bottom: 20px;
}

.map-panel-section h4 {
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin: 0 0 8px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
}

.map-panel-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
}

.map-panel-list li {
  padding: 4px 0;
  border-bottom: 1px solid rgba(35, 35, 35, 0.08);
}

.map-panel-date {
  color: var(--ink-soft);
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
}

.map-panel-more {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}

.map-panel-more:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.map-panel-photos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.map-panel-photo {
  display: block;
  width: 100px;
  text-decoration: none;
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  text-align: center;
}

.map-panel-photo img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 6px;
  margin-bottom: 4px;
}

/* ---------- Site footer ----------
   Echoes the nav's striped background and bold border as a visual
   bookend for the page, mainly so nothing (like the map section)
   ever ends right at the browser's bottom edge with no closure. */

.site-footer {
  margin-top: 56px;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(45deg, rgba(35,35,35,0.11) 0, rgba(35,35,35,0.11) 1px, transparent 1px, transparent 10px);
  border-top: 2px solid var(--ink-soft);
}

.site-footer .wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.site-footer-content {
  max-width: 1000px;
}

.site-footer-title {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.3rem;
  margin: 0 0 8px;
}

.site-footer-text {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

.site-footer-top {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}

.site-footer-top:hover {
  color: var(--blue);
  border-color: var(--blue);
}

/* ---------- Homepage hero card: full latest blog post ----------
   Deliberately its own standalone design, not .interest-card - built
   to stand out from the grid below on purpose (a "pinned to the
   corkboard" scrapbook feel: washi tape, a sticker badge, an oversized
   colored title) rather than blend in as one more card in the row.
   Title color/size is bold but stops short of the header's full
   text-stroke treatment - some real post titles run quite long (one
   is nearly 100 characters), and that effect is legible at "MikeSpace"
   length, not necessarily at a full sentence. */

.hero-blog-card {
  position: relative;
  display: block;
  margin: 56px 0 40px;
  padding: 42px 36px 32px;
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
  color: var(--ink);
  transform: rotate(-1deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-blog-card:hover, .hero-blog-card:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 10px 14px 0 var(--ink);
}

.hero-blog-tape {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 110px;
  height: 30px;
  background: rgba(251, 208, 0, 0.8);
  border: 1px solid rgba(35,35,35,0.15);
}

.hero-blog-badge {
  position: absolute;
  top: -16px;
  right: 24px;
  transform: rotate(4deg);
  background: var(--red);
  color: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
}

.hero-blog-title {
  font-family: 'Baloo 2', sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  color: var(--blue-deep);
  margin: 8px 0 10px;
  line-height: 1.2;
}

.hero-blog-date {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--paper);
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  margin: 0 0 22px;
}

/* Same rhythm as .post's own paragraph/list spacing (blog.html),
   since this is literally that same post's body content shown again -
   should read the same way in both places. */
.hero-blog-body p { margin: 0 0 12px; color: var(--ink); font-size: 1rem; }
.hero-blog-body p:last-child { margin-bottom: 0; }
.hero-blog-body ul { margin: 0 0 12px; padding-left: 22px; }
.hero-blog-body li { margin-bottom: 6px; color: var(--ink); }
.hero-blog-body li:last-child { margin-bottom: 0; }

.hero-blog-body img {
  border: 2px solid var(--ink);
  border-radius: 8px;
  margin: 4px 0 12px;
}

/* A blog post's embedded photo(s) use the same .gallery/.polaroid
   markup as full photo albums (so lightbox.js recognizes them), but a
   post usually has just one or two - the full 3-column grid built for
   a dozen+ photos would leave awkward empty space. This scopes a
   lighter layout instead: a row that wraps, each photo capped at a
   sensible width, sitting naturally within the surrounding text
   rather than its own grid section. Applies in both places a post's
   body can appear - blog.html itself, and the homepage hero card. */
.post .gallery,
.hero-blog-body .gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 4px 0 16px;
}

.post .gallery .polaroid,
.hero-blog-body .gallery .polaroid {
  width: 240px;
  flex: 0 0 auto;
}

.hero-blog-more {
  display: inline-block;
  margin: 20px 0 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  background: var(--blue-deep);
  padding: 10px 20px;
  border: 2px solid var(--ink);
  border-radius: 8px 8px 2px 2px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-blog-card:hover .hero-blog-more {
  transform: translateY(-2px);
  box-shadow: 4px 5px 0 var(--ink);
}