:root {
      --ink:      #0c0a10;   /* near-black base */
      --ink-2:    #141019;   /* panel */
      --ink-3:    #1d1726;   /* raised card */
      --moon:     #ece6ff;   /* moonlight text */
      --muted:    #a99fb8;   /* soft lilac-grey */
      --gold:     #e9b949;   /* cat-eye gold */
      --gold-soft:#f6d98a;
      --eye:      #6ef0b0;   /* glowing green */
      --violet:   #7b5cff;   /* night glow */
      --rose:     #ff6ea1;   /* a little warmth */
      --line:     rgba(236, 230, 255, 0.10);
      --shadow:   0 22px 50px -22px rgba(0, 0, 0, 0.85);
      --shadow-sm:0 12px 28px -16px rgba(0, 0, 0, 0.8);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Nunito', system-ui, sans-serif;
      color: var(--moon);
      background:
        radial-gradient(900px 500px at 78% -8%, rgba(123, 92, 255, 0.30), transparent 60%),
        radial-gradient(700px 420px at 12% 8%, rgba(255, 110, 161, 0.12), transparent 60%),
        linear-gradient(180deg, #110d18 0%, var(--ink) 60%);
      min-height: 100vh;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; line-height: 1.12; font-weight: 600; }

    .wrap { max-width: 520px; margin: 0 auto; padding: 20px 20px 64px; position: relative; z-index: 1; }

    /* ---- hero header ---- */
    .hero {
      position: relative;
      width: 100%;
      height: clamp(380px, 74vw, 520px);
      overflow: hidden;
      background: var(--ink);
    }
    .hero > img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: 50% 20%;   /* keeps her face + portal in frame */
      display: block;
    }
    /* fade the bottom of the photo into the page background */
    .hero::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(to bottom,
        rgba(12,10,16,0)    36%,
        rgba(28,20,46,0.45) 68%,
        var(--ink)          100%);
    }
    .hero__id {
      position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
      text-align: center; padding: 0 20px;
      text-shadow: 0 2px 20px rgba(0,0,0,0.85);
    }

    /* ---- profile ---- */
    .profile { text-align: center; }

    .name { font-size: 2.1rem; margin-top: 4px; letter-spacing: .01em; }
    .name em { font-style: italic; color: var(--gold-soft); }
    .handle { color: var(--gold); font-weight: 700; font-size: .98rem; letter-spacing: .03em; }
    .bio { margin: 14px auto 4px; max-width: 40ch; color: var(--muted); font-weight: 600; }

    .badge {
      display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
      background: rgba(233, 185, 73, 0.10); color: var(--gold-soft);
      padding: 6px 15px; border-radius: 999px; font-weight: 700; font-size: .8rem;
      letter-spacing: .04em; border: 1px solid rgba(233, 185, 73, 0.28);
    }

    /* ---- link buttons ---- */
    .links { margin: 30px 0 8px; display: flex; flex-direction: column; gap: 13px; }
    .link {
      display: flex; align-items: center; gap: 14px;
      background: var(--ink-3); padding: 16px 18px; border-radius: 16px;
      text-decoration: none; color: var(--moon); font-weight: 700;
      box-shadow: var(--shadow-sm); border: 1px solid var(--line);
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .link:hover { transform: translateY(-3px); border-color: rgba(233,185,73,.4); }
    .link .ico { width: 26px; text-align: center; font-size: 1.18rem; flex: 0 0 26px; }
    .link .label { flex: 1; }
    .link .arrow { color: var(--muted); font-weight: 800; }

    .link.feature {
      background: linear-gradient(120deg, #2a2036, #16213a);
      border: 1px solid rgba(233, 185, 73, 0.55);
      box-shadow: var(--shadow), 0 0 26px -6px rgba(70, 198, 255, 0.45);
      font-size: 1.05rem;
    }
    .link.feature .ico { color: var(--gold); }
    .link.feature .arrow { color: var(--gold); }
    .link.feature .sub { display:block; font-weight:600; font-size:.78rem; color: var(--muted); margin-top:2px; }

    /* ---- sections ---- */
    .section { margin-top: 42px; }
    .section h2 { font-size: 1.5rem; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
    .card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-sm); }

    .favs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .fav { background: var(--ink-3); border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; }
    .fav .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); font-weight: 800; }
    .fav .v { font-weight: 700; color: var(--moon); }

    .entry { padding: 14px 0; border-bottom: 1px dashed var(--line); }
    .entry:last-child { border-bottom: 0; padding-bottom: 0; }
    .entry .date { font-size: .72rem; font-weight: 800; color: var(--gold); letter-spacing: .08em; }
    .entry p { margin-top: 4px; color: var(--muted); font-weight: 600; }

    footer { text-align: center; margin-top: 46px; color: var(--muted); font-size: .8rem; font-weight: 600; }
    footer .tiny { opacity: .6; margin-top: 6px; font-size: .72rem; }

    /* ---- age gate ---- */
    .gate {
      position: fixed; inset: 0; z-index: 50;
      background: rgba(6, 4, 10, 0.7); backdrop-filter: blur(10px);
      display: grid; place-items: center; padding: 24px;
    }
    .gate.hidden { display: none; }
    .gate .box {
      background: linear-gradient(160deg, #1a1326, #100c18);
      border: 1px solid rgba(233, 185, 73, 0.3);
      border-radius: 22px; padding: 34px 28px; max-width: 360px; text-align: center; box-shadow: var(--shadow);
    }
    .gate h2 { justify-content: center; font-size: 1.7rem; }
    .gate h2 em { font-style: italic; color: var(--gold-soft); }
    .gate p { color: var(--muted); font-weight: 600; margin: 10px 0 22px; }
    .gate .row { display: flex; gap: 10px; }
    .gate button {
      flex: 1; border: 0; border-radius: 13px; padding: 13px;
      font-family: 'Fraunces', serif; font-weight: 600; font-size: 1rem; cursor: pointer;
    }
    .gate .yes { background: linear-gradient(120deg, var(--gold), var(--gold-soft)); color: #2a1c00; }
    .gate .no { background: #1d1726; color: var(--muted); border: 1px solid var(--line); }