/* Clean, minimal, Tumblr/Squarespace-inspired — NO JAVASCRIPT */
:root{
  --maxw: 2500px;      /* slightly narrower for a cleaner look */
  --pad: 28px;         /* generous breathing room */
  --gap: 8px;         /* airy spacing */
  --fg: #0a0a0a;
  --muted: #7a7a7a;
  --border: #eaeaea;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: #fff;
  line-height:1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:calc(var(--maxw) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.padded{padding: calc(var(--pad) * 0.9) 0}

.container_padded_about {
  max-width: 1100px;       
  margin: 0 auto;          
  padding: 0 80px;         
  justify-content: center;
  box-sizing: border-box;  
}

.container_padded_book{
  margin-left: 40px;
  margin-right: 40px;
}

/* Nav — keep it understated */
.nav{
  position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:0px solid var(--border);
  padding-top: 20px;
}
.nav-inner{
  display:flex;align-items:center;justify-content:center;gap:48px;height:68px;
}
.brand{margin-right:auto;font-weight:600;letter-spacing:.02em}
.nav a {
  margin: 0 18px; /* 👈 add horizontal space */
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12.5px;
  padding: 15px 15px;
  border-radius: 0px;
  transition: background .2s ease;
}
.nav a:hover{background:#f7f7f7}
.nav a.active{background:#111;color:#fff}

/* Banner — less tall, calmer */
.banner {
  width: 100%;
  border-bottom: 0px solid #eaeaea;
}

.banner img {
  width: 100%;
  height: auto; /* keeps original aspect ratio */
  display: block;
}

/* Headings — simple, low-contrast captions */
.h{display:flex;align-items:baseline;justify-content:space-between;margin:18px 0 6px 0}
.h h1{font-size:26px;margin:0;letter-spacing:.01em;font-weight:600}
.h p{margin:0;color:var(--muted);font-size:14px}

.ig-link{
  color:rgb(45, 123, 239);
}

/* Centered Masonry — CSS columns with column-width so it naturally centers in the container */
.wrap-narrow{max-width:var(--maxw);margin:0 auto}
.masonry {
  column-count: 4;          /* 👈 force a max of 4 columns */
  column-gap: var(--gap);
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 1200px) {
  .masonry { column-count: 3; }
}
@media (max-width: 860px) {
  .masonry { column-count: 2; }
}
@media (max-width: 600px) {
  .masonry { column-count: 1; }
}

.tile{
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 var(--gap);
  border:0px solid var(--border);
  border-radius:0px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
}
.tile img{width:100%;height:auto;display:block}

/* --- Masonry top-gap fix ------------------------------
   In multicol layouts, block-level margins can "carry" across column breaks,
   causing the first item in a column to appear with extra top space equal to
   the vertical gap. Making each tile inline-block prevents that margin transfer.
   ----------------------------------------------------- */
.masonry .tile{
  display: inline-block; /* stop cross-column margin transfer */
  width: 100%;
  vertical-align: top;
  margin: 0 0 var(--gap) 0; /* keep the intended vertical gap below each tile */
}


/* Forms */
form{display:grid;gap:14px;max-width:560px;margin: 0 auto;}
label{font-size:13px;color:#3f3f3f}
input, textarea{
  width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:0px;background:#fff;
  outline:none;
}
input:focus, textarea:focus{border-color:#cfcfcf}
textarea{min-height:140px;resize:vertical}
button{
  appearance:none;border:0;background:#111;color:#fff;padding:14px 18px;border-radius:0px;
  font-weight:600;letter-spacing:.04em;cursor:pointer
}
button:hover{opacity:.9}

/* Footer — ultra minimal */
.footer{border-top:1px solid var(--border);margin-top:64px}
.footer-inner{height:68px;display:flex;align-items:center;justify-content:space-between}
small{color:var(--muted)}

/* About */
.about-wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns: 320px 1fr;gap:32px;align-items:center}
.about-wrap > div:last-child {
  padding-bottom: 55px; /* tweak value until text aligns visually */
}
.about-photo{border-radius:0px;overflow:hidden;border:0px solid var(--border)}
.about-photo img{width:100%;height:auto;display:block}

@media (max-width: 860px){
  .about-wrap{grid-template-columns: 1fr}
  .nav-inner{justify-content:center}
}

main {
  min-height: calc(100vh - 68px - 68px); /* 👈 viewport height minus nav & footer */
}
@media (max-width: 860px) {
 

  .about-photo img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 600px) {

  .nav a {
    margin: 0 2px; /* 👈 add horizontal space */
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 11px;
    padding: 10px 10px;
    border-radius: 0px;
    transition: background .2s ease;
  }

  .container_padded_about {
    max-width: 1100px;       
    margin: 0 auto;          
    padding: 0 40px;         
    justify-content: center;
    box-sizing: border-box;  
  }

}

/* --- Desktop lightbox (image click) ------------------ */

/* No lightbox on small screens */
.lightbox {
  display: none;
}

/* Only activate lightbox on desktop */
@media (min-width: 861px) {

  .lightbox-link {
    cursor: zoom-in;
  }

  .lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(0, 0, 0, 0.82);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
  }

  .lightbox:target {
    opacity: 1;
    pointer-events: auto;
  }

  .lightbox-inner {
    position: relative;
    max-width: 80vw;
    max-height: 80vh;
    background: #ffffff;
    
  }

  .lightbox-inner img {
    max-width: 100%;
    max-height: 70vh;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .lightbox-caption {
    margin: 20px 20px 20px 20px;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #000000;
    text-align: left;
  }

  .lightbox-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
  }

  .lightbox-close:hover {
    opacity: 0.8;
  }

.flash-link {
color:#7a7a7a;
font-size: 12px;



}


}