:root {
        --primary: #5b7b8a;
        --secondary: #b8c4d0;
        --accent: #e8d4b8;
        --bg: #f5f3ef;
        --text: #2c3e4a;
        --border: #c5cad3;
        --glow: rgba(
          91,
          123,
          138,
          0.35
        );
        --transition: 0.4s
          cubic-bezier(0.4, 0, 0.2, 1);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background: var(--bg);
        color: var(--text);
        font-family: "Georgia", serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        -webkit-tap-highlight-color: transparent;
        overscroll-behavior-y: none;
        touch-action: manipulation;
      }

      /* ── HEADER ── */
      header {
        text-align: center;
        padding: 4rem 2rem 3rem;
        border-bottom: 1px solid
          var(--border);
        background: var(--bg);
      }

      header h1 {
        font-size: clamp(
          2rem,
          5vw,
          3.5rem
        );
        font-weight: 400;
        letter-spacing: 0.12em;
        color: var(--primary);
        text-transform: uppercase;
        margin-bottom: 0.75rem;
      }

      header p {
        font-size: clamp(
          0.85rem,
          2vw,
          1rem
        );
        color: var(--secondary);
        letter-spacing: 0.25em;
        text-transform: uppercase;
        font-style: italic;
      }

      /* ── GALLERY GRID ── */
      main {
        flex: 1;
        padding: 3rem 2rem;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
      }

      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(
          auto-fill,
          minmax(280px, 1fr)
        );
        gap: 1.5rem;
      }

      /* ── PHOTO CARD ── */
      .photo-card {
        position: relative;
        cursor: pointer;
        border: 1px solid var(--border);
        background: #fff;
        overflow: hidden;
        border-radius: 2px;
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease,
          box-shadow var(--transition);
      }

      .photo-card.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .photo-card:hover {
        box-shadow:
          0 8px 40px var(--glow),
          0 2px 8px rgba(0, 0, 0, 0.08);
        border-color: var(--primary);
      }

      .photo-card:hover .photo-img {
        transform: scale(1.06);
        filter: brightness(0.96)
          contrast(1.08) saturate(1);
      }

      .photo-card:hover .photo-caption {
        opacity: 1;
        transform: translateY(0);
      }

      .photo-wrapper {
        width: 100%;
        aspect-ratio: 4/3;
        overflow: hidden;
        background: var(--secondary);
        position: relative;
      }

      .photo-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition:
          transform 0.6s
            cubic-bezier(0.4, 0, 0.2, 1),
          filter 0.5s ease;
        filter: brightness(1.15)
          contrast(0.8) saturate(0.55)
          opacity(0.72);
      }

      /* hover overlay */
      .photo-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(44, 62, 74, 0.55) 0%,
          transparent 60%
        );
        opacity: 0;
        transition: opacity
          var(--transition);
      }

      .photo-card:hover .photo-overlay {
        opacity: 1;
      }

      /* caption inside card — just the name */
      .photo-name {
        padding: 0.85rem 1rem;
        font-size: 0.8rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text);
        border-top: 1px solid
          var(--border);
        background: #fff;
      }

      /* touch devices have no hover — always show full-color photos */
      @media (hover: none) {
        .photo-img {
          filter: none;
        }
        .photo-overlay {
          display: none;
        }
      }

      .photo-card:focus-visible {
        outline: 2px solid
          var(--primary);
        outline-offset: 3px;
      }

      /* ── LIGHTBOX ── */
      .lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(
          20,
          28,
          34,
          0.95
        );
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        backdrop-filter: blur(4px);
      }

      .lightbox.open {
        display: flex;
        animation: lbIn 0.35s ease;
      }

      @keyframes lbIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .lb-inner {
        position: relative;
        max-width: 1000px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
      }

      .lb-image-wrap {
        position: relative;
        width: 100%;
        max-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .lb-image-wrap img {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
        border-radius: 2px;
        box-shadow:
          0 0 80px
            rgba(91, 123, 138, 0.4),
          0 0 160px
            rgba(91, 123, 138, 0.15);
        display: block;
        animation: imgIn 0.4s ease;
      }

      @keyframes imgIn {
        from {
          opacity: 0;
          transform: scale(0.97);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      /* nav arrows */
      .lb-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(
          255,
          255,
          255,
          0.08
        );
        border: 1px solid
          rgba(255, 255, 255, 0.18);
        color: #fff;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        font-size: 1.3rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.2s,
          border-color 0.2s;
        z-index: 2;
        user-select: none;
      }

      .lb-arrow:hover {
        background: rgba(
          232,
          212,
          184,
          0.2
        );
        border-color: var(--accent);
      }

      .lb-prev {
        left: -64px;
      }
      .lb-next {
        right: -64px;
      }

      @media (max-width: 700px) {
        .lb-prev {
          left: 4px;
        }
        .lb-next {
          right: 4px;
        }
      }

      /* details panel */
      .lb-details {
        text-align: center;
        color: rgba(
          255,
          255,
          255,
          0.85
        );
        max-width: 600px;
      }

      .lb-title {
        font-size: 1.2rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 0.5rem;
        font-weight: 400;
      }

      .lb-meta {
        font-size: 0.8rem;
        letter-spacing: 0.15em;
        color: rgba(
          184,
          196,
          208,
          0.75
        );
        text-transform: uppercase;
        margin-bottom: 0.6rem;
      }

      .lb-description {
        font-size: 0.9rem;
        line-height: 1.7;
        color: rgba(
          255,
          255,
          255,
          0.65
        );
        font-style: italic;
      }

      .lb-counter {
        font-size: 0.75rem;
        letter-spacing: 0.2em;
        color: rgba(197, 202, 211, 0.5);
        margin-top: 0.5rem;
      }

      /* close button */
      .lb-close {
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        background: rgba(
          255,
          255,
          255,
          0.07
        );
        border: 1px solid
          rgba(255, 255, 255, 0.15);
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 1.2rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
        z-index: 10;
      }

      .lb-close:hover {
        background: rgba(
          232,
          212,
          184,
          0.2
        );
        border-color: var(--accent);
      }

      /* ── FOOTER ── */
      footer {
        text-align: center;
        padding: 2rem;
        border-top: 1px solid
          var(--border);
        font-size: 0.78rem;
        letter-spacing: 0.15em;
        color: var(--secondary);
        text-transform: uppercase;
      }

      footer a {
        color: var(--primary);
        text-decoration: none;
        border-bottom: 1px solid
          var(--border);
        padding-bottom: 1px;
        transition:
          border-color 0.2s,
          color 0.2s;
      }

      footer a:hover {
        color: var(--text);
        border-color: var(--primary);
      }

      /* ── RESPONSIVE ── */
      @media (max-width: 600px) {
        main {
          padding: 2rem 1rem;
        }
        .gallery-grid {
          gap: 1rem;
          grid-template-columns: 1fr 1fr;
        }
        .lb-inner {
          gap: 1rem;
        }
      }

      @media (max-width: 400px) {
        .gallery-grid {
          grid-template-columns: 1fr;
        }
      }
      /* ── BACK TO TOP ── */
      .back-to-top {
        position: fixed;
        bottom: 2.5rem;
        right: max(
          1.5rem,
          calc(50% - 764px)
        );
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        border: none;
        font-size: 1.4rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition:
          opacity 0.3s ease,
          transform 0.3s ease,
          visibility 0.3s;
        box-shadow: 0 4px 20px
          rgba(0, 0, 0, 0.15);
        z-index: 999;
        -webkit-tap-highlight-color: transparent;
      }

      .back-to-top.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .back-to-top:hover {
        background: var(--text);
        transform: translateY(-2px);
      }

      .back-to-top:active {
        transform: translateY(0)
          scale(0.95);
      }

      @media (max-width: 600px) {
        .back-to-top {
          width: 44px;
          height: 44px;
          font-size: 1.2rem;
          bottom: 1rem;
          right: 1rem;
        }
      }