/* ═══════════════════════════════════════════════════════════════
   Amanda Fitch's Blog — Components CSS
   Cards, hero, footer, blog post styles
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────
   HERO SECTION
   ───────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  background-image: url('../assets/images/hero-banner.png');
  background-size: cover;
  background-position: center 60%;
  image-rendering: pixelated;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    hsl(283 40% 90% / 0.88) 0%,
    hsl(280 30% 85% / 0.72) 50%,
    hsl(278 35% 80% / 0.60) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-12) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.hero__slime {
  width: 140px;
  height: 140px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 16px hsl(280 50% 40% / 0.3));
  animation: slime-bounce 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__title {
  font-family: var(--font-logo);
  font-size: clamp(0.9rem, 2.5vw, 1.6rem);
  color: var(--col-purple-deep);
  text-shadow:
    2px 2px 0 var(--col-surface),
    3px 3px 0 hsl(272 38% 28% / 0.4);
  line-height: 1.5;
}

.hero__subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--col-text-light);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.hero__desc {
  font-family: var(--font-body);
  font-size: var(--size-lg);
  color: var(--col-text);
  max-width: 50ch;
  margin-bottom: var(--space-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Floating sparkles */
.sparkle {
  position: absolute;
  pointer-events: none;
  font-size: 1rem;
  animation: sparkle-float linear infinite;
  opacity: 0;
}

/* ─────────────────────────────────────────
   SECTION HEADING
   ───────────────────────────────────────── */

.section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.section-heading__text {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2rem);
  color: var(--col-purple-deep);
  letter-spacing: 0.03em;
}

.section-heading__line {
  flex: 1;
  height: 3px;
  background: linear-gradient(90deg, var(--col-purple-light), transparent);
  border-radius: 2px;
}

.section-heading__gem {
  color: var(--col-yellow);
  font-size: 0.9rem;
}

/* ─────────────────────────────────────────
   CATEGORY CARDS
   ───────────────────────────────────────── */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  background: var(--col-surface);
  border: 3px solid var(--col-purple-deep);
  border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-6);
  text-decoration: none;
  color: var(--col-text);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--trans-normal),
    box-shadow var(--trans-normal),
    background var(--trans-normal);
}

.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, hsl(280 40% 70% / 0.15));
  opacity: 0;
  transition: opacity var(--trans-normal);
}

.category-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 6px 6px 0 0 var(--col-purple-deep);
  background: var(--col-bg-warm);
  text-decoration: none;
  color: var(--col-text);
}

.category-card:hover::after {
  opacity: 1;
}

.category-card__icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
  image-rendering: pixelated;
  transition: transform var(--trans-normal);
}

.category-card:hover .category-card__icon {
  transform: scale(1.1) rotate(-3deg);
}

.category-card__name {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.category-card__desc {
  font-size: var(--size-sm);
  color: var(--col-text-muted);
  line-height: 1.5;
}

.category-card__count {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--col-gray);
  letter-spacing: 0.05em;
}

/* Category accent colors */
.category-card--ai     { --cat-accent: var(--col-ai); }
.category-card--pixel  { --cat-accent: var(--col-pixel); }
.category-card--science  { --cat-accent: var(--col-science); }
.category-card--recipes { --cat-accent: var(--col-recipes); }

.category-card--ai:hover     { border-color: var(--col-ai);      box-shadow: 6px 6px 0 0 var(--col-ai); }
.category-card--pixel:hover  { border-color: hsl(40,70%,38%);    box-shadow: 6px 6px 0 0 hsl(40,70%,38%); }
.category-card--science:hover  { border-color: var(--col-green);   box-shadow: 6px 6px 0 0 var(--col-green); }
.category-card--recipes:hover { border-color: var(--col-recipes); box-shadow: 6px 6px 0 0 var(--col-recipes); }

/* ─────────────────────────────────────────
   BLOG POST CARDS
   ───────────────────────────────────────── */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--col-surface-light);
  border: 3px solid var(--col-surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: var(--col-text);
  transition:
    transform var(--trans-normal),
    box-shadow var(--trans-normal),
    border-color var(--trans-normal);
  position: relative;
}

.post-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 0 var(--col-purple-deep);
  border-color: var(--col-purple);
  color: var(--col-text);
  text-decoration: none;
}

.post-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-card__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-bottom: 2px solid var(--col-surface-2);
  overflow: hidden;
}

/* No image-rendering: pixelated here. Cover images are arbitrary artwork —
   the current one is watercolour, scaled 1200px down to a card — and nearest
   neighbour aliases it. That setting belongs on the pixel-art assets (the
   slime, the banner, the category icons), not on post covers. */
.post-card__cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--col-surface-light);
}

.post-card__thumb--placeholder {
  background: linear-gradient(135deg, var(--col-surface-light), var(--col-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.post-card__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--col-purple-deep);
  line-height: 1.25;
}

.post-card__excerpt {
  font-size: var(--size-sm);
  color: var(--col-text-muted);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--col-surface-2);
}

.post-card__date {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--col-gray);
  letter-spacing: 0.03em;
}

.post-card__read-more {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--col-purple);
  letter-spacing: 0.04em;
  transition: color var(--trans-fast);
}

.post-card:hover .post-card__read-more {
  color: var(--col-yellow);
}

/* ─────────────────────────────────────────
   FEATURED POST (LARGE CARD)
   ───────────────────────────────────────── */

.post-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  max-height: 340px;
}

.post-card--featured .post-card__thumb {
  width: 360px;
  flex-shrink: 0;
  aspect-ratio: unset;
  border-bottom: none;
  border-right: 2px solid var(--col-surface-2);
}

.post-card--featured .post-card__title {
  font-size: 2rem;
}

.post-card--featured .post-card__excerpt {
  -webkit-line-clamp: 4;
}

/* ─────────────────────────────────────────
   SINGLE POST LAYOUT
   ───────────────────────────────────────── */

/* ─────────────────────────────────────────
   JOURNAL ENTRY VIEW (SPA reader)
   ───────────────────────────────────────── */

#journal-entry-view {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.journal-entry-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-12);
}

/* ← Back to Journal button */
.journal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--col-purple);
  background: var(--col-surface);
  border: 2px solid var(--col-purple-mid);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-5);
  margin-bottom: var(--space-8);
  cursor: pointer;
  transition: color var(--trans-fast), border-color var(--trans-fast),
              box-shadow var(--trans-fast), transform 0.15s ease;
}

.journal-back-btn:hover {
  color: var(--col-purple-deep);
  border-color: var(--col-purple);
  box-shadow: 0 0 12px hsl(278 50% 55% / 0.25);
  transform: translateX(-3px);
}

.post-layout {
  max-width: var(--max-width-post);
  margin: var(--space-8) auto;
  padding: var(--space-12) var(--space-10);
  background: white;
  border: 3px solid var(--col-surface-2);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 24px hsl(272 40% 20% / 0.08);
}

.post-header {
  margin-bottom: var(--space-8);
}

/* Rendered at both ends of the article, hence .post-meta rather than
   .post-header__meta. */
.post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.post-header__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.5rem);
  color: var(--col-purple-deep);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.post-header__subtitle {
  font-size: var(--size-xl);
  color: var(--col-text-muted);
  font-style: italic;
  margin-bottom: var(--space-4);
}

.post-header__info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--col-gray);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}

.post-header__info-sep {
  color: var(--col-gray-light);
}

/* Hero image */
.post-hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 3px solid var(--col-purple-deep);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-8);
  image-rendering: pixelated;
}

/* Cover image (from frontmatter) */
.post-cover-image {
  width: 100%;
  margin-bottom: var(--space-8);
}
.post-cover-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--col-surface-light);
  border: 3px solid var(--col-surface-2);
  border-radius: var(--radius-sm);
}

/* Post body content */
.post-body {
  font-size: var(--size-lg);
  line-height: 1.8;
  color: var(--col-text);
}

.post-body h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px dashed var(--col-surface-2);
}

.post-body h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.post-body p {
  max-width: 65ch;
}

.post-body ul,
.post-body ol {
  margin-bottom: var(--space-4);
}

.post-body li {
  margin-bottom: var(--space-2);
}

.post-body blockquote {
  font-size: var(--size-xl);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* RPG Speech bubble blockquote */
.post-body blockquote::before {
  content: '▶ ';
  color: var(--col-purple);
  font-weight: bold;
}

/* ─────────────────────────────────────────
   YOUTUBE EMBED
   ───────────────────────────────────────── */

.video-embed {
  margin: var(--space-8) 0;
}

.video-embed__label {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--col-text-muted);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.video-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--col-surface);
  border: 3px solid var(--col-purple-deep);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.video-embed__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ─────────────────────────────────────────
   POST SHARE LINKS
   Icon-only, right-justified in the post header's meta row.
   ───────────────────────────────────────── */

.post-share {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  /* Pushes the group to the right end of .post-meta, which is a flex row.
     That row wraps, so on narrow screens the group drops to its own line and
     stays right-aligned rather than overflowing. */
  margin-left: auto;
}

.post-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Meets the 24px minimum target size while the mark itself stays small. */
  width: 24px;
  height: 24px;
  color: var(--col-gray);
  text-decoration: none;
  transition: color var(--trans-fast), transform var(--trans-fast);
}

.post-share__link:hover,
.post-share__link:focus-visible {
  transform: translateY(-2px);
  text-decoration: none;
}

/* Muted by default so the marks read as metadata rather than as buttons
   competing with the title; each takes its brand colour on hover. */
.post-share__link--x:hover,
.post-share__link--x:focus-visible {
  color: hsl(210, 15%, 25%);
}
.post-share__link--linkedin:hover,
.post-share__link--linkedin:focus-visible {
  color: hsl(210, 70%, 40%);
}
.post-share__link--substack:hover,
.post-share__link--substack:focus-visible {
  color: hsl(22, 75%, 45%);
}

/* The source viewBoxes differ per icon, so the box does the normalising
   rather than fixed pixel dimensions. */
.post-share__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   POST TAGS FOOTER
   ───────────────────────────────────────── */

.post-tags {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-6) 0;
}

.post-tags__label {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--col-text-muted);
}

/* ─────────────────────────────────────────
   BREADCRUMB (base — no border or background;
   context styles are in .breadcrumb-standalone
   and .journal-status-bar)
   ───────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25em;
  border: none;
  background: none;
  padding: 0;
}

.breadcrumb__sep {
  color: var(--col-gray-light);
}

/* ─────────────────────────────────────────
   SITE FOOTER
   ───────────────────────────────────────── */

.site-footer {
  background: hsl(0 0% 5%);
  border-top: none;
  padding: var(--space-10) 0 var(--space-6);
  margin-top: auto;
  text-align: center;
}


.site-footer__matcha-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.site-footer__logo-slime {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
}

.site-footer__logo-text {
  font-family: var(--font-logo);
  font-size: 0.55rem;
  color: hsl(280 20% 70%);
  line-height: 1.5;
}

.site-footer__tagline {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: hsl(280 12% 50%);
  letter-spacing: 0.04em;
}


.site-footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
}

.social-links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: hsl(280 16% 62%);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border: 2px solid hsl(280 12% 22%);
  border-radius: var(--radius-sm);
  transition:
    color var(--trans-fast),
    border-color var(--trans-fast),
    transform var(--trans-fast),
    box-shadow var(--trans-fast);
}

.social-link:hover {
  color: var(--col-purple-deep);
  border-color: var(--col-purple);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 0 var(--col-purple);
  text-decoration: none;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-family: var(--font-heading);
  font-size: 1rem;
  color: hsl(280 10% 40%);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  text-align: center;
}

.site-footer__bottom span a {
  color: inherit;
  text-decoration: none;
  cursor: default;
  transition: color var(--trans-fast);
}

.site-footer__bottom span a:hover {
  cursor: pointer;
  color: hsl(280 10% 60%);
}

.social-links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* ─────────────────────────────────────────
/* ─────────────────────────────────────────
/* ─────────────────────────────────────────
   QUEST LOG PAGE — forest background theme
   ───────────────────────────────────────── */

/* Forest background fixed behind the whole page */
.quest-log-page {
  background-color: hsl(272 55% 5%);
  background-image: url('../assets/images/hero-banner.png');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.quest-log-page main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Hero header — local gradient over the forest */
.quest-log-page .category-header {
  position: relative;
  background: linear-gradient(
    180deg,
    hsl(272 55% 6% / 0.72) 0%,
    hsl(278 45% 9% / 0.50) 50%,
    hsl(272 50% 6% / 0.70) 100%
  );
  padding: 0;
  text-align: center;
}

/* Slime mascot — clickable home link */
.quest-log-back {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  margin-bottom: 0; /* gap controlled by oracle-slime margin-bottom, same as home page */
  cursor: pointer;
}

/* Slime size override for this context (oracle-slime is 88px on homepage) */
.quest-log-back__slime {
  width: 72px;
  height: 72px;
  margin-bottom: 0; /* override oracle-slime margin */
  transition: filter 0.3s ease, transform 0.3s ease;
}

.quest-log-back:hover .quest-log-back__slime {
  filter: drop-shadow(0 0 28px hsl(280 70% 70% / 0.95));
  transform: scale(1.08);
}

/* Small muted "← Return to Oracle" label */
.quest-log-back__label {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: hsl(280 18% 55%);
  transition: color 0.2s ease;
}

.quest-log-back:hover .quest-log-back__label {
  color: hsl(280 30% 75%);
}

/* Filter bar — semi-transparent dark */
.quest-log-page .journal-filter-bar {
  background: hsl(272 30% 6% / 0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: none;
}


/* Section — light surface background behind the card grid,
   same lavender as the rest of the site's content panels */
.quest-log-page .section {
  background: var(--col-surface);
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
  flex: 1;
}

/* ─────────────────────────────────────────
   BLOG FILTER BAR
   ───────────────────────────────────────── */

.journal-filter-bar {
  background: hsl(272 20% 10%);

  padding: var(--space-4) 0;
}

.journal-filter-bar__inner {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

/* Mobile selects — hidden on desktop */
.journal-filter-bar__mobile { display: none; }

/* Mobile select layout */
.journal-mobile-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.journal-mobile-select {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: hsl(272 80% 80%);
  background: hsl(272 20% 14%);
  border: 2px solid hsl(272 20% 28%);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239d7ecf' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}

.journal-mobile-select:focus {
  outline: none;
  border-color: var(--col-purple);
  box-shadow: 0 0 0 3px hsl(278 50% 55% / 0.25);
}

/* ── Responsive: swap buttons ↔ selects ── */
@media (max-width: 1024px) {
  .desktop-only { display: none !important; }
  .journal-filter-bar__desktop { display: none; }
  .journal-filter-bar__mobile  {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
    /* Let .container handle horizontal padding;
       .journal-filter-bar handles vertical — matches desktop exactly */
  }
}

.journal-filter-bar__label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: hsl(272 12% 50%);
  letter-spacing: 0.04em;
}

/* Sized to keep Category and Sort on one row at 1280px. Space Grotesk sets
   wider than the VT323 it replaced, which pushed the Sort group onto its own
   line at the previous sizes. */
.journal-filter {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: hsl(272 20% 60%);
  background: transparent;
  border: 2px solid hsl(272 20% 22%);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  text-decoration: none;
  transition:
    color var(--trans-fast),
    border-color var(--trans-fast),
    background var(--trans-fast);
}

.journal-filter:hover {
  color: var(--col-yellow);
  border-color: var(--col-yellow);
}

.journal-filter.active {
  color: var(--col-purple-deep);
  background: var(--col-yellow);
  border-color: var(--col-yellow);
}

.journal-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.journal-filter-group--right {
  margin-left: auto;
}

.journal-sort {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: hsl(272 20% 55%);
  background: transparent;
  border: 2px solid hsl(272 20% 20%);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  transition:
    color var(--trans-fast),
    border-color var(--trans-fast),
    background var(--trans-fast);
}

.journal-sort:hover {
  color: var(--col-yellow);
  border-color: var(--col-yellow);
}

.journal-sort.active {
  color: var(--col-purple-deep);
  background: hsl(272 40% 55%);
  border-color: hsl(272 40% 55%);
}

/* Status bar: breadcrumb + count on one line */
.journal-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.journal-status-bar > * {
  flex-shrink: 0;
}

/* Exception for the breadcrumb. The rule above stops status-bar children being
   squeezed, but combined with a flex item's default `min-width: auto` it also
   pinned the breadcrumb at its max-content width — so `Home › Journal of Things
   › <long post title>` ran off the right edge on narrow screens instead of
   wrapping. .breadcrumb already sets flex-wrap: wrap; it just never had a
   reason to use it. Letting this one child shrink is what lets that wrap
   happen. Id selector so it beats the rule above without weakening it for the
   other children. */
#site-breadcrumb {
  flex-shrink: 1;
  min-width: 0;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.25em;
  flex-wrap: wrap;
}

.breadcrumb__item {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: hsl(272 22% 52%);
  text-decoration: none;
  transition: color var(--trans-fast);
}

a.breadcrumb__item:hover {
  color: var(--col-purple);
}

.breadcrumb__item--current {
  color: hsl(272 30% 32%);
  font-weight: 600;
}

.breadcrumb__sep {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: hsl(272 12% 62%);
  user-select: none;
}

/* Standalone breadcrumb (on individual post pages) */
.breadcrumb-standalone {
  padding: var(--space-4) 0 var(--space-2);
  border-bottom: 1px solid hsl(272 20% 88%);
  margin-bottom: 0; /* gap controlled by oracle-slime margin-bottom, same as home page */
}

.journal-post-count {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: hsl(272 12% 42%);
  letter-spacing: 0.04em;
  margin: 0;
}

.journal-empty {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: hsl(272 20% 55%);
  text-align: center;
  padding: var(--space-12) 0;
  letter-spacing: 0.06em;
}

/* ─────────────────────────────────────────
   CATEGORY PAGE HEADER
   ───────────────────────────────────────── */

.category-header {
  padding: var(--space-12) 0 var(--space-8);
  background: var(--col-surface);
  border-bottom: 3px solid var(--col-purple-deep);
  text-align: center;
}

.category-header__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-4);
  object-fit: contain;
  image-rendering: pixelated;
}

.category-header__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 2.75rem);
  color: var(--col-purple-deep);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.category-header__desc {
  font-size: var(--size-lg);
  color: var(--col-text-muted);
  max-width: 50ch;
  margin: 0 auto;
}

/* ─────────────────────────────────────────
   PAGINATION
   ───────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-12);
  flex-wrap: wrap;
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--col-purple-deep);
  border-radius: var(--radius-sm);
  color: var(--col-purple-deep);
  text-decoration: none;
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
}

.pagination__btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 0 var(--col-purple-deep);
  background: var(--col-surface);
  text-decoration: none;
}

.pagination__btn--current {
  background: var(--col-purple);
  color: white;
}

/* ─────────────────────────────────────────
   ABOUT PAGE
   ───────────────────────────────────────── */

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
  padding: var(--space-12) var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
}

.about-portrait {
  position: sticky;
  top: calc(64px + var(--space-8));
}

.about-portrait__img {
  width: 100%;
  border: 4px solid var(--col-purple-deep);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-sm);
  image-rendering: pixelated;
}

.about-content h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.about-content h2:first-child {
  margin-top: 0;
}

/* ─────────────────────────────────────────
   EMPTY STATE
   ───────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--col-text-muted);
}

.empty-state__icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
  display: block;
}

.empty-state__title {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--col-purple-deep);
  margin-bottom: var(--space-3);
}

/* ─────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────── */


@media (max-width: 768px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .hero__slime {
    width: 100px;
    height: 100px;
  }

  .hero__desc { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }

  .post-card--featured {
    flex-direction: column;
    max-height: none;
  }

  .post-card--featured .post-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-right: none;
    border-bottom: 2px solid var(--col-surface-2);
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer__social {
    align-items: center;
  }

  .social-links {
    justify-content: center;
  }

  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-portrait {
    position: static;
  }
}

@media (max-width: 480px) {
  .hero { min-height: 380px; }
  .hero__title { font-size: 0.75rem; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .post-grid { grid-template-columns: 1fr; }
}