/* ==========================================================================
   janbeger.ai subpages, v4 (2026-11-02): same look as the homepage.
   Floating dark nav pill, dark page header, stone body, dark footer.
   Loaded after each page's own styles; rules are scoped to body.v4.
   ========================================================================== */
body.v4{
  --night:#0d0e10; --stone:#f2f1ed; --white:#ffffff;
  --ink:#16171a; --ink-2:#4a4b50; --ink-3:#6c6d72; --rule:rgba(22,23,26,0.12);
  --orange:#7c3aed; --orange-hover:#6d28d9; --accent:#7c3aed; --accent-hover:#6d28d9;
  --on-dark:#f5f3ef; --on-dark-2:#dcd9d3; --on-dark-3:#b6b3ad;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,4vw,56px); --max:1320px; --measure:760px;
  margin:0; background:var(--stone); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
body.v4 *, body.v4 *::before, body.v4 *::after{ box-sizing:border-box; }
html{ scroll-padding-top:96px; }

/* ---------- nav (same as homepage) ---------- */
body.v4 nav.site{ position:fixed; top:0; left:0; right:0; z-index:50; padding:18px 16px 0; pointer-events:none; }
body.v4 nav.site .row{ pointer-events:auto; max-width:1218px; margin:0 auto; display:flex; align-items:center; gap:26px;
  padding:8px 8px 8px 26px; min-height:64px; border-radius:999px;
  background:rgba(20,21,24,0.62); border:1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
body.v4 nav.site .wordmark{ font-family:var(--display); font-weight:600; font-size:21px; line-height:1; letter-spacing:-0.02em; color:var(--on-dark); text-decoration:none; margin-right:auto; white-space:nowrap; }
body.v4 nav.site .links{ display:flex; gap:26px; }
body.v4 nav.site .links a{ font-size:16px; font-weight:600; color:var(--on-dark); text-decoration:none; white-space:nowrap; }
body.v4 nav.site .links a:hover{ color:#c4b5fd; }
body.v4 nav.site .nav-book{ display:inline-flex; align-items:center; height:46px; padding:0 22px; border-radius:999px; background:var(--orange); color:#fff; font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap; }
body.v4 nav.site .nav-book:hover{ background:var(--orange-hover); color:#fff; }
body.v4 nav.site .menu-btn{ display:none; width:44px; height:44px; flex:none; border-radius:999px; border:1px solid rgba(255,255,255,0.25); background:transparent; color:#fff; align-items:center; justify-content:center; cursor:pointer; padding:0; }
body.v4 nav.site .menu-btn svg{ width:20px; height:20px; }
body.v4 nav.site .menu-btn path{ transition:transform .25s ease; transform-origin:12px 12px; }
body.v4 nav.site.menu-open .menu-btn .l1{ transform:translateY(4px) rotate(45deg); }
body.v4 nav.site.menu-open .menu-btn .l2{ transform:translateY(-4px) rotate(-45deg); }
body.v4 nav.site .mobile-menu{ pointer-events:auto; position:fixed; inset:0; z-index:-1; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:110px 24px 48px; background:#0d0e10; }
body.v4 nav.site .mobile-menu[hidden]{ display:none; }
body.v4 nav.site .mobile-menu a{ font-family:var(--display); font-weight:600; font-size:33px; line-height:1.2; color:#fff; text-decoration:none; }
body.v4 nav.site .mobile-menu a.mm-book{ align-self:flex-start; margin-top:24px; font-family:var(--sans); font-size:17px; font-weight:700; padding:14px 28px; border-radius:999px; background:var(--orange); }
html.no-scroll{ overflow:hidden; }
@media (max-width:900px){ body.v4 nav.site .row{ padding:8px 10px 8px 18px; gap:14px; } body.v4 nav.site .wordmark{ font-size:19px; } body.v4 nav.site .links{ gap:14px; } body.v4 nav.site .links a{ font-size:14px; } }
@media (max-width:600px){ body.v4 nav.site{ padding-top:12px; } body.v4 nav.site .links{ display:none; } body.v4 nav.site .row{ gap:8px; min-height:62px; } body.v4 nav.site .nav-book{ height:42px; padding:0 18px; } body.v4 nav.site .menu-btn{ display:inline-flex; } }

/* ---------- page header (dark, like the homepage hero and bands) ---------- */
body.v4 header.ph{ position:relative; overflow:hidden; background:var(--night); color:var(--on-dark); }
body.v4 header.ph .ph-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:100% 42%; opacity:.55; }
body.v4 header.ph.has-photo::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(13,14,16,0.96) 0%, rgba(13,14,16,0.86) 38%, rgba(13,14,16,0.35) 75%, rgba(13,14,16,0.2) 100%),
             linear-gradient(180deg, rgba(13,14,16,0.6) 0%, rgba(13,14,16,0) 25%, rgba(13,14,16,0) 70%, rgba(13,14,16,0.9) 100%); }
body.v4 header.ph .ph-inner{ position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:168px var(--gutter) 80px; }
body.v4 header.ph.has-photo .ph-inner{ padding-top:200px; padding-bottom:96px; }
body.v4 header.ph .ph-kicker{ margin:0 0 18px; font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--on-dark-3); }
body.v4 header.ph .ph-kicker::before{ content:none; }
body.v4 header.ph h1{ margin:0; max-width:15ch; hyphens:manual; overflow-wrap:break-word; font-family:var(--display); font-weight:600; font-size:clamp(40px,6.2vw,84px); line-height:1.03; letter-spacing:-0.03em; color:#fff; text-wrap:balance; }
body.v4 header.ph .ph-lede{ margin:28px 0 0; max-width:680px; font-size:20px; line-height:1.55; color:var(--on-dark-2); text-wrap:pretty; }
body.v4 header.ph .ph-lede strong{ color:#fff; }
body.v4 header.ph .ph-byline{ margin:20px 0 0; font-size:15px; color:var(--on-dark-3); }
body.v4 header.ph a{ color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,0.4); text-underline-offset:3px; }
body.v4 header.ph a:hover{ text-decoration-color:#fff; }
@media (max-width:600px){
  body.v4 header.ph .ph-inner{ padding:128px var(--gutter) 56px; }
  body.v4 header.ph.has-photo .ph-inner{ padding-top:330px; padding-bottom:48px; }
  body.v4 header.ph h1{ font-size:clamp(32px,9.4vw,44px); hyphens:auto; }
  body.v4 header.ph .ph-photo{ height:62%; object-position:96% 40%; opacity:.8; }
  body.v4 header.ph.has-photo::after{ background:linear-gradient(180deg, rgba(13,14,16,0.5) 0%, rgba(13,14,16,0) 18%, rgba(13,14,16,0.35) 40%, rgba(13,14,16,1) 60%); }
  body.v4 header.ph .ph-lede{ font-size:18px; }
}

/* ---------- body content ---------- */
body.v4 main.page{ max-width:var(--max); margin:0 auto; padding:64px var(--gutter) 112px; }
body.v4 main.page > .wrap, body.v4 main.page > article.wrap{ max-width:var(--measure); margin:0; padding:0; background:none; }
body.v4 main.page h2{ font-family:var(--display); font-weight:600; font-size:clamp(28px,3vw,37px); line-height:1.12; letter-spacing:-0.03em; color:var(--ink); margin:64px 0 18px; }
body.v4 main.page h2:first-child{ margin-top:0; }
body.v4 main.page h3{ font-family:var(--display); font-weight:600; letter-spacing:-0.02em; }
body.v4 main.page p, body.v4 main.page li{ color:var(--ink); }
body.v4 main.page a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:1.5px; text-underline-offset:3px; }
body.v4 main.page a:hover{ color:var(--orange); }
body.v4 main.page .kicker{ color:var(--ink-3); }
body.v4 main.page .kicker::before{ background:var(--rule); }
body.v4 main.page hr{ border:0; border-top:1px solid var(--rule); }
@media (max-width:600px){ body.v4 main.page{ padding:56px var(--gutter) 80px; } body.v4 main.page h2{ margin-top:48px; } }

/* ---------- footer (same as homepage) ---------- */
body.v4 footer.site{ background:var(--night); color:var(--on-dark-3); }
body.v4 footer.site .row{ max-width:var(--max); margin:0 auto; padding:56px var(--gutter) 48px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; font-size:15px; line-height:1.62; border-top:1px solid rgba(255,255,255,0.1); }
body.v4 footer.site .foot-cta{ margin:0 0 10px; font-family:var(--display); font-weight:600; font-size:32px; line-height:1.15; letter-spacing:-0.03em; color:#fff; }
body.v4 footer.site .foot-cta a{ color:#fff; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:5px; text-decoration-thickness:2px; }
body.v4 footer.site .foot-meta{ margin:0; color:var(--on-dark-3); }
body.v4 footer.site .foot-meta a{ color:var(--on-dark-2); text-decoration:none; }
body.v4 footer.site a:hover{ color:#a78bfa; }
body.v4 footer.site .icons{ display:flex; gap:8px; }
body.v4 footer.site .icons a{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(255,255,255,0.22); color:#fff; }
body.v4 footer.site .icons a:hover{ border-color:#a78bfa; color:#a78bfa; }
body.v4 footer.site .icons svg{ width:18px; height:18px; fill:currentColor; }
@media (max-width:600px){ body.v4 footer.site .row{ padding:56px var(--gutter) 48px; } body.v4 footer.site .foot-cta{ font-size:26px; } }

/* ---------- components carried over from the old pages ---------- */
body.v4 main.page .endcard{ background:var(--night); color:var(--on-dark); border-radius:24px; }
body.v4 main.page .endcard h2, body.v4 main.page .endcard p, body.v4 main.page .endcard li{ color:var(--on-dark); }
body.v4 main.page .endcard h2{ margin-top:0; color:#fff; }
body.v4 main.page .endcard a{ color:#fff; text-decoration-color:var(--orange); }
body.v4 main.page .endcard a:hover{ color:#c4b5fd; }
body.v4 main.page .events li:first-child .when{ color:var(--ink); }

/* text selection in the site purple (same as the homepage) */
::selection{ background:#7c3aed; color:#fff; }

/* primary buttons keep white text on hover (the main.page link hover rule turned it purple) */
body.v4 main.page a.btn-primary:hover, body.v4 main.page a.btn-primary:focus-visible{ color:#fff; } /* btn-primary:hover keeps white */