/* ========== GOOGLE FONTS ========== */
@import url('https://fonts.googleapis.com/css2?family=B612+Mono:wght@400;700&family=Koulen&display=swap');

/* ========== GLOBAL STYLES ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Prevent accidental horizontal scroll on some mobile browsers */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'B612 Mono', monospace;
  line-height: 1.5;
  color: #000;
  background: #FFFBF0;
}

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

a:focus-visible {
  outline: 2px solid #135E84;
  outline-offset: 2px;
  border-radius: 2px;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}

button:focus-visible {
  outline: 2px solid #135E84;
  outline-offset: 2px;
  border-radius: 2px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

img.image-loaded {
  opacity: 1;
}

/* Glightbox images should always be visible */
.gslide-image img {
  opacity: 1 !important;
}

/* ========== SNAP SECTIONS ========== */
.snap-container {
  scroll-snap-type: y mandatory;
}

.snap-section {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  flex-direction: column;
  padding: 1rem;
  min-height: auto;
}

/* Home section: add top padding to avoid nav overlap */
.section--home {
  padding-top: 1rem;
}

/* Recent projects: start at top */
.section--recent {
  align-items: flex-start;
  padding-top: 2rem;
}

/* Project pages: allow natural height and scrolling */
.snap-section:not(.section--home) {
  height: auto;
  min-height: auto;
  align-items: flex-start;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .section--recent {
    padding-top: 10rem !important;
    padding-bottom: 5rem !important;
  }
}

/* Inner container to constrain content on mobile and keep things centered */
.section-inner {
  width: 100%;
  max-width: 920px;
  padding: 0 1rem;
}

/* ========== HEADER & NAV ========== */
.site-header {
  width: 100%;
  position: sticky;
  top: 0;
  background: #135E84;
  z-index: 100;
  padding-top: 1.5rem;
}

.top-rect {
  position: relative;
  z-index: 1;
  display: block;
  width: 60%;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1.5rem;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}

.nav__brand .brand-link {
  font-family: 'B612 Mono', monospace;
  font-weight: bold;
  font-size: 1.2rem;
}

.nav__links {
  display: none;
  gap: 1rem;
}

.nav__links li {
  list-style: none;
  position: relative;
}

.nav__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  flex-direction: column;
}

.nav__dropdown:hover .nav__submenu {
  display: flex;
}

.hamburger {
  display: block;
  z-index: 999;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0.5rem;
}

.hamburger__bars {
  width: 30px;
  height: 3px;
  background: #111;
  display: block;
  position: relative;
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger__bars::before,
.hamburger__bars::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background: #111;
  left: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), top 0.35s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger__bars::before {
  top: -8px;
}

.hamburger__bars::after {
  bottom: -8px;
}

/* Hamburger to X transformation */
.mobile-menu-btn.open .hamburger__bars {
  background: transparent;
}

.mobile-menu-btn.open .hamburger__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.mobile-menu-btn.open .hamburger__bars::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* ========== MOBILE MENU ========== */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 251, 240, 0.95);
  transition: right 0.4s ease;
  z-index: 200;
}

/* Support both `.active` and `.open` (JS uses `.open`) */
.mobile-menu.active,
.mobile-menu.open {
  right: 0;
}


.mobile-menu__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: 2rem 1.25rem;
  position: relative;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  width: 100%;
  align-items: center;
  text-align: center;
}

.mobile-nav__link,
.mobile-nav__toggle {
  font-family: 'B612 Mono', monospace !important;
  display: block;
  width: 100%;
  padding: 0.75rem 0.5rem;
  font-weight: 700;
  font-size: 1.5rem;
}

.mobile-nav__submenu .mobile-nav__link {
  font-family: 'B612 Mono', monospace !important;
  font-size: 1.2rem;
}

.mobile-nav__group {
  width: 100%;
}

.mobile-nav__submenu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0;
  padding-top: 0;
  align-items: center;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding-top 0.4s ease;
}

.mobile-nav__submenu .mobile-nav__link {
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.mobile-nav__submenu.open {
  max-height: 500px;
  padding-top: 1rem;
}

.mobile-nav__submenu.open .mobile-nav__link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav__submenu.open .mobile-nav__link:nth-child(1) {
  transition-delay: 0.05s;
}

.mobile-nav__submenu.open .mobile-nav__link:nth-child(2) {
  transition-delay: 0.1s;
}

.mobile-nav__submenu.open .mobile-nav__link:nth-child(3) {
  transition-delay: 0.15s;
}

.mobile-nav__submenu.open .mobile-nav__link:nth-child(4) {
  transition-delay: 0.2s;
}

/* ========== NAV HIDE / SHOW ========== */
.nav {
  transition: transform 0.28s ease, opacity 0.28s ease;
  will-change: transform;
}

.nav-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

/* ========== PROJECTS DROPDOWN (support both naming styles) ========== */
.nav-projects,
.nav__dropdown {
  position: relative;
}

.projects-dropdown,
.nav__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  flex-direction: column;
  min-width: 200px;
  z-index: 150;
}

.projects-dropdown.open,
.nav__dropdown:hover .nav__submenu,
.projects-dropdown:hover,
.nav__submenu.open {
  display: flex;
}



/* ========== SECTION TITLES ========== */
.section-title {
  font-family: 'Koulen', cursive;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* Home page hero title: extra large */
.section--home .section-title {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  position: relative;
  z-index: 1;
}

/* Home page tagline: much smaller */
.section-sub {
  font-family: 'Koulen', cursive;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: #000;
  margin-bottom: 1rem;
}

.lead {
  font-family: 'B612 Mono', monospace;
  margin-top: 0.75rem;
  color: #222;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

.sub-title {
  font-family: 'Koulen', cursive;
  font-size: 2.8rem;
  text-align: center;
  margin: 1rem 0;
}

/* ========== PLACEHOLDER IMAGES ========== */
.recent-item__bg,
.contact-hero,
.fine-art-drawing div,
.fine-art-painting div,
.fine-art-special div,
.mural-project img,
.photo-main img,
.carousel-item img {
  background-size: cover;
  background-position: center;
  display: block;
  width: 100%;
  margin: 0.5rem 0;
}

/* Constrain video height on mobile */
.mural-project video {
  max-height: 300px;
  object-fit: cover;
}

.contact-hero {
  background: none;
  max-width: 100%;
  height: auto;
}

.contact-hero img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}

.hero-image {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  display: flex;
  justify-content: center;
}

.hero-image img {
  max-width: 100%;
  height: auto;
}

/* ========== SCROLL TO TOP BUTTON ========== */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: #135E84;
  color: #FFFBF0;
  border: 2px solid #000;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}

.scroll-to-top[hidden] {
  display: none !important;
}

.scroll-to-top::before {
  content: '↑';
}

.scroll-to-top:hover {
  background: #0d3f5a;
  transform: translateY(-3px);
  box-shadow: 5px 5px 0px rgba(0,0,0,0.3);
}

.scroll-to-top:active {
  transform: translateY(0);
  box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

/* ========== MURAL ACCORDION STYLES ========== */
.mural-project {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #135E84;
  transition: box-shadow 0.3s ease;
  display: block;
}

.mural-project:hover {
  box-shadow: 0 4px 12px rgba(19, 94, 132, 0.15);
}

.mural-project h2 {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.mural-teaser {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #333;
}

.mural-teaser::after {
  display: none;
}

.mural-toggle {
  display: inline-block;
  background: #135E84;
  color: #FFFBF0;
  padding: 0.6rem 1.2rem;
  border-radius: 3px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mural-toggle:hover {
  background-color: #0d3f5a;
}

.mural-toggle[aria-expanded="true"]::after {
  content: ' −';
}

.mural-toggle[aria-expanded="false"]::after {
  content: ' +';
}

.mural-description {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
  animation: slideDown 0.3s ease-out;
}

.mural-description p {
  margin-bottom: 0.75rem;
  line-height: 1.7;
  font-size: 0.95rem;
}

.mural-description p:last-child {
  margin-bottom: 0;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }
  to {
    opacity: 1;
    max-height: 1000px;
  }
}

.photo-main {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.photo-main__img {
  max-width: 90%;
  height: auto;
}

/* Make recent project placeholders slightly rectangular (wider than tall) */
.recent-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.snap-section .recent-list {
  grid-template-columns: 1fr;
  max-width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

  .snap-section .recent-list .recent-item__bg {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: auto;
    max-width: 100%;
    overflow: hidden;
    transition: transform 0.3s ease;
  }.recent-item__bg {
  position: relative;
  width: 100%;
  margin: 0;
  border: none !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.recent-item__bg.under-construction {
  background: repeating-linear-gradient(
    45deg,
    #e0e0e0,
    #e0e0e0 10px,
    #f5f5f5 10px,
    #f5f5f5 20px
  ) !important;
}

.recent-item__bg:not(.large) {
  /* 16:9 aspect ratio for rectangular images */
  aspect-ratio: 16 / 9;
  height: auto !important;
  width: 100%;
}

/* Large recent item (used on digital page) */
.recent-item__bg.large {
  aspect-ratio: 16 / 9;
  height: auto !important;
  width: 100%;
}

/* Center overlay content for recent project items */
.recent-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.28));
  pointer-events: none;
}

.recent-item__overlay > div:last-child {
  font-size: 0.8em;
  font-weight: 500;
  margin-top: 0.5rem;
}

/* Center overlay content for proficiencies and interests */
.bg-section .overlay {
  position: relative;
  z-index: 2;
  padding: 2.5rem;
  background: #FFFBF0;
  border: 3px solid #000;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 50rem;
  width: 100%;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.2);
}

.bg-section .overlay::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 25px;
  width: 10px;
  height: 10px;
  background: #135E84;
  border-radius: 50%;
  box-shadow: 50px 0 0 #135E84;
}

.bg-section .overlay .section-title,
.bg-section .overlay .bg-list {
  text-align: center;
}

.bg-section .overlay .section-title {
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #000;
  font-family: 'Koulen', cursive;
}

.bg-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  width: 100%;
}

.bg-list li {
  background: #fff;
  color: #000;
  padding: 0.6rem 1.2rem;
  border: 2px solid #000;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: inline-block;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.15);
}

.bg-list li:hover {
  background: #135E84;
  color: #FFFBF0;
  border-color: #135E84;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px rgba(19,94,132,0.3);
}
/* ========== GALLERY GRID ========== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.gallery-item {
  aspect-ratio: 4 / 3;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item-link {
  display: grid;
  width: 100%;
  position: relative;
  cursor: pointer;
}

.gallery-item-link .gallery-item {
  width: 100%;
  height: auto;
}

/* Play button overlay for video links */
.gallery-item-link video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

.mural-project .gallery-item-link::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255, 251, 240, 0.9);
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

/* Only show play button on video links */
.mural-project .gallery-item-link:has(video)::after {
  content: '▶';
}

.mural-project .gallery-item-link:hover::after {
  font-size: 3.5rem;
  color: #FFFBF0;
}

.gallery-item:hover {
  transform: scale(1.08);
}

/* Digital page images hover effect */
.snap-section .recent-list .recent-item__bg:hover {
  transform: scale(1.08);
}

/* ========== SUB TITLE (for sections) ========== */
.sub-title {
  font-family: 'Koulen', cursive;
  font-size: 2.8rem;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #000;
}

/* ========== CAROUSEL ========== */
.carousel-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 1rem;
  padding: 1rem 10% 1rem 10%;
  scroll-snap-type: x mandatory;
}

/* Hide scrollbar while keeping functionality */
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel-item {
  flex: 0 0 80%;
  scroll-snap-align: center;
  display: block;
}

.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.carousel-btn {
  background: rgba(19, 94, 132, 0.8);
  color: #fff;
  border: none;
  padding: 0.75rem 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background 0.3s ease;
  z-index: 10;
}

.carousel-btn:hover {
  background: rgba(19, 94, 132, 1);
}.featured-image {
  width: 100%;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ========== GLIGHTBOX CUSTOMIZATION ========== */
body.glightbox-open {
  overflow: hidden !important;
}

.glightbox-container {
  background: rgba(0, 0, 0, 0.95) !important;
}

.gclose {
  z-index: 9999 !important;
}

/* ========== CONTACT FORM ========== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 36rem;
  margin: 2rem auto 0;
  padding: 2.5rem;
  background: #FFFBF0;
  border: 3px solid #000;
  border-radius: 2px;
  box-shadow: 6px 6px 0px rgba(19,94,132,0.3);
  position: relative;
}

.contact-form::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: #135E84;
  border-radius: 50%;
  box-shadow: 40px 0 0 #135E84, 80px 0 0 #135E84;
}

.contact-form input,
.contact-form textarea {
  padding: 0.9rem;
  border: 2px solid #000;
  border-radius: 2px;
  font-family: 'B612 Mono', monospace;
  font-size: 1rem;
  color: #000;
  background: #fff;
  transition: all 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #999;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: #FFFBF0;
  border-color: #135E84;
  box-shadow: 0 0 0 3px rgba(19,94,132,0.15);
}

.contact-form textarea {
  resize: vertical;
  min-height: 150px;
  font-family: 'B612 Mono', monospace;
}

.contact-form .btn {
  padding: 1rem 2rem;
  background: #000;
  color: #FFFBF0;
  border: 3px solid #000;
  border-radius: 2px;
  font-family: 'Koulen', cursive;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.3);
  position: relative;
}

.contact-form .btn:hover {
  background: #135E84;
  border-color: #135E84;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px rgba(19,94,132,0.3);
}

.contact-form .btn:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

/* Form validation styles */
.input-error {
  border-color: #d32f2f !important;
  background: #ffebee !important;
}

.form-error {
  color: #d32f2f;
  font-size: 0.85rem;
  margin-top: -1rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-success {
  background: #4caf50;
  color: #fff;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
  font-weight: 600;
  animation: slideInDown 0.4s ease-out;
}

.form-success.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ========== SOCIALS ========== */
.socials {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  background: #FFFBF0;
  border: 3px solid #000;
  border-radius: 2px;
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 160px;
  text-decoration: none;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
  position: relative;
}

.social::after {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: #135E84;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.social:hover {
  background: #135E84;
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0px rgba(19,94,132,0.3);
}

.social:hover::after {
  background: #FFFBF0;
}

.social__icon {
  font-size: 3rem;
  transition: transform 0.3s ease;
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: invert(0%);
}

.social:hover .social__icon {
  transform: scale(1.15) rotate(5deg);
  filter: invert(100%) brightness(2);
}

.social__label {
  font-family: 'Koulen', cursive;
  font-weight: 700;
  font-size: 1.1rem;
  color: #000;
  transition: color 0.3s ease;
}

.social:hover .social__label {
  color: #FFFBF0;
}

/* ========== DESKTOP STYLING (1024px+) ========== */
@media (min-width: 1024px) {
  /* ===== HEADER ===== */
  .site-header {
    padding-top: 0.75rem;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .top-rect {
    width: 70%;
    max-width: 250px;
    margin: 0.75rem auto;
    order: 1;
  }
  
  /* ===== NAVIGATION ===== */
  .nav {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background: #FFFBF0;
    padding: 0.5rem 0;
    gap: 4rem;
    order: 2;
    width: 100%;
    font-family: 'B612 Mono', monospace;
  }
  
  .nav__brand {
    display: none;
  }
  
  .nav__links {
    display: flex !important;
    list-style: none;
    gap: 4rem;
    margin: 0;
    padding: 0;
    flex-direction: row;
    justify-content: center;
    width: auto;
  }
  
  .nav__item {
    position: relative;
  }
  
  .nav__item a {
    color: #000;
    font-weight: 400;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    font-family: 'B612 Mono', monospace;
    display: block;
  }
  
  .nav__item a:hover {
    color: #135E84;
  }
  
  .nav__link {
    color: #000;
    font-weight: 400;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    font-family: 'B612 Mono', monospace;
  }
  
  .nav__link:hover {
    color: #135E84;
  }
  
  .nav__dropdown {
    position: relative;
  }
  
  .nav__dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.5rem;
    pointer-events: auto;
  }
  
  .nav__submenu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 2px solid #000;
    border-radius: 2px;
    flex-direction: column;
    padding: 0.5rem 0;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 200;
    pointer-events: auto;
    margin-top: 0.3rem;
  }
  
  .nav__submenu li {
    list-style: none;
    opacity: 0;
    transform: translateY(-10px);
    animation: dropIn 0.4s ease forwards;
  }
  
  .nav__submenu li:nth-child(1) {
    animation-delay: 0.05s;
  }
  
  .nav__submenu li:nth-child(2) {
    animation-delay: 0.1s;
  }
  
  .nav__submenu li:nth-child(3) {
    animation-delay: 0.15s;
  }
  
  .nav__submenu li:nth-child(4) {
    animation-delay: 0.2s;
  }
  
  @keyframes dropIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .nav__submenu a {
    display: block;
    color: #000;
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
  }
  
  .nav__submenu a:hover {
    background: #135E84;
    color: #FFFBF0;
  }
  
  .nav__dropdown:hover .nav__submenu {
    display: flex !important;
  }
  
  /* Hide mobile menu on desktop */
  .mobile-menu-btn {
    display: none !important;
  }
  
  #mobileMenu {
    display: none !important;
  }
  
  /* ===== SECTION INNER ===== */
  .section-inner {
    max-width: 1000px;
    padding: 0 1.5rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* ===== SECTION TITLES ===== */
  .section-title {
    font-size: 3.2rem;
  }
  
  .section--home .section-title {
    font-size: 3.2rem;
  }
  
  .section-sub {
    font-size: 1.8rem;
  }
  
  /* ===== HERO IMAGE ===== */
  .hero-image img {
    max-width: 300px;
    height: auto;
  }

  /* ===== PHOTO MAIN ===== */
  .photo-main__img {
    max-width: 62.5%;
  }

  /* ===== CAROUSEL ===== */
  .carousel {
    padding: 1rem 10% 1rem 10%;
  }
  
  .carousel-item {
    flex: 0 0 65%;
  }
  
  .carousel-controls {
    gap: 1rem;
    margin-top: 1.5rem;
  }
  
  .carousel-btn {
    padding: 0.75rem 1.25rem;
    font-size: 1.5rem;
    font-family: 'B612 Mono', monospace;
  }
  
  /* ===== FORM ===== */
  .contact-form {
    max-width: 450px;
    padding: 2rem;
    margin: 2rem auto 0;
  }
  
  .contact-form input,
  .contact-form textarea {
    font-size: 1rem;
    padding: 1rem;
  }
  
  .contact-form .btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-family: 'B612 Mono', monospace;
  }
  
  /* ===== SOCIALS ===== */
  .socials {
    gap: 2rem;
  }
  
  .social {
    min-width: 180px;
    padding: 2rem;
  }
  
  .social__icon {
    width: 70px;
    height: 70px;
  }
  
  /* ===== SCROLL TO TOP ===== */
  .scroll-to-top {
    width: 55px;
    height: 55px;
    bottom: 2rem;
    right: 2rem;
    font-size: 1.5rem;
  }
}

/* ========== DESKTOP STYLING (1440px+) ========== */
@media (min-width: 1440px) {
  /* ===== HEADER ===== */
  .site-header {
    padding-top: 0.75rem;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  
  .top-rect {
    width: 65%;
    max-width: 280px;
    order: 1;
  }
  
  /* ===== NAVIGATION ===== */
  .nav {
    gap: 5rem;
    padding: 0.75rem 0;
    order: 2;
    font-family: 'B612 Mono', monospace;
  }
  
  .nav__links {
    gap: 5rem;
  }
  
  .nav__item a {
    font-size: 1.25rem;
  }
  
  .nav__link {
    font-size: 1rem;
    font-family: 'B612 Mono', monospace;
    font-weight: 400;
  }
  
  .nav__submenu a {
    font-size: 0.9rem;
  }
  
  /* ===== SECTION INNER ===== */
  .section-inner {
    max-width: 1200px;
    padding: 0 2rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* ===== SECTION TITLES ===== */
  .section-title {
    font-size: 3.2rem;
  }
  
  .section--home .section-title {
    font-size: 4rem;
  }
  
  .section-sub {
    font-size: 1.8rem;
  }
  
  .sub-title {
    font-size: 3.2rem;
  }
  .section--recent {
    padding-top: 8rem;
    padding-bottom: 6rem;
  }
  
  /* ===== HERO IMAGE ===== */
  .hero-image img {
    max-width: 400px;
    height: auto;
  }
  
  /* ===== LEAD TEXT ===== */
  .lead {
    max-width: 56ch;
    font-size: 1.15rem;
  }
  
  /* ===== BIO SECTION ===== */
  .section--bio .lead {
    margin-top: 0 !important;
  }
  
  /* ===== CONTACT PAGE ===== */
  .contact-hero {
    max-width: 500px;
    margin: 2rem auto;
  }
  
  .contact-hero img {
    max-width: 100%;
  }
  
  /* ===== RECENT PROJECTS ===== */
  .snap-section .recent-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 100%;
    gap: 2.5rem;
    auto-rows: 350px;
  }
  
  .snap-section .recent-list .recent-item__bg {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 400px;
  }
  
  /* ===== CAROUSEL ===== */
  .carousel-wrapper {
    margin: 2.5rem 0;
  }
  
  .carousel {
    padding: 1.5rem 12% 1.5rem 12%;
  }
  
  .carousel-item {
    flex: 0 0 68%;
  }
  
  .carousel-controls {
    gap: 1.2rem;
    margin-top: 1.75rem;
  }
  
  .carousel-btn {
    padding: 0.85rem 1.5rem;
    font-size: 1.65rem;
  }
  
  /* ===== BIO SECTION ===== */
  .section--bio .section-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
  }
  
  .section--bio .section-title {
    grid-column: 1 / -1;
    margin-bottom: 3rem;
  }
  
  .section--bio .hero-image {
    grid-column: 1;
    grid-row: 2;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .section--bio .lead {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ===== CONTACT PAGE ===== */
  .contact-hero {
    max-width: 700px;
    margin: 2rem auto;
  }
  
  .contact-hero img {
    max-width: 100%;
  }
  
  /* ===== PROFICIENCIES & INTERESTS SECTIONS ===== */
  .snap-section.bg-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding: 4rem 2rem;
    margin: 2rem 0;
  }
  
  .bg-section .overlay {
    position: relative;
  }
  
  /* ===== MURAL PROJECT BOXES ===== */
  .mural-projects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  
  .mural-project {
    margin: 2.5rem 0;
    padding: 2.25rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    gap: 2.5rem;
    align-items: start;
  }
  
.mural-project .gallery-item-link {
  display: block;
  overflow: hidden;
}

.mural-project .gallery-item-link img,
.mural-project .gallery-item-link video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 400px;
}

/* Full video display in lightbox */
.gslide-video video {
  max-height: none !important;
}  /* ODD ITEMS (1st, 3rd, etc): TEXT LEFT, IMAGE RIGHT */
  .mural-project:nth-child(odd) .gallery-item-link {
    grid-column: 2;
    grid-row: 1 / 5;
  }
  
  .mural-project:nth-child(odd) h2 {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.5rem;
  }
  
  .mural-project:nth-child(odd) .mural-teaser {
    grid-column: 1;
    grid-row: 2;
    font-size: 1rem;
  }
  
  .mural-project:nth-child(1) .mural-teaser::after {
    display: inline;
    content: " Designed to complement the small-town retail space, it serves as a visual reminder of confidence, inclusivity, and self-acceptance. The piece features flowing line-art body silhouettes that celebrate different body types and forms, creating an inclusive environment for all customers.";
  }
  
  .mural-project:nth-child(2) .mural-teaser::after {
    display: inline;
    content: " After presenting this concept, the client was delighted with the final result and felt it captured the warm, nostalgic aesthetic she envisioned. The design incorporates vibrant colors and whimsical patterns typical of the '70s era, creating a playful and calming space for the child.";
  }
  
  .mural-project:nth-child(3) .mural-teaser::after {
    display: inline;
    content: " I designed and directed this project with the intention of revitalizing the space. Working closely with the nursery teachers, we incorporated student participation by inviting the children to create colorful, abstract \"blob\" artworks to hang from the ceiling.";
  }
  
  .mural-project:nth-child(4) .mural-teaser::after {
    display: inline;
    content: " During my time working there, we aimed to transform the outdated and dim restroom into a brighter, more inviting space that better reflected the store's unique, vibrant character. The mural was designed to bring color, cleanliness, and personality into this often-overlooked area.";
  }
  
  .mural-project:nth-child(odd) .mural-toggle {
    grid-column: 1;
    grid-row: 3;
    font-size: 0.95rem;
    width: fit-content;
  }
  
  .mural-project:nth-child(odd) .mural-description {
    grid-column: 1;
    grid-row: 4;
  }
  
  /* EVEN ITEMS (2nd, 4th, etc): IMAGE LEFT, TEXT RIGHT */
  .mural-project:nth-child(even) .gallery-item-link {
    grid-column: 1;
    grid-row: 1 / 5;
  }
  
  .mural-project:nth-child(even) h2 {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.5rem;
  }
  
  .mural-project:nth-child(even) .mural-teaser {
    grid-column: 2;
    grid-row: 2;
    font-size: 1rem;
  }
  
  .mural-project:nth-child(even) .mural-toggle {
    grid-column: 2;
    grid-row: 3;
    font-size: 0.95rem;
    width: fit-content;
  }
  
  .mural-project:nth-child(even) .mural-description {
    grid-column: 2;
    grid-row: 4;
  }
  
  /* ===== FORM ===== */
  .contact-form {
    max-width: 500px;
    padding: 2.5rem;
    margin: 2.5rem auto 0;
  }
  
  .contact-form input,
  .contact-form textarea {
    font-size: 1.05rem;
    padding: 1.1rem;
  }
  
  .contact-form .btn {
    padding: 1.1rem 2.25rem;
    font-size: 1.15rem;
    font-family: 'B612 Mono', monospace;
  }
  
  /* ===== SOCIALS ===== */
  .socials {
    gap: 2.5rem;
  }
  
  .social {
    min-width: 200px;
    padding: 2.25rem;
  }
  
  .social__icon {
    width: 75px;
    height: 75px;
  }
  
  /* ===== SCROLL TO TOP ===== */
  .scroll-to-top {
    width: 58px;
    height: 58px;
    bottom: 2.5rem;
    right: 2.5rem;
    font-size: 1.6rem;
  }
}

/* ========== DESKTOP STYLING (1920px+) ========== */
@media (min-width: 1920px) {
  /* ===== HEADER ===== */
  .site-header {
    padding-top: 0.5rem;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  
  .top-rect {
    width: 60%;
    max-width: 300px;
    margin: 0.5rem auto;
    order: 1;
  }
  
  /* ===== NAVIGATION ===== */
  .nav {
    gap: 6rem;
    padding: 1rem 0;
    order: 2;
    font-family: 'B612 Mono', monospace;
  }
  
  .nav__links {
    gap: 6rem;
  }
  
  .nav__item a {
    font-size: 1.4rem;
  }
  
  .nav__link {
    font-size: 1.05rem;
    font-family: 'B612 Mono', monospace;
    font-weight: 400;
  }
  
  .nav__submenu a {
    font-size: 0.95rem;
  }
  
  /* ===== SECTION INNER ===== */
  .section-inner {
    max-width: 1400px;
    padding: 0 2.5rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* ===== SECTION TITLES ===== */
  .section-title {
    font-size: 3.8rem;
  }
  
  .section--home .section-title {
    font-size: 4.8rem;
  }
  
  .section-sub {
    font-size: 2.1rem;
  }
  
  .sub-title {
    font-size: 3.8rem;
  }
  .lead {
    max-width: 58ch;
    font-size: 1.25rem;
  }
  
  /* ===== BIO SECTION ===== */
  .section--bio .lead {
    margin-top: 0 !important;
    padding-top: 0;
  }
  
  /* ===== HERO CONTENT ===== */
  .hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    flex-wrap: wrap;
  }
  
  .hero-content h1 {
    flex: 0 1 100%;
  }
  
  .hero-content h2 {
    flex: 0 1 100%;
  }
  
  .hero-content img {
    max-width: 500px;
    height: auto;
  }
  
  .hero-image img {
    max-width: 500px;
    height: auto;
  }
  
  /* ===== SECTION RECENT SPACING ===== */
  .section--recent {
    padding-top: 10rem;
    padding-bottom: 7rem;
  }
  
  /* ===== RECENT PROJECTS ===== */
  .recent-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  
  .recent-item__bg:not(.large) {
    aspect-ratio: 16 / 9;
  }
  
  /* ===== CAROUSEL ===== */
  .carousel-wrapper {
    margin: 3rem 0;
  }
  
  .carousel {
    padding: 2rem 15% 2rem 15%;
  }
  
  .carousel-item {
    flex: 0 0 70%;
  }
  
  .carousel-controls {
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .carousel-btn {
    padding: 1.1rem 1.75rem;
    font-size: 1.85rem;
  }
  
  /* ===== BIO SECTION ===== */
  .section--bio .section-inner {
    gap: 6rem;
    align-items: start;
  }
  
  .section--bio .section-title {
    margin-bottom: 4rem;
  }
  
  .section--bio .hero-image {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .section--bio .lead {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ===== CONTACT PAGE ===== */
  .contact-hero {
    max-width: 800px;
    margin: 2rem auto;
  }
  
  .contact-hero img {
    max-width: 100%;
  }
  
  /* ===== PROFICIENCIES & INTERESTS SECTIONS ===== */
  .snap-section.bg-section {
    min-height: auto;
    padding: 5rem 2.5rem;
    margin: 3rem 0;
  }
  
  .bg-section .overlay {
    max-width: 60rem;
  }
  
  .bg-section .overlay .section-title {
    font-size: 3.8rem;
  }
  
  /* ===== MURAL PROJECT BOXES ===== */
  .mural-projects {
    max-width: 1300px;
    gap: 3.5rem;
  }
  
  .mural-project {
    margin: 3rem 0;
    padding: 2.5rem;
    gap: 3rem;
  }
  
  .mural-project .gallery-item-link {
    grid-row: 1 / 5;
  }
  
  .mural-project h2 {
    font-size: 1.8rem;
  }
  
  .mural-teaser {
    font-size: 1.1rem;
  }
  
  .mural-toggle {
    font-size: 1rem;
  }
  
  .mural-description p {
    font-size: 1rem;
  }
  
  /* ===== FORM ===== */
  .contact-form {
    max-width: 550px;
    padding: 3rem;
    margin: 3rem auto 0;
  }
  
  .contact-form input,
  .contact-form textarea {
    font-size: 1.15rem;
    padding: 1.2rem;
  }
  
  .contact-form .btn {
    padding: 1.25rem 2.75rem;
    font-size: 1.25rem;
    font-family: 'B612 Mono', monospace;
  }
  
  /* ===== SOCIALS ===== */
  .socials {
    gap: 3.5rem;
  }
  
  .social {
    min-width: 220px;
    padding: 2.75rem;
  }
  
  .social__icon {
    width: 85px;
    height: 85px;
  }
  
  /* ===== SCROLL TO TOP ===== */
  .scroll-to-top {
    width: 62px;
    height: 62px;
    bottom: 3rem;
    right: 3rem;
    font-size: 1.8rem;
  }
}