:root{
  --bg:#000; --ink:#eef3fb; --muted:#9fb2c7; --line:#141a22; --gold:#ffd27b;
  --btn:#141a22; --btn-border:#1e2a37;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.6 'Rosarivo', serif;
}

html.nav-jump, body.nav-jump { scroll-snap-type: none !important; }

html.snap-on, body.snap-on { scroll-snap-type: y mandatory; }
section.slide { scroll-snap-align: start; }
/* ==================== FRONT (single loop wall) ==================== */
.front{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:12px;
}

@media (min-width: 1024px) {
  /* Keep slides full-screen so scroll-snap never collapses */
  .gallery section.slide {
    min-height: 100svh;
    display: grid;
    align-content: center;
  }

  /* Make the column a touch narrower for squares on desktop */
  .gallery .vstack {
    width: min(900px, 86vw);
    padding-block: 12vh 10vh;
  }

  /* Center image nicely */
  .gallery .hero {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Square-friendly sizing, overriding the global width:100% rule safely */
  .gallery .hero img {
    width: auto !important;
    height: auto !important;
    max-height: 72vh;
    max-width: 80vw;
    object-fit: contain !important;
    display: block;
  }

  /* Optional: center text/buttons under the image for better balance */
  .gallery .slide h1,
  .gallery .slide .meta,
  .gallery .slide .buy {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

.wall{
  position:relative;
  display:grid;
  gap:0;
  align-items:center;
  justify-content:center;
  /* single “phone-like” column */
  grid-template-columns: minmax(320px, 380px);
  padding:12px;
  /* NOTE: no fixed height here; hero flows with the page */
}
@media (max-width: 767px){
  .wall{ grid-template-columns:1fr; width:100vw; height:auto; padding:0; }
}
.wall::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:5; opacity:0;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAPUlEQVR4nO3BMQEAAADCIPunNsZ+YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgD8JrAAB9vpc0QAAAABJRU5ErkJggg==");
  background-size:180px 180px; background-repeat:repeat;
  animation:grainJitter 1.2s steps(2) infinite; transition:opacity .8s ease .2s;
}
.wall.is-ready::after{ opacity:.24; }
@keyframes grainJitter{ 0%{background-position:0 0} 100%{background-position:-60px -60px} }

.slider{
  position:relative;
  width:100%;
  height:auto;                /* let content define height */
  overflow:visible;           /* NO inner scroll container */
  background:#000;
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.slider-track{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  opacity:0;
  transition:opacity .6s ease;
}
.slider.is-ready .slider-track{ opacity:1; }
.slider-track img{
  display:block;
  width:100%;
  height:auto;
}

/* CTA that scrolls to gallery */
.cta{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:18px; z-index:10;
  opacity:0; pointer-events:none;
  transition:opacity .6s ease;
  background:rgba(12,16,22,.85);
  border:1px solid var(--line);
  color:#cfe6ff;
  border-radius:10px;
  padding:10px 14px;
  text-decoration:none;
}
.cta.show{ opacity:1; pointer-events:auto; }
.cta:hover{ border-color:#6bd3ff; color:#eaf7ff }

/* ==================== GALLERY (document-level snap) ==================== */
.gallery{ padding-block:40px 0; }

/* DO NOT create a second scroll container */
main.scroller{
  height:auto;
  overflow:visible;
}

/* Each slide still sized to a viewport for snapping feel */
section.slide{
  min-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:grid;
  align-content:center;
}

.vstack{
  width:min(1100px,96vw);
  margin:0 auto;
  display:grid;
  gap:14px;
  padding-block:10vh 8vh;
}

.hero{
  position:relative;
  background:#000;
  border-radius:12px;
  overflow:hidden;
}
.hero img{
  display:block;
  width:100%;
  height:auto;
  background:#000;
  filter:blur(0);
  transition:filter .35s ease;
}
.hero img.is-blurry{ filter:blur(12px) }

html.restore-in-progress { scroll-snap-type: none !important; }

h1{ margin:0; font-size:clamp(14px,2vw,20px); font-weight:500; letter-spacing:.02em }
.meta{ color:#cfe0f0 }
.price{ font-weight:800; color:var(--gold); font-size:clamp(16px,2vw,18px) }
.desc{ color:var(--muted) }
.buy{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--btn);
  border:1px solid var(--btn-border);
  color:var(--ink);
  border-radius:10px;
  padding:10px 14px;
  text-decoration:none;
  width:fit-content;
}

.notice{
  position:fixed;
  left:50%; transform:translateX(-50%);
  bottom:12px;
  background:rgba(12,16,22,.85);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  color:#cfe6ff;
  z-index:5;
}
.notice[hidden]{ display:none!important }

/* ===== Quick bottom navigation ===== */
.quicknav{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: rgba(12,16,22,.75);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
}

.qbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  line-height: 1;
  color: #cfe6ff;
  border: 1px solid transparent;
  user-select: none;
}
.qbtn:hover{ border-color:#6bd3ff; color:#eaf7ff; }
.qbtn.is-active{
  background: #0f1721;
  border-color:#2a3a4f;
  color:#ffffff;
}

/* Turn document-level snapping OFF during programmatic nav jumps */
html.nav-jump { scroll-snap-type: none !important; }

/* (already have) active state for the buttons */
.qbtn.is-active{
  background: #0f1721;
  border-color:#2a3a4f;
  color:#ffffff;
}

/* Give content a bit of breathing room so nav doesn’t cover it on tiny screens */
.front, .gallery { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* ==================== Snap toggled ON only inside gallery ==================== */
/* Your JS adds/removes .snap-on on <html> and <body> when a gallery slide is in view */
html.snap-on, body.snap-on{
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
}

/* Guard: make sure gallery slides always occupy a full viewport height */
.gallery section.slide {
  min-height: 100svh;
  display: grid;
  align-content: center;
}

/* Desktop: center and cap square images without collapsing layout */
@media (min-width: 1024px) {
  .gallery .vstack {
    width: min(900px, 86vw);
    padding-block: 12vh 10vh;
  }
  .gallery .hero {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gallery .hero img {
    width: auto !important;
    height: auto !important;
    max-height: 72vh;
    max-width: 80vw;
    object-fit: contain !important;
    display: block;
  }
  .gallery .slide h1,
  .gallery .slide .meta,
  .gallery .slide .buy {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* Footer */
footer.site-footer{
  margin-top:40px; padding:20px 0; border-top:1px solid #1e2a37;
  color:#9fb2c7; font-size:14px
}
footer.site-footer .wrap{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between
}
footer.site-footer .emails{ display:flex; gap:14px; flex-wrap:wrap }
footer.site-footer a{
  color:#eef3fb; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.25)
}
footer.site-footer a:hover{ border-bottom-color:transparent }
footer.site-footer small{ opacity:.8 }

/* ==================== FOOTER (shared across all pages) ==================== */
footer.site-footer {
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid #1e2a37;
  color: #9fb2c7;
  font-size: 14px;
  background: #000; /* matches --bg */
}

footer.site-footer .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

footer.site-footer small {
  opacity: .8;
  font-size: 14px;
}

footer.site-footer .emails {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

footer.site-footer a {
  color: var(--ink); /* matches body text */
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,.25);
  transition: border-color .2s, color .2s;
}

footer.site-footer a:hover {
  border-bottom-color: transparent;
  color: #eaf7ff;
}

/* Mobile/tablet: keep original aspect ratio (no crop) */
@media (max-width: 1023px) {
  .gallery .hero {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gallery .hero img {
    /* override the global width:100% so we can truly contain */
    width: auto !important;
    height: auto !important;

    /* fit inside the viewport without cropping */
    max-width: 96vw;
    max-height: 68vh;

    object-fit: contain !important;
    display: block;
  }

  /* Optional: reduce vertical padding so tall images breathe more */
  .gallery .vstack {
    padding-block: 8vh 6vh;
  }
}

/* Remove rounded corners from all hero images everywhere */
.hero,
.hero a,
.hero img {
  border-radius: 0 !important;
}

/* PRODUCT uses the same column as gallery (min(900px, 86vw)) */
.product .wrap {
  width: min(900px, 86vw);
  margin: 0 auto;
  padding-block: 12vh 10vh;   /* same breathing as gallery desktop */
}

/* Center the hero like gallery does */
.product .hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 0 !important;   /* no rounding on product images */
  overflow: hidden;
}

/* Desktop/tablet: mirror gallery’s contain behavior */
@media (min-width: 1024px){
  .product .hero img{
    width: auto !important;
    height: auto !important;
    max-height: 72vh;           /* same as gallery */
    max-width: 80vw;
    object-fit: contain !important;
    display: block;
  }
}

/* Mobile: full width, never crop, no overflow */
@media (max-width: 1023px){
  html, body { overflow-x: hidden; }
  .product .hero img{
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
  }
}

/* Global: remove rounding from any hero image (index + product) */
.hero, .hero a, .hero img { border-radius: 0 !important; }

/* --- tighter paddings for paintings (gallery + product) --- */

/* Desktop/tablet gallery column */
.gallery .vstack{
  padding-block: 6vh 4vh;   /* was 12vh 10vh */
}

/* Mobile/tablet gallery column */
@media (max-width: 1023px){
  .gallery .vstack{
    padding-block: 4vh 3vh; /* was 8vh 6vh */
  }
}

/* Product page column */
.product .wrap{
  padding-block: 8vh 6vh;   /* was 12vh 10vh */
}

/* If the bottom quick nav is pushing content too much, trim this too: */
.front, .gallery{
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); /* was 64px */
}

/* 1) Single source of truth: spacing on the slide, not the inner column */
.gallery section.slide{
  /* one consistent breathing for every painting slide */
  padding-block: 6svh;             /* tweak 6–10svh to taste */
}

/* 2) Kill inner padding/margin variance so (1) fully controls the look */
.gallery section.slide .vstack{
  padding-block: 0 !important;
}
.gallery section.slide .vstack > *{
  margin-block: 0;                  /* let layout gap, not margins, do spacing */
}

/* 3) Keep image cap consistent so titles/meta don't change perceived gaps */
.gallery section.slide .hero img{
  max-height: 68svh;                /* same everywhere; adjust if you tighten (1) */
}

/* 4) Interludes: give them a fixed, smaller breathing so they don't balloon gaps */
.interlude-images.front{
  padding-block: 3svh !important;   /* previously 12px or inherited; normalize */
}

/* 5) Remove any earlier duplicate desktop vstack paddings */
@media (min-width: 1024px){
  .gallery .vstack{ padding-block: 0 !important; }  /* override earlier 12vh/10vh, etc. */
}

/* 6) Optional: if the bottom quicknav added global extra space for mobile, trim it */
.front, .gallery{
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); /* was 64px */
}