/* ===================================================================
   Ludolf Grollé — design tokens
   Canvas white / ink / cadmium red / cadmium yellow / ultramarine
=================================================================== */
:root{
  --canvas: #F7F4EC;
  --canvas-2: #F0ECE1;
  --ink: #15120E;
  --line: #DCD6C6;
  --red: #D93A2B;
  --yellow: #EDB111;
  --blue: #1C3E8C;
  --grey: #726D60;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
}

a{color:inherit;}

.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.72rem;
  color:var(--grey);
  margin:0 0 0.9rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.85rem 1.6rem;
  font-family:var(--sans);
  font-weight:600;
  font-size:0.92rem;
  border-radius:2px;
  cursor:pointer;
  border:1px solid var(--ink);
  text-decoration:none;
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-ink{background:var(--ink); color:var(--canvas);}
.btn-ink:hover{background:#000;}
.btn-line{background:transparent; color:var(--ink);}
.btn-line:hover{background:var(--ink); color:var(--canvas);}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(247,244,236,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.75rem;
  flex-wrap:wrap; gap:0.8rem 0;
}
.nav-mark{
  display:flex; align-items:center;
  text-decoration:none; letter-spacing:-0.01em;
}
.nav-logo{
  height:38px; width:auto; display:block;
  mix-blend-mode:multiply;
}
.nav-links{display:flex; flex-wrap:wrap; gap:0.4rem 1.5rem; justify-content:flex-end;}
.nav-links a{
  font-size:0.86rem; text-decoration:none; color:var(--ink);
  position:relative; padding-bottom:2px; white-space:nowrap;
}
.nav-links a:hover{color:var(--red);}
.nav-links a.is-active{color:var(--red);}
.nav-toggle{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer;}
.nav-toggle span{width:20px; height:2px; background:var(--ink);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  max-width:1240px; margin:0 auto;
  padding:5.5rem 1.75rem 4rem;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:2rem;
  align-items:center;
  overflow:hidden;
}
.hero-title{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:0.98;
  font-weight:500;
}
.hero-sub{
  max-width:36ch; margin:1.6rem 0 2.2rem;
  color:#3a362e; font-size:1.02rem;
}
.hero-cta{display:flex; gap:0.9rem; flex-wrap:wrap;}

.hero-blend{display:flex; align-items:center; justify-content:center;}
.blend-field{
  position:relative; width:100%; max-width:380px; aspect-ratio:1/1;
}
.blob{
  position:absolute; border-radius:50%;
  mix-blend-mode:multiply;
  filter:blur(2px);
  animation:drift 14s ease-in-out infinite;
}
.blob-r{background:var(--red); width:62%; height:62%; top:6%; left:6%; animation-delay:0s;}
.blob-y{background:var(--yellow); width:58%; height:58%; top:20%; left:32%; animation-delay:-4s;}
.blob-b{background:var(--blue); width:58%; height:58%; top:34%; left:8%; animation-delay:-9s;}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(4%, -6%) scale(1.04);}
  66%{transform:translate(-5%, 4%) scale(0.97);}
}

/* ---------- explore grid (home) ---------- */
.explore{max-width:1240px; margin:0 auto; padding:1rem 1.75rem 6rem;}
.explore .section-head{padding-left:0; padding-right:0;}
.explore-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.explore-card{
  background:var(--canvas); padding:1.6rem; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:0.5rem; transition:background .2s ease;
}
.explore-card:hover{background:var(--canvas-2);}
.explore-num{font-family:var(--mono); font-size:0.78rem; color:var(--red);}
.explore-title{font-family:var(--serif); font-size:1.25rem;}
.explore-desc{font-size:0.88rem; color:var(--grey);}

/* ---------- section heads ---------- */
.section-head{max-width:1240px; margin:0 auto; padding:5rem 1.75rem 2rem;}
.section-sub{color:var(--grey); max-width:52ch; margin-top:0.6rem;}

/* ---------- standalone content pages ---------- */
.page-header{
  position:relative; overflow:hidden; z-index:0;
  max-width:900px; margin:0 auto; padding:4.5rem 1.75rem 1rem; text-align:left;
}
.page-header::before{
  content:""; position:absolute; inset:0;
  background-image:var(--header-art, none);
  background-size:cover; background-position:center;
  opacity:0.16; z-index:-1; pointer-events:none;
}
.page-header > *{position:relative;}
.page-header h1{font-size:clamp(2.1rem, 4vw, 3rem);}
.page-header .section-sub{margin-top:0.7rem;}
.page-body{max-width:780px; margin:0 auto; padding:1.5rem 1.75rem 6rem;}
.page-body p{margin:0 0 1.15rem; color:#312d25; font-size:1.02rem; max-width:66ch;}
.page-body blockquote{
  font-family:var(--serif); font-style:italic; font-size:1.35rem; line-height:1.4;
  border-left:2px solid var(--red); padding-left:1.3rem; margin:1.8rem 0; color:var(--ink);
}
.statement-feature{max-width:100%; padding:0; margin:2rem 0;}
.page-credit{
  font-family:var(--mono); font-size:0.82rem; color:var(--grey); margin-top:2.2rem;
  border-top:1px solid var(--line); padding-top:1.2rem;
}
.signature{
  display:block; height:70px; width:auto; margin-top:1rem;
  mix-blend-mode:multiply;
}
.page-portrait{
  max-width:420px; margin:1.5rem auto 0; padding:0 1.75rem;
}
.page-portrait img{
  width:100%; border:1px solid var(--line); display:block;
}

/* ---------- timeline ---------- */
.timeline-row{
  display:grid; grid-template-columns:120px 1fr;
  gap:1.5rem; padding:0.9rem 0; border-bottom:1px solid var(--line);
}
.t-year{font-family:var(--mono); font-size:0.85rem; color:var(--red);}
.t-text{font-size:0.98rem;}
.page-timeline{
  max-width:900px; margin:0 auto; padding:1rem 1.75rem 6rem;
  border-top:1px solid var(--line);
}

/* ---------- lists (collections / charities) ---------- */
.list-columns{
  max-width:900px; margin:1.5rem auto 6rem; padding:0 1.75rem;
  columns:2; column-gap:2.5rem;
}
@media (max-width:640px){ .list-columns{columns:1;} }
.list-columns .list-row{
  break-inside:avoid; padding:0.7rem 0; border-bottom:1px solid var(--line);
  font-size:0.96rem;
}
.list-columns .list-row .role{display:block; font-family:var(--mono); font-size:0.76rem; color:var(--grey); margin-top:0.15rem;}
.charity-cta{
  max-width:780px; margin:0 auto 6rem; padding:1.6rem 1.75rem;
  border:1px solid var(--line); font-size:0.95rem;
}
.charity-cta a{color:var(--red); font-weight:600;}

/* ---------- gallery ---------- */
.gallery-grid{
  max-width:1240px; margin:0 auto; padding:0 1.75rem 2rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.art-card{background:var(--canvas); padding:1.1rem 1.1rem 1.4rem; display:flex; flex-direction:column;}
.art-frame{aspect-ratio:4/5; overflow:hidden; background:var(--canvas-2);}
.art-frame img{width:100%; height:100%; object-fit:contain; display:block; cursor:pointer; transition:opacity .15s ease;}
.art-frame img:hover{opacity:0.85;}
.art-frame.img-fallback{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1.2rem;
  font-family:var(--serif); font-size:1rem; color:var(--grey);
  background:repeating-linear-gradient(45deg, var(--canvas-2), var(--canvas-2) 10px, var(--canvas) 10px, var(--canvas) 20px);
}
.art-frame.img-fallback::before{content:attr(data-title);}
.art-title{font-family:var(--serif); font-size:1.15rem; margin-top:0.9rem;}
.art-meta{font-size:0.82rem; color:var(--grey); margin-top:0.3rem; line-height:1.5;}
.art-row{display:flex; align-items:center; justify-content:space-between; gap:0.6rem; margin-top:auto; padding-top:0.9rem;}
.art-price{font-family:var(--mono); font-size:0.95rem;}
.art-badge{
  font-family:var(--mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--red); border:1px solid var(--red); padding:0.2rem 0.5rem; border-radius:2px;
}
.art-reserve{
  display:block; width:100%; box-sizing:border-box; margin-top:0.9rem; text-align:center;
  background:none; border:1px solid var(--ink); padding:0.55rem 0.9rem;
  font-family:var(--sans); font-size:0.82rem; font-weight:600; text-decoration:none; color:var(--ink);
  border-radius:2px; transition:background .2s, color .2s;
}
.art-reserve:hover{background:var(--ink); color:var(--canvas);}
.art-reserve.is-disabled{opacity:0.45; pointer-events:none;}

.series-block{max-width:1240px; margin:0 auto; padding:0 1.75rem 1.2rem;}
.series-note{
  border:1px solid var(--line); padding:1.1rem 1.4rem; font-size:0.9rem; color:#3a362e;
  margin-bottom:2.5rem;
}
.series-note a{color:var(--red); font-weight:600;}

/* ---------- lightbox ---------- */
.lightbox-scrim{
  position:fixed; inset:0; background:rgba(21,18,14,0.92); z-index:90;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.lightbox-scrim.open{opacity:1; pointer-events:auto;}
.lightbox-scrim img{
  max-width:90vw; max-height:88vh; object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.lightbox-close{
  position:absolute; top:1.2rem; right:1.5rem; background:none; border:none;
  color:var(--canvas); font-size:2.2rem; line-height:1; cursor:pointer; z-index:2;
}
.lightbox-cap{
  position:absolute; bottom:1.4rem; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:0.8rem; color:#DAD5C6;
}

/* ---------- photo features (media / charities / collections) ---------- */
.photo-feature{max-width:900px; margin:0 auto 2rem; padding:0 1.75rem;}
.photo-feature img{width:100%; display:block; border:1px solid var(--line);}
.photo-feature .cap{font-family:var(--mono); font-size:0.78rem; color:var(--grey); margin-top:0.6rem;}

.charity-feature{max-width:900px; margin:0 auto 3rem; padding:0 1.75rem;}
.charity-feature h3{font-size:1.3rem; margin-bottom:0.4rem;}
.charity-feature .section-sub{margin-bottom:1.4rem;}
.charity-feature-lead{width:100%; border:1px solid var(--line); display:block; margin-bottom:1.2rem;}
.charity-feature-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.charity-feature-grid img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:var(--canvas-2);}

.collector-grid{
  max-width:900px; margin:0 auto 3rem; padding:0 1.75rem;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.collector-grid img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--canvas-2);}
.collector-grid .cap{
  grid-column:1/-1; font-family:var(--mono); font-size:0.78rem; color:var(--grey);
  padding:0.9rem 0 0;
}
/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:2rem 1.75rem; margin-top:2rem;}
.footer-inner{
  max-width:1240px; margin:0 auto; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:0.6rem; font-family:var(--mono); font-size:0.75rem; color:var(--grey);
}

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .hero{grid-template-columns:1fr; padding-top:3.2rem;}
  .hero-blend{order:-1; margin-bottom:1.5rem;}
  .blend-field{max-width:220px;}
}
@media (max-width: 700px){
  .nav-links{
    position:fixed; top:66px; left:0; right:0; background:var(--canvas);
    flex-direction:column; padding:1.5rem 1.75rem; border-bottom:1px solid var(--line);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease;
  }
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-toggle{display:flex;}
}