/* ============================================================
   JULIO BATISTA — thejuliobatista.com
   Stylesheet
   Author: Mirella Batista
   ============================================================ */

/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   2. CSS VARIABLES — Design System
   ============================================================ */
:root {
  /* Colors */
  --color-navy:        #28396C;
  --color-olive:       #41431B;
  --color-sage:        #AEB784;
  --color-sand:        #E3DBBB;
  --color-cream:       #F8F3E1;
  --color-charcoal:    #2C2C2C;

  /* Typography */
  --font-display:      'Playfair Display', serif;
  --font-body:         'Inter', sans-serif;

  /* Font sizes */
  --text-xs:           11px;
  --text-sm:           13px;
  --text-base:         16px;
  --text-lg:           18px;
  --text-xl:           24px;
  --text-2xl:          32px;
  --text-3xl:          48px;
  --text-4xl:          64px;

  /* Spacing — 8px grid */
  --space-xs:          8px;
  --space-sm:          16px;
  --space-md:          24px;
  --space-lg:          32px;
  --space-xl:          48px;
  --space-2xl:         64px;
  --space-3xl:         96px;

  /* Layout */
  --max-width:         1200px;
  --nav-height:        72px;

  /* Transitions */
  --transition-fast:   200ms ease;
  --transition-med:    400ms ease;
  --transition-slow:   600ms ease;

  /* Border radius */
  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-lg:         12px;
}

/* ============================================================
   3. RESET & BASE STYLES
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-olive);
  background-color: var(--color-cream);
  line-height:      1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
  font-family:    var(--font-display);
  color:          var(--color-navy);
  line-height:    1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }

p {
  font-family:  var(--font-body);
  font-size:    var(--text-base);
  line-height:  1.7;
  color:        var(--color-olive);
}

/* ============================================================
   5. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

.section {
  padding: var(--space-3xl) 0;
}

.section--dark {
  background-color: var(--color-navy);
  color: var(--color-cream);
}

.section--charcoal {
  background-color: var(--color-charcoal);
  color: var(--color-cream);
}

.section--olive {
  background-color: var(--color-olive);
  color: var(--color-cream);
}

.section--cream {
  background-color: var(--color-cream);
}

.section-title {
  font-family:   var(--font-display);
  font-size:     var(--text-3xl);
  margin-bottom: var(--space-xl);
  text-align:    center;
}

.section--dark .section-title,
.section--charcoal .section-title,
.section--olive .section-title {
  color: var(--color-cream);
}

/* ============================================================
   6. ACCESSIBILITY
   ============================================================ */

/* Skip to main content link for screen readers */
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       var(--space-sm);
  background: var(--color-navy);
  color:      var(--color-cream);
  padding:    var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size:  var(--text-sm);
  z-index:    9999;
}

.skip-link:focus {
  top: var(--space-sm);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}

/* Focus styles for keyboard navigation */
:focus-visible {
  outline:        3px solid var(--color-sage);
  outline-offset: 3px;
}

/* ============================================================
   7. RESPONSIVE BREAKPOINTS
   ============================================================
   Mobile first — styles above are the mobile base.
   We add complexity as screen size grows.

   Breakpoints:
   --sm:  480px   (large mobile)
   --md:  768px   (tablet)
   --lg:  1024px  (small desktop)
   --xl:  1200px  (desktop)
   ============================================================ */

@media (min-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }
}

@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }

  .container {
    padding: 0 var(--space-lg);
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 0 var(--space-xl);
  }
}

/* ============================================================
   NAV / MASTHEAD
   ============================================================ */

/* Outer nav bar */
.nav {
  position:         fixed;
  top:              0;
  left:             0;
  width:            100%;
  height:           auto;
  background-color: var(--color-navy);
  z-index:          1000;
  box-shadow:       0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Inner row | flexbox puts brand left, links right */
.nav__inner {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding-top:      var(--space-sm);
  padding-bottom:   var(--space-sm);
}

/* Brand block | name + tagline stacked */
.nav__brand {
  display:          flex;
  flex-direction:   column;
  gap:              2px;
}

/* His name */
.nav__name {
  font-family:      var(--font-display);
  font-size:        var(--text-3xl);
  font-weight:      600;
  color:            var(--color-cream);
  letter-spacing:   -0.01em;
  line-height:      1;
  transition:       color var(--transition-fast);
  padding-bottom:   2px;
}

.nav__name:hover {
  color: var(--color-sage);
}

/* Tagline below his name */
.nav__tagline {
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  font-weight:      400;
  color:            var(--color-sand);
  letter-spacing:   0.12em;
  text-transform:   uppercase;
  padding-left:   12px;
}

/* Desktop nav links | hidden on mobile, shown on tablet+ */
.nav__links {
  display:          none;
  flex-direction:   row;
  gap:              var(--space-lg);
  align-items:      center;
}

.nav__links a {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  font-weight:      400;
  color:            var(--color-sand);
  letter-spacing:   0.06em;
  text-transform:   uppercase;
  transition:       color var(--transition-fast);
  position:         relative;
  padding-bottom:   4px;
}

/* Underline animation on hover */
.nav__links a::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  width:            0;
  height:           1px;
  background-color: var(--color-sage);
  transition:       width var(--transition-med);
}

.nav__links a:hover {
  color: var(--color-sage);
}

.nav__links a:hover::after {
  width: 100%;
}

/* Active nav link | lights up when section is in view */
.nav__links a.nav--active {
  color: var(--color-sage);
}

.nav__links a.nav--active::after {
  width: 100%;
}

/* Mobile nav active state */
.nav__mobile a.nav--active {
  color: var(--color-sage);
}

/* Hamburger button | visible on mobile only */
.nav__hamburger {
  display:          flex;
  flex-direction:   column;
  gap:              5px;
  background:       transparent;
  border:           none;
  cursor:           pointer;
  padding:          var(--space-xs);
}

/* Each bar of the hamburger */
.nav__hamburger span {
  display:          block;
  width:            24px;
  height:           2px;
  background-color: var(--color-cream);
  border-radius:    2px;
  transition:       transform var(--transition-fast),
                    opacity var(--transition-fast);
}

/* Hamburger | open state | top bar rotates down */
.nav__hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

/* Hamburger | open state | middle bar disappears */
.nav__hamburger.open span:nth-child(2) {
  opacity: 0;
}

/* Hamburger | open state | bottom bar rotates up */
.nav__hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu | hidden by default */
.nav__mobile {
  display:          none;
  flex-direction:   column;
  background-color: var(--color-navy);
  border-top:       1px solid rgba(255, 255, 255, 0.08);
  padding:          var(--space-sm) 0;
}

/* Mobile menu | open state */
.nav__mobile.open {
  display: flex;
}

.nav__mobile ul {
  display:          flex;
  flex-direction:   column;
}

.nav__mobile a {
  display:          block;
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  font-weight:      400;
  color:            var(--color-sand);
  letter-spacing:   0.06em;
  text-transform:   uppercase;
  padding:          var(--space-sm) var(--space-lg);
  transition:       color var(--transition-fast),
                    background-color var(--transition-fast);
}

.nav__mobile a:hover {
  color:            var(--color-sage);
  background-color: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   NAV | RESPONSIVE
   ============================================================ */

/* Tablet and up | show desktop links, hide hamburger */
@media (min-width: 768px) {
  .nav__links {
    display: flex;
  }

  .nav__hamburger {
    display: none;
  }

  .nav__mobile {
    display: none !important;
  }
}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */

/* Outer section | full viewport height, no top gap under nav */
.hero {
  position:         relative;
  width:            100%;
  height:           100vh;
  margin-top:       0;
  overflow:         hidden;
}

/* Carousel container | fills the hero section completely */
.carousel {
  position:         relative;
  width:            100%;
  height:           100%;
}

/* Slides wrapper | fills carousel, clips anything outside */
.carousel__slides {
  position:         relative;
  width:            100%;
  height:           100%;
  overflow:         hidden;
}

/* Individual slide | stacked on top of each other */
.carousel__slide {
  position:         absolute;
  top:              0;
  left:             0;
  width:            100%;
  height:           100%;
  opacity:          0;
  transition:       opacity var(--transition-slow);
}

/* Active slide | visible */
.carousel__slide.active {
  opacity:          1;
}

/* Image inside each slide | fills frame, crops to fit */
.carousel__slide img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center;
}

/* Dark overlay | subtle gradient at bottom improves dot visibility */
.carousel::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  width:            100%;
  height:           30%;
  background:       linear-gradient(
                      to top,
                      rgba(0, 0, 0, 0.45),
                      transparent
                    );
  pointer-events:   none;
  z-index:          1;
}

/* ============================================================
   CAROUSEL | ARROWS
   ============================================================ */

.carousel__arrow {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  background:       rgba(0, 0, 0, 0.35);
  color:            var(--color-cream);
  border:           1px solid rgba(255, 255, 255, 0.2);
  border-radius:    var(--radius-sm);
  width:            44px;
  height:           44px;
  font-size:        var(--text-lg);
  cursor:           pointer;
  z-index:          2;
  transition:       background var(--transition-fast),
                    border-color var(--transition-fast);
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.carousel__arrow:hover {
  background:       rgba(0, 0, 0, 0.6);
  border-color:     var(--color-sage);
}

/* Previous arrow | left side */
.carousel__arrow--prev {
  left:             var(--space-sm);
}

/* Next arrow | right side */
.carousel__arrow--next {
  right:            var(--space-sm);
}

/* ============================================================
   CAROUSEL | DOTS
   ============================================================ */

.carousel__dots {
  position:         absolute;
  bottom:           var(--space-lg);
  left:             50%;
  transform:        translateX(-50%);
  display:          flex;
  gap:              var(--space-xs);
  z-index:          2;
}

.carousel__dot {
  width:            10px;
  height:           10px;
  border-radius:    50%;
  background:       rgba(255, 255, 255, 0.4);
  border:           none;
  cursor:           pointer;
  padding:          0;
  transition:       background var(--transition-fast),
                    transform var(--transition-fast);
}

.carousel__dot:hover {
  background:       rgba(255, 255, 255, 0.7);
}

/* Active dot | filled with sage green, slightly larger */
.carousel__dot.active {
  background:       var(--color-sage);
  transform:        scale(1.25);
}

/* ============================================================
   CAROUSEL | RESPONSIVE
   ============================================================ */

/* Larger arrows on tablet and up */
@media (min-width: 768px) {
  .carousel__arrow {
    width:            52px;
    height:           52px;
    font-size:        var(--text-xl);
  }

  .carousel__arrow--prev {
    left:             var(--space-lg);
  }

  .carousel__arrow--next {
    right:            var(--space-lg);
  }

  .carousel__dot {
    width:            12px;
    height:           12px;
  }
}

/* ============================================================
   ABOUT
   ============================================================ */

/* Two column layout | headshot left, content right */
.about__inner {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-xl);
  align-items:      flex-start;
}

/* Headshot container */
.about__image {
  width:            100%;
  max-width:        320px;
  margin:           0 auto;
  flex-shrink:      0;
}

/* Headshot image */
.about__headshot {
  width:            100%;
  height:           400px;
  object-fit:       cover;
  object-position:  center top;
  border-radius:    var(--radius-md);
  box-shadow:       0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Content block | bio, button, credentials */
.about__content {
  flex:             1;
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-md);
}

/* Section heading */
.about__heading {
  font-family:      var(--font-display);
  font-size:        var(--text-3xl);
  color:            var(--color-navy);
  margin-bottom:    var(--space-xs);
}

/* Bio text */
.about__bio {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-olive);
  line-height:      1.8;
}

/* Extended bio | hidden by default */
.about__bio-extended {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-sm);
  overflow:         hidden;
  max-height:       0;
  opacity:          0;
  transition:       max-height var(--transition-slow),
                    opacity var(--transition-med);
}

/* Extended bio | visible state */
.about__bio-extended.expanded {
  max-height:       600px;
  opacity:          1;
}

.about__bio-extended p {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-olive);
  line-height:      1.8;
}

/* Read more button */
.about__read-more {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-xs);
  background:       transparent;
  border:           1px solid var(--color-navy);
  color:            var(--color-navy);
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  font-weight:      500;
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  padding:          var(--space-xs) var(--space-md);
  border-radius:    var(--radius-sm);
  cursor:           pointer;
  transition:       background var(--transition-fast),
                    color var(--transition-fast);
  align-self:       flex-start;
}

.about__read-more:hover {
  background:       var(--color-navy);
  color:            var(--color-cream);
}

/* Credentials | pill badges */
.about__credentials {
  display:          flex;
  flex-wrap:        wrap;
  gap:              var(--space-xs);
  margin-top:       var(--space-xs);
}

.about__credentials span {
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  font-weight:      500;
  color:            var(--color-navy);
  background:       var(--color-sand);
  border:           1px solid var(--color-sand);
  padding:          4px var(--space-sm);
  border-radius:    20px;
  letter-spacing:   0.04em;
}

/* ============================================================
   ABOUT | RESPONSIVE
   ============================================================ */

/* Tablet and up | switch to side by side layout */
@media (min-width: 768px) {
  .about__inner {
    flex-direction:   row;
    align-items:      flex-start;
    gap:              var(--space-2xl);
  }

  .about__image {
    margin:           0;
  }

  .about__headshot {
    height:           480px;
  }
}

/* Desktop | more breathing room */
@media (min-width: 1200px) {
  .about__headshot {
    height:           520px;
  }
}

/* ============================================================
   PARALLAX VIDEO
   ============================================================ */

/* Outer section | full width, fixed height */
.parallax-video {
  position:         relative;
  width:            100%;
  height:           70vh;
  overflow:         hidden;
}

/* Video | positioned to fill and center in the frame */
.parallax-video__player {
  position:         absolute;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%);
  min-width:        100%;
  min-height:       100%;
  width:            auto;
  height:           auto;
  object-fit:       cover;
}

/* Overlay | semi-transparent dark layer over video */
.parallax-video__overlay {
  position:         absolute;
  inset:            0;
  background:       rgba(0, 0, 0, 0.40);
  display:          flex;
  align-items:      flex-end;
  justify-content:  center;
  padding-bottom:   var(--space-xl);
}

/* Caption text */
.parallax-video__caption {
  font-family:      var(--font-display);
  font-size:        var(--text-xl);
  font-style:       italic;
  color:            var(--color-cream);
  letter-spacing:   0.04em;
  text-align:       center;
  text-shadow:      0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   PARALLAX VIDEO | RESPONSIVE
   ============================================================ */

@media (min-width: 768px) {
  .parallax-video {
    height:           80vh;
  }

  .parallax-video__caption {
    font-size:        var(--text-2xl);
  }
}

/* Respect reduced motion | pause video for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .parallax-video__player {
    animation:        none;
  }
}

/* ============================================================
   MEDIA
   ============================================================ */

.media__subheading {
  font-family:      var(--font-display);
  font-size:        var(--text-xl);
  color:            var(--color-sage);
  margin-bottom:    var(--space-lg);
  text-align:       center;
  font-weight:      400;
  font-style:       italic;
}


/* ============================================================
   MEDIA | YOUTUBE GRID
   ============================================================ */

/* 1 column mobile, 2 columns tablet, 3 columns desktop */
.media__grid {
  display:              grid;
  grid-template-columns: 1fr;
  gap:                  var(--space-lg);
  margin-bottom:        var(--space-3xl);
}

.media__item {
  width: 100%;
}

/* Responsive video embed | padding-top hack */
/* Maintains 16:9 aspect ratio at any width */
.media__embed-wrapper {
  position:         relative;
  width:            100%;
  padding-top:      56.25%;    /* 9/16 = 56.25% | 16:9 ratio */
  overflow:         hidden;
  border-radius:    var(--radius-md);
  background:       var(--color-olive);
}

/* iframe fills the wrapper absolutely */
.media__embed-wrapper iframe {
  position:         absolute;
  top:              0;
  left:             0;
  width:            100%;
  height:           100%;
  border:           none;
}

/* ============================================================
   MEDIA | INSTAGRAM GRID
   ============================================================ */

.media__instagram {
  display:              grid;
  grid-template-columns: 1fr;
  gap:                  var(--space-lg);
}

.media__instagram-item {
  width:            100%;
  display:          flex;
  justify-content:  center;
}

/* Override Instagram's default iframe styles */
.media__instagram-item .instagram-media {
  min-width:        100% !important;
  margin:           0 !important;
}

/* ============================================================
   MEDIA | RESPONSIVE
   ============================================================ */

@media (min-width: 768px) {
  .media__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .media__instagram {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .media__instagram {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   PARALLAX PHOTO
   ============================================================ */

.parallax-photo {
  width:                  100%;
  height:                 60vh;
  background-image:       url('../assets/images/parallax-photo.jpg');
  background-attachment:  fixed;
  background-position:    center 65%;
  background-repeat:      no-repeat;
  background-size:        cover;
}

/* ============================================================
   PARALLAX PHOTO | RESPONSIVE
   ============================================================ */

@media (min-width: 768px) {
  .parallax-photo {
    height: 70vh;
  }
}

/* Fallback for mobile | fixed attachment doesn't work on iOS */
/* iOS ignores background-attachment: fixed on mobile browsers */
/* We switch to scroll which still looks great */
@media (max-width: 767px) {
  .parallax-photo {
    background-attachment: scroll;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .parallax-photo {
    background-attachment: scroll;
  }
}

/* ============================================================
   SCREEN READER ONLY UTILITY
   Hides content visually but keeps it accessible
   ============================================================ */

.sr-only {
  position:     absolute;
  width:        1px;
  height:       1px;
  padding:      0;
  margin:       -1px;
  overflow:     hidden;
  clip:         rect(0, 0, 0, 0);
  white-space:  nowrap;
  border:       0;
}

/* ============================================================
   EXPERIENCE
   ============================================================ */

/* Each subsection | Theatre, Film & TV, Training, Skills */
.experience__block {
  margin-bottom:    var(--space-3xl);
}

.experience__block:last-child {
  margin-bottom:    0;
}

/* Category heading | Theatre, Film & TV etc */
.experience__category {
  font-family:      var(--font-display);
  font-size:        var(--text-2xl);
  color:            var(--color-navy);
  margin-bottom:    var(--space-lg);
  padding-bottom:   var(--space-xs);
  border-bottom:    2px solid var(--color-sand);
}

/* Credits table */
.experience__table {
  width:            100%;
  border-collapse:  collapse;
}

.experience__table tr {
  border-bottom:    1px solid var(--color-sand);
  transition:       background var(--transition-fast);
}

.experience__table tr:hover {
  background:       rgba(40, 57, 108, 0.04);
}

.experience__table td {
  padding:          var(--space-sm) var(--space-xs);
  vertical-align:   top;
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-olive);
}

/* Show title | italic, navy */
.experience__show {
  font-family:      var(--font-display) !important;
  font-size:        var(--text-lg) !important;
  color:            var(--color-navy) !important;
  width:            40%;
}

.experience__show em {
  font-style:       italic;
}

/* Role */
.experience__role {
  color:            var(--color-olive);
  width:            30%;
}

/* Venue or director */
.experience__venue {
  color:            var(--color-olive);
  opacity:          0.7;
  width:            30%;
}

/* Award badge */
.experience__award {
  display:          inline-block;
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  font-style:       normal;
  color:            var(--color-navy);
  background:       var(--color-sand);
  padding:          2px var(--space-xs);
  border-radius:    20px;
  margin-left:      var(--space-xs);
  letter-spacing:   0.04em;
  vertical-align:   middle;
}

/* Skills two column layout */
.experience__skills {
  display:              grid;
  grid-template-columns: 1fr;
  gap:                  var(--space-xl);
}

.experience__skill-heading {
  font-family:      var(--font-display);
  font-size:        var(--text-lg);
  color:            var(--color-navy);
  margin-bottom:    var(--space-md);
  font-weight:      500;
}

/* Skills as pill tags */
.experience__skill-list {
  display:          flex;
  flex-wrap:        wrap;
  gap:              var(--space-xs);
}

.experience__skill-list li {
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  color:            var(--color-navy);
  background:       var(--color-sand);
  padding:          4px var(--space-sm);
  border-radius:    20px;
  letter-spacing:   0.04em;
}

/* Resume download button */
.experience__download {
  text-align:       center;
  margin-top:       var(--space-3xl);
}

/* Button styles | reusable across the site */
.btn {
  display:          inline-block;
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  font-weight:      500;
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  padding:          var(--space-sm) var(--space-xl);
  border-radius:    var(--radius-sm);
  cursor:           pointer;
  transition:       background var(--transition-fast),
                    color var(--transition-fast),
                    border-color var(--transition-fast);
  text-decoration:  none;
  border:           2px solid transparent;
}

.btn--primary {
  background:       var(--color-navy);
  color:            var(--color-cream);
  border-color:     var(--color-navy);
}

.btn--primary:hover {
  background:       transparent;
  color:            var(--color-navy);
}

/* ============================================================
   EXPERIENCE | RESPONSIVE
   ============================================================ */

/* Tablet and up | two column skills */
@media (min-width: 768px) {
  .experience__skills {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile | stack table columns */
@media (max-width: 767px) {
  .experience__table thead {
    display: none;
  }

  .experience__table tr {
    display:        block;
    margin-bottom:  var(--space-md);
    padding-bottom: var(--space-md);
  }

  .experience__table td {
    display:        block;
    width:          100% !important;
    padding:        2px var(--space-xs);
  }

  .experience__show {
    font-size:      var(--text-lg) !important;
    margin-bottom:  4px;
  }
}

/* ============================================================
   GALLERY | PHOTO STRIP
   ============================================================ */

/* Gallery section title */
.gallery__title {
  color:            var(--color-cream);
  text-align:       center;
  margin-bottom:    var(--space-xl);
}

/* Horizontal strip | 7 photos side by side */
.gallery__strip {
  display:          flex;
  flex-direction:   row;
  gap:              0;
  width:            100%;
  overflow:         hidden;
}

/* Each photo button */
.gallery__item {
  flex:             1;
  padding:          0;
  border:           none;
  background:       transparent;
  cursor:           pointer;
  overflow:         hidden;
  position:         relative;
}

/* Photo image | fills button, zooms on hover */
.gallery__item img {
  width:            100%;
  height:           280px;
  object-fit:       cover;
  object-position:  center top;
  display:          block;
  transition:       transform var(--transition-med),
                    filter var(--transition-med);
  filter:           brightness(0.85);
}

.gallery__item:hover img {
  transform:        scale(1.05);
  filter:           brightness(1);
}

/* Overlay hint | shows on hover */
.gallery__item::after {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       rgba(40, 57, 108, 0.3);
  opacity:          0;
  transition:       opacity var(--transition-fast);
}

.gallery__item:hover::after {
  opacity:          1;
}

/* Headshot download button */
.gallery__download {
  display:          flex;
  justify-content:  center;
  padding:          var(--space-xl) 0 var(--space-lg);
}

/* Outline button variant | for charcoal backgrounds */
.btn--outline {
  background:       transparent;
  color:            var(--color-sand);
  border-color:     rgba(227, 219, 187, 0.4);
}

.btn--outline:hover {
  background:       rgba(227, 219, 187, 0.08);
  color:            var(--color-cream);
  border-color:     var(--color-cream);
}

/* ============================================================
   GALLERY | LIGHTBOX
   ============================================================ */

/* Full screen overlay | hidden by default */
.lightbox {
  position:         fixed;
  inset:            0;
  z-index:          2000;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  opacity:          0;
  visibility:       hidden;
  transition:       opacity var(--transition-med),
                    visibility var(--transition-med);
}

/* Lightbox | open state */
.lightbox.open {
  opacity:          1;
  visibility:       visible;
}

/* Dark backdrop */
.lightbox__backdrop {
  position:         absolute;
  inset:            0;
  background:       rgba(0, 0, 0, 0.92);
  cursor:           pointer;
}

/* Photo container | sits above backdrop */
.lightbox__content {
  position:         relative;
  z-index:          1;
  max-width:        90vw;
  max-height:       85vh;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

/* Lightbox image */
.lightbox__img {
  max-width:        100%;
  max-height:       85vh;
  object-fit:       contain;
  border-radius:    var(--radius-sm);
  box-shadow:       0 24px 80px rgba(0, 0, 0, 0.6);
}

/* Close button | top right */
.lightbox__close {
  position:         absolute;
  top:              var(--space-lg);
  right:            var(--space-lg);
  z-index:          2;
  background:       rgba(255, 255, 255, 0.1);
  border:           1px solid rgba(255, 255, 255, 0.2);
  color:            var(--color-cream);
  width:            44px;
  height:           44px;
  border-radius:    50%;
  font-size:        var(--text-base);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       background var(--transition-fast);
}

.lightbox__close:hover {
  background:       rgba(255, 255, 255, 0.2);
}

/* Prev and next arrows */
.lightbox__prev,
.lightbox__next {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  z-index:          2;
  background:       rgba(255, 255, 255, 0.1);
  border:           1px solid rgba(255, 255, 255, 0.2);
  color:            var(--color-cream);
  width:            52px;
  height:           52px;
  border-radius:    var(--radius-sm);
  font-size:        var(--text-xl);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       background var(--transition-fast);
}

.lightbox__prev:hover,
.lightbox__next:hover {
  background:       rgba(255, 255, 255, 0.25);
}

.lightbox__prev {
  left:             var(--space-lg);
}

.lightbox__next {
  right:            var(--space-lg);
}

/* ============================================================
   GALLERY | RESPONSIVE
   ============================================================ */

/* Taller photos on larger screens */
@media (min-width: 768px) {
  .gallery__item img {
    height:         360px;
  }
}

@media (min-width: 1200px) {
  .gallery__item img {
    height:         440px;
  }
}

/* ============================================================
   CONTACT
   ============================================================ */

/* Two column layout | info left, form right */
.contact__inner {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-3xl);
}

/* Contact info blocks */
.contact__info {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-xl);
}

.contact__block {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-xs);
}

.contact__block-heading {
  font-family:      var(--font-display);
  font-size:        var(--text-lg);
  color:            var(--color-sage);
  font-weight:      400;
  font-style:       italic;
  margin-bottom:    4px;
}

.contact__block p {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-sand);
  line-height:      1.6;
}

.contact__block a {
  color:            var(--color-cream);
  transition:       color var(--transition-fast);
}

.contact__block a:hover {
  color:            var(--color-sage);
}

.contact__form-note {
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  color:            var(--color-sand);
  line-height:      1.7;
  opacity:          0.8;
}

/* ============================================================
   CONTACT | FORM
   ============================================================ */

.contact__form {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-md);
}

/* Label + input group */
.form__group {
  display:          flex;
  flex-direction:   column;
  gap:              6px;
}

.form__group label {
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  font-weight:      500;
  color:            var(--color-sage);
  letter-spacing:   0.1em;
  text-transform:   uppercase;
}

.form__group input,
.form__group textarea {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-cream);
  background:       rgba(255, 255, 255, 0.06);
  border:           1px solid rgba(255, 255, 255, 0.15);
  border-radius:    var(--radius-sm);
  padding:          var(--space-sm) var(--space-md);
  width:            100%;
  transition:       border-color var(--transition-fast),
                    background var(--transition-fast);
  outline:          none;
}

/* Placeholder text */
.form__group input::placeholder,
.form__group textarea::placeholder {
  color:            rgba(248, 243, 225, 0.35);
}

/* Focus state */
.form__group input:focus,
.form__group textarea:focus {
  border-color:     var(--color-sage);
  background:       rgba(255, 255, 255, 0.10);
}

/* Error state */
.form__group input.error,
.form__group textarea.error {
  border-color:     #e05c5c;
}

.form__group .error-message {
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  color:            #e05c5c;
  margin-top:       2px;
}

.form__group textarea {
  resize:           vertical;
  min-height:       120px;
}

/* Light button variant | for dark backgrounds */
.btn--light {
  background:       var(--color-cream);
  color:            var(--color-navy);
  border-color:     var(--color-cream);
  align-self:       flex-start;
}

.btn--light:hover {
  background:       transparent;
  color:            var(--color-cream);
}

/* Form status message */
.form__status {
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  min-height:       24px;
}

.form__status.success {
  color:            var(--color-sage);
}

.form__status.error {
  color:            #e05c5c;
}

/* ============================================================
   CONTACT | RESPONSIVE
   ============================================================ */

@media (min-width: 768px) {
  .contact__inner {
    flex-direction:   row;
    gap:              var(--space-3xl);
  }

  .contact__info {
    width:            280px;
    flex-shrink:      0;
  }

  .contact__form-wrapper {
    flex:             1;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background-color: var(--color-charcoal);
  padding:          var(--space-xl) 0;
}

.footer__inner {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              var(--space-md);
  text-align:       center;
}

/* Back to top button */
.footer__top-btn {
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  font-weight:      500;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  color:            var(--color-sage);
  background:       transparent;
  border:           1px solid rgba(174, 183, 132, 0.3);
  border-radius:    var(--radius-sm);
  padding:          var(--space-xs) var(--space-md);
  cursor:           pointer;
  transition:       color var(--transition-fast),
                    border-color var(--transition-fast),
                    background var(--transition-fast);
}

.footer__top-btn:hover {
  color:            var(--color-cream);
  border-color:     var(--color-cream);
  background:       rgba(255, 255, 255, 0.05);
}

/* Copyright */
.footer__copy {
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  color:            rgba(248, 243, 225, 0.35);
  padding-top:      var(--space-md);
  border-top:       1px solid rgba(255, 255, 255, 0.08);
  width:            100%;
  text-align:       center;
}