/* ============ adult.xoma — unveil-style project pages ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body.p-body {
  background:#f4f4f4;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:12px; line-height:1.35; color:#000;
  -webkit-font-smoothing:antialiased;
}
img, video { display:block; }
a { color:inherit; }

/* ---------- header (same as home) ---------- */
.u-header { position:fixed; top:0; left:0; z-index:32; width:100%; padding:4px; pointer-events:none; }
.u-header nav { display:flex; width:100%; max-width:580px; }
.u-header ul { display:flex; width:100%; gap:2px; list-style:none; }
.u-header li { display:flex; width:25%; }
.u-btn {
  pointer-events:auto;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  gap:4px; width:100%;
  padding:40px 10px 7px; border-radius:6px;
  background:linear-gradient(rgba(0,0,0,.035),rgba(0,0,0,.035)) rgba(255,255,255,.5);
  color:#000; text-decoration:none;
  font-size:12px; white-space:nowrap;
  transition:background .25s ease;
}
.u-btn:hover, .u-btn.active { background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)) rgba(255,255,255,.5); }
.u-btn { backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.u-btn .who { opacity:.35; display:none; }
@media (min-width:768px){ .u-btn .who { display:block; } }

/* ---------- title / description ---------- */
.p-head {
  padding:263px 14px 0;
  display:grid;
  grid-template-columns:192px minmax(220px, 300px);
  column-gap:14px;
  align-items:start;
}
.p-name { font-size:12px; text-transform:uppercase; letter-spacing:.01em; }
.p-desc { font-size:12px; }
.p-desc p + p { margin-top:1em; }
.p-desc a { text-decoration:underline; }

/* ---------- media ---------- */
.p-media { margin-top:218px; }
.p-media img, .p-media video { width:100%; height:auto; display:block; }
.p-media video { background:#000; }
.p-media > * + * { margin-top:8px; }
.p-media .row { display:grid; gap:8px; align-items:start; }
.p-media .row.r2 { grid-template-columns:1fr 1fr; }
.p-media .row.r3 { grid-template-columns:1fr 1fr 1fr; }
.p-media .row.r4 { grid-template-columns:repeat(4,1fr); }
.p-media .inset { width:var(--w,70%); margin-left:auto; margin-right:auto; }
.p-media .inset { margin-top:110px; margin-bottom:110px; }
.p-media .band { background:#000; }
.p-media .band video { width:44%; margin:0 auto; }

/* pill link — the grey "FREE …" button (was a flat PNG) */
.p-pill {
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:2475/331; width:100%;
  background:#7d7d7d; color:#000; text-decoration:none;
  border-radius:999px;
  font-weight:700; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(8px, 1.77vw, 37px); letter-spacing:.005em;
  transition:background .25s ease, color .25s ease;
}
.p-pill:hover { background:#000; color:#fff; }

/* posters of slightly different heights, trimmed at the bottom to line up */
.p-media .row.even > img, .p-media .row.even > video {
  aspect-ratio:3/4; object-fit:cover; object-position:top;
}

/* ---------- lightbox ---------- */
.p-media img, .p-media video { cursor: zoom-in; }
body.lb-on { overflow: hidden; }
.lb {
  position:fixed; inset:0; z-index:60;
  display:none; align-items:center; justify-content:center;
  padding:14px; background:rgba(20,20,20,.94);
  opacity:0; transition:opacity .22s ease;
  cursor:zoom-out; -webkit-tap-highlight-color:transparent;
}
body.lb-on .lb { display:flex; }
.lb.on { opacity:1; }
.lb-item {
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  display:block; cursor:default;
}
.lb-close {
  position:absolute; top:8px; right:10px; z-index:2;
  width:36px; height:36px; padding:0; border:0; border-radius:6px;
  background:rgba(255,255,255,.12); color:#fff;
  font-size:22px; line-height:1; font-family:inherit;
  cursor:pointer; transition:background .2s ease;
}
.lb-close:hover { background:rgba(255,255,255,.25); }

/* ---------- credits / next ---------- */
.p-foot { padding:14px 14px 0; }
.crow {
  display:grid; grid-template-columns:120px auto; column-gap:14px;
  font-size:11px; text-transform:uppercase; letter-spacing:.02em;
  padding:1px 0;
}
.crow .k { color:rgba(0,0,0,.35); }
.crow a { text-decoration:none; }
.crow a:hover { text-decoration:underline; }
.p-next { padding:205px 14px 235px; }
.p-next .crow { font-size:11px; }
.p-next a { text-decoration:none; }
.p-next a:hover { text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:640px){
  .p-head { grid-template-columns:1fr; row-gap:22px; padding-top:180px; }
  .p-media { margin-top:120px; }
  .p-media .row.r2, .p-media .row.r3 { grid-template-columns:1fr !important; }
  .p-media .row.r4 { grid-template-columns:1fr 1fr !important; }
  .p-media .inset { width:88%; margin-top:60px; margin-bottom:60px; }
  .p-media .band video { width:70%; }
  .p-next { padding:120px 14px 140px; }
}

/* ---------- contact bar (bottom-left) ---------- */
/* two separate plates, spaced like the header buttons */
#contactBar { position:fixed; left:4px; bottom:4px; z-index:35; display:flex; gap:2px; }
#contactBar a {
  display:flex; align-items:center; height:40px; padding:1px 16px 0;
  border-radius:6px; color:#000; text-decoration:none; font-size:12px;
  background:linear-gradient(rgba(0,0,0,.04),rgba(0,0,0,.04)) rgba(255,255,255,.5);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:background .25s; touch-action:manipulation;
}
#contactBar a:hover { background:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.06)) rgba(255,255,255,.5); }
