/* Minimal, clean CSS */
:root {
    --bg: #062e24;
    --panel: #14161b;
    --text: #eaeef5;
    --muted: #9aa3b2;
    --accent: #FFFDD0;
    --border: #22252d;
    --white: #ffffff;
    --gold: #FFD700;
    --panel-2: #171a21;
    --shadow: 0 12px 30px rgba(0,0,0,.35);
    --ring: 0 0 0 6px rgba(255,253,208,.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);   /* just the base color */
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  line-height: 1.55;
}

a { color: var(--accent);
    text-decoration: none; }

.container { max-width: 980px; margin: 0 auto; padding: 24px; }

.header {
  display: flex; align-items: center; justify-content: space-between;
}
.header nav a {
  margin-left: 16px; color: var(--muted);
}
.header nav a.active { color: var(--text); }

.logo a { color: var(--text); font-weight: 700; font-size: 20px; }

.hero {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  margin-top: 12px;
}
.muted { color: var(--muted); }
.cta { margin-top: 16px; display: flex; gap: 12px; }

.btn, .btn-outline {
  padding: 10px 14px; border-radius: 10px; display: inline-block;
  border: 1px solid var(--accent);
}
.btn { background: var(--accent); color: #0b0c0f; font-weight: 600; }
.btn-outline { color: var(--accent); }

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.footer {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border);
  margin-top: 32px; padding-top: 16px;
  color: var(--muted);
}

/* Shared frame styling */
.player .embed {
  position: relative;
  width: 100%;
  max-width: 600px;          /* cap width on big screens */
  margin: 0 auto;            /* center */
  border: 5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  /* Desktop/laptop default: 9:16 so it looks "regular" */
  aspect-ratio: 9 / 16;
  max-height: 80vh;          /* never grow taller than the viewport */
}

.player .embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Phones: use vertical 9:16 so Shorts feel natural */
@media (max-width: 640px) {
  .player .embed {
    aspect-ratio: 9 / 16;
    max-width: 100%;         /* fill phone width */
    max-height: 86vh;        /* keep within the screen */
  }
}

/* Optional: medium screens (tablets) keep it modest */
@media (min-width: 641px) and (max-width: 1024px) {
  .player .embed {
    max-width: 720px;        /* keep it from getting huge */
  }
}
.center { text-align: center; }
.project { margin: 18px 0 28px; }
.link { color: var(--accent); }
/* ===== Spice Pack: depth + motion ===== */

/* Card lift & subtle shine */
.card {
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: var(--shadow);
    transition: transform .14s ease, box-shadow .25s ease, border-color .2s ease;
}

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 44px rgba(0,0,0,.5);
        border-color: rgba(255,255,255,.16);
    }

    .card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(400px 120px at 80% 0%, rgba(79,156,249,.08), transparent 60%);
        pointer-events: none;
    }

/* Buttons: buttery hover + ghost style */
.btn, .btn-outline {
    cursor: pointer;
    transition: transform .06s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(0,0,0,.35);
    }

    .btn:focus-visible {
        outline: none;
        box-shadow: var(--ring);
    }

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid rgba(255,255,255,.14);
}

    .btn-ghost:hover {
        border-color: rgba(255,255,255,.28);
    }

/* Section titles with accent underline */
.h-section {
    margin: 28px 0 12px;
    font-weight: 800;
    letter-spacing: .2px;
    position: relative;
    display: inline-block;
}

    .h-section::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), transparent 70%);
        opacity: .9;
    }

/* Animated link underline */
.link, a:not(.btn):not(.btn-outline):not(.btn-ghost) {
    background: linear-gradient(currentColor, currentColor) bottom left / 0 2px no-repeat;
    transition: background-size .25s ease;
}

    .link:hover, a:hover {
        text-decoration: none;
        background-size: 100% 2px;
    }

/* Subtle page entrance */
.reveal {
    opacity: 0;
    transform: translateY(10px);
    animation: reveal .6s ease forwards;
}

@keyframes reveal {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Header: sticky glass */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(160%) blur(10px);
    background: linear-gradient(to bottom, rgba(11,12,15,.9), rgba(11,12,15,.5));
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 14px 0;
}

/* Container breathing room on big screens */
@media (min-width: 1200px) {
    .container {
        max-width: 1120px;
    }
}
/* Headings & spacing harmony */
h1 {
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    margin: 0 0 .4rem;
}

h2 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    margin: 22px 0 12px;
}

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

/* Hero: add gradient glow */
.hero {
    background: var(--panel); /* keep solid panel */
    position: relative;
    overflow: hidden;
}

    .hero::before {
        content: "";
        position: absolute;
        right: -20%;
        top: -30%;
        width: 480px;
        height: 480px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(79,156,249,.22), transparent 70%);
        filter: blur(24px);
        pointer-events: none;
    }
/* Bottom misty-forest band: consistent across devices */
body::after {
  content: "";
  position: fixed;      /* stays at the bottom of the viewport */
  left: 0;
  right: 0;
  bottom: 0;
  /* Height scales with screen, but stays within a nice range */
  height: clamp(220px, 32vh, 420px);

  /* Forest image covered + gradient fade into the dark green */
  background:
    linear-gradient(to Bottom,
      rgba(6,46,36,1) 5%,
      rgba(6,46,36,0.88) 10%,
      rgba(6,46,36,0.55) 20%,
      rgba(6,46,36,0.10) 25%,
      rgba(6,46,36,0.00) 30%
    ),
    url("assets/forest.png") bottom center / cover no-repeat;

  opacity: 0.30;         /* subtle; adjust 0.25–0.5 */
  filter: blur(0px);     /* soft “misty” look; try 0–2px */
  pointer-events: none;  /* never block clicks */
  z-index: 0;
}

/* Make sure your page content sits above the background layer */
header, main, footer {
  position: relative;
  z-index: 1;
}

/* Optional: if you had any previous body background-image rules, remove them */

/* Resume inline viewer */
.resume-viewer {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  margin: 20px 0;

  /* make it responsive but tall enough */
  width: 100%;
  height: clamp(600px, 80vh, 1000px); /* 600px min, 80% of screen, up to 1000px */
}

.resume-viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* Family photo gallery */
.family-photos {
  margin-top: 40px;
}

.family-photos h3 {
  margin-bottom: 16px;
  font-size: 1.5rem;
}

.gallery {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery img:hover {
  transform: scale(1.20);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ===== Slideshow ===== */
.family-slideshow { margin-top: 36px; }
.family-slideshow h3 { margin: 0 0 14px; font-size: 1.35rem; }

.slideshow {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  box-shadow: var(--shadow);
}

/* Give the slides area a real height */
.slideshow .slides {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;          /* desktop/tablet */
}
@media (max-width: 640px) {
  .slideshow .slides { aspect-ratio: 4 / 5; }  /* taller on phones */
}

/* Each slide */
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
}
.slide.is-active { opacity: 1; transform: none; }

/* Arrows */
.slideshow .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: none;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: saturate(120%) blur(4px);
}
.slideshow .nav:hover { background: rgba(0,0,0,.55); }
.slideshow .nav.prev { left: 10px; }
.slideshow .nav.next { right: 10px; }

/* Dots */
.slideshow .dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 8px;
  z-index: 2;
}
.slideshow .dots button {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.25);
  cursor: pointer;
}
.slideshow .dots button.is-active {
  background: var(--accent);
  border-color: var(--accent);
}

/* Pause-on-hover cue */
.slideshow:hover .slides::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.18), transparent 35%);
  pointer-events: none;
}