/* Michel Lippitsch — site-wide styles */
:root{
  --ink:#1b1f1d;
  --ink-soft:#4a5450;
  --paper:#f7f5ef;
  --paper-alt:#eef1ee;
  --line:#d9d4c7;
  --accent:#1f5c53;   /* deep reef teal */
  --accent-soft:#dce8e4;
  --sand:#c9a25a;
  --max:1100px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Avenir Next","Futura",Helvetica,Arial,sans-serif;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
  margin:0 0 .5em;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;height:auto;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

/* header / nav */
header.site-header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;top:0;z-index:10;
}
header.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;max-width:var(--max);margin:0 auto;
  flex-wrap:wrap;gap:12px;
}
.site-title{
  font-family:"Avenir Next","Futura",Helvetica,Arial,sans-serif;
  font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);
}
.site-title span{color:var(--accent);}
nav.main-nav ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:22px;margin:0;padding:0;
}
nav.main-nav a{
  font-family:"Avenir Next","Futura",Helvetica,Arial,sans-serif;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);
}
nav.main-nav a:hover, nav.main-nav a.current{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);}

/* hero */
.hero{
  padding:70px 24px 50px;text-align:center;
  border-bottom:1px solid var(--line);
}
.hero h1{font-size:2.1rem;text-transform:uppercase;letter-spacing:.1em;}
.hero p.lede{
  max-width:640px;margin:14px auto 0;color:var(--ink-soft);
  font-size:1.08rem;font-family:inherit;
}

/* section grid on homepage */
.section-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);margin:40px 0 60px;
}
@media (max-width:900px){ .section-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .section-grid{grid-template-columns:1fr;} }
.section-card{
  background:var(--paper);padding:34px 28px;position:relative;
}
.section-card h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;}
.section-card .tag{
  display:inline-block;font-family:"Avenir Next",Helvetica,Arial,sans-serif;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);
  margin-bottom:10px;
}
.section-card p{color:var(--ink-soft);font-size:.98rem;margin:0 0 16px;}
.section-card a.enter{
  font-family:"Avenir Next",Helvetica,Arial,sans-serif;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}

/* section pages */
.section-hero{
  background:var(--paper-alt);padding:56px 24px;border-bottom:1px solid var(--line);
}
.section-hero .wrap{text-align:center;}
.section-hero .tag{
  font-family:"Avenir Next",Helvetica,Arial,sans-serif;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.section-hero h1{font-size:1.9rem;text-transform:uppercase;margin-top:8px;}
.section-hero p.lede{max-width:680px;margin:16px auto 0;color:var(--ink-soft);}

.content-block{padding:50px 24px;border-bottom:1px solid var(--line);}
.content-block h2{
  font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em;
  border-left:3px solid var(--accent);padding-left:14px;margin-bottom:20px;
}
.content-block .two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;}
.content-block p{margin:0 0 16px;}
.content-block blockquote{
  margin:20px 0;padding:14px 20px;border-left:3px solid var(--sand);
  background:var(--paper-alt);font-style:italic;color:var(--ink-soft);
}
@media (max-width:760px){
  .content-block .two-col{grid-template-columns:1fr;}
}

/* image gallery grid */
.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:8px;margin-top:14px;
}
.gallery-grid img{width:100%;height:180px;object-fit:cover;border-radius:2px;}
.gallery-grid figure{margin:0;}
.gallery-caption{font-size:.78rem;color:var(--ink-soft);margin-top:4px;}

/* subsection list */
.sub-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:10px;}
.sub-list .item{border:1px solid var(--line);padding:20px;background:var(--paper-alt);}
.sub-list .item h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.sub-list .item p{color:var(--ink-soft);font-size:.92rem;margin:0;}

/* pull quote banner */
.banner-quote{
  background:var(--accent);color:#fff;padding:46px 24px;text-align:center;
}
.banner-quote blockquote{
  max-width:760px;margin:0 auto;font-size:1.15rem;font-style:italic;line-height:1.55;
}
.banner-quote cite{display:block;margin-top:14px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-style:normal;opacity:.85;}

/* external link card (jong school) */
.external-card{
  border:1px solid var(--accent);background:var(--accent-soft);padding:26px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.external-card h3{margin:0 0 6px;font-size:1rem;text-transform:uppercase;}
.external-card p{margin:0;color:var(--ink-soft);font-size:.92rem;}
.external-card a.go{
  font-family:"Avenir Next",Helvetica,Arial,sans-serif;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:#fff;
  padding:10px 18px;white-space:nowrap;
}
.external-card a.go:hover{text-decoration:none;opacity:.9;}

footer.site-footer{
  padding:40px 24px;text-align:center;color:var(--ink-soft);font-size:.85rem;
  border-top:1px solid var(--line);margin-top:20px;
}
footer.site-footer a{color:var(--ink-soft);}
.note{
  font-size:.82rem;color:var(--ink-soft);background:var(--paper-alt);
  border:1px dashed var(--line);padding:14px 18px;margin:24px 0;
}

/* --- v2: bigger, better galleries + lightbox (in response to feedback) --- */
.gallery-grid{
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}
.gallery-grid img{
  width:100%;height:260px;object-fit:cover;border-radius:2px;
  transition:transform .35s ease;
}
.gallery-grid figure{position:relative;overflow:hidden;background:#000;}
.gallery-grid figure:hover img{transform:scale(1.04);}
.gallery-grid figure::after{
  content:"⤢";
  position:absolute;top:8px;right:8px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;opacity:0;transition:opacity .2s ease;
  pointer-events:none;
}
.gallery-grid figure:hover::after{opacity:1;}

/* feature grid: a few larger hero-sized images, for flagship works */
.feature-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:18px;margin-top:14px;
}
.feature-grid figure{margin:0;position:relative;overflow:hidden;background:#000;cursor:zoom-in;}
.feature-grid img{width:100%;height:380px;object-fit:cover;transition:transform .35s ease;}
.feature-grid figure:hover img{transform:scale(1.03);}
.feature-grid figcaption{
  font-size:.8rem;color:var(--ink-soft);margin-top:8px;
}

/* archive strip: dense small thumbnails for "see everything" overflow */
.archive-strip{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:6px;margin-top:14px;
}
.archive-strip img{width:100%;height:110px;object-fit:cover;cursor:zoom-in;opacity:.92;transition:opacity .2s;}
.archive-strip img:hover{opacity:1;}
.archive-toggle{
  font-family:"Avenir Next",Helvetica,Arial,sans-serif;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  background:none;border:1px solid var(--accent);padding:8px 16px;cursor:pointer;margin-top:20px;
}
.archive-toggle:hover{background:var(--accent);color:#fff;}
.archive-strip.collapsed{display:none;}

/* lightbox — v8: show images at full size, scroll to see the rest (no shrink-to-fit, no cropping) */
.lightbox{
  position:fixed;inset:0;background:rgba(10,12,11,.94);
  display:none;z-index:1000;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.lightbox.open{display:block;}
.lightbox-viewport{
  min-height:100%;display:flex;align-items:flex-start;justify-content:center;
  padding:80px 20px 60px;
}
.lightbox figure{margin:0;max-width:min(1400px,96vw);display:flex;flex-direction:column;align-items:center;}
.lightbox img{
  max-width:min(1400px,96vw);width:auto;height:auto;max-height:none;
  object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox figcaption{color:#f0efe9;font-family:"Avenir Next",Helvetica,Arial,sans-serif;font-size:.85rem;margin-top:14px;text-align:center;max-width:640px;}
.lightbox button{
  position:fixed;background:none;border:none;color:#fff;cursor:pointer;
  font-size:2rem;line-height:1;padding:10px;opacity:.75;z-index:1001;
}
.lightbox button:hover{opacity:1;}
.lb-close{top:18px;right:24px;font-size:2.2rem;}
.lb-prev{left:14px;top:50%;transform:translateY(-50%);font-size:3rem;}
.lb-next{right:14px;top:50%;transform:translateY(-50%);font-size:3rem;}
.lb-hint{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  color:#f0efe9;opacity:.55;font-family:"Avenir Next",Helvetica,Arial,sans-serif;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;
}
@media (max-width:640px){
  .lb-prev,.lb-next{font-size:2.2rem;}
  .lightbox-viewport{padding:70px 10px 40px;}
}

/* v3: home page card thumbnails */
.section-card{overflow:hidden;}

/* --- v4: stop cropping feature/hero photos — show full composition (feedback: "the cropping doesn't work") --- */
.feature-grid{
  column-count:3;column-gap:18px;
  display:block; /* override the old grid */
}
.feature-grid figure{
  break-inside:avoid;margin:0 0 18px;background:var(--paper-alt);
  border:1px solid var(--line);cursor:zoom-in;overflow:hidden;
}
.feature-grid img{
  width:100%;height:auto;display:block;object-fit:contain;
  transition:transform .35s ease;
}
.feature-grid figure:hover img{transform:scale(1.02);}
.feature-grid figcaption{padding:10px 12px 12px;font-size:.82rem;color:var(--ink-soft);}
@media (max-width:900px){ .feature-grid{column-count:2;} }
@media (max-width:600px){ .feature-grid{column-count:1;} }

/* lead image: a strong single photo alongside the opening text of a section */
.lead-figure{margin:0;background:#000;cursor:zoom-in;overflow:hidden;}
.lead-figure img{width:100%;height:auto;display:block;object-fit:contain;}
.lead-figure figcaption{
  font-size:.8rem;color:var(--ink-soft);margin-top:8px;font-style:italic;
}

/* full-text reveal for journals/poems/essays (native <details>, no JS needed) */
details.full-text-toggle{margin-top:14px;}
details.full-text-toggle > summary{
  font-family:"Avenir Next",Helvetica,Arial,sans-serif;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  cursor:pointer;list-style:none;display:inline-block;
  border-bottom:1px solid var(--accent);padding-bottom:2px;
}
details.full-text-toggle > summary::-webkit-details-marker{display:none;}
details.full-text-toggle .full-text-body{
  margin-top:16px;padding:20px 24px;background:var(--paper-alt);
  border-left:3px solid var(--sand);white-space:pre-line;
}
details.full-text-toggle .full-text-body p{margin:0 0 14px;}

/* v5 — guiding text above every gallery/archive, per feedback round 2 */
.gallery-intro{
  font-size:.92rem;color:var(--ink-soft);font-style:italic;
  margin:8px 0 16px;max-width:60ch;
}
details:not(.full-text-toggle) .gallery-intro{margin-top:2px;}

/* v6 — ethnographic-first Photography reorder: pull-quotes, video embeds, collapsed family gallery */
.item-quote{
  font-style:italic;color:var(--ink-soft);font-size:.85rem;
  margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);
}
.video-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;margin-top:16px;
}
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background:#000;}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.video-figure{margin:0;}
.video-caption{margin-top:8px;font-size:.82rem;color:var(--ink-soft);}


/* v7 — Art Galleries: one example cover per series, click to open its full gallery */
.series-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:22px;margin-top:22px;
}
details.series-gallery{
  border:1px solid var(--line);background:var(--paper-alt);
}
details.series-gallery[open]{grid-column:1/-1;}
.series-cover{
  cursor:pointer;list-style:none;position:relative;display:block;
  overflow:hidden;background:#000;min-height:180px;
}
.series-cover::-webkit-details-marker{display:none;}
.series-cover img{
  width:100%;height:auto;max-height:70vh;object-fit:contain;display:block;
  transition:opacity .35s ease;
}
.series-cover:hover img{opacity:.9;}
.series-cover-label{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  color:#fff;font-size:.92rem;letter-spacing:.02em;
}
.series-cover-label em{
  display:block;font-style:normal;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;opacity:.85;margin-top:4px;
}
.series-body{padding:18px 20px 22px;}

/* v9 — dedicated full gallery pages: click a cover/title, land on a page of full-size scrolling images */
.gallery-page-hero{
  padding:40px 24px 24px;border-bottom:1px solid var(--line);
}
.gallery-page-hero .back-link{
  font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
  text-decoration:none;display:inline-block;margin-bottom:14px;
}
.gallery-page-hero .back-link:hover{text-decoration:underline;}
.gallery-page-hero h1{font-size:1.6rem;margin:0 0 8px;}
.gallery-page-hero p{color:var(--ink-soft);margin:0;max-width:70ch;}
.gallery-stack{
  max-width:980px;margin:0 auto;padding:36px 44px 80px;
  display:flex;flex-direction:column;gap:50px;
}
.gallery-stack figure{margin:0;text-align:center;}
.gallery-stack img{
  width:auto;height:auto;max-width:100%;display:block;margin:0 auto;
  box-shadow:0 4px 24px rgba(0,0,0,.12);cursor:zoom-in;
}
@media (max-width:640px){
  .gallery-stack{padding:30px 20px 60px;}
}
.gallery-stack figcaption{
  margin-top:10px;font-size:.8rem;color:var(--ink-soft);
}
.gallery-stack .g-index{
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sand);margin-bottom:4px;
}
.gallery-stack .group-title{
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;
  border-left:3px solid var(--accent);padding-left:14px;margin:10px 0 -10px;
}