.hero {
  background: #000;
  padding: 1rem 0;
  min-height: auto;
}

/* Tweak theme header when a featured image is present */
header.cover {
  /* make header a bit shorter */
  min-height: 260px;
  height: 260px;
  overflow: hidden;
}

/* Ensure the background image fits and centers inside the header */
header.cover {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Remove big type overflow and center content vertically */
header.cover .tc-l { display:flex; align-items:center; justify-content:center; height:100%; }

/* If you want the title to be hidden from CSS as a fallback */
header.cover h1 { display: none !important; }

/* this sets up our "site title/branding link" */
header { position: relative; }

.vertical-logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  pointer-events: none;
  overflow: hidden; /* required for gradient fade */

  /* Book spine styling */
  border-left: 2px solid rgba(255, 255, 255, 0.4);
  border-right: 2px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.05);
  transition: background-color 0.3s ease;
}

/* Gradient overlay (fades in smoothly) */
.vertical-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(232, 193, 92, 0.4),
    rgba(232, 193, 92, 0.2)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Hover: fade in gradient + subtle inset glow */
.vertical-logo:hover::after {
  opacity: 1;
}

.vertical-logo:hover {
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
}

.vertical-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  pointer-events: auto;
  text-decoration: none;
}

.vertical-logo-text {
  transform: rotate(-90deg) scale(1.35);
  transform-origin: center center;
  font-family: 'IBM Plex Serif', serif !important;
  /* font-size: 1.5rem; */
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: #cce6ff;
  transition: font-size 0.3s ease;
}

/* Text grows on hover */
.vertical-logo-link:hover .vertical-logo-text {
  transform: rotate(-90deg) scale(1.5);
}
.vertical-logo-link:hover .vertical-logo-text strong:first-of-type {
  animation: pulseAI 2.5s ease-in-out infinite;
}
.vertical-logo-link:hover .vertical-logo-text strong:last-of-type {
  animation: pulseBH 2.5s ease-in-out infinite;
}
@keyframes pulseAI {
  0%   { filter: brightness(0.8); }   /* AI dim */
  20%  { filter: brightness(0.8); }   /* hold dim */
  50%  { filter: brightness(1.4); }   /* transition to bright */
  80%  { filter: brightness(1.4); }   /* hold bright */
  100% { filter: brightness(0.8); }   /* back to dim */
}
@keyframes pulseBH {
  0%   { filter: brightness(1.4); }   /* BH bright */
  20%  { filter: brightness(1.4); }   /* hold bright */
  50%  { filter: brightness(0.8); }   /* transition to dim */
  80%  { filter: brightness(0.8); }   /* hold dim */
  100% { filter: brightness(1.4); }   /* back to bright */
}

/* Accent styling */
.vertical-logo-text strong:first-of-type {
  color: #e8c15c;
  font-weight: 700;
  transform: rotate(-90deg);
}

.vertical-logo-text strong:last-of-type {
  color: #ffffff;
  font-weight: 600;
  transform: rotate(-90deg);
}

/* Styling for external links */
.external-link::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    /* An 'external link' SVG icon encoded as a Data URI */
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    opacity: 0.6; /* Subtle so it doesn't distract from the text */
}

.external-link:hover::after {
    opacity: 1; /* Brighten on hover for a better UX */
}

li {
  line-height: 1.6;
}

/* Right-aligned Back to Top links */
.back-to-top {
    display: block;
    text-align: right;
    font-size: 0.9rem;
    margin-top: -10px; /* Pulls it slightly closer to the line above */
    margin-bottom: 40px; /* Creates the 'breathing room' before the next question */
}