:root {
     --ink: #ffffff;
     --river: #efffff;
     /* valid */
     --moss: #ffffff;
     --reed: #3d2d0a;
     /* example */
     --foam: #ffffff;
     --gold: #da946f;
     /* add this if you use var(--gold) */
}

/* ===== Page ===== */
* {
     box-sizing: border-box
}

html,
body {
     margin: 0;
     padding: 0
}

body {
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     color: var(--ink);
     background-color: var(--gold);
}

.top {
     width: 100%;
     height: 110px;
     right: 80px;
     display: grid;
     place-items: center;
     cursor: pointer;
     z-index: 10;
}

.top p {
     background: rgb(50, 60, 80, .3);
}

.menu-icon {
     width: 80px;
     height: 80px;
     right: 80px;
     display: grid;
     place-items: center;
     cursor: pointer;
     z-index: 10;
     background: rgb(50, 60, 80, .3);

}

.bar {
     width: 50px;
     height: 3px;
     background-color: white;
     transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-icon.active .bar:nth-child(1) {
     width: 50px;
     transform-origin: middle;
     transform: translate(0px, 27px)rotate(45deg);
}

.menu-icon.active .bar:nth-child(2) {
     opacity: 0;
}

.menu-icon.active .bar:nth-child(3) {
     width: 50px;
     transform-origin: middle;
     transform: translate(0px, -27px)rotate(-45deg);
}

.menu-content {
     height: 50px;
     display: grid;
     column-gap: 1rem;
     grid-template-columns: repeat(8, 50px);
     width: 60%;
     place-content: center;
     background: rgba(47, 72, 121, 0.4);
     color: white;

}

.menu-content a {
     display: grid;
     justify-items: center;
     grid-template-columns: repeat(auto-fill, auto);
     grid-template-rows: repeat(auto-fill);
     height: auto;
     width: 60px;
     color: white;
     padding: 5px;
     text-decoration: none;
     text-align: center;
     place-items: center;
}

.menu-content a:hover {
     background-color: palegreen;
     color: darkgreen;
}

/* Header */
.site-header {
     height: auto;
     min-height: 400px;
     width: 100%;
     display: grid;
     place-items: center;
     grid-template-rows: auto auto auto;
     grid-template-areas:
          "top"
          "menu-icon"
          "menu-content";
     text-align: center;
     padding: 3rem 1rem 2rem;
     color: #fff;
     background: rgba(50, 60, 80, 0.3);
     background-image: url("./gal-images-26/flyfishm.png");
     background-size: cover;
     background-position: center, top;
     clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

.site-header h1 {
     margin: 0;
     font-weight: 800;
     letter-spacing: .02em;
     font-size: clamp(1.6rem, 1rem + 3vw, 3rem);
     background: rgb(50, 60, 80, .3);
}

.site-header .sub {
     margin: .5rem 0 0;
     opacity: .85;
}

/* ===== Gallery (masonry-like grid) ===== */
.gallery {
     max-width: 1200px;
     margin: -2rem auto 4rem;
     /* tucks under header curve */
     padding: 3rem 1rem;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 1.25rem;
     background-color: var(--main-bg);
}

/* Cards */
.card {
     background: linear-gradient(180deg, #f7f4ec 0, var(--reed) 100%);
     border-radius: var(--radius);
     overflow: hidden;
     position: relative;
     box-shadow: var(--shadow);
     transform: translateZ(0);
     /* smoother hover */
}

.card .image {
     display: block;
     width: 100%;
     overflow: hidden;
     border-bottom: 1px solid #0001;
     perspective: 1000px;
}

.card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .45s ease, filter .45s ease, opacity .45s ease;
     filter: saturate(1.05) contrast(1.02);
     background-color: red;
}

/* Aspect ratios */
.ratio-5-3 {
     aspect-ratio: 5 / 3;
}

.ratio-3-5 {
     aspect-ratio: 3 / 5;
}

.ratio-1-1 {
     aspect-ratio: 1 / 1;
}

/* Size variants to create visual rhythm (optional) */
.card.tall .image {
     aspect-ratio: 3 / 5;
}

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

.card.wide .image {
     aspect-ratio: 5 / 3;
}

/* Hover effects */
.card:hover img {
     transform: scale(1.04) rotateZ(-.2deg);
}

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

/* Meta strip */
.meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: .75rem .9rem;
     gap: .5rem;
     font-size: .95rem;
}

.meta .name {
     font-weight: 700;
}

.meta .date {
     font-variant-numeric: tabular-nums;
     opacity: .75;
}

/* Slide-up hover caption */
.hover-caption {
     aspect-ratio: 5 / 3;
     position: absolute;
     inset: auto 0 0 0;
     transform: translateY(100%);
     opacity: 0;
     background: linear-gradient(to top, #0008, #0000);
     background-color: pink;
     color: #fff;
     padding: 1.1rem .9rem .9rem;
     transition: transform .35s ease, opacity .35s ease;
     pointer-events: none;
     font-size: .95rem;
}

/* ===== Lightbox (CSS-only using :target) ===== */
.lightbox {
     position: fixed;
     inset: 0;
     display: none;
     align-items: center;
     justify-content: center;
     background: rgba(12, 20, 16, .85);
     padding: 4vmin;
     z-index: 30;
}

.lightbox img {
     display: block;
     width: auto;
     height: auto;
     max-width: 90vw;
     max-height: 85vh;
     object-fit: contain;
     border-radius: 14px;
     box-shadow: var(--shadow);
     transform: none;
     transform-origin: center center;
}

/* Rotate only the enlarged lightbox image on wide screens */
@media (min-width: 1001px) {
     .lightbox img {
          width: auto;
          max-width: 90vw;
          max-height: 90vh;
          transform: rotate(0deg);
     }
}

.lightbox figure {
     margin: 0;
     max-width: 90vw;
     max-height: 90vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

.lightbox figcaption {
     z-index: 5;
     margin-top: .75rem;
     position: relative;
     right: 150px;
     height: 100px;
     width: 400px;
     color: #fff;
     background: var(--foam);
     backdrop-filter: blur(6px);
     padding: .4rem .7rem;
     border: 2px solid white;
     border-radius: 10%;
     display: block;
     color: #1d1d1d;
}

.lightbox:target {
     display: flex;
}

.lightbox .close {
     position: absolute;
     inset: 0;
     display: block;
}

.lightbox .close:after {
     content: "✕";
     position: absolute;
     top: 16px;
     right: 16px;
     width: 36px;
     height: 36px;
     display: grid;
     place-items: center;
     background: #ffffffcc;
     border-radius: 999px;
     color: #111;
     font-weight: 700;
     box-shadow: var(--shadow);
}

/* ===== Small screens ===== */
@media (max-width:520px) {
     .meta {
          font-size: .9rem;
     }

     .hover-caption {
          display: none;
          font-size: .9rem;
     }

     .close {
          display: none;
     }

     .footer {
          display: none;
     }

     #img1,
     #img2,
     #img3,
     #img7,
     #img4,
     #img5,
     #img6 {
          display: none;
     }
}

@media (max-width:1000px) {

     .gallery {
          background-color: var(--1000-bg);
     }

     .meta {
          font-size: .9rem;
     }

}

@media (max-width:600px) {

     .gallery {
          background-color: rgb(64, 78, 64);
     }

     .meta {
          font-size: .9rem;
     }

     .menu-content {
          height: auto;
          display: grid;
          grid-template-columns: repeat(auto-fill, auto);
          width: 70%;
          place-items: center;
          background: rgb(50, 60, 80, .3);
          color: white;
          z-index: 9;
     }

}

@media (max-width:520px) {

     .gallery {
          position: relative;
          top: 0px;
          left: 0px;
          background-color: var(--380-bg);
     }

     .meta {
          font-size: .9rem;
     }

     .site-header {
          height: auto;
          min-height: 150px;
          width: 100%;
     }

     .menu-content {
          height: auto;
          display: grid;
          grid-template-columns: repeat(auto-fill, 100%);
          width: 70%;
          place-items: center;
          background: rgb(50, 60, 80, .4);
          color: white;
          z-index: 9;
     }

}