:root {
  --page: #f4f5f0;
  --band: #e3e8df;
  --ink: #343b2f;
  --ink-soft: #3f473a;
  --text: #373737;
}
/* Everything is sized in rem, and 1rem grows with the window:
   about 14.75px on a 1024px laptop, ~20px at 2000px, ~26px at 3000px. */
html { font-size: clamp(14.75px, calc(9px + 0.56vw), 34px); scroll-behavior: smooth; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--page);
  color: var(--text);
  font: 400 1rem/1.85 "Proxima Nova", Figtree, system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
main:has(.about) { background: #fff; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header */
.top {
  background: var(--band);
  height: 6.6rem;
  padding: 0 2.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo img { width: 4.35rem; height: 4.35rem; }
.top nav { display: flex; gap: 2.3rem; font: 400 .94rem Roboto, sans-serif; color: var(--ink); }
.top nav a:hover { opacity: .6; }

/* Home cards */
.cards {
  max-width: 56rem;
  margin: 1.8rem auto 6rem;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5.15rem;
  text-align: center;
}
.card img { width: 100%; aspect-ratio: 226 / 276; object-fit: cover; transition: opacity .25s; }
.card:hover img { opacity: .85; }
.card-title {
  display: block;
  margin-top: 1.5rem;
  font: 400 1.19rem Roboto, sans-serif;
  letter-spacing: .13rem;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card-sub { display: block; margin-top: .25rem; font: 400 .875rem Roboto, sans-serif; color: var(--ink-soft); }

/* Gallery */
.page-title {
  text-align: center;
  font: 400 1.5rem Roboto, sans-serif;
  text-transform: uppercase;
  color: var(--ink);
  margin: 3.4rem 0 2.3rem;
}
.masonry { padding: 2.4rem 3.45rem 5.4rem; display: flex; gap: .68rem; align-items: flex-start; }
.page-title + .masonry { padding-top: 0; }
.m-col { flex: 1; display: flex; flex-direction: column; gap: .68rem; min-width: 0; }
.m-item img { width: 100%; background: var(--band); }
.m-item { cursor: zoom-in; }
/* Before the script runs: plain grid so nothing is invisible */
.masonry:not(.ready) { display: grid; grid-template-columns: repeat(4, 1fr); }

/* About */
.about {
  background: #fff;
  padding: 1.8rem 1rem 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-photo { width: 22rem; aspect-ratio: 325 / 400; object-fit: cover; }
.about-card {
  background: var(--page);
  width: 22rem;
  margin-left: -3.4rem;
  padding: 3.1rem 2.6rem 2.7rem 3.9rem;
  position: relative;
}
.about-card h1 { font: 400 1.5rem Roboto, sans-serif; color: var(--ink); margin-bottom: 1.2rem; }
.about-card p { font-size: .85rem; line-height: 2.1; }

/* Contact */
.banner {
  height: min(60vh, 28rem);
  background: #111 center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner h1 { color: #fff; font: 500 2.3rem Roboto, sans-serif; text-transform: uppercase; letter-spacing: .07rem; }
.contact { text-align: center; padding: 2.3rem 1rem 5.4rem; }
.contact h2 { font: 400 1.63rem Roboto, sans-serif; text-transform: uppercase; color: var(--ink); margin-bottom: 1.5rem; }
.contact .label { font: 500 .75rem Roboto, sans-serif; letter-spacing: .11rem; text-transform: uppercase; margin-top: 1.2rem; color: var(--ink); }
.contact a { display: inline-block; font-size: 1rem; }
.contact a:hover { opacity: .6; }

/* Footer */
.foot {
  background: var(--band);
  height: 6.6rem;
  padding: 0 2.7rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: .81rem;
  color: var(--ink);
}
.foot svg { width: 1.1rem; height: 1.1rem; }
.foot .totop { justify-self: end; }
.foot a:hover { opacity: .6; }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(244, 245, 240, .98);
  display: none; align-items: center; justify-content: center;
}
.lb.open { display: flex; }
.lb img { max-width: calc(100vw - 9.5rem); max-height: calc(100vh - 5.5rem); width: auto; height: auto; object-fit: contain; user-select: none; }
.lb button {
  position: absolute; background: none; border: 0; cursor: pointer; color: var(--ink);
  font: 300 2.3rem/1 Roboto, sans-serif; padding: 1.2rem; opacity: .7;
}
.lb button:hover { opacity: 1; }
.lb .lb-close { top: .5rem; right: .8rem; font-size: 2rem; }
.lb .lb-prev { left: .5rem; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: .5rem; top: 50%; transform: translateY(-50%); }
.lb .lb-count { position: absolute; top: 1.5rem; left: 1.75rem; font-size: .81rem; color: var(--ink); }

@media (max-width: 760px) {
  .top { padding: 0 1rem; height: 5.4rem; }
  .logo img { width: 3.5rem; height: 3.5rem; }
  .top nav { gap: 1.35rem; }
  .cards { grid-template-columns: 1fr; gap: 3rem; max-width: 24rem; }
  .masonry { padding: 1.35rem 1rem 4rem; }
  .masonry:not(.ready) { grid-template-columns: repeat(2, 1fr); }
  .about { flex-direction: column; }
  .about-photo { width: 100%; max-width: 24rem; }
  .about-card { width: 100%; max-width: 24rem; margin: -2rem 0 0; padding: 2.3rem 1.75rem; }
  .about-card p { font-size: .95rem; }
  .foot { padding: 0 1rem; }
  .lb img { max-width: 100vw; max-height: calc(100vh - 8rem); }
  .lb .lb-prev, .lb .lb-next { top: auto; bottom: .7rem; transform: none; }
}