/* Gallery-specific layout; shared visual system and navigation come from ../style.css. */
.intro { padding: clamp(70px, 9vw, 112px) 0 56px; }
.intro-row { display: grid; grid-template-columns: 1fr minmax(260px, .62fr); gap: clamp(34px, 9vw, 138px); align-items: end; }
.intro h1 { display: grid; gap: 4px; max-width: 100%; margin: 0; line-height: .9; text-wrap: balance; }
.intro h1 span { font-size: clamp(3rem, 5.7vw, 5.55rem); font-weight: 900; letter-spacing: -.08em; }
.intro h1 em { color: var(--green); font-size: clamp(3.6rem, 6.9vw, 6.5rem); font-style: normal; font-weight: 900; letter-spacing: -.09em; }
.intro p:not(.eyebrow) { max-width: 390px; margin: 0 0 5px; color: var(--muted); font-size: 1.03rem; line-height: 1.9; }
.intro .eyebrow { margin-bottom: 22px; }
.intro .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #36a57d; box-shadow: 0 0 0 5px rgba(54,165,125,.13); }
.gallery-section { padding-top: 24px; border-top: 1px solid var(--line); }
.gallery-meta { display: flex; justify-content: space-between; gap: 15px; margin: 0 0 20px; color: var(--muted); font-size: .73rem; font-weight: 900; letter-spacing: .13em; }
.gallery-meta span:first-child { color: var(--green); }
.masonry { column-count: 4; column-gap: 15px; padding-bottom: 78px; animation: enter .7s .1s var(--ease) both; }
.photo-card { position: relative; display: block; width: 100%; break-inside: avoid; margin: 0 0 15px; padding: 0; overflow: hidden; border: 5px solid rgba(255,255,252,.72); border-radius: 19px; background: var(--surface); box-shadow: 0 9px 24px rgba(19,34,30,.07); cursor: zoom-in; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.photo-card img { display: block; width: 100%; height: auto; transition: transform .48s var(--ease), filter .48s; }
.photo-card:hover { transform: translateY(-5px); box-shadow: 0 21px 40px rgba(19,34,30,.16); }
.photo-card:hover img { transform: scale(1.045); filter: saturate(1.08); }
.photo-card::after { content: "↗"; position: absolute; right: 11px; bottom: 11px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: white; background: rgba(13,71,55,.82); backdrop-filter: blur(8px); opacity: 0; transform: translateY(7px); transition: opacity .2s, transform .2s; }
.photo-card:hover::after { opacity: 1; transform: translateY(0); }
.empty-state { margin: 0 0 80px; padding: 34px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; background: rgba(255,255,255,.35); }
.empty-state code { color: var(--green-dark); font-family: ui-monospace,SFMono-Regular,monospace; }
.lightbox { width: min(1040px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 5px solid rgba(255,255,255,.18); border-radius: 20px; background: #101713; box-shadow: 0 28px 80px rgba(0,0,0,.45); }
.lightbox::backdrop { background: rgba(8,18,14,.84); backdrop-filter: blur(6px); }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 42px); margin: auto; object-fit: contain; }
.close { position: fixed; top: 22px; right: 25px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; color: white; background: rgba(0,0,0,.4); font-size: 1.8rem; line-height: 1; cursor: pointer; }
@media (max-width: 980px) { .masonry { column-count: 3; } }
@media (max-width: 700px) { .masonry { column-count: 3; column-gap: 8px; } .photo-card { margin-bottom: 8px; border-width: 2px; border-radius: 11px; } .photo-card::after { display: none; } }
@media (max-width: 760px) { .intro { padding: 52px 0 39px; } .intro-row { grid-template-columns: 1fr; gap: 17px; } .intro h1 { gap: 2px; } .intro h1 span { font-size: clamp(2.7rem,13vw,3.9rem); } .intro h1 em { font-size: clamp(3.2rem,15.5vw,4.7rem); } .intro p:not(.eyebrow) { max-width: 34rem; font-size: .96rem; line-height: 1.78; } .gallery-section { padding-top: 18px; } .gallery-meta { margin-bottom: 13px; font-size: .65rem; } }