:root {
  --pink: #ff4fc3;
  --soft: #ff9ddd;
  --ink: #fff1fa;
  --muted: #c0a9ba;
  --line: rgba(255, 129, 216, 0.22);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #08050d;
  color: var(--ink);
  font:
    15px/1.6 Inter,
    system-ui,
    sans-serif;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 3px 3px;
}
a {
  color: inherit;
  text-decoration: none;
}
.nav {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1420px, calc(100% - 40px));
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font:
    600 21px ui-monospace,
    monospace;
}
.brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.nav nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav nav a {
  font-size: 12px;
  color: #e5cfe0;
}
.pill,
.primary,
.secondary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  padding: 12px 18px !important;
  font-weight: 800 !important;
}
.pill,
.primary {
  background: linear-gradient(135deg, #ffd0ed, var(--pink));
  color: #250d20 !important;
  box-shadow: 0 0 35px rgba(255, 79, 195, 0.25);
}
main {
  width: min(1500px, 100%);
  margin: auto;
}
.hero {
  position: relative;
  min-height: 820px;
  display: flex;
  align-items: center;
  padding: 130px clamp(25px, 7vw, 105px) 70px;
  overflow: hidden;
  background-image:
    linear-gradient(
      90deg,
      #08050d 0%,
      rgba(8, 5, 13, 0.96) 32%,
      rgba(12, 4, 16, 0.5) 58%,
      rgba(12, 4, 16, 0.08) 100%
    ),
    linear-gradient(0deg, #08050d, transparent 38%),
    url("/assets/miss-dolly-patreon-banner.jpg");
  background-size: cover;
  background-position: center, center, 60% center;
  background-repeat: no-repeat;
}
.hero:after {
  content: "";
  position: absolute;
  inset: 110px 28px 28px;
  border: 1px solid var(--line);
  border-radius: 25px;
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 700px;
}
.eyebrow,
.project span,
.hero-card span {
  color: var(--soft);
  font:
    800 10px ui-monospace,
    monospace;
  letter-spacing: 0.2em;
}
.eyebrow i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: #76edbb;
  box-shadow: 0 0 12px #76edbb;
}
h1,
h2,
h3 {
  font-family: ui-monospace, monospace;
  letter-spacing: -0.055em;
}
h1 {
  font-size: clamp(54px, 7vw, 100px);
  line-height: 0.94;
  margin: 18px 0 28px;
}
h1 em,
h2 em {
  color: var(--soft);
  font-style: normal;
  text-shadow: 0 0 35px rgba(255, 79, 195, 0.5);
}
.lede {
  max-width: 620px;
  color: #ead6e5;
  font-size: 19px;
}
.actions {
  display: flex;
  gap: 12px;
  margin: 32px 0 18px;
}
.secondary {
  border: 1px solid var(--line);
  background: rgba(10, 4, 13, 0.65);
}
.hero-copy small {
  color: var(--muted);
}
.hero-card {
  position: absolute;
  z-index: 2;
  right: 7vw;
  bottom: 82px;
  width: 290px;
  padding: 24px;
  border: 1px solid var(--pink);
  border-radius: 15px;
  background: rgba(9, 3, 13, 0.76);
  backdrop-filter: blur(12px);
}
.hero-card strong {
  display: block;
  margin: 8px 0;
  font:
    600 30px ui-monospace,
    monospace;
}
.hero-card p {
  color: var(--muted);
}
.hero-card a {
  color: var(--soft);
  font-weight: 800;
}
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 6vw;
  align-items: center;
  padding: 78px clamp(25px, 7vw, 105px);
}
.intro h2,
.membership h2,
.connect h2 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  margin: 15px 0;
}
.intro > p:last-child {
  align-self: center;
  max-width: 680px;
  color: var(--muted);
  font-size: 18px;
}
.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 clamp(25px, 7vw, 105px) 120px;
}
.project {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, #2a0d31, #100714);
}
.project:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(8, 3, 12, 0.98), rgba(8, 3, 12, 0.15)),
    url("/assets/dollos-hero.jpg") center/cover;
  opacity: 0.45;
  transition: 0.3s;
}
.project.jukie:before {
  background:
    linear-gradient(0deg, rgba(6, 8, 22, 0.98), rgba(6, 8, 22, 0.22)),
    url("/assets/jukie-app.png") center/cover;
  filter: none;
}
.project.playground:before {
  background:
    linear-gradient(0deg, rgba(37, 5, 31, 0.98), rgba(37, 5, 31, 0.08)),
    url("/assets/bimbo-doll-playground.png") center 36%/cover;
}
.project:hover:before {
  transform: scale(1.03);
  opacity: 0.6;
}
.project.featured {
  grid-row: span 2;
  min-height: 696px;
}
.project div {
  position: relative;
  z-index: 1;
  max-width: 580px;
}
.project h3 {
  font-size: 45px;
  margin: 12px 0;
}
.project p {
  color: #dfcadb;
}
.project b {
  color: var(--soft);
}
.membership {
  margin: 0 clamp(25px, 7vw, 105px) 120px;
  padding: 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(255, 79, 195, 0.24),
      transparent 38%
    ),
    #16091a;
}
.membership > div:last-child p {
  color: var(--muted);
  font-size: 17px;
  margin-bottom: 28px;
}
.connect {
  padding: 0 clamp(25px, 7vw, 105px) 100px;
}
.links {
  border-top: 1px solid var(--line);
}
.links a {
  display: flex;
  justify-content: space-between;
  padding: 23px 5px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
}
.links span {
  color: var(--muted);
}
.links b {
  font:
    600 20px ui-monospace,
    monospace;
  color: var(--soft);
}
footer {
  text-align: center;
  padding: 35px;
  color: #8f788b;
  font-size: 11px;
}
.age-gate{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:20px;background:rgba(5,2,8,.96);backdrop-filter:blur(20px);transition:.35s}.age-gate.accepted{opacity:0;visibility:hidden}.age-card{width:min(520px,100%);padding:45px;text-align:center;border:1px solid var(--line);border-radius:24px;background:#180a1c;box-shadow:0 30px 120px #000}.age-card img{width:100px;height:100px;border-radius:50%;object-fit:cover}.age-card h2{font-size:38px;margin:10px}.age-card p:not(.eyebrow){color:var(--muted)}.age-card div{display:grid;gap:10px}.age-card button{border:0;border-radius:9px;padding:14px;background:linear-gradient(135deg,#ffd0ed,var(--pink));color:#250d20;font-weight:800;cursor:pointer}.age-card a{color:var(--muted);font-size:12px}.player-section{margin:0 clamp(25px,7vw,105px) 120px;display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw;align-items:center}.player-section h2{font-size:clamp(40px,5vw,68px);line-height:1}.player-section>div>p:last-child{color:var(--muted)}.player-frame{min-height:240px;padding:14px;border:1px solid var(--line);border-radius:20px;background:#140918}.player-frame button{width:100%;min-height:210px;padding:28px;border:1px solid rgba(255,129,216,.35);border-radius:12px;background:linear-gradient(90deg,rgba(11,5,16,.93),rgba(24,7,29,.58)),url("/assets/jukie-app.png") center 42%/cover;color:#fff1fa;text-shadow:0 2px 14px #000;font:700 16px ui-monospace,monospace;cursor:pointer;transition:.2s}.player-frame button:hover{border-color:var(--soft);transform:translateY(-1px)}.player-frame button:disabled{cursor:wait;opacity:.72}.player-frame iframe{display:none;width:100%;height:620px;border:0;border-radius:12px;background:#0d0712}.player-frame iframe.loaded{display:block}.player-frame p{color:#ff9baa;margin:8px 0 0}.player-frame p:empty{display:none}
@media (max-width: 800px) {
  .nav nav a:not(.pill) {
    display: none;
  }
  .hero {
    min-height: 760px;
    background-image:
      linear-gradient(0deg, #08050d 0%, rgba(8, 5, 13, 0.42) 52%, rgba(8, 5, 13, 0.12) 100%),
      linear-gradient(90deg, rgba(8, 5, 13, 0.88) 0%, rgba(8, 5, 13, 0.52) 68%, rgba(8, 5, 13, 0.18) 100%),
      url("/assets/miss-dolly-patreon-banner.jpg");
    background-size: cover;
    background-position: center, center, 58% center;
  }
  .hero-card {
    display: none;
  }
  .intro,
  .membership {
    grid-template-columns: 1fr;
    padding: 75px 22px;
  }
  .player-section{grid-template-columns:1fr;margin:0 22px 75px}
  .projects {
    grid-template-columns: 1fr;
    padding: 0 22px 75px;
  }
  .project.featured {
    grid-row: auto;
    min-height: 420px;
  }
  .project {
    min-height: 330px;
  }
  .membership {
    margin: 0 22px 75px;
    padding: 35px;
  }
  .connect {
    padding: 0 22px 70px;
  }
  .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .nav {
    width: calc(100% - 30px);
  }
}