@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#555;
  --ghost:#bdbdbd;
  --max:1200px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  font-family: Inter, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.42;
}

a{color:inherit; text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 28px 72px;
}

/* =====================
   HEADER
===================== */

.header{
  position:relative;
  margin:0 0 42px;
  padding:8px 0 10px;
}

.name-ghost{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:112px;
  letter-spacing:3px;
  font-weight:700;
  color:var(--ghost);
  opacity:.22;
  line-height:0.94;
  user-select:none;
  pointer-events:none;
}

.descriptor{
  position:absolute;
  left:0;
  top:66px;
  font-size:14px;
  letter-spacing:.02em;
  word-spacing:.9em;
  color:#111;
  font-weight:600;
  white-space:pre-line;
  line-height:1.6;
}

.intro{
  margin-top:22px;
  max-width:720px;
  color:#222;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:19px;
  font-weight:500;
  line-height:1.55;
  white-space: pre-line;
}

/* =====================
   SECTIONS / TITLES
===================== */

.section{ margin:44px 0 0; }
.section.section-head{ margin:34px 0 0; }
.section.section-head + .section{ margin-top:12px; }

.section-label{
  font-family: Inter, sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  opacity:.78;
  margin:0 0 16px;
}

.band-title{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:21px;
  font-weight:600;
  letter-spacing:.015em;
  margin:0 0 12px;
  line-height:1.2;
}

.copy{
  max-width:1040px;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:19px;
  font-weight:500;
  line-height:1.55;
  margin:0;
}

/* =====================
   BANDS
===================== */

.band-shell{
  position:relative;
  margin:8px 0 10px;
  padding:0 40px;
}

.band{
  display:flex;
  gap:18px;
  overflow:hidden;
  scroll-behavior:smooth;
  padding:6px 0 2px;
}

.band img{
  height:420px;
  width:auto;
  display:block;
  cursor:pointer;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  transition: transform .14s ease, box-shadow .14s ease;
}

.band img:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Carets */

.caret{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.caret.left{left:0;}
.caret.right{right:0;}

#the-village-voice .band img{
  margin-top:-14px;
}

/* =====================
   PDF CARDS
===================== */

.pdf-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.pdf-card > a{
  display:block;
}

.pdf-card img{
  height:420px;
  width:auto;
  display:block;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  transition: transform .14s ease, box-shadow .14s ease;
}

.pdf-card img:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.pdf-meta{
  margin-top:10px;
  line-height:1.3;
}

.pdf-title{
  font-size:14px;
  font-weight:600;
}

.pdf-pub{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

.pdf-actions{
  margin-top:8px;
  align-self:flex-start;
}

.pdf-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.22);
  background:#fff;
  color:#111;
  line-height:1;
}

.pdf-btn:hover{
  background:#f5f5f5;
}

/* =====================
   LIGHTBOX
===================== */

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.86);
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  z-index:9999;
}

.lightbox.on{display:flex;}

.lightbox img{
  max-width:min(1200px, 92vw);
  max-height:88vh;
  width:auto;
  height:auto;
  display:block;
}

.lb-close{
  position:fixed;
  top:18px;
  right:18px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  background:rgba(0,0,0,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* =====================================================
   MOBILE — CLEAN + TOUCH READY
===================================================== */

@media (max-width: 860px){

  .wrap{
    padding:32px 18px 56px;
  }

  .name-ghost{
    font-size:56px;
    letter-spacing:2px;
  }

  .descriptor{
    position:static;
    margin-top:6px;
    font-size:13px;
    word-spacing:.5em;
  }

  .intro{
    font-size:18px;
  }

  .section{
    margin:36px 0 0;
  }

  .section-label{
    font-size:11px;
    letter-spacing:.24em;
  }

  .band-title{
    font-size:18px;
  }

  .band-shell{
    padding:0;
  }

  .band{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    gap:14px;
  }

  .band img,
  .pdf-card img{
    height:260px;
    flex-shrink:0;
  }

  .caret{
    display:none;
  }

  .pdf-title{
    font-size:13px;
  }

  .pdf-pub{
    font-size:12px;
  }

  .pdf-btn{
    font-size:10px;
    padding:6px 10px;
  }
}
/* =========================================================
   WATERMARK + DESCRIPTOR: more muscle, less harsh contrast
   Paste at VERY BOTTOM of site.css
   ========================================================= */

/* 1) Give the ghost name more presence (desktop + all) */
.name-ghost{
  color:#a9a9a9;          /* darker than before */
  opacity:.32;            /* stronger, still ghosty */
  letter-spacing:3.2px;
  text-shadow:
    0 1px 0 rgba(255,255,255,.35); /* tiny lift so it reads cleanly */
}

/* 2) Soften the descriptor overlay so it "belongs" */
.descriptor{
  color:#0f0f0f;
  font-weight:600;
  opacity:.88;                 /* less stark than pure black */
  padding:2px 8px;             /* gives it a little breathing room */
  border-radius:6px;
  background:rgba(255,255,255,.65); /* blends with ghost underneath */
  backdrop-filter: blur(2px);        /* subtle, modern; harmless if unsupported */
}

/* 3) Mobile: keep ghost, but add hairline “edge” so it doesn’t disappear */
@media (max-width: 860px){
  .name-ghost{
    opacity:.36;
    color:#9e9e9e;
    -webkit-text-stroke: 0.45px rgba(0,0,0,.14); /* the hairline outline */
    text-shadow:
      0 1px 0 rgba(255,255,255,.25);
  }

  /* On mobile the descriptor often sits above; keep it crisp but not shouty */
  .descriptor{
    background:rgba(255,255,255,.72);
    opacity:.92;
  }
}
/* =====================================
   WRITING – MOBILE STACK FIX
   ===================================== */

@media (max-width: 860px){

  #writing .band{
    flex-direction: column;
    overflow-x: visible;
    gap: 20px;
  }

  #writing .pdf-card img{
    height: auto;
    width: 100%;
    max-width: 100%;
  }

}