/* ============================================================
   Vista Explorer aero.css
   Restyles the portfolio in a Frutiger Aero / Vista chrome aesthetic.
   Overrides existing CSS variables and selectors. No content changes.
   ============================================================ */

/* ── Palette: light blue/grey + red accent ── */
:root {
  --bg: #c8d5e2;
  --surface: #f4f8fb;
  --surface-hover: #e8f0f7;
  --border: rgba(20, 40, 70, 0.4);
  --border-strong: rgba(20, 40, 70, 0.6);
  --text: #1c2c45;
  --text-muted: #4a5a72;
  --accent: #a02a2a;
  --accent-glow: rgba(160, 42, 42, 0.12);

  --chrome-light-1: #d8e4ef;
  --chrome-light-2: #b6c8dd;
  --chrome-light-3: #9fb6cf;
  --chrome-light-4: #7d9cba;
  --chrome-light-5: #5a7a9a;

  --chrome-dark-1: #4a5260;
  --chrome-dark-2: #2a313c;
  --chrome-dark-3: #1a1f28;

  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Page background: real Frutiger Aero wallpaper, fixed so windows scroll over it ── */
body {
  background:
    url('images/bg-aero.jpg') center top / cover no-repeat fixed,
    linear-gradient(180deg, #5cb0ed 0%, #88d5f3 100%) !important;
  color: var(--text) !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.page-bg {
  background: transparent !important;
}

/* ── Container styling shared by header+about block AND filter+grid block ── */
/* Both wrappers get the same dark glass treatment */
.container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 auto !important;
  max-width: 960px !important;
  box-shadow: none !important;
  position: relative !important;
  padding: 0 16px !important;
}

.container::before {
  display: none !important;
  content: none !important;
}

/* Container 1: header + about wrapped together via a fake-wrapper using the divider line */
header,
.about,
.line-grow {
  position: relative !important;
}

/* ── BUG FIX: Override the reveal animation system ──
   The original site fades cards in via IntersectionObserver. After filtering
   from Presentations to All (or vice versa), cards stay opacity:0 because
   the observer doesn't re-fire if they were already in viewport. Aero
   portfolios from the era didn't have fancy reveal-on-scroll anyway, so
   we just make everything always visible.                                  */
.reveal,
.reveal-scale,
.reveal-pop,
.reveal-left,
.reveal-right,
.line-grow,
.hero-animate {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* Hidden cards (filter system) still get hidden — that's the actual hiding mechanism */
.card.hidden {
  display: none !important;
}

/* ── CONTAINER 1 - TOP HALF: Header (name + links) ──
   Panel chrome (background, border, radius, shadow) lives on .hero-block
   wrapper. This element is now just the inner padding region. */
header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 40px 48px 12px !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: block !important;
  position: relative !important;
}

/* New inner row wrapper — handles name + icons layout.
   Fresh selector that nothing else in the cascade can override. */
.hero-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.hero-row h1 {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.hero-row .links {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

header h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.5) !important;
  filter: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Links sit naked next to the name - no wrapper rectangle */
header .links {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

header h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  /* Smaller responsive cap so name + icons reliably fit in one row */
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  /* Prevent text from wrapping to a second line within the h1 */
  white-space: nowrap !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  /* Aero text: hard drop shadow for legibility + soft cyan halo for luminosity */
  text-shadow:
    0 1px 0   rgba(0, 0, 0, 0.65),
    0 2px 12px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(170, 220, 255, 0.45) !important;
  filter: none !important;
  margin: 0 !important;
  min-width: 0 !important;
}

header p {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 500 !important;
}

/* Header nav: bare sphere icons-as-buttons sitting next to the name.
   No surrounding pill chrome — the dome PNGs ARE the buttons.
   Each link stacks the icon over a small white label, dock-style. */
header .links a {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  text-shadow:
    0 1px 0   rgba(0, 0, 0, 0.65),
    0 1px 4px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.2s ease-out, filter 0.2s ease-out !important;
}

header .links a:hover {
  transform: translateY(-2px) scale(1.06) !important;
  filter: brightness(1.08) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

header .links a:active {
  transform: translateY(0) scale(0.98) !important;
  filter: brightness(0.95) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Glossy dome icons — they ARE the buttons.
   PNGs were chroma-keyed off green so they have no built-in shadow;
   we add a soft drop-shadow filter here to ground them. */
header .links a img.btn-icon {
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  display: block !important;
  pointer-events: none !important;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 20, 0.55))
          drop-shadow(0 1px 2px rgba(0, 0, 0, 0.40)) !important;
}

/* ── CONTAINER 1 — UNIFIED WRAPPER: Header + About in one rounded glass panel ──
   The single rounded rectangle that contains the name/icons row AND the
   headshot+bio row. Specular highlight only at very top (1st stop), so the
   bottom of the panel stays solid and reads as one continuous container. */
.hero-block {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.08) 4%,
      rgba(255, 255, 255, 0.02) 10%,
      rgba(255, 255, 255, 0)    20%),
    linear-gradient(180deg,
      rgba(38, 52, 78, 0.60) 0%,
      rgba(20, 30, 50, 0.72) 30%,
      rgba(15, 24, 42, 0.80) 100%) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 16px !important;
  margin: 32px 0 24px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 18px 44px rgba(0, 0, 30, 0.45),
    0 8px 18px rgba(0, 0, 0, 0.20) !important;
  position: relative !important;
}

/* ── CONTAINER 1 - BOTTOM HALF: About card ──
   Panel chrome (background, border, radius, shadow) lives on .hero-block
   wrapper. This element is now just the inner padding region. */
.about {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 48px 32px !important;
  margin: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
  position: relative !important;
}

.about p {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
}

.about img {
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  outline: 1px solid rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

.about p {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
}

.about img {
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  outline: 1px solid rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ── CONTAINER 2 - TOP HALF: Filter rail ── */
.filters {
  /* Top of the second container — full specular treatment, same as header */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.08) 12%,
      rgba(255, 255, 255, 0.02) 28%,
      rgba(255, 255, 255, 0)    55%),
    linear-gradient(180deg,
      rgba(38, 52, 78, 0.60) 0%,
      rgba(20, 30, 50, 0.72) 100%) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-bottom: none !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  max-width: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 14px 36px rgba(0, 0, 30, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.18) !important;
  justify-content: center !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.filters button {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  padding: 9px 20px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.85) 0%,
      rgba(255,255,255,0.35) 8%,
      rgba(255,255,255,0.15) 18%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #5a5a62 0%, #2a2a30 35%, #0e0e12 65%, #000000 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  min-width: 90px !important;
}

.filters button:hover {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.45) 8%,
      rgba(255,255,255,0.2) 18%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #6a6a72 0%, #3a3a42 35%, #1a1a20 65%, #0a0a0e 100%) !important;
  transform: translateY(-1px) !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Active filter — green Aero glow */
.filters button.active {
  color: #ffffff !important;
  border: 1px solid #2a4a10 !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.85) 0%,
      rgba(255,255,255,0.4) 8%,
      rgba(255,255,255,0.18) 18%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #b8e070 0%, #97c459 25%, #6da82d 60%, #3a6810 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 30, 0, 0.5),
    0 0 16px rgba(151, 196, 89, 0.75),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 -1px 0 rgba(20, 50, 0, 0.8) !important;
}

/* ── Line divider hidden — containers separate visually ── */
.line-grow {
  display: none !important;
}

/* ── Cards: each card is a mini Vista Explorer window ── */
/* ── Cards: lighter sub-panels inside the dark grid panel ── */
.card {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: transform 0.3s var(--spring), background 0.3s, border-color 0.3s !important;
}

.card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-3px) !important;
}

.card-cover, .card-cover-icon {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  position: relative !important;
}

.card-body {
  padding: 24px 24px 28px !important;
}

.card-body h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  margin-bottom: 6px !important;
}

.card-body .meta {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Green tag pills — hidden everywhere (PUBLICATION/PRODUCT/etc) */
.card-body .tag,
.tag {
  display: none !important;
}

/* ── CONTAINER 2 - BOTTOM HALF: Cards grid ── */
.grid {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 12%,
      rgba(255, 255, 255, 0)    35%),
    linear-gradient(180deg,
      rgba(28, 40, 62, 0.68) 0%,
      rgba(18, 28, 46, 0.78) 100%) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 0 0 16px 16px !important;
  padding: 24px !important;
  margin: 0 0 32px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 18px 44px rgba(0, 0, 30, 0.45),
    0 8px 18px rgba(0, 0, 0, 0.20) !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
}

/* ── Footer ── */
footer {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
  padding: 0 0 24px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-align: center !important;
}

/* ============================================================
   Subpage / overlay specific styles
   ============================================================ */

/* Back button — chrome neutral */
.back-btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  padding: 8px 16px !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1a1f28 !important;
  border: 1px solid rgba(20, 40, 70, 0.45) !important;
  background: linear-gradient(180deg, #ffffff 0%, #d8dee6 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.2) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.back-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #c8d0d8 100%) !important;
  color: var(--text) !important;
  border-color: rgba(20, 40, 70, 0.55) !important;
  transform: translateY(-1px) !important;
}

/* Headlines on detail pages */
.overlay h2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Detail banner: light chrome window */
.detail-banner {
  background: linear-gradient(180deg, #f4f8fb 0%, #d8e4ef 100%) !important;
  border: 1px solid rgba(20, 40, 70, 0.3) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.detail-text h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.detail-text p {
  color: var(--text-muted) !important;
}

.detail-text .detail-links a {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  padding: 8px 16px !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #1a1f28 !important;
  border: 1px solid rgba(20, 40, 70, 0.45) !important;
  background: linear-gradient(180deg, #ffffff 0%, #d8dee6 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.2) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.detail-text .detail-links a:hover {
  background: linear-gradient(180deg, #ffffff 0%, #c8d0d8 100%) !important;
  border-color: rgba(20, 40, 70, 0.55) !important;
  transform: translateY(-1px) !important;
}

/* Presentation list items as mini-windows */
.pres-item {
  background: linear-gradient(180deg, #ffffff 0%, #e8f0f7 100%) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.pres-item:hover {
  border-color: var(--accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 6px 16px rgba(0, 0, 0, 0.18),
    0 0 0 1px var(--accent) !important;
}

.pres-banner {
  background: linear-gradient(180deg, var(--chrome-light-1) 0%, var(--chrome-light-3) 100%) !important;
  border-bottom: 1px solid rgba(20, 40, 70, 0.2) !important;
}

.pres-text h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.pres-text p, .pres-text .meta {
  color: var(--text-muted) !important;
}

.pres-text .detail-links a {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: #1a1f28 !important;
  border: 1px solid rgba(20, 40, 70, 0.45) !important;
  background: linear-gradient(180deg, #ffffff 0%, #d8dee6 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(0, 0, 0, 0.2) !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.pres-text .detail-links a:hover {
  background: linear-gradient(180deg, #ffffff 0%, #c8d0d8 100%) !important;
}

/* Slider buttons */
.slider-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(216,222,230,0.95) 100%) !important;
  color: var(--text) !important;
  border: 1px solid rgba(20, 40, 70, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 4px rgba(0, 0, 0, 0.3) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.slider-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #c8d0d8 100%) !important;
}

/* Slider dots */
.slider-dots span {
  background: rgba(20, 40, 70, 0.3) !important;
  border: 1px solid rgba(20, 40, 70, 0.5) !important;
}

.slider-dots span.active {
  background: var(--accent) !important;
  border-color: #6a1818 !important;
  box-shadow: 0 0 4px rgba(160, 42, 42, 0.5) !important;
}

/* Experience / pres list items */
.exp-item {
  background: linear-gradient(180deg, #ffffff 0%, #e8f0f7 100%) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.exp-item:hover {
  border-color: var(--accent) !important;
}

.exp-item h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.exp-item p, .exp-item .meta {
  color: var(--text-muted) !important;
}

/* Year labels */
.year-label {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

/* Pres list items (compact list view) */
.pres-list-item {
  border-left: 2px solid rgba(20, 40, 70, 0.25) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 100%) !important;
  border-radius: 0 6px 6px 0 !important;
  margin-bottom: 8px !important;
  padding: 12px 16px !important;
}

.pres-list-item:hover {
  border-left-color: var(--accent) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(232,240,247,0.7) 100%) !important;
}

.pres-list-item h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.pres-list-item .meta {
  color: var(--text-muted) !important;
}

.show-more-btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: #1a1f28 !important;
  border: 1px solid rgba(20, 40, 70, 0.45) !important;
  background: linear-gradient(180deg, #ffffff 0%, #d8dee6 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(0, 0, 0, 0.15) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.show-more-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #c8d0d8 100%) !important;
  color: var(--text) !important;
  border-color: rgba(20, 40, 70, 0.55) !important;
}

/* Product detail pages */
.product-hero-text h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.product-hero-text .meta {
  color: var(--text-muted) !important;
}

.product-hero img {
  border: 2px solid rgba(20, 40, 70, 0.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.product-links a {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: #1a1f28 !important;
  border: 1px solid rgba(20, 40, 70, 0.45) !important;
  background: linear-gradient(180deg, #ffffff 0%, #d8dee6 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.2) !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.product-links a:hover {
  background: linear-gradient(180deg, #ffffff 0%, #c8d0d8 100%) !important;
  border-color: rgba(20, 40, 70, 0.55) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 8px rgba(0, 0, 0, 0.25) !important;
}

.product-section h4 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.product-section p, .product-section ul li {
  color: var(--text-muted) !important;
}

.product-section ul li::before {
  color: var(--accent) !important;
}

/* Screenshot grid surfaces */
.screenshot-grid .ss, .screenshot-grid-wide .ss {
  background: linear-gradient(180deg, var(--chrome-light-1) 0%, var(--chrome-light-3) 100%) !important;
  border: 1px solid rgba(20, 40, 70, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* Tech pills — small chrome keys */
.tech-pills span {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: #1a1f28 !important;
  background: linear-gradient(180deg, #fafbfd 0%, #d4d8df 100%) !important;
  border: 1px solid rgba(20, 40, 70, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(0, 0, 0, 0.15) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  border-radius: 4px !important;
}

.tech-pills span:hover {
  background: linear-gradient(180deg, #ffffff 0%, #c8d0d8 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 3px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Overlays still dark glass for now (legacy modals) */
.overlay {
  background: rgba(40, 60, 90, 0.85) !important;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .container {
    padding: 0 8px !important;
  }
  header {
    padding: 22px 18px !important;
    margin-top: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  header h1 {
    font-size: 1.9rem !important;
  }
  header .links {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .about {
    padding: 20px 18px !important;
  }
  .filters {
    padding: 12px !important;
  }
  footer {
    padding: 16px 0 24px !important;
  }
}

/* ============================================================
   SUBPAGE STYLING — Glass panel treatment for content pages
   (CLEO, Sensors, Presentations, Experience, ColorCoded,
   HistoryLegends, StockFlow, Workspace)
   Each major content section becomes its own glass surface,
   stacked Vista-windows style. Mirrors the dark glass vocabulary
   from the main page's .about / .grid panels.
   ============================================================ */

/* Back button — glossy black Aero chrome pill, matches old header buttons */
.back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 20px !important;
  border-radius: 18px !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #ffffff !important;
  border: 1px solid #000 !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 8%,
      rgba(255,255,255,0.15) 18%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #5a5a62 0%, #2a2a30 35%, #0e0e12 65%, #000 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    0 2px 4px rgba(0,0,0,0.55) !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.8) !important;
  text-decoration: none !important;
  margin: 24px 0 !important;
  transition: transform 0.2s !important;
}
.back-btn:hover { transform: translateY(-1px) !important; }

/* Major content sections become individual glass panels */
.detail-text,
.product-hero,
.product-section,
.exp-item,
.pres-list-item {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.03) 12%,
      rgba(255,255,255,0)    35%),
    linear-gradient(180deg,
      rgba(28, 40, 62, 0.68) 0%,
      rgba(18, 28, 46, 0.78) 100%) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  border-top: 1px solid rgba(255,255,255,0.50) !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin-bottom: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 14px 36px rgba(0, 0, 30, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.18) !important;
  color: #ffffff !important;
}

/* Pres list items are smaller, lighter — they're list rows not full panels */
.pres-list-item {
  padding: 16px 20px !important;
  margin-bottom: 10px !important;
}

/* Detail banner (paper thumbnail) — white glass frame holding the PDF preview */
.detail-banner {
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  border-top: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 14px 36px rgba(0, 0, 30, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.18) !important;
}
.detail-banner img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Headings on glass — white with a soft Aero glow */
.detail-text h3,
.product-section h4,
.exp-item h3,
.pres-list-item h3,
.product-hero-text h3 {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow:
    0 1px 0  rgba(0, 0, 0, 0.55),
    0 0 18px rgba(170, 220, 255, 0.30) !important;
  filter: none !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Body text + meta — high-readability white on dark glass */
.detail-text p,
.detail-text .meta,
.product-section p,
.product-section ul li,
.product-hero-text .meta,
.exp-item p,
.exp-item .meta,
.pres-list-item .meta {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  line-height: 1.65 !important;
}

/* Year labels — Aero cyan accent above presentation/experience groupings */
.year-label {
  color: #aadcff !important;
  text-shadow:
    0 1px 0  rgba(0, 0, 0, 0.5),
    0 0 12px rgba(170, 220, 255, 0.45) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  margin: 24px 0 10px !important;
}

/* Action buttons on subpages (View PDF, App Store, GitHub repo, etc.)
   Same glossy black Aqua chrome as back-btn */
.detail-links a,
.product-links a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: 14px !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #ffffff !important;
  border: 1px solid #000 !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 8%,
      rgba(255,255,255,0.15) 18%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #5a5a62 0%, #2a2a30 35%, #0e0e12 65%, #000 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    0 2px 4px rgba(0,0,0,0.55) !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.8) !important;
  text-decoration: none !important;
  transition: transform 0.2s !important;
}
.detail-links a:hover,
.product-links a:hover {
  transform: translateY(-1px) !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.45) 8%,
      rgba(255,255,255,0.20) 18%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #6a6a72 0%, #3a3a42 35%, #1a1a20 65%, #0a0a0e 100%) !important;
}

/* Tech pills — small Aero glass chips with cyan text */
.tech-pills span {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.25) 0%,
      rgba(255,255,255,0.08) 50%,
      rgba(255,255,255,0)    100%),
    rgba(38, 52, 78, 0.55) !important;
  color: #aadcff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 2px 4px rgba(0, 0, 30, 0.30) !important;
  padding: 4px 12px !important;
  border-radius: 14px !important;
}

/* Product hero — icon + title row, slightly more vertical breathing room */
.product-hero {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 24px 28px !important;
}
.product-hero img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 8px 20px rgba(0, 0, 30, 0.50) !important;
}

/* Screenshot tiles — subtle glass frames inside their parent panel */
.screenshot-grid-wide .ss,
.screenshot-grid .ss {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 12px rgba(0, 0, 30, 0.30) !important;
}

/* Pres-banner (slideshow frame on presentations subpage) */
.pres-banner {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

/* Footer cleanup */
footer {
  border-top: none !important;
  color: rgba(255, 255, 255, 0.70) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ==============================================================
   SUBPAGE TREATMENT
   --------------------------------------------------------------
   Subpages (cleo, sensors, presentations, experience,
   historylegends, stockflow, workspace) wrap content in a
   .page-bg > .container that the main index does not have, so
   we use that selector to scope all subpage-only fixes here
   without affecting the main page.

   Goal: every subpage's content sits in ONE big glass panel
   (same vocabulary as the main page's header/about), with text
   bright enough to read on the wallpaper-tinted glass, and inner
   element backgrounds lightened so they don't fight the panel.
   ============================================================== */

/* The whole subpage content becomes one big glass panel. */
.page-bg > .container {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.06) 12%,
      rgba(255, 255, 255, 0)    35%),
    linear-gradient(180deg,
      rgba(28, 40, 62, 0.72) 0%,
      rgba(18, 28, 46, 0.82) 100%) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 16px !important;
  margin: 32px auto !important;
  padding: 40px 44px 56px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 18px 44px rgba(0, 0, 30, 0.45),
    0 8px 18px rgba(0, 0, 0, 0.20) !important;
}

/* Subpage <header> sits INSIDE the panel — strip its own glass styling */
.page-bg header {
  padding: 0 0 24px !important;
  margin: 0 !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* All subpage headings: bright white, no gradient text */
.page-bg h1, .page-bg h2, .page-bg h3, .page-bg h4 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Page title gets the same cyan halo as the main page name */
.page-bg header h1 {
  text-shadow:
    0 1px 0   rgba(0, 0, 0, 0.65),
    0 2px 12px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(170, 220, 255, 0.45) !important;
}

/* Body text: bright, readable. The original page used muted gray
   for #0c0f14 background — useless on bright wallpaper. */
.page-bg p,
.page-bg .meta,
.page-bg .detail-text p,
.page-bg .pres-text p,
.page-bg .exp-item p,
.page-bg .product-section p,
.page-bg .product-section ul li,
.page-bg .pres-list-item .meta {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Year labels and tag pills — readable luminous green */
.page-bg .year-label,
.page-bg .card-body .tag {
  color: #b8e070 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Inner cards that ALREADY have backgrounds: lighten so they read
   as subtle sub-panels on the parent glass instead of dark holes. */
.page-bg .detail-banner,
.page-bg .pres-item,
.page-bg .exp-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.page-bg .pres-item:hover,
.page-bg .exp-item:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

.page-bg .pres-list-item {
  border-left-color: rgba(255, 255, 255, 0.30) !important;
}
.page-bg .pres-list-item:hover {
  border-left-color: #b8e070 !important;
}

/* Image-area surfaces (banners, screenshot tiles) — lighten too */
.page-bg .pres-banner,
.page-bg .card-cover,
.page-bg .card-cover-icon,
.page-bg .screenshot-grid .ss,
.page-bg .screenshot-grid-wide .ss {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Back button — visible on glass */
.page-bg .back-btn {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  background: rgba(0, 0, 0, 0.30) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.page-bg .back-btn:hover {
  border-color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
}

/* Action link buttons (View Paper, View on GitHub, etc.) — replace
   teal-on-teal-on-dark with white-on-cyan-glass for legibility */
.page-bg .detail-links a,
.page-bg .pres-text .detail-links a,
.page-bg .product-links a {
  color: #ffffff !important;
  border: 1px solid rgba(170, 220, 255, 0.6) !important;
  background: rgba(170, 220, 255, 0.12) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.page-bg .detail-links a:hover,
.page-bg .pres-text .detail-links a:hover,
.page-bg .product-links a:hover {
  background: rgba(170, 220, 255, 0.25) !important;
  border-color: rgba(170, 220, 255, 0.95) !important;
}

/* Tech stack pills */
.page-bg .tech-pills span {
  background: rgba(170, 220, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(170, 220, 255, 0.35) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Show-more button on listing pages */
.page-bg .show-more-btn {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
}
.page-bg .show-more-btn:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
}

/* Footer */
.page-bg footer {
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  padding: 24px 0 0 !important;
  margin-top: 40px !important;
}

/* Mobile: looser side padding so panel doesn't crowd the screen edges */
@media (max-width: 640px) {
  .page-bg > .container {
    margin: 16px 12px !important;
    padding: 24px 20px 32px !important;
  }
}