:root{
  --bg:#000; --pink:#ff2a9e; --ink:#cfcfcf; --dim:#8a8a8a;
  --radius:22px; --wrap-max:1100px;
  --ring:0 0 0 2px rgba(255,42,158,.35), 0 0 22px rgba(255,42,158,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:0; box-shadow:var(--ring); border-radius:16px}
.wrap{max-width:var(--wrap-max); margin:0 auto; padding:24px}

/* Header */
header{position:sticky; top:0; z-index:40; background:rgba(0,0,0,.7); backdrop-filter:saturate(1.2) blur(6px)}
.header-inner{max-width:var(--wrap-max); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:20px}
.header-brand{font-family:'Playfair Display',serif; font-size:20px; letter-spacing:.5px}
.header-brand a:hover {
  text-shadow: 0 0 8px rgba(255,42,158,.7), 0 0 18px rgba(255,42,158,.5);
}

.header-nav{margin-left:auto}
.header-nav .pills{display:flex; gap:10px; list-style:none; margin:0; padding:0}
.header-nav .pill a{
  display:inline-block; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.06);
  transition:transform .15s, box-shadow .2s, background-color .15s;
}

.header-nav .pill a:hover{box-shadow:var(--ring); transform:translateY(-1px)}
.header-nav .pill a[aria-current="page"]{background:rgba(255,42,158,.12); box-shadow:var(--ring)}

/* Local pills (in-page) */
.local-pills{margin:8px 0 16px}
.local-pills .pills{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.local-pills .pill a{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.06);
}
.local-pills .pill a:hover{box-shadow:var(--ring)}
.local-pills .pill a[aria-current="page"]{background:rgba(255,42,158,.12); box-shadow:var(--ring)}

/* Cards */
.card{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:22px; padding:20px; margin:16px 0}
.card h2,.page-title{font-family:'Playfair Display',serif; line-height:1.2; margin:.2em 0 .6em}

/* Underline accent */
.card--underline{position:relative; overflow:hidden}
.card--underline::after{
  content:""; position:absolute; left:20px; right:20px; bottom:14px; height:2px;
  background:linear-gradient(90deg, transparent, var(--pink), transparent);
  opacity:.0; transform:translateY(4px); transition:opacity .2s, transform .2s;
}
.card--underline:hover::after,
.card--underline:focus-within::after{opacity:.9; transform:translateY(0)}

.dim{color:var(--dim)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

@media (max-width:720px){
  .header-nav .pills{row-gap:6px}
}

/* ================================
   FLAVOR PACK — Pink Glow & Lift
   (Overrides / complements basics)
   ================================ */

/* Header polish */
header{
  background: rgba(0,0,0,.7);
  backdrop-filter: saturate(1.2) blur(6px);
  box-shadow: 0 0 14px rgba(255,42,158,.15);
}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.header-brand{font-family:'Playfair Display',serif; font-size:20px; letter-spacing:.5px}
.header-nav .pills{display:flex; gap:12px; list-style:none; margin:0; padding:0}
.header-nav .pill a{
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  transition:box-shadow .2s ease, background .2s ease, border-color .2s ease, transform .18s ease;
}
.header-nav .pill a:hover,
.header-nav .pill a:focus-visible{
  box-shadow: var(--ring);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.header-nav .pill a[aria-current="page"]{
  border-color: rgba(255,42,158,.45);
  box-shadow: 0 0 0 1px rgba(255,42,158,.35);
}

/* Card = pink glow + gentle lift on hover/focus */
.card{
  background: radial-gradient(120% 160% at 50% 0%,
              rgba(255,42,158,.08) 0%,
              rgba(0,0,0,.85) 60%,
              rgba(0,0,0,1) 100%);
  border: 1px solid rgba(255,42,158,.28);
  border-radius: var(--radius);
  box-shadow: 0 0 24px rgba(255,42,158,.25), inset 0 0 18px rgba(255,42,158,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover,
.card:focus-within{
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(255,42,158,.45);
  box-shadow: 0 0 36px rgba(255,42,158,.45), inset 0 0 22px rgba(255,42,158,.12);
}

/* Fancy underline that appears/expands on hover/focus */
.card--underline h2{
  display:inline-block; position:relative;
  padding-bottom:6px; margin:0 0 8px;
  font-family:'Playfair Display',serif;
}
.card--underline h2::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), #fff, rgba(255,255,255,.95), transparent);
  box-shadow: 0 0 14px rgba(255,42,158,.45);
  opacity: 0; transform: scaleX(.5); transform-origin: center;
  transition: transform .35s cubic-bezier(.25,.1,.25,1), opacity .35s ease-in-out;
}
.card--underline:hover h2::after,
.card--underline:focus-within h2::after{
  opacity: 1; transform: scaleX(1);
}

/* Local pills — keep the glow on hover/active */
.local-pills .pill a{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.local-pills .pill a:hover,
.local-pills .pill a:focus-visible{
  box-shadow: var(--ring);
}
.local-pills .pill a[aria-current="page"]{
  border-color: rgba(255,42,158,.45);
  background: rgba(255,42,158,.12);
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .card{transition:none}
  .card:hover,.card:focus-within{transform:none}
  .card--underline h2::after{transition:none}
}

/* Art.Sexy Splash Popup */
#artSplashOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999; /* above everything */
    opacity: 1;
    transition: opacity 0.4s ease;
}

#artSplashOverlay img#artSplashImage {
    max-width: 90%;
    max-height: 90%;
    cursor: pointer;
    border: 2px solid #ff2a9e;
    box-shadow: 0 0 35px rgba(255, 42, 158, 0.9);
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: artSplashBounce 0.6s ease-out 0.05s 1;
}

#artSplashOverlay img#artSplashImage:hover {
    transform: scale(1.03) rotate(-0.5deg);
    box-shadow: 0 0 55px rgba(255, 42, 158, 1);
}

/* One-time entrance bounce for splash image */
@keyframes artSplashBounce {
    0% {
        transform: scale(0.9);
    }
    40% {
        transform: scale(1.06);
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1.0);
    }
}