/* ============================================================
   INVISIBLE CITY PRESS — Redesign layer (Option B: signposted scroll)
   Loads AFTER styles.css + showcase.css and overrides only what
   changes. Rollback: remove the <link> for this file in index.html.
   ============================================================ */

:root{
  --rd-paper:#FAF7F1;
  --rd-paper-deep:#F3EEE4;
  --rd-ink:#2B333A;
  --rd-ink-soft:#5A646D;
  --rd-gold:#C98F2B;
  --rd-gold-deep:#9A6B1D;
  --rd-line:#E2DACB;
}

/* ---------- 1. The gallery wall: hero flips light ---------- */
.lander.band--ink{
  background:var(--rd-paper) !important;
  color:var(--rd-ink) !important;
}
.lander .showcase__map{ opacity:.10 !important; filter:none !important; }
.lander .showcase__rule{ color:var(--rd-gold-deep) !important; }
.lander__title{ color:var(--rd-ink) !important; }
.lander__title em{ color:var(--rd-gold-deep) !important; }
.lander__lede{ color:var(--rd-ink-soft) !important; max-width:52ch; }
.lander .cf__readout, .lander .cf__readout *{ color:var(--rd-ink) !important; }
.lander .cf__nav{
  color:var(--rd-ink) !important;
  background:rgba(255,255,255,.75) !important;
  border:1px solid var(--rd-line) !important;
}
.lander .cf__nav:hover{ background:#fff !important; }
.lander .cf__dots button, .lander .cf__dots span{ background:var(--rd-ink-soft); opacity:.4; }
.lander .cf__dots [aria-current="true"], .lander .cf__dots .is-active{ background:var(--rd-gold-deep); opacity:1; }
.lander .btn{ border-color:var(--rd-ink); color:var(--rd-ink); }
.lander .btn--gold{ color:#fff; }

/* ---------- 2. The signpost: filter bar becomes navigation ---------- */
.filter{
  position:sticky;
  top:0;
  z-index:60;
  background:#FAF7F1;              /* solid — no per-frame blur recompositing */
  border-bottom:1px solid var(--rd-line);
  padding:10px 0 12px;
  will-change:transform;          /* promote to its own layer, cheap to scroll */
  contain:layout paint;
}
.filter__label{
  max-width:1200px;
  margin:0 auto 8px;
  padding:0 20px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--rd-gold-deep);
}
.filter__label .arrow{ letter-spacing:0; }
.filter__btn{
  border:1.5px solid var(--rd-line);
  border-radius:999px;
  padding:9px 16px;
  background:#fff;
  color:var(--rd-ink-soft);
  transition:border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.filter__btn:hover{
  border-color:var(--rd-gold);
  color:var(--rd-ink);
  transform:translateY(-1px);
}
.filter__btn[aria-current="true"],
.filter__btn[data-active="true"]{
  background:var(--rd-ink);
  border-color:var(--rd-ink);
  color:#fff;
}
.filter__btn[data-active="true"] .n,
.filter__btn[aria-current="true"] .n{ color:var(--rd-gold); }
.filter__btn .cnt{
  display:inline-block;
  margin-left:7px;
  font-size:11px;
  opacity:.7;
}

/* ---------- 3. Sections breathe; covers lead ---------- */
.section__head{ padding-top:18px; }
.section__about{
  max-width:70ch;
  margin:10px auto 0;
}
.section__about summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--rd-gold-deep);
  padding:4px 2px;
}
.section__about summary::-webkit-details-marker{ display:none; }
.section__about summary::after{
  content:"+";
  font-size:15px;
  line-height:1;
  transition:transform .18s ease;
}
.section__about[open] summary::after{ content:"–"; }
.section__about .section__desc{ margin-top:12px; }

/* ---------- 4. Card polish: quiet lift ---------- */
.card{
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover, .card:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 16px 34px rgba(43,51,58,.16);
}
.card--soon:hover{ transform:none; box-shadow:none; }

/* ---------- 5. Mobile ---------- */
@media (max-width:640px){
  .filter{ overflow-x:auto; }
  .filter__btn{ padding:8px 13px; }
  .card:hover{ transform:none; }
}

/* ============================================================
   6. Mobile modal fix — quick-look fits the screen, opens at top
   ============================================================ */
.modal__done{ display:none; }

@media (max-width:640px){
  html body .overlay{
    padding:0 !important;
    display:none !important;
    place-items:initial !important;
    align-items:flex-start !important;
    justify-items:stretch !important;
  }
  html body .overlay[data-open="true"]{
    display:block !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  html body .modal,
  html body .modal--wide{
    max-width:100% !important;
    width:100% !important;
    margin:0 !important;
    border-radius:0 !important;
    min-height:100vh;
    animation:none !important;
  }
  html body .ql{
    display:block !important;
    grid-template-columns:none !important;
  }
  html body .ql__cover{
    padding:18px 18px 0 !important;
    display:block !important;
  }
  html body .ql__cover image-slot{
    height:auto !important;
    max-height:50vh !important;
    aspect-ratio:5/7;
    margin:0 auto;
  }
  html body .ql__body{ padding:22px 18px 30px !important; }
  html body .ql__title{ font-size:29px !important; line-height:1.05 !important; }
  html body .ql__desc{ font-size:16px !important; }
  html body .ql__buy{ flex-wrap:wrap; gap:14px !important; }
  html body .modal__x{
    position:fixed !important;
    top:10px; right:10px;
    width:46px; height:46px;
    border-radius:50% !important;
    background:var(--rd-ink) !important;
    color:#fff !important;
    font-size:26px !important;
    display:grid !important; place-items:center !important;
    z-index:200 !important;
    box-shadow:0 4px 14px rgba(0,0,0,.4);
  }
  html body .modal__pad{ padding:24px 18px !important; }
  .modal__done{
    display:block !important;
    width:100%;
    margin:0;
    padding:16px;
    border:0;
    border-top:1px solid var(--rd-line);
    background:var(--rd-paper-deep);
    color:var(--rd-ink);
    font-family:var(--mono,monospace);
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:700;
  }
}


/* ============================================================
   7. JS-enforced mobile modal (html.is-mobile) — does NOT rely
   on out-specifying styles.css; the extra class guarantees the win.
   ============================================================ */
html.is-mobile .overlay{
  padding:0 !important;
  place-items:initial !important;
  align-items:flex-start !important;
}
html.is-mobile .overlay[data-open="true"]{
  display:block !important;
  overflow-y:auto !important;
}
html.is-mobile .modal,
html.is-mobile .modal--wide{
  max-width:100vw !important;
  width:100vw !important;
  margin:0 !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
  min-height:100vh;
}
html.is-mobile .ql{
  display:block !important;
  grid-template-columns:none !important;
  width:100% !important;
  box-sizing:border-box !important;
}
html.is-mobile .ql__cover,
html.is-mobile .ql__body{
  width:100% !important;
  box-sizing:border-box !important;
}
html.is-mobile .ql__cover image-slot{
  height:auto !important;
  max-height:50vh !important;
  aspect-ratio:5/7;
  margin:0 auto;
}
html.is-mobile .ql__buy{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  width:100% !important;
}
html.is-mobile .ql__buy .btn,
html.is-mobile .ql__buy button{
  flex:1 1 auto !important;
}
html.is-mobile .modal__done{ display:block !important; }

/* Briefly highlight the card a returning buyer left from */
.card--justreturned{
  outline:2px solid var(--rd-gold);
  outline-offset:3px;
  transition:outline-color .4s ease;
}