/* Conor Lynch Photography — Cloudflare Pages static portfolio */
:root {
  --black:#080808;
  --black-soft:#101010;
  --white:#f3f3f0;
  --muted:#999995;
  --line:#292929;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;
}
* { box-sizing:border-box; }
html { background:var(--black); scroll-behavior:smooth; }
body {
  width:100%;
  min-width:320px;
  max-width:100%;
  margin:0;
  overflow-x:hidden;
  background:var(--black);
  color:var(--white);
  font:13px/1.75 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
a:hover { opacity:.78; }
button { font:inherit; }
.visually-hidden {
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* Home hero: the generated artwork includes the wordmark and ENTER label. */
.home-hero {
  width:100%;
  margin:0;
  background:#141414;
  overflow:hidden;
  line-height:0;
}
.hero-link { display:block; width:100%; }
.home-hero img {
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  object-fit:contain;
}

/* Secondary-page brand line */
.inner-header {
  width:100%;
  padding:25px 15px 19px;
  background:#080808;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.wordmark {
  display:inline-block;
  color:var(--white);
  font:normal clamp(21px,3vw,30px)/1.25 var(--serif);
  letter-spacing:.2em;
  text-transform:uppercase;
}
.inner-header p {
  margin:8px 0 0;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
}

/* Navigation */
.main-nav {
  position:relative;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  background:#080808;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.nav-brand {
  display:none;
  padding:18px 15px 7px;
  color:#eee;
  font:normal 15px var(--serif);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.main-nav ul {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 42px;
  list-style:none;
  margin:0;
  padding:17px 14px;
}
.main-nav li { margin:0; padding:0; }
.main-nav a:not(.nav-brand) {
  display:block;
  padding:2px 0 5px;
  border-bottom:1px solid transparent;
  color:#eee;
  font-size:9px;
  letter-spacing:.27em;
  text-transform:uppercase;
  transition:border-color .2s,opacity .2s;
}
.main-nav ul a:hover,
.main-nav ul a[aria-current="page"] {
  border-color:#eee;
  opacity:1;
}
.nav-toggle { display:none; }

/* Homepage collections */
.home-gallery {
  width:min(1500px,94vw);
  margin:0 auto;
  padding:40px 0 74px;
}
.collection-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:18px;
}
.collection-tile {
  display:block;
  min-width:0;
  width:100%;
  overflow:hidden;
  background:#171717;
}
.collection-tile img {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  transition:transform .55s ease,opacity .3s ease;
}
.collection-tile:hover img { transform:scale(1.025); opacity:.9; }
.gallery-caption {
  margin:24px 0 0;
  color:#999995;
  font-size:9px;
  letter-spacing:.24em;
  text-align:center;
  text-transform:uppercase;
}

/* Inner content */
#main-content { width:100%; min-width:0; }
.page-section {
  width:min(1450px,92vw);
  margin:0 auto;
  padding:48px 0 82px;
}
.page-heading { margin:0 0 38px; text-align:center; }
.eyebrow {
  margin:0 0 10px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.23em;
  text-transform:uppercase;
}
.page-heading h1,
.page-section h1 {
  margin:0;
  color:var(--white);
  font:normal clamp(28px,3.6vw,42px)/1.2 var(--serif);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.page-intro {
  margin:11px 0 0;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.19em;
  text-transform:uppercase;
}
.narrow-content { width:min(850px,90vw); }
.prose {
  max-width:760px;
  margin:0 auto;
  color:#d0d0cc;
  font-size:14px;
  line-height:2;
}
.prose p { margin:0 0 19px; }
.center { text-align:center; }
.outline-button {
  display:inline-block;
  border:1px solid #aaa;
  padding:11px 25px;
  color:#eee;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:background .2s,color .2s;
}
.outline-button:hover { background:#eee; color:#111; opacity:1; }
.contact-note { color:#777; font-size:11px; }
code { padding:2px 5px; background:#1d1d1d; color:#eee; }

/* Photo galleries: CSS columns create a natural masonry flow. Images keep
   their own height; no fixed-height crops or stretched landscape pictures. */
.photo-grid {
  columns:3;
  column-gap:22px;
}
.photo-card {
  display:inline-block;
  width:100%;
  margin:0 0 29px;
  break-inside:avoid;
  vertical-align:top;
}
.photo-open {
  display:block;
  width:100%;
  overflow:hidden;
  background:#111;
  line-height:0;
}
.photo-card img {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  margin:0 auto;
  transition:opacity .25s ease;
}
.photo-open:hover img { opacity:.88; }
.photo-card h2 {
  margin:12px 0 0;
  color:#e9e9e5;
  font:normal 16px/1.4 var(--serif);
  letter-spacing:.07em;
  text-align:center;
}
.gallery-empty {
  padding:80px 15px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.gallery-empty p {
  margin:0 0 8px;
  color:#ddd;
  font-size:10px;
  letter-spacing:.22em;
}
.gallery-empty span { color:#888; font-size:12px; }
.back-link-wrap { margin:55px 0 0; text-align:center; }
.text-link {
  display:inline-block;
  border-bottom:1px solid #777;
  padding-bottom:4px;
  color:#ccc;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* Footer */
.site-footer {
  width:100%;
  margin:0;
  padding:29px 15px 35px;
  border-top:1px solid var(--line);
  background:#080808;
  color:#888;
  text-align:center;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.site-footer strong {
  display:block;
  margin:0 0 6px;
  color:#eee;
  font:normal 17px var(--serif);
  letter-spacing:.16em;
}
.footer-links {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 23px;
  margin:15px 0;
}
.footer-links a { color:#c4c4c0; }
.site-footer small {
  display:block;
  margin-top:19px;
  color:#666;
  font-size:8px;
  letter-spacing:.1em;
}

/* Lightbox: show the complete photo at its natural aspect ratio. */
.lightbox {
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:55px 65px;
  background:rgba(0,0,0,.97);
}
.lightbox.is-open { display:flex; }
.lightbox figure {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  margin:0;
}
.lightbox img {
  display:block;
  width:auto;
  height:auto;
  max-width:92vw;
  max-height:82vh;
  object-fit:contain;
}
.lightbox figcaption {
  margin-top:15px;
  color:#bbb;
  font:normal 14px var(--serif);
  letter-spacing:.1em;
  text-align:center;
}
.lightbox button {
  position:absolute;
  border:0;
  background:transparent;
  color:#eee;
  cursor:pointer;
  line-height:1;
}
.lightbox-close { top:17px; right:24px; font-size:38px; }
.lightbox-prev,.lightbox-next {
  top:50%;
  transform:translateY(-50%);
  padding:16px;
  font-size:34px;
}
.lightbox-prev { left:12px; }
.lightbox-next { right:12px; }
body.lightbox-open { overflow:hidden; }

@media(max-width:900px) {
  .main-nav ul { gap:8px 28px; }
  .home-gallery { width:94vw; }
  .photo-grid { columns:2; }
  .page-section { padding-top:40px; }
}
@media(max-width:600px) {
  .inner-header { padding:21px 10px 16px; }
  .wordmark { font-size:19px; letter-spacing:.13em; }
  .inner-header p { font-size:8px; letter-spacing:.16em; }
  .main-nav { display:block; text-align:left; }
  .nav-brand { display:block; padding:14px 16px; text-align:left; font-size:12px; }
  .nav-toggle {
    position:absolute;
    top:7px;
    right:13px;
    display:flex;
    flex-direction:column;
    gap:5px;
    border:0;
    background:transparent;
    padding:10px;
  }
  .nav-toggle span { width:21px; height:1px; background:#eee; }
  .main-nav ul {
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 16px 12px;
  }
  .main-nav ul.is-open { display:flex; }
  .main-nav li { border-top:1px solid #222; }
  .main-nav ul a { padding:11px 0; font-size:9px; }
  .home-gallery { width:92vw; padding:24px 0 53px; }
  .collection-grid { grid-template-columns:1fr; gap:15px; }
  .collection-tile { aspect-ratio:auto; }
  .gallery-caption { font-size:8px; letter-spacing:.16em; }
  .page-section { width:92vw; padding:37px 0 65px; }
  .page-heading { margin-bottom:28px; }
  .page-heading h1,.page-section h1 { font-size:29px; letter-spacing:.16em; }
  .photo-grid { columns:1; }
  .photo-card { margin-bottom:25px; }
  .photo-card h2 { font-size:15px; }
  .prose { font-size:13px; }
  .lightbox { padding:45px 12px; }
  .lightbox img { max-width:96vw; max-height:78vh; }
  .lightbox-prev { left:0; }
  .lightbox-next { right:0; }
}