* {
      box-sizing: border-box;
    }

    @font-face {
      font-family: 'Swung Note';
      src: url("assets/fonts/Swung%20Note.ttf") format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Goudy Heavyface";
      src: url("assets/fonts/GoudyHeavyface.woff2") format("woff2"),
           url("assets/fonts/GoudyHeavyface.ttf") format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }


    body {
      margin: 0;
      background: radial-gradient(circle at top left, rgba(185, 162, 126, 0.16), transparent 34rem), #faf3d8;
      color: #0d252b;
      font-family: 'Goudy Heavyface', Arial, Helvetica, sans-serif;
      font-size: clamp(1.0rem, 6vw, 2.orem);
      line-height: 1.3;
      text-rendering: optimizeLegibility;
      text-align: center;
    }
     .site-header {
      position: static;
      top: 0;
      z-index: 0;
      padding: 0.9rem 0;
      width: 100%;
      background: rgba(244, 241, 235, 0.88);
      border-bottom: 1px solid rgba(28, 27, 25, 0.18);
      backdrop-filter: blur(16px);
      text-align: center;
    }



    h1 {
      font-family: 'Swung Note', Arial, Helvetica, sans-serif;
      margin: 0px 0 0;
      padding-top: 0px;
      font-size: clamp(2rem, 6vw, 5rem);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 900;
    }

    .logo {
      display: block;
      margin: auto auto 0px;
      width: clamp(120px, 18vw, 360px);
      height: clamp(120px, 18vw, 360px);
       background-image: url("assets/images/logo.webp");
      background-size: contain;
       background-repeat: no-repeat;
    }
.logo-button {
  display: block;
  margin: auto auto auto;
  width: clamp(120px, 18vw, 360px);
  height: clamp(120px, 18vw, 360px);
  background-image: url("assets/images/logo.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.logo-button:hover {
  display: block;
  margin: auto auto auto;
  width: clamp(120px, 18vw, 360px);
  height: clamp(120px, 18vw, 360px);
  background-image: url("assets/images/logo 3.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

    .subtitle {
      font-family: 'Goudy Heavyface', Arial, Helvetica, sans-serif;
      margin-top: 8px;
      color: #224876;
       font-size: clamp(0.8rem, 6vw, 1.25rem);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .site-nav {
      margin-top: 1px;
    }


    .site-nav a {
      margin-top: 12px;
      font-family: 'Goudy Heavyface', Arial, Helvetica, sans-serif;
      color: #7fafb4;
      font-size: clamp(0.8rem, 6vw, 1.25rem);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      padding: clamp(0.8rem, 6vw, 1.25rem);
      border: auto solid transparent;
      display: inline-block;
    }

    .site-nav a:hover {
      color: #bb5642;
    }

    .site-nav a.nav-home {
      margin: 0;
      padding: 0;
      border: 1px solid transparent;
      color: #bb5642;      

    }

    .site-nav a.nav-home:hover {
      margin: 0;
      padding: 0; 
      border: 1px solid transparent;
      color: #8b0000;
  
    }
    
    main {
      padding: 27px;
    }


.gallery {
  columns: 3 220px;
  column-gap: 18px;
}

.work {
  break-inside: avoid;
  margin-bottom: 18px;
}

.work img {
  width: 100%;
  height: auto;
  display: block;
}

    .work {
      border: 1px solid #0d252b;
      background: #0d252b;
      padding: 10px;
    }

    .work img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      background: #050505;
      cursor: zoom-in;
    }

    .caption {
      margin-top: 8px;
      font-size: 0.75rem;
      color: #aaa39a;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    footer {
      padding: 28px 24px 40px;
      text-align: center;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #6b6256;
    }

    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(122, 121, 121, 0.94);
      align-items: center;
      justify-content: center;
      padding: 48px 64px;
    }

    .lightbox.is-open {
      display: flex;
    }

    .lightbox-image {
      max-width: 92vw;
      max-height: 82vh;
      width: auto;
      height: auto;
      object-fit: contain;
      box-shadow: 0 0 40px rgba(143, 141, 141, 0.157);
    }

    .lightbox-caption {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 18px;
      color: #faf3d8;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-align: center;
    }

    .lightbox-close,
    .lightbox-nav {
      position: absolute;
      border: 1px solid rgba(250, 243, 216, 0.5);
      background: rgba(93, 90, 90, 0.28);
      color: #faf3d8;
      cursor: pointer;
      font-family: Arial, Helvetica, sans-serif;
    }

    .lightbox-close {
      top: 20px;
      right: 24px;
      width: 44px;
      height: 44px;
      font-size: 2rem;
      line-height: 1;
    }

    .lightbox-nav {
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 64px;
      font-size: 2.2rem;
    }

    .lightbox-nav.prev {
      left: 20px;
    }

    .lightbox-nav.next {
      right: 20px;
    }

    .lightbox-close:hover,
    .lightbox-nav:hover {
      background: #faf3d8;
      color: #111;
    }

    @media (min-width: 900px) {
      .gallery {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (min-width: 1300px) {
      .gallery {
        grid-template-columns: repeat(5, 1fr);
      }
    }

    @media (max-width: 700px) {
      .lightbox {
        padding: 56px 14px 64px;
      }

      .lightbox-image {
        max-width: 96vw;
        max-height: 76vh;
      }

      .lightbox-nav {
        width: 38px;
        height: 54px;
        font-size: 1.6rem;
      }

      .lightbox-nav.prev {
        left: 8px;
      }

      .lightbox-nav.next {
        right: 8px;
      }
 .section {
      padding: clamp(3.5rem, 8vw, 7rem) 0 0;
    }

    .section-header {
      display: grid;
      grid-template-columns: auto;
      justify-items: center;
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: center;
      margin-bottom: 2rem;
    }

    .section-header h2 {
      margin: 0;
      font-family: "Goudy Heavyface", serif;
      font-size: clamp(2.1rem, 5vw, 4rem);
      line-height: 0.95;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      text-align: center;
    }

    .section-header p {
      max-width: 100%;
      margin: 0;
      color: #224876;
      text-align: center;
    }

    .work-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: clamp(1rem, 2.4vw, 2rem);
    }

    .work-card {
      position: relative;
      display: block;
      color: inherit;
    }

    .work-card.large {
      grid-column: span 7;
    }

    .work-card.medium {
      grid-column: span 5;
    }

    .work-card.full {
      grid-column: span 12;
    }

    .work-image-frame {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--border);
      background: #ddd6ca;
    }

    .work-image-frame.portrait {
      aspect-ratio: 4 / 5;
    }

    .work-image-frame.landscape {
      aspect-ratio: 16 / 9;
    }

    .work-image-frame.square {
      aspect-ratio: 1 / 1;
    }

    .work-image-frame img {
      height: 100%;
      object-fit: cover;
      filter: contrast(1.02) saturate(0.9);
      transition: transform 420ms ease, filter 420ms ease;
    }

    .work-card:hover .work-image-frame img {
      transform: scale(1.035);
      filter: contrast(1.06) saturate(0.98);
    }

    .work-info {
      display: grid;
      grid-template-columns: auto;
      gap: 1rem;
      padding: 0.85rem 0 0;
      align-items: center;
    }

    .work-info h3 {
      margin: 0;
      font-family: "Goudy Heavyface", serif;
      font-size: clamp(1.2rem, 2.3vw, 1.75rem);
      line-height: 1.05;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .work-meta {
      margin: 0;
      color: #7fafb4;
      font-size: 0.95rem;
      text-align: center;
      white-space: nowrap;
    }

    .work-description {
      grid-column: 1 / -1;
      max-width: 100%;
      margin: 0.2rem 0 0;
      color: #7fafb4;
    }
    }