.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

/* Remove legacy stacked CTA sections on /projects/ */
.projects-cta {
  display: none !important;
}

/* ==========================================================================
   Projects Gallery — Advanced, production-grade CSS
   - Fluid type & spacing (clamp(), min(), max(), calc())
   - Dark mode & high-contrast support
   - Container queries for responsive cards/layout
   - Modern color system (OKLCH w/ fallback + color-mix)
   - a11y: focus-visible rings, reduced motion, accent-color, clear empty states
   - Skeleton loading, micro-interactions (pref-safe)
   - Progressive enhancement w/ @supports, @layer, :has(), :is(), :where()
   ========================================================================== */

/* ------------------------------- 0) Tokens -------------------------------- */
@layer tokens {
  :root {
    /* Base scale (fluid via clamp) */
    --size-0: clamp(0.75rem, 0.67rem + 0.36vw, 0.875rem);
    --size-1: clamp(0.875rem, 0.79rem + 0.43vw, 1rem);
    --size-2: clamp(1rem, 0.88rem + 0.64vw, 1.25rem);
    --size-3: clamp(1.25rem, 1.08rem + 0.86vw, 1.5rem);
    --size-4: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);

    /* Spacing scale (logical properties) */
    --space-1: clamp(6px, 0.4vw, 10px);
    --space-2: clamp(10px, 0.8vw, 14px);
    --space-3: clamp(14px, 1.2vw, 18px);
    --space-4: clamp(18px, 1.6vw, 22px);

    /* Radii */
    --radius-1: 10px;
    --radius-2: 14px;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-1: 0 10px 30px rgba(0, 0, 0, .08);
    --shadow-2: 0 18px 40px rgba(0, 0, 0, .16);

    /* Light theme palette (sRGB fallback) */
    --bg: #ffffff;
    --ink: #0a0a0a;
    /* Legacy alias for compatibility with existing markup */
    --text: var(--ink);
    --muted: #6b7280;
    --card: #f8fafc;
    --bd: rgba(0, 0, 0, .12);
    --soft: rgba(0, 0, 0, .06);
    --chip: #e5e7eb;
    --chip-ink: #111827;
    --brand: #4f46e5;
    /* indigo-600 */
    --ring: #3b82f6;
    /* blue-500 */
    --fav: #f59e0b;
    /* amber-500 */
    --ok-accent: var(--brand);
    --ok-ink: var(--ink);

    /* Animation durations (reduced-motion friendly) */
    --dur-fast: .12s;
    --dur-med: .18s;
    --ease: cubic-bezier(.2, .6, .2, 1);

    /* Container names */
    --projects-container-name: projects;
  }

  /* Optional: OKLCH upgrade if supported (wider gamut, smoother ramps) */
  @supports (color: oklch(0.7 0.2 240)) {
    :root {
      --bg: oklch(1 0 0);
      --ink: oklch(0.18 0.03 270);
      --muted: oklch(0.62 0.03 260);
      --card: oklch(0.98 0.01 250);
      --bd: color-mix(in oklch, var(--ink) 12%, transparent);
      --soft: color-mix(in oklch, var(--ink) 6%, transparent);
      --chip: oklch(0.93 0.01 250);
      --chip-ink: oklch(0.28 0.04 260);
      --brand: oklch(0.6 0.17 290);
      /* indigo-ish */
      --ring: oklch(0.7 0.17 260);
      /* bright blue-ish */
      --fav: oklch(0.78 0.17 80);
      /* amber-ish */
      --ok-accent: var(--brand);
      --ok-ink: var(--ink);
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0b0f17;
      --ink: #e5e7eb;
      --muted: #94a3b8;
      --card: #0f1522;
      --bd: rgba(255, 255, 255, .12);
      --soft: rgba(255, 255, 255, .06);
      --chip: #1f2937;
      --chip-ink: #d1d5db;
      --brand: #7c8cff;
      --ring: #7aa2ff;
      --fav: #fbbf24;
      /* keep alias in dark, too */
      --text: var(--ink);
      --ok-ink: var(--ink);
    }

    @supports (color: oklch(0.7 0.2 240)) {
      :root {
        --bg: oklch(0.19 0.01 250);
        --ink: oklch(0.9 0.02 250);
        --muted: oklch(0.77 0.02 250);
        --card: oklch(0.23 0.01 250);
        --bd: color-mix(in oklch, var(--ink) 16%, transparent);
        --soft: color-mix(in oklch, var(--ink) 8%, transparent);
        --chip: oklch(0.28 0.01 250);
        --chip-ink: oklch(0.87 0.02 250);
        --brand: oklch(0.74 0.16 290);
        --ring: oklch(0.78 0.16 260);
        --fav: oklch(0.84 0.14 80);
      }
    }
  }
}

/* Controls layout (search+button grouped) */
.pp-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.pp-searchwrap {
  display: flex;
  gap: 6px;
  align-items: center;
}

#pp-search {
  min-width: 220px;
}

#pp-search-go {
  cursor: pointer;
}

/* View toggle buttons */
.pp-view .pp-btn.is-active {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Grid vs list container class (already present; ensure both) */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.pp-list {
  display: block;
}

.pp-list .pp-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.pp-list .pp-thumb {
  width: 240px;
  min-height: 100%;
}

/* Investigator GPT section */
.projects-cta {
  display: flex;
  justify-content: center;
  margin-block: 24px 12px;
}

.projects-cta .cta-btn {
  display: inline-block;
  padding: .65rem 1rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
  text-decoration: none;
  background: var(--bg);
  color: var(--ink);
}

.projects-cta .cta-ico {
  width: 18px;
  height: 18px;
  display: block;
}

.projects-cta .cta-btn:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

/* --------------------- 1) Component layer (scoped) ------------------------ */
@layer components {
  .projects-pro {
    container-type: inline-size;
    container-name: var(--projects-container-name);
    margin-inline: auto;
    max-width: 1100px;
    padding-inline: 16px;
    margin-block: 1.25rem;
    color: var(--ink);
    background: transparent;
    content-visibility: auto;
    contain-intrinsic-size: 800px;
    accent-color: var(--ok-accent);
  }

  .pp-header {
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    margin-block-end: calc(var(--space-2) - 2px);
  }

  /* Controls wrapper */
  .pp-controls {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    margin-block: var(--space-2);
  }

  .pp-controls input[type="search"],
  .pp-controls select {
    border: 1px solid var(--bd);
    background: var(--bg);
    color: var(--ink);
    border-radius: var(--radius-1);
    padding: .55rem .7rem;
    font-size: var(--size-1);
    line-height: 1.25;
  }

  .pp-controls input[type="search"]:focus,
  .pp-controls select:focus {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  .pp-h1 {
    font-size: var(--size-3);
    margin: .25rem 0;
    color: var(--ok-ink);
    font-weight: 700;
    letter-spacing: .1px;
  }

  .pp-sub {
    margin: 0;
    color: var(--muted);
    font-size: var(--size-1);
  }

  .pp-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
  }

  .pp-input,
  .pp-select,
  .pp-btn {
    border: 1px solid var(--bd);
    background: var(--bg);
    color: var(--ink);
    border-radius: var(--radius-1);
    padding: .55rem .7rem;
    font-size: var(--size-1);
    line-height: 1.25;
  }

  .pp-input {
    min-inline-size: 220px;
  }

  .pp-btn {
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }

  .pp-btn:hover {
    background: color-mix(in hsl, var(--brand) 12%, var(--bg));
  }

  .pp-btn.is-active {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  .pp-input:focus,
  .pp-select:focus,
  .pp-btn:focus {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  /* tag chips */
  .pp-tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-1) 0 var(--space-2);
  }

  .pp-chip {
    border: 1px solid var(--bd);
    background: var(--chip);
    color: var(--chip-ink);
    border-radius: var(--radius-pill);
    padding: .35rem .7rem;
    font-size: max(.85rem, var(--size-0));
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }

  .pp-chip:hover {
    transform: translateY(-1px);
  }

  .pp-chip.is-on {
    background: var(--brand);
    color: #fff;
    border-color: transparent;
  }

  .pp-chip:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  /* grid/list containers via container queries */
  .pp-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-3);
  }

  @container (min-width: 560px) {
    .pp-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container (min-width: 880px) {
    .pp-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .pp-list {
    display: block;
  }

  .pp-list .pp-card {
    flex-direction: row;
  }

  .pp-list .pp-thumb {
    inline-size: 240px;
    min-block-size: 100%;
  }

  /* card */
  .pp-card {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    overflow: clip;
    display: flex;
    flex-direction: column;
    min-block-size: 180px;
    transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
    will-change: transform;
  }

  .pp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
  }

  .pp-card:focus-within {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  .pp-thumb {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--soft), transparent), radial-gradient(ellipse at 85% 90%, var(--soft), transparent);
    overflow: hidden;
  }

  .pp-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: translateZ(0);
  }

  .pp-card:hover .pp-thumb-img {
    filter: saturate(1.02);
  }

  .pp-body {
    padding: var(--space-3);
  }

  .pp-top {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    align-items: start;
  }

  .pp-title {
    font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
    margin-block: .1rem;
    line-height: 1.2;
  }

  .pp-title a {
    color: var(--ok-ink);
    text-decoration: none;
  }

  .pp-title a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .pp-desc {
    margin: .4rem 0;
    color: var(--muted);
    font-size: var(--size-1);
  }

  .pp-tagsline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: .35rem 0 0;
    padding: 0;
    list-style: none;
  }

  .pp-tag {
    font-size: .82rem;
    border: 1px solid var(--bd);
    border-radius: var(--radius-pill);
    padding: .2rem .5rem;
    color: var(--muted);
    background: color-mix(in hsl, var(--chip) 80%, var(--bg));
  }

  .pp-meta {
    display: flex;
    gap: 6px;
  }

  .pp-icon {
    background: transparent;
    border: 1px solid var(--bd);
    border-radius: var(--radius-1);
    padding: .35rem;
    cursor: pointer;
    line-height: 0;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }

  .pp-icon:hover {
    transform: translateY(-1px);
    background: color-mix(in hsl, var(--brand) 10%, transparent);
  }

  .pp-icon:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  .pp-star {
    fill: transparent;
    stroke: var(--fav);
    stroke-width: 1.2;
  }

  .is-fav .pp-star {
    fill: var(--fav);
    transition: fill var(--dur-fast) var(--ease);
  }

  /* Empty state */
  .pp-empty {
    display: grid;
    place-items: center;
    border: 1px dashed var(--bd);
    border-radius: var(--radius-1);
    padding: var(--space-3);
    color: var(--muted);
    background: color-mix(in hsl, var(--card) 60%, var(--bg));
  }

  /* Skeletons */
  .pp-skel {
    position: relative;
    overflow: hidden;
    background: var(--card);
    border-radius: var(--radius-1);
    border: 1px solid var(--bd);
    min-block-size: 140px;
    box-shadow: var(--shadow-1);
  }

  .pp-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
    animation: ppShimmer 1.2s linear infinite;
  }

  @keyframes ppShimmer {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(100%);
    }
  }
}

/* ---------------------- 2) Utilities & enhancements ----------------------- */
@layer utilities {

  /* a11y helper used by markup */
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Respect user motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .pp-card:hover .pp-thumb-img {
      filter: none;
    }
  }

  /* Prefer higher contrast */
  @media (prefers-contrast: more) {
    .pp-card {
      border-color: color-mix(in hsl, var(--ink) 22%, transparent);
    }

    .pp-input,
    .pp-select,
    .pp-btn {
      border-color: currentColor;
    }

    .pp-chip.is-on {
      box-shadow: 0 0 0 2px color-mix(in hsl, #fff 70%, var(--brand));
    }
  }

  /* Support touch targets on coarse pointers */
  @media (pointer: coarse) {

    .pp-chip,
    .pp-btn,
    .pp-icon {
      padding: .5rem .8rem;
    }
  }

  /* Print hygiene */
  @media print {
    .pp-thumb {
      min-block-size: 0;
      background: none;
    }

    .pp-icon,
    .pp-chip {
      display: none !important;
    }

    .pp-card {
      border-color: #aaa;
      box-shadow: none;
    }
  }
}

/* ------------------------------- 3) Helpers ------------------------------- */
@layer helpers {

  /* Advanced selectors demo w/ safe fallback */
  @supports selector(:has(*)) {

    /* Elevate card when any control inside is focused */
    .pp-card:has(:focus-visible) {
      box-shadow: var(--shadow-2);
    }
  }

  /* Tooltip pattern for the Copy button (requires title attr or data-label) */
  .pp-icon[aria-label="Copy link"],
  .pp-icon[title*="Copy"] {
    position: relative;
  }

  .pp-icon[aria-label="Copy link"]::after,
  .pp-icon[title*="Copy"]::after {
    content: attr(aria-label);
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(-6px);
    bottom: calc(100% + 6px);
    background: color-mix(in hsl, var(--ink) 90%, var(--bg));
    color: #fff;
    font-size: .72rem;
    line-height: 1;
    border-radius: 6px;
    padding: .25rem .4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease);
    white-space: nowrap;
  }

  .pp-icon[aria-label="Copy link"]:hover::after,
  .pp-icon[title*="Copy"]:hover::after {
    opacity: .95;
  }
}

/* Fluid type & spacing */
:root {
  --fs-0: clamp(0.875rem, 0.80rem + 0.4vw, 1rem);
  --fs-1: clamp(1rem, 0.92rem + 0.6vw, 1.125rem);
  --fs-2: clamp(1.125rem, 1.02rem + 0.8vw, 1.25rem);
  --space-2: clamp(10px, 1.2vw, 16px);
}

.safe-pad {
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}

/* Responsive container (mobile → tablet → desktop) */
.projects-pro,
.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

/* Controls */
.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-block: 8px 16px;
}

.pp-searchwrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

#pp-search {
  min-width: 220px;
  font-size: var(--fs-1);
}

#pp-search-go {
  cursor: pointer;
}

/* Grid (default) */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

@media (max-width: 640px) {
  .pp-grid {
    grid-template-columns: 1fr;
  }
}

/* phones */
@media (min-width: 641px) and (max-width: 1024px) {
  .pp-grid {
    gap: 16px;
  }
}

/* tablets */

/* List (alternate) */
.pp-list {
  display: block;
}

.pp-list .pp-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.pp-list .pp-thumb {
  width: 280px;
  min-height: 100%;
}

.pp-list .pp-body {
  padding: 16px;
}

/* Cards */
.pp-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.pp-body {
  padding: 16px;
}

.pp-title a {
  text-decoration: none;
}

/* Thumbnails */
.pp-thumb {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--soft), transparent), radial-gradient(ellipse at 85% 90%, var(--soft), transparent);
  overflow: hidden;
}

.pp-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* View buttons + CTA */
.pp-view .pp-btn.is-active {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.projects-cta {
  display: flex;
  justify-content: center;
  margin-block: 28px 12px;
}

.projects-cta .cta-btn {
  display: inline-block;
  padding: .65rem 1rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
  text-decoration: none;
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
}

.projects-cta .cta-btn:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

/* Hide tag chips if any remain */
.pp-tags,
.pp-chip {
  display: none !important;
}

/* A11y & preferences */
:focus-visible {
  outline: 2px solid var(--ring, #3b82f6);
  outline-offset: 2px;
}

/* ===== Projects Hub hero (refined) ===== */
.projects-hero {
  text-align: center;
  margin: 1.2rem 0 1.35rem;
  max-width: 72rem;
  padding-inline: 1rem;
  margin-inline: auto;
}

.projects-hero__title {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 .25rem;
  color: var(--ink);
}

.projects-hero__sub {
  color: var(--muted);
  margin: 0;
  min-height: 1.5em;
  /* avoid jump when text changes */
}

/* ===== Prominent, centered search bar ===== */
.projects-search {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
  margin-bottom: .75rem;
}

.projects-search__inner {
  display: flex;
  justify-content: center;
}

.projects-search__input {
  inline-size: min(720px, 90vw);
  border-radius: 12px;
  padding: .75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.projects-search__input::placeholder {
  color: var(--muted);
}

/* Keep pp-actions for sort/view; remove extra spacing if the search input was moved out */
.pp-actions {
  margin-top: .25rem;
}

/* Optional: refine Grid/List buttons to sit more evenly below the search row */
.pp-view .pp-btn {
  padding: .5rem .7rem;
  border-radius: 10px;
}

/* ===== Tooltip (pure CSS, anchored to the button) ===== */
.pp-icon[data-tooltip] {
  position: relative;
  overflow: visible;
}

.pp-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: color-mix(in hsl, var(--ink) 94%, black);
  color: white;
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
  padding: .35rem .5rem;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 10;
}

.pp-icon[data-tooltip]:hover::after,
.pp-icon[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tiny arrow */
.pp-icon[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: color-mix(in hsl, var(--ink) 94%, black);
  opacity: 0;
  transition: opacity .12s ease;
}

.pp-icon[data-tooltip]:hover::before,
.pp-icon[data-tooltip]:focus-visible::before {
  opacity: 1;
}

/* ===== Overflow fix for list layout ===== */
.pp-list .pp-card {
  overflow: visible;
}

.pp-list .pp-body {
  overflow: visible;
  position: relative;
  z-index: 1;
}

@media (max-width: 820px) {
  .pp-list .pp-card {
    overflow: visible;
  }
}

/* ===== Alignment & rhythm ===== */
.projects-pro {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ===== List view spacing comparable to grid ===== */
.pp-list {
  display: block;
}

.pp-list .pp-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 18px;
  margin-block: 8px;
  /* breathing between items */
  padding: 0;
  /* rely on inner padding */
}

.pp-list .pp-thumb {
  width: 320px;
  min-height: 100%;
  border-right: 1px solid var(--bd);
}

@media (max-width: 1000px) {
  .pp-list .pp-thumb {
    width: 280px;
  }
}

@media (max-width: 820px) {
  .pp-list .pp-thumb {
    width: 240px;
  }
}

.pp-list .pp-body {
  padding: 18px;
}

.pp-list .pp-title {
  margin-top: .1rem;
  margin-bottom: .35rem;
}

.pp-list .pp-desc {
  margin: .3rem 0 .5rem;
}

/* keep grid spacing a touch roomier */
.pp-grid {
  gap: 20px;
}

/* ===== Card buttons & typography polish ===== */
.pp-title a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .2px;
}

.pp-title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pp-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: color-mix(in hsl, var(--card) 90%, var(--bg));
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}

.pp-icon:hover {
  background: color-mix(in hsl, var(--brand) 8%, var(--card));
  transform: translateY(-1px);
}

.pp-icon:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.pp-star {
  fill: transparent;
  stroke: var(--fav);
  stroke-width: 1.2
}

.pp-body {
  font-size: .98rem;
}

.pp-desc {
  color: var(--muted);
}

/* ===== Updated line styling ===== */
.pp-foot {
  margin-top: .55rem;
}

.pp-updated {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: .86rem;
}

.pp-updated svg {
  opacity: .8
}

/* ===== Keep thumbnails crisp (grid + list) ===== */
.pp-thumb {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--soft), transparent), radial-gradient(ellipse at 85% 90%, var(--soft), transparent);
}

.pp-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ============== Projects page style refresh ============== */

/* 1) Container rhythm: hero, gallery, quick links share the same max width + padding */
.projects-hero,
.projects-pro,
.projects-links {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* 2) Hero spacing & typography */
.projects-hero {
  text-align: center;
  margin: 1.25rem 0 1.75rem;
}

.projects-hero__title {
  font-size: clamp(1.65rem, 1.1rem + 2.4vw, 2.35rem);
  letter-spacing: .2px;
  margin: 0;
  color: var(--ink);
}

.projects-hero__sub {
  color: var(--muted);
  margin: .45rem 0 .95rem;
}

.projects-hero__cta {
  display: inline-block;
  padding: .65rem 1.05rem;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: background .15s ease, transform .15s ease;
}

.projects-hero__cta:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
  transform: translateY(-1px);
}

/* 3) Controls: make search a touch wider; tighten button spacing */
.pp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 .6rem;
}

.pp-input {
  min-width: min(320px, 80vw);
}

.pp-select,
.pp-btn {
  border-radius: 10px;
  padding: .55rem .7rem;
}

/* 4) Grid view: more breathing room between cards */
.pp-grid {
  gap: 20px;
}

/* 5) Card design: softer edges, deeper shadow on hover, better padding */
.pp-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.pp-card:hover {
  transform: translateY(-3px);
}

.pp-body {
  padding: 16px;
}

.pp-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

/* Stronger typography */
.pp-title {
  font-size: 1.08rem;
  margin: .15rem 0 .25rem;
}

.pp-desc {
  margin: .35rem 0 .5rem;
  color: var(--muted);
}

/* Thumbnail: keep 16:9 crop and ensure it never looks squashed */
.pp-thumb {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--soft), transparent), radial-gradient(ellipse at 85% 90%, var(--soft), transparent);
}

.pp-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 6) Tag pills: slightly brighter text and tighter padding */
.pp-tagsline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: .25rem 0 0;
  padding: 0;
  list-style: none;
}

.pp-tag {
  font-size: .82rem;
  line-height: 1;
  padding: .25rem .55rem;
  border-radius: 9999px;
  border: 1px solid var(--bd);
  color: var(--muted);
  background: color-mix(in hsl, var(--card) 82%, var(--bg));
}

.dark .pp-tag {
  color: #d1d5db;
}

/* 7) List view: media-object layout with roomy image column */
.pp-list {
  display: block;
}

.pp-list .pp-card {
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
}

.pp-list .pp-thumb {
  width: 320px;
  min-height: 100%;
  border-right: 1px solid var(--bd);
}

@media (max-width: 900px) {
  .pp-list .pp-thumb {
    width: 260px;
  }
}

/* 8) View controls hidden on mobile (UI is grid-only there) */
@media (max-width:640px) {
  .pp-view {
    display: none !important;
  }
}

/* 9) Quick Links: stronger section identity & spacing */
.projects-links {
  margin: 1.75rem 0 2.5rem;
}

.links-head {
  text-align: center;
  margin: 0 0 .85rem;
}

.links-head h2 {
  font-size: clamp(1.1rem, .95rem + 1.2vw, 1.35rem);
  margin: 0 0 .3rem;
  color: var(--ink);
}

.links-sub {
  color: var(--muted);
  margin: 0;
}

/* Grid of link tiles */
.links-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width:768px) {
  .links-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width:1024px) {
  .links-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.link-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}

.link-tile:hover {
  transform: translateY(-1px);
  background: color-mix(in hsl, var(--brand) 6%, var(--card));
}

.link-icon {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

.link-label {
  line-height: 1.2;
}

.link-tile:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* 10) Dark-mode safety for icons */
.dark .link-icon {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ===== Projects page polish ===== */
/* Container & rhythm */
.projects-hero,
.projects-pro,
.projects-links {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Hero */
.projects-hero {
  text-align: center;
  margin: 1.25rem 0 1.5rem;
}

.projects-hero__title {
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.25rem);
  letter-spacing: .2px;
  margin: 0;
  color: var(--ink);
}

.projects-hero__sub {
  color: var(--muted);
  margin: .4rem 0 .9rem;
}

.projects-hero__cta {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.projects-hero__cta:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

/* Gallery controls sizing on small screens */
.pp-actions {
  gap: 8px;
  align-items: center;
}

.pp-input {
  min-width: min(280px, 80vw);
}

/* Cards: slightly tighter, crisper hover */
.pp-grid {
  gap: 16px;
}

.pp-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pp-card:hover {
  transform: translateY(-2px);
}

/* List view: media-object layout */
.pp-list .pp-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
}

.pp-list .pp-thumb {
  width: 300px;
  min-height: 100%;
}

/* Hide Grid/List controls on mobile; keep on tablet/desktop */
@media (max-width:640px) {
  .pp-view {
    display: none !important;
  }
}

/* ===== Quick Links section ===== */
.projects-links {
  margin: 1.5rem 0 2.25rem;
}

.links-head {
  text-align: center;
  margin: 0 0 .75rem;
}

.links-head h2 {
  font-size: clamp(1.1rem, .95rem + 1.2vw, 1.4rem);
  margin: 0 0 .25rem;
  color: var(--ink);
}

.links-sub {
  color: var(--muted);
  margin: 0;
}

.links-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width:768px) {
  .links-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width:1024px) {
  .links-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.link-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform .14s ease, background .14s ease;
}

.link-tile:hover {
  transform: translateY(-1px);
  background: color-mix(in hsl, var(--brand) 6%, var(--card));
}

.link-icon {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

.link-label {
  line-height: 1.2;
}

/* Focus-visible (keyboard) */
.link-tile:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Dark mode safety for icons */
.dark .link-icon {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Hero (redundant-safe) + mobile hide view controls */
.projects-hero {
  text-align: center;
  margin: 1rem 0 1.25rem;
}

.projects-hero__title {
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.25rem);
  margin: 0;
  color: var(--ink);
}

.projects-hero__sub {
  color: var(--muted);
  margin: .35rem 0 .8rem;
}

.projects-hero__cta {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.projects-hero__cta:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

@media (max-width:640px) {
  .pp-view {
    display: none !important;
  }
}

/* === Projects hero (top) === */
.projects-hero {
  text-align: center;
  margin: 1rem 0 1.25rem;
}

.projects-hero__title {
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.25rem);
  margin: 0;
  color: var(--ink);
}

.projects-hero__sub {
  color: var(--muted);
  margin: .35rem 0 .8rem;
}

.projects-hero__cta {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.projects-hero__cta:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

/* Safety: hide any leftover tag chips UI */
.pp-tags,
.pp-chip {
  display: none !important;
}

/* ====== ACA hub: responsive & dark-mode readable ====== */
/* breadcrumb */
.aca-breadcrumb {
  margin: .5rem 0 1rem
}

.aca-back {
  text-decoration: none;
  font-weight: 600;
  padding: .35rem .6rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
  color: var(--ink)
}

.aca-back:hover {
  background: color-mix(in hsl, var(--brand) 8%, var(--bg))
}

/* banner */
.aca-banner {
  margin: .25rem 0 1rem
}

.aca-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  object-fit: cover
}

/* quick actions */
.aca-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: .25rem 0 1rem
}

.aca-btn {
  display: inline-block;
  padding: .6rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600
}

.aca-btn--ghost {
  background: transparent
}

.aca-btn:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg))
}

/* header text */
.aca-header .pp-h1 {
  font-size: clamp(1.4rem, 1rem + 2.5vw, 2.2rem);
  margin: .25rem 0
}

.aca-header .pp-sub {
  color: var(--muted);
  margin: .25rem 0 .5rem
}

/* grid: 1 → 2 → 3 */
.aca-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-block: .5rem 1.25rem
}

@media (min-width:640px) {
  .aca-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
  }
}

@media (min-width:1024px) {
  .aca-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
  }
}

/* cards */
.aca-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.aca-card:hover {
  transform: translateY(-2px)
}

.aca-link {
  display: block;
  padding: 14px;
  color: var(--ink);
  text-decoration: none
}

.aca-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 12px
}

.aca-title {
  margin: 0 0 .25rem;
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem)
}

.aca-desc {
  margin: .2rem 0 .4rem;
  color: var(--muted)
}

/* pills */
.aca-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0
}

.aca-pill {
  font-size: .82rem;
  padding: .2rem .5rem;
  border-radius: 9999px;
  border: 1px solid var(--bd);
  background: color-mix(in hsl, var(--card) 85%, var(--bg));
  color: var(--ink);
}

.aca-pill--muted {
  color: var(--muted);
  background: color-mix(in hsl, var(--card) 70%, var(--bg));
}

/* dark-mode safety */
.dark .aca-pill--muted {
  color: var(--muted)
}

.dark .aca-desc {
  color: var(--muted)
}

/* mobile sticky back */
@media (max-width: 640px) {
  .aca-breadcrumb {
    position: sticky;
    top: calc(env(safe-area-inset-top) + 8px);
    z-index: 20
  }

  .aca-back {
    background: var(--bg);
    backdrop-filter: blur(6px)
  }
}

/* =============================
   CTA buttons: icon + label fix
   ============================= */

/* Layout: all CTAs in the projects CTA group use a consistent row layout */
.cta-group .cta-item {
  display: inline-flex;
  /* row layout */
  align-items: center;
  /* center icon + text vertically */
  gap: 10px;
  /* space between icon and label */
  min-height: 44px;
  /* comfortable tap target */
  padding: 10px 14px;
  /* inner button padding */
  line-height: 1.15;
  /* avoid tall text lines */
}

/* Icon container: fixed box so different icons align the same */
.cta-group .cta-icon-wrap,
.cta-group .cta-icon {
  width: 20px;
  height: 20px;
}

/* Ensure images don't carry baseline gap and don't stretch */
.cta-group img.cta-icon,
.cta-group .gpt-icon {
  display: block;
  /* removes baseline descent gap */
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* keep native aspect ratio */
}

/* GPT theme-aware swap (keep both images in markup) */
.gpt-icon--dark {
  display: none;
}

.gpt-icon--light {
  display: block;
}

.dark .gpt-icon--dark {
  display: block;
}

.dark .gpt-icon--light {
  display: none;
}

/* Optional: consistent font weight for labels */
.cta-group .cta-item .cta-label {
  font-weight: 600;
}

/* Keep hover/focus from existing styles; ensure focus ring is visible */
.cta-group .cta-item:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* === Investigator GPT icon: theme-aware swap (light vs dark) === */
/* Default (light) already uses bw-chatgpt-2.svg. Provide dark variant when available. */
.cta-icon.gpt-icon {
  transition: filter .15s ease;
}

/* If you add a dedicated dark icon asset later (e.g., chatgpt-dark.svg), just swap URL here */
@media (prefers-color-scheme: dark) {
  .cta-icon.gpt-icon {
    content: url(/assets/icons/bw-chatgpt-2-dark.svg);
  }
}

.dark .cta-icon.gpt-icon {
  content: url(/assets/icons/bw-chatgpt-2-dark.svg);
}

/* Fallback: if dark asset is missing, slightly invert to improve contrast on dark bg */
@supports not (content: url(foo.svg)) {
  /* safeguard no-op; content supported broadly */
}

/* Soft contrast lift if dark-specific asset not yet provided */
.dark .cta-icon.gpt-icon:not([src$='-dark.svg']) {
  filter: brightness(1.15) contrast(1.1);
}

@media (prefers-color-scheme: dark) {
  .cta-icon.gpt-icon:not([src$='-dark.svg']) {
    filter: brightness(1.15) contrast(1.1);
  }
}

/* === Layout restore (proj_layout2) === */
/* Center container */
.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

/* Controls */
.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-block: 8px 16px;
}

.pp-searchwrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

#pp-search {
  min-width: 220px;
}

/* Grid */
.pp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width:640px) {
  .pp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:1024px) {
  .pp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Cards */
.pp-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.pp-body {
  padding: 16px;
}

.pp-title {
  margin: 0 0 6px;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
}

.pp-title a {
  color: var(--ink);
  text-decoration: none;
}

.pp-title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pp-desc {
  margin: .25rem 0;
  color: var(--muted);
}

/* Tags as pills */
.pp-tagsline {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
}

.pp-tagsline .pp-tag {
  font-size: .8rem;
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: .2rem .5rem;
  color: var(--muted);
}

/* === Projects hero (top) (append duplicate-safe) === */
.projects-hero {
  text-align: center;
  margin: 1rem 0 1.25rem;
}

.projects-hero__title {
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.25rem);
  margin: 0;
  color: var(--ink);
}

.projects-hero__sub {
  color: var(--muted);
  margin: .35rem 0 .8rem;
}

.projects-hero__cta {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.projects-hero__cta:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

.pp-tags,
.pp-chip {
  display: none !important;
}

@media (max-width:640px) {
  #pp-view.pp-view {
    display: none !important;
  }
}

/* Thumbnails 16:9 crop */
.pp-thumb {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--soft), transparent), radial-gradient(ellipse at 85% 90%, var(--soft), transparent);
  overflow: hidden;
}

.pp-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* CTA tiles */
.cta-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: min(100% - 2rem, 56rem);
  margin: 20px auto 10px;
}

@media (min-width:640px) {
  .cta-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:1024px) {
  .cta-group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width:1280px) {
  .cta-group {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.cta-item.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding: 14px 12px;
}

.cta-item.tile img {
  width: 48px;
  height: 48px;
  display: block;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.cta-item.tile .cta-label {
  font-size: clamp(.9rem, .85rem + .2vw, 1rem);
  line-height: 1.15;
  text-align: center;
}

/* Hide any leftover legacy sections */
.projects-cta {
  display: none !important;
}

/* Projects rescue: ensure CTA tiles don’t collapse; hide any legacy CTA blocks */
.cta-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: min(100% - 2rem, 56rem);
  margin: 20px auto 10px;
}

@media (min-width:640px) {
  .cta-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:1024px) {
  .cta-group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width:1280px) {
  .cta-group {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.cta-item.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding: 14px 12px;
}

.cta-item.tile img {
  width: 48px;
  height: 48px;
  display: block;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.cta-item.tile .cta-label {
  font-size: clamp(.9rem, .85rem + .2vw, 1rem);
  line-height: 1.15;
  text-align: center;
}

.cta-item.tile:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

.cta-item.tile:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .cta-item.tile {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--bd);
  }

  .cta-item.tile:hover {
    background: color-mix(in hsl, var(--brand) 12%, var(--bg));
  }
}

.dark .cta-item.tile {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bd);
}

.dark .cta-item.tile:hover {
  background: color-mix(in hsl, var(--brand) 12%, var(--bg));
}

.projects-cta {
  display: none !important;
}

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

/* ===== Layout width + safe-areas (mobile/tablet/desktop) ===== */
.container,
.projects-pro {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.safe-pad {
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}

/* ===== HERO SEARCH (prominent, clean) ===== */
.pp-hero {
  display: flex;
  justify-content: center;
  margin-block: 12px 12px;
}

.pp-hero-inner {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 880px;
  /* large but centered */
}

.pp-input-hero {
  flex: 1;
  min-height: 44px;
  border-radius: 999px;
  padding: .65rem 1rem;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.pp-input-hero::placeholder {
  opacity: .7;
}

.pp-btn-hero {
  min-height: 44px;
  border-radius: 999px;
  padding: .65rem 1rem;
  cursor: pointer;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--ink);
}

@media (max-width:640px) {
  .pp-hero-inner {
    gap: 8px;
  }

  .pp-btn-hero {
    padding: .55rem .9rem;
  }
}

/* ===== Controls row under hero (sort + view only) ===== */
.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-block: 6px 10px;
}

.pp-view .pp-btn.is-active {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ===== Grid/List cards ===== */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

@media (max-width:640px) {
  .pp-grid {
    grid-template-columns: 1fr;
  }
}

.pp-list {
  display: block;
}

.pp-list .pp-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.pp-list .pp-thumb {
  width: 280px;
  min-height: 100%;
}

/* ===== Card spacing ===== */
.pp-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.pp-body {
  padding: 16px;
}

/* ===== CTA with icon ===== */
.projects-cta {
  display: flex;
  justify-content: center;
  margin-block: 22px 10px;
}

.projects-cta .cta-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  padding: .65rem 1rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
}

.projects-cta .cta-ico {
  width: 18px;
  height: 18px;
  display: block;
}

.projects-cta .cta-btn:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

/* ===== Footer tighten (remove extra whitespace below) ===== */
footer {
  margin-bottom: 0 !important;
  padding-bottom: 1rem;
}

body {
  margin: 0;
}

html,
body {
  height: auto;
}

/* 1) Use a flex page shell so footer sits at the bottom with no extra gap */
html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* 2) Let main content grow; footer sits after it (no blank space after) */
#main-content {
  flex: 1 0 auto;
}

/* the <main> element on projects page */
.site-footer {
  flex-shrink: 0;
}

/* 3) Tighten vertical rhythm near the bottom */
.projects-cta {
  margin-block-end: 8px;
}

/* CTA just above footer: small bottom gap */
footer,
.site-footer {
  margin-bottom: 0 !important;
  padding-bottom: 12px;
}

/* 4) Remove any stray bottom margin on the last element on the page */
body> :last-child {
  margin-bottom: 0 !important;
}

/* 5) Reduce bottom padding of the projects page container on large screens */
@media (min-width: 1024px) {
  #main-content.container {
    padding-bottom: 12px !important;
  }
}

/* 6) Ensure no phantom spacing from empty blocks */
.pp-empty {
  margin-bottom: 0;
}

/* (safety) If some global file adds a huge min-height after footer, override it */
body::after {
  content: none !important;
}

/* Hide List View button only on mobile screens */
@media (max-width: 640px) {
  #pp-view-list {
    display: none !important;
  }
}

/* ===== Dark-mode legibility overrides (supports OS dark AND site toggle .dark) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* high-contrast tokens for dark */
    --bg: #0b0f17;
    --ink: #e6e9ef;
    /* primary text */
    --muted: #b6c2d1;
    /* secondary text */
    --card: #121826;
    /* card background */
    --bd: rgba(255, 255, 255, .14);
    --soft: rgba(255, 255, 255, .08);
    --brand: #8ea6ff;
    --ring: #8fb3ff;
    --fav: #f8c75a;
    --shadow: 0 18px 40px rgba(0, 0, 0, .6);
  }
}

/* If the site uses a theme toggle that adds .dark, mirror the same contrasts */
.dark :root,
.dark {
  --bg: #0b0f17;
  --ink: #e6e9ef;
  --muted: #b6c2d1;
  --card: #121826;
  --bd: rgba(255, 255, 255, .14);
  --soft: rgba(255, 255, 255, .08);
  --brand: #8ea6ff;
  --ring: #8fb3ff;
  --fav: #f8c75a;
  --shadow: 0 18px 40px rgba(0, 0, 0, .6);
}

/* Page background + base text (dark theme + OS preference) */
.dark body {
  background: var(--bg);
  color: var(--ink);
}

/* Base card/link styling in dark theme class */
.dark .pp-card {
  background: var(--card);
  border-color: var(--bd);
  box-shadow: var(--shadow);
}

.dark .pp-title a {
  color: var(--ink);
}

.dark .pp-desc {
  color: var(--muted);
}

.dark .pp-tagsline .pp-tag {
  color: var(--muted);
  border-color: var(--bd);
  background: color-mix(in hsl, var(--card) 70%, var(--bg));
}

.dark #pp-search,
.dark #pp-search-go,
.dark .pp-input,
.dark .pp-select,
.dark .pp-btn {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--bd);
}

.dark #pp-search::placeholder {
  color: color-mix(in hsl, var(--ink) 55%, transparent);
}

.dark .pp-view .pp-btn.is-active {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.dark .projects-cta .cta-btn {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bd);
}

.dark .projects-cta .cta-btn:hover {
  background: color-mix(in hsl, var(--brand) 12%, var(--bg));
}

.dark :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.dark footer {
  color: var(--muted);
}

.dark select {
  color: var(--ink);
  background-color: var(--bg);
}

.dark .pp-grid {
  background: transparent;
}

.dark .pp-list .pp-card {
  background: var(--card);
}

.pp-icon svg {
  fill: currentColor;
  stroke: currentColor;
}

/* OS-level dark preference fallback (no .dark class) */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--bg);
    color: var(--ink);
  }

  .pp-card {
    background: var(--card);
    border-color: var(--bd);
    box-shadow: var(--shadow);
  }

  .pp-title a {
    color: var(--ink);
  }

  .pp-desc {
    color: var(--muted);
  }

  .pp-tagsline .pp-tag {
    color: var(--muted);
    border-color: var(--bd);
    background: color-mix(in hsl, var(--card) 70%, var(--bg));
  }

  #pp-search,
  #pp-search-go,
  .pp-input,
  .pp-select,
  .pp-btn {
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--bd);
  }

  #pp-search::placeholder {
    color: color-mix(in hsl, var(--ink) 55%, transparent);
  }

  .pp-view .pp-btn.is-active {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  .projects-cta .cta-btn {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--bd);
  }

  .projects-cta .cta-btn:hover {
    background: color-mix(in hsl, var(--brand) 12%, var(--bg));
  }

  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  footer {
    color: var(--muted);
  }

  select {
    color: var(--ink);
    background-color: var(--bg);
  }

  .pp-grid {
    background: transparent;
  }

  .pp-list .pp-card {
    background: var(--card);
  }
}

/* CTA group: responsive grid */
.cta-group {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
  width: min(100% - 2rem, 56rem);
  margin: 18px auto 10px;
}

@media (min-width: 640px) {

  /* tablets */
  .cta-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  /* desktop */
  .cta-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {

  /* large desktop */
  .cta-group {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* CTA buttons */
.cta-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding-inline: 0.75rem;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.cta-item img {
  width: 18px;
  height: 18px;
  display: block;
  filter: none;
  mix-blend-mode: normal;
  /* keep icons clean in dark mode */
}

.cta-item:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

.cta-item:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Dark mode contrast */
@media (prefers-color-scheme: dark) {
  .cta-item {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--bd);
  }

  .cta-item:hover {
    background: color-mix(in hsl, var(--brand) 12%, var(--bg));
  }
}

.dark .cta-item {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bd);
}

.dark .cta-item:hover {
  background: color-mix(in hsl, var(--brand) 12%, var(--bg));
}

/* Responsive container for CTA tiles */
.cta-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: min(100% - 2rem, 56rem);
  margin: 20px auto 10px;
}

@media (min-width:640px) {
  .cta-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* tablet */
@media (min-width:1024px) {
  .cta-group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* desktop */
@media (min-width:1280px) {
  .cta-group {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* wide */

/* Tile style: icon above label */
.cta-item.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
  /* roomy tile */
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding: 14px 12px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.cta-item.tile img {
  width: 48px;
  height: 48px;
  display: block;
  filter: none !important;
  mix-blend-mode: normal !important;
  /* keep icon crisp in dark mode */
}

.cta-item.tile .cta-label {
  font-size: clamp(.9rem, .85rem + .2vw, 1rem);
  line-height: 1.15;
  text-align: center;
}

.cta-item.tile:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

.cta-item.tile:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Dark mode contrast */
@media (prefers-color-scheme: dark) {
  .cta-item.tile {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--bd);
  }

  .cta-item.tile:hover {
    background: color-mix(in hsl, var(--brand) 12%, var(--bg));
  }
}

.dark .cta-item.tile {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bd);
}

.dark .cta-item.tile:hover {
  background: color-mix(in hsl, var(--brand) 12%, var(--bg));
}

/* === CTA TILES: high-specificity to override old rules === */
main.container .cta-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: min(100% - 2rem, 56rem);
  margin: 20px auto 10px;
}

@media (min-width:640px) {

  /* tablet */
  main.container .cta-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:1024px) {

  /* desktop */
  main.container .cta-group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width:1280px) {

  /* wide */
  main.container .cta-group {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

main.container .cta-group .cta-item.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding: 14px 12px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

main.container .cta-group .cta-item.tile img {
  width: 48px;
  height: 48px;
  display: block;
  filter: none !important;
  mix-blend-mode: normal !important;
  /* keep crisp in dark */
}

main.container .cta-group .cta-item.tile .cta-label {
  font-size: clamp(.9rem, .85rem + .2vw, 1rem);
  line-height: 1.15;
  text-align: center;
}

main.container .cta-group .cta-item.tile:hover {
  background: color-mix(in hsl, var(--brand) 10%, var(--bg));
}

main.container .cta-group .cta-item.tile:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  main.container .cta-group .cta-item.tile {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--bd);
  }

  main.container .cta-group .cta-item.tile:hover {
    background: color-mix(in hsl, var(--brand) 12%, var(--bg));
  }
}

.dark main.container .cta-group .cta-item.tile {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bd);
}

.dark main.container .cta-group .cta-item.tile:hover {
  background: color-mix(in hsl, var(--brand) 12%, var(--bg));
}

/* Hide any legacy stacked CTA blocks if they still exist on this page */
main.container .projects-cta {
  display: none !important;
}

/* Ensure thumbnails/icons aren't altered in dark mode */
.pp-thumb-img,
.cta-group img {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* === Albany Crime Analysis hub (responsive) === */
:root {
  --fs-0: clamp(.9rem, .86rem + .25vw, 1rem);
  --fs-1: clamp(1rem, .96rem + .35vw, 1.125rem);
  --fs-2: clamp(1.1rem, 1rem + .6vw, 1.3rem);
}

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.safe-pad {
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}

/* Banner */
.aca-banner {
  margin: 0 0 1.1rem;
}

.aca-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Title + subtitle */
.aca-header .pp-h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: 1.15;
}

.aca-header .pp-sub {
  color: var(--muted);
  font-size: var(--fs-1);
}

/* Grid */
.aca-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-block: 10px 14px;
}

@media (min-width:640px) {
  .aca-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width:1024px) {
  .aca-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* Cards */
.aca-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.aca-title {
  margin: 0 0 6px;
  font-size: var(--fs-2);
}

.aca-link {
  color: var(--ink);
  text-decoration: none;
}

.aca-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aca-desc {
  margin: .25rem 0;
  color: var(--muted);
  font-size: var(--fs-1);
}

.aca-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
}

.aca-tags li {
  font-size: .8rem;
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: .2rem .5rem;
  color: var(--muted);
}

/* Focus & bottom spacing */
:focus-visible {
  outline: 2px solid var(--ring, #3b82f6);
  outline-offset: 2px;
}

.site-footer {
  margin-bottom: 0;
  padding-bottom: 12px;
}

#main-content {
  padding-bottom: 1.25rem;
}

/* === Projects page layout rescue (grid, cards, thumbnails) === */

/* Center page content across breakpoints */
.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

/* Controls layout */
.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-block: 8px 16px;
}

.pp-searchwrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

#pp-search {
  min-width: 220px;
}

/* Responsive grid: 1 col mobile → 2 tablet → 3 desktop */
.pp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width:640px) {
  .pp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:1024px) {
  .pp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* List view (alt layout) */
.pp-list {
  display: block;
}

.pp-list .pp-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.pp-list .pp-thumb {
  width: 280px;
  min-height: 100%;
}

/* Cards */
.pp-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.pp-body {
  padding: 16px;
}

.pp-title {
  margin: 0 0 6px;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
}

.pp-title a {
  color: var(--ink);
  text-decoration: none;
}

.pp-title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pp-desc {
  margin: .25rem 0;
  color: var(--muted);
}

/* Tags line (no bullets) */
.pp-tagsline {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
}

.pp-tagsline .pp-tag {
  font-size: .8rem;
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: .2rem .5rem;
  color: var(--muted);
}

/* Thumbnails: constrain images to 16:9 and cover */
.pp-thumb {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--soft), transparent), radial-gradient(ellipse at 85% 90%, var(--soft), transparent);
  overflow: hidden;
}

.pp-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* View toggle active state */
.pp-view .pp-btn.is-active,
#pp-view-grid.is-active,
#pp-view-list.is-active {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Dark mode: keep images unchanged */
.pp-thumb-img {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* === /projects/ layout restore: centered container, grid, cards, cropped thumbs === */

/* Center page content */
.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

/* Controls row */
.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-block: 8px 16px;
}

.pp-searchwrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

#pp-search {
  min-width: 220px;
}

/* Grid: 1 col mobile → 2 tablet → 3 desktop */
.pp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width:640px) {
  .pp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:1024px) {
  .pp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Optional list view */
.pp-list {
  display: block;
}

.pp-list .pp-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.pp-list .pp-thumb {
  width: 280px;
  min-height: 100%;
}

/* Cards */
.pp-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.pp-body {
  padding: 16px;
}

.pp-title {
  margin: 0 0 6px;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
}

.pp-title a {
  color: var(--ink);
  text-decoration: none;
}

.pp-title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pp-desc {
  margin: .25rem 0;
  color: var(--muted);
}

/* Tag pills (no bullets) */
.pp-tagsline {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
}

.pp-tagsline .pp-tag {
  font-size: .8rem;
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: .2rem .5rem;
  color: var(--muted);
}

/* Thumbnails: enforce 16:9 crop */
.pp-thumb {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--soft), transparent), radial-gradient(ellipse at 85% 90%, var(--soft), transparent);
  overflow: hidden;
}

.pp-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none !important;
  mix-blend-mode: normal !important;
  /* keep images unchanged in dark mode */
}

/* View toggle active look */
.pp-view .pp-btn.is-active,
#pp-view-grid.is-active,
#pp-view-list.is-active {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* === Albany Crime Analysis hub (responsive) === */
.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.safe-pad {
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}

/* Banner */
.aca-banner {
  margin: 0 0 1.1rem;
}

.aca-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Title + subtitle */
.aca-header .pp-h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: 1.15;
}

.aca-header .pp-sub {
  color: var(--muted);
}

/* Grid: 1 col → 2 → 3 */
.aca-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-block: 10px 14px;
}

@media (min-width:640px) {
  .aca-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width:1024px) {
  .aca-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* Cards */
.aca-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.aca-title {
  margin: 0 0 6px;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
}

.aca-link {
  color: var(--ink);
  text-decoration: none;
}

.aca-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aca-desc {
  margin: .25rem 0;
  color: var(--muted);
}

/* === Investigator GPT icon: theme-aware swap === */
.cta-icon-wrap {
  display: inline-block;
  line-height: 0;
}

.gpt-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

/* Default (light) shows light icon; hide dark icon */
.gpt-icon--dark {
  display: none;
}

.gpt-icon--light {
  display: inline-block;
}

/* Dark mode: show dark icon; hide light icon */
.dark .gpt-icon--dark {
  display: inline-block;
}

.dark .gpt-icon--light {
  display: none;
}

.aca-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
}

.aca-tags li {
  font-size: .8rem;
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: .2rem .5rem;
  color: var(--muted);
}

/* Bottom spacing / focus */
.site-footer {
  margin-bottom: 0;
  padding-bottom: 12px;
}

#main-content {
  padding-bottom: 1.25rem;
}

:focus-visible {
  outline: 2px solid var(--ring, #3b82f6);
  outline-offset: 2px;
}