/* ── TOKENS ── */
    :root {
      --pink:          #F7C5D5;
      --pink-deep:     #EF9BB8;
      --pink-pale:     #FDF0F4;
      --blue:          #B8D4F0;
      --blue-deep:     #7AABDF;
      --blue-pale:     #EEF5FC;
      --purple:        #D4C0F0;
      --purple-deep:   #A98FD8;
      --purple-pale:   #F3EFFD;
      --ivory:         #FEFCF9;
      --parchment:     #F8F2EA;
      --midnight:      #140F2A;
      --night:         #1E1535;
      --ink:           #221A32;
      --ink-mid:       #5A4870;
      --ink-soft:      #9080A8;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { 
      scroll-behavior: smooth; 
      overflow-x: hidden; 
      font-size: 105%;
    }

    body {
      font-family: 'Nunito', sans-serif;
      background: var(--ivory);
      color: var(--ink);
      overflow-x: hidden;
    }

    /* ── STAR FIELD ── */
    #stars {
      position: fixed; inset: 0;
      pointer-events: none; z-index: 0;
      overflow: hidden;
    }
    .star {
      position: absolute;
      border-radius: 50%;
      background: white;
      animation: twinkle linear infinite;
    }
    @keyframes twinkle {
      0%,100% { opacity: 0; transform: scale(0.8); }
      50%      { opacity: 1; transform: scale(1);   }
    }

    /* ── NAVBAR ── */
    #main-nav {
      background: transparent;
      transition: background .4s, box-shadow .4s;
      padding: 1.2rem 3rem;
    }
    #main-nav.scrolled {
      background: rgba(254,252,249,.92) !important;
      backdrop-filter: blur(16px);
      box-shadow: 0 1px 0 rgba(212,192,240,.4);
    }
    .nav-logo {
      font-family: 'Leckerli One', cursive;
      font-size: 1.25rem;
      color: var(--ink) !important;
      text-decoration: none;
    }
    .nav-logo .han {
      font-size: .85em;
      color: var(--purple-deep);
      margin-right: .3rem;
    }
    .nav-link-custom {
      font-size: .69rem;
      font-weight: 400;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--ink-mid) !important;
      text-decoration: none;
      position: relative;
      padding: .3rem 0 !important;
      transition: color .3s;
    }
    .nav-link-custom::after {
      content: ''; position: absolute;
      bottom: -2px; left: 0;
      width: 0; height: 1px;
      background: var(--purple-deep);
      transition: width .35s;
    }
    .nav-link-custom:hover { color: var(--ink) !important; }
    .nav-link-custom:hover::after { width: 100%; }
    .nav-pill-btn {
      background: linear-gradient(135deg, var(--pink), var(--purple));
      color: var(--ink) !important;
      padding: .45rem 1.3rem !important;
      border-radius: 50px;
      font-size: .69rem;
      font-weight: 500;
      letter-spacing: .18em;
      text-transform: uppercase;
      text-decoration: none;
      transition: opacity .3s;
    }
    .nav-pill-btn::after { display: none !important; }
    .nav-pill-btn:hover { opacity: .8; }

    /* ── MOBILE NAV DROPDOWN ── */
    @media (max-width: 991.98px) {
      #navMenu {
        position: absolute;
        top: calc(100% - 0.5rem);
        right: 1.5rem;
        left: auto;
        width: auto;
        min-width: 180px;
        background: rgba(254, 252, 249, 0.88);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(212, 192, 240, 0.3);
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(100, 80, 160, 0.15);
        padding: 0.75rem 1.25rem !important;
      }

      #navMenu .navbar-nav {
        align-items: flex-end !important;
      }

      /* Reset pill button to match plain nav links in mobile dropdown */
      .nav-pill-btn {
        background: none !important;
        padding: .3rem 0 !important;
        border-radius: 0;
        font-size: .69rem;
        font-weight: 400;
        letter-spacing: .22em;
        color: var(--ink-mid) !important;
        position: relative;
      }
      .nav-pill-btn::after {
        display: block !important;
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--purple-deep);
        transition: width .35s;
      }
      .nav-pill-btn:hover {
        opacity: 1;
        color: var(--ink) !important;
      }
      .nav-pill-btn:hover::after {
        width: 100%;
      }

    }

    /* ── GEMS ── */
    .gem {
      width: 7px; height: 7px;
      border-radius: 50%;
      display: inline-block;
    }
    .gem-pink   { background: var(--pink-deep); }
    .gem-blue   { background: var(--blue-deep); }
    .gem-purple { background: var(--purple-deep); }

    /* ── HERO ── */
    #hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 6rem 0 4rem;
      background: var(--ivory);
      position: relative;
      overflow: hidden;
    }
    #hero .row {
      justify-content: center;
    }
    /* Blobs */
    .blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
    .b1 { width: 650px; height: 650px; background: radial-gradient(circle, rgba(247,197,213,.82) 0%, transparent 70%); top: -160px; right: -100px; animation: breathe 10s ease-in-out infinite; }
    .b2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(212,192,240,.68) 0%, transparent 70%); bottom: -80px; left: -80px; animation: breathe 13s ease-in-out infinite reverse; }
    .b3 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(184,212,240,.62) 0%, transparent 70%); top: 30%; left: 30%; animation: breathe 8s ease-in-out infinite 1.5s; }
    @keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

    /* Photo column */
    .hero-photo-col {
      display: flex; align-items: center; justify-content: center;
    }
    .apc { position: relative; width: 380px; }
    @media (min-width: 992px) { .apc { width: 420px; } }

    .photo-frame {
      width: 100%; aspect-ratio: 3/4;
      border-radius: 175px 175px 14px 14px;
      background: linear-gradient(160deg, var(--pink-pale) 0%, var(--purple-pale) 50%, var(--blue-pale) 100%);
      overflow: hidden;
      box-shadow: 0 28px 80px rgba(212,192,240,.3), 0 6px 20px rgba(0,0,0,.05);
    }
    .photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }

    .acc-circle {
      position: absolute; bottom: -1.8rem; right: -1.8rem;
      width: 96px; height: 96px; border-radius: 50%;
      background: var(--blue-pale);
      border: 2px solid rgba(184,212,240,.5); z-index: -1;
    }
    .acc-ring {
      position: absolute; top: -2rem; left: -2rem;
      width: 155px; height: 155px; border-radius: 50%;
      border: 1px dashed rgba(212,192,240,.45); z-index: -1;
      animation: spin-slow 28s linear infinite reverse;
    }
    .acc-ring-2 {
      position: absolute; bottom: 20%; right: -3rem;
      width: 80px; height: 80px; border-radius: 50%;
      border: 1px solid rgba(247,197,213,.5); z-index: -1;
    }
    @keyframes spin-slow { from{transform:rotate(0)} to{transform:rotate(360deg)} }

    .about-quote {
      position: absolute; bottom: 3rem; left: -2rem;
      background: white;
      border-left: 3px solid var(--purple-deep);
      padding: 1rem 1.3rem;
      border-radius: 0 10px 10px 0;
      max-width: 220px;
      box-shadow: 0 10px 40px rgba(169,143,216,.18);
    }
    .about-quote p { font-style: italic; font-size: .82rem; color: var(--ink-mid); line-height: 1.65; margin: 0; }
    .about-quote .qhan { font-size: 1.4rem; color: var(--purple-deep); display: block; margin-top: .3rem; }

    /* Hero text column */
    .hero-text-col {
      position: relative; z-index: 2;
      padding: 2rem 0 2rem;
      max-width: 600px;
    }

    .hero-kicker {
      display: inline-flex; align-items: center; gap: .9rem;
      margin-bottom: 1.6rem;
      opacity: 0; animation: riseIn .9s cubic-bezier(.22,1,.36,1) forwards .15s;
    }
    .kicker-gems { display: flex; gap: .3rem; }
    .hero-kicker span { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); }

    .hero-h1 {
      font-family: 'Leckerli One', serif;
      font-size: clamp(2.8rem, 5.5vw, 5rem);
      font-weight: 300; line-height: 1.08; color: var(--ink);
      opacity: 0; animation: riseIn 1s cubic-bezier(.22,1,.36,1) forwards .35s;
    }
    .hero-tagline {
      font-size: clamp(1.1rem, 2vw, 1.5rem);
      line-height: 1.55; color: var(--ink-mid);
      margin-top: 1.2rem;
      opacity: 0; animation: riseIn .9s cubic-bezier(.22,1,.36,1) forwards .6s;
    }
    .hero-btns {
      display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem;
      opacity: 0; animation: riseIn .9s cubic-bezier(.22,1,.36,1) forwards 1s;
    }

    .btn-primary-custom {
      font-size: .71rem; font-weight: 500;
      letter-spacing: .2em; text-transform: uppercase;
      text-decoration: none; padding: .9rem 2rem;
      border-radius: 50px;
      background: linear-gradient(135deg, var(--pink-deep), var(--purple-deep));
      color: white; border: 1.5px solid transparent;
      display: inline-block; transition: all .35s;
    }
    .btn-primary-custom:hover { opacity: .82; transform: translateY(-2px); color: white; }

    .btn-ghost-custom {
      font-size: .71rem; font-weight: 500;
      letter-spacing: .2em; text-transform: uppercase;
      text-decoration: none; padding: .9rem 2rem;
      border-radius: 50px;
      background: transparent; color: var(--ink);
      border: 1.5px solid rgba(169,143,216,.4);
      display: inline-block; transition: all .35s;
    }
    .btn-ghost-custom:hover { border-color: var(--purple-deep); color: var(--purple-deep); transform: translateY(-2px); }

    .hero-bio {
      margin-top: 2.2rem; padding-top: 2.2rem;
      border-top: 1px solid rgba(212,192,240,.3);
      opacity: 0; animation: riseIn .9s cubic-bezier(.22,1,.36,1) forwards 1.15s;
    }
    .hero-bio p { font-size: 1.05rem; line-height: 1.9; color: var(--ink-mid); margin-bottom: .8rem; }

    .hero-chips {
      display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem;
      opacity: 0; animation: riseIn .9s cubic-bezier(.22,1,.36,1) forwards 1.3s;
      text-transform: lowercase;
      list-style: none;
      list-style-type: none;
      padding: 0;
      margin-left: 0;
    }
    .hero-chips li {
      list-style: none;
      list-style-type: none;
    }
    .hero-chips li::marker {
      content: none;
      display: none;
      font-size: 0;
    }
    .chip {
      font-size: .7rem; letter-spacing: .08em;
      padding: .4rem 1rem; border-radius: 50px;
      display: inline-block;
    }
    .cp { background: var(--pink-pale); color: #c0607c; border: 1px solid rgba(239,155,184,.35); }
    .cb { background: var(--blue-pale); color: #4a7fb0; border: 1px solid rgba(184,212,240,.45); }
    .cv { background: var(--purple-pale); color: #7058b0; border: 1px solid rgba(212,192,240,.45); }

    @keyframes riseIn {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── SECTION SHARED ── */
    .stag {
      font-size: .67rem; font-weight: 400; letter-spacing: .3em;
      text-transform: uppercase; color: var(--blue-deep);
      display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem;
    }
    .stag::before { content:''; width:28px; height:1px; background:linear-gradient(90deg,var(--pink),var(--blue)); }

    .sh {
      font-family: 'Bree Serif', serif;
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 300; line-height: 1.1; color: var(--ink);
    }

    /* ── BOOKS ── */
    #books {
      padding: 8rem 0;
      background: var(--parchment);
      position: relative; overflow: hidden;
    }
    #books::before {
      content: '生'; position: absolute;
      right: 2rem; top: 30%; transform: translateY(-50%);
      font-size: 28rem; color: rgba(212,192,240,.07);
      line-height: 1; pointer-events: none;
    }
    #books::after {
      content: ''; position: absolute;
      top: 0; left: -10%; right: -10%; height: 6px;
      background: linear-gradient(90deg, var(--pink), var(--purple), var(--blue));
      opacity: .7;
    }

    /* Book cards */
    .bcard { display: flex; flex-direction: column; }
    .bcwrap { position: relative; margin-bottom: 1.8rem; }
    .bcover {
      width: 100%; aspect-ratio: 4/5;
      border-radius: 10px; overflow: hidden; position: relative;
      transition: transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s;
    }
    .bcard:hover .bcover { transform: translateY(-10px); box-shadow: 0 34px 64px rgba(169,143,216,.2); }
    .bcover-pink   { background: linear-gradient(168deg, #fce8ef 0%, #eda8c0 35%, #c06090 68%, #7a2a50 100%); }
    .bcover-blue   { background: linear-gradient(168deg, #e8f0fb 0%, #a8c8ef 35%, #6090c8 68%, #2a4a80 100%); }
    .bcover-purple { background: linear-gradient(168deg, #f2ecfd 0%, #c8a8ef 35%, #9060d0 68%, #4a2a80 100%); }

    .bcc {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: .7rem; padding: 2rem;
    }
    .bcc-han   { font-size: 4.8rem; color: rgba(255,255,255,.18); line-height: 1; }
    .bcc-title { font-family: 'Bree Serif', serif; font-style: italic; font-size: 1rem; color: rgba(255,255,255,.72); text-align: center; line-height: 1.3; }

    .bshadow {
      position: absolute; bottom: -10px; left: 8%; right: 8%; height: 28px;
      background: rgba(100,80,160,.12); filter: blur(12px); border-radius: 50%;
      transition: opacity .5s;
    }
    .bcard:hover .bshadow { opacity: .55; }

    .blabel {
      font-size: .63rem; letter-spacing: .22em; text-transform: uppercase;
      color: var(--purple-deep); margin-bottom: .45rem;
      display: flex; align-items: center; gap: .5rem;
    }
    .blabel::before { content:''; width:18px; height:1px; background:var(--purple); }
    .btitle { font-family: 'Bree Serif', serif; font-size: 1.35rem; line-height: 1.22; color: var(--ink); margin-bottom: .8rem; }
    .bdesc  { font-size: 1rem; font-weight: 300; line-height: 1.82; color: var(--ink-soft); flex: 1; }
    .blink {
      margin-top: 1.2rem; display: inline-flex; align-items: center; gap: .5rem;
      font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
      color: var(--blue-deep); text-decoration: none; transition: gap .3s;
    }
    .blink:hover { gap: .9rem; }
    .blink svg { width: 14px; }

    /* ── NEWSLETTER ── */
    #newsletter {
      padding: 9rem 0;
      background: var(--midnight);
      position: relative; overflow: hidden;
      text-align: center;
    }
    .aur { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; animation: breathe ease-in-out infinite; }
    .aur-1 { width: 560px; height: 560px; background: radial-gradient(circle, rgba(247,197,213,.15) 0%, transparent 70%); top:-120px; left:-80px; animation-duration:11s; }
    .aur-2 { width: 450px; height: 450px; background: radial-gradient(circle, rgba(184,212,240,.12) 0%, transparent 70%); bottom:-80px; right:-60px; animation-duration:9s; animation-direction:reverse; }
    .aur-3 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(212,192,240,.14) 0%, transparent 70%); top:40%; left:50%; transform:translate(-50%,-50%); animation-duration:14s; animation-delay:2s; }

    .constellation {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        radial-gradient(circle 1px at 20% 30%, rgba(255,255,255,.5) 0%, transparent 0%),
        radial-gradient(circle 1px at 50% 15%, rgba(255,255,255,.4) 0%, transparent 0%),
        radial-gradient(circle 1px at 80% 25%, rgba(255,255,255,.5) 0%, transparent 0%),
        radial-gradient(circle 1px at 10% 65%, rgba(255,255,255,.35) 0%, transparent 0%),
        radial-gradient(circle 1px at 90% 70%, rgba(255,255,255,.4) 0%, transparent 0%),
        radial-gradient(circle 1px at 35% 80%, rgba(255,255,255,.35) 0%, transparent 0%),
        radial-gradient(circle 1px at 65% 85%, rgba(255,255,255,.4) 0%, transparent 0%);
    }
    .nl-bg-han {
      position: absolute; left:50%; top:50%; transform:translate(-50%,-55%);
      font-size: 28rem; color: rgba(255,255,255,.025);
      line-height: 1; pointer-events: none;
    }
    .nring {
      position: absolute; border-radius: 50%;
      left:50%; top:50%; transform:translate(-50%,-50%);
      pointer-events: none; animation: spin-slow linear infinite;
    }
    .nring-1 { width:480px; height:480px; border:1px dashed rgba(212,192,240,.12); animation-duration:45s; }
    .nring-2 { width:660px; height:660px; border:1px dashed rgba(184,212,240,.08); animation-duration:65s; animation-direction:reverse; }

    .nl-ey {
      font-size: .66rem; letter-spacing: .32em; text-transform: uppercase;
      color: var(--blue);
      display: flex; align-items: center; justify-content: center; gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .nl-ey::before, .nl-ey::after { content:''; width:26px; height:1px; background:var(--blue); opacity:.5; }

    .nl-h2 {
      font-family: 'Bree Serif', serif;
      font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 300;
      line-height: 1.1; color: white; margin-bottom: 1.5rem;
    }
    .nl-h2 .np { color: var(--pink); }
    .nl-h2 .nv { color: var(--purple); }

    .nl-body { font-size: 1.05rem; line-height: 1.9; color: rgba(255,255,255,.55); margin-bottom: 3rem; }

    .nl-substack-btn {
      display: inline-flex; align-items: center; gap: .8rem;
      background: linear-gradient(135deg, var(--pink-deep), var(--purple-deep));
      color: white; text-decoration: none;
      font-size: .78rem; font-weight: 500;
      letter-spacing: .18em; text-transform: uppercase;
      padding: 1.1rem 2.8rem; border-radius: 50px;
      margin-bottom: 3.5rem;
      transition: opacity .3s, transform .3s;
      box-shadow: 0 12px 40px rgba(169,143,216,.35);
      position: relative; overflow: hidden;
    }
    .nl-substack-btn:hover { opacity: .88; transform: translateY(-2px); color: white; }
    .nl-substack-btn svg { width: 18px; height: 18px; }

    .gem-row { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1.6rem; }
    .gem-row .gem { width: 8px; height: 8px; }

    .nl-social { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
    .slink {
      display: flex; align-items: center; gap: .5rem;
      font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
      color: rgba(255,255,255,.38); text-decoration: none;
      padding: .5rem 1.2rem; border-radius: 50px;
      transition: color .3s, background .3s;
    }
    .slink:hover { color: white; background: rgba(212,192,240,.1); }
    .slink svg { width: 15px; height: 15px; }
    .ssep { color: rgba(255,255,255,.15); font-size: 1rem; padding: 0 .2rem; }

    /* ── INQUIRY CALLOUT ── */
    .nl-inquiry {
      margin-top: 2.8rem;
      display: flex;
      justify-content: center;
    }
    .nl-inquiry-inner {
      position: relative;
      padding: 1.1rem 2rem;
      text-align: center;
    }
    
    .nl-inquiry-label {
      font-size: .58rem;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--purple);
      margin-bottom: .5rem;
      opacity: .7;
    }
    .nl-inquiry-text {
      font-size: .88rem;
      line-height: 1.75;
      color: rgba(255,255,255,.38);
      margin: 0;
    }
    .nl-inquiry-text strong {
      color: rgba(255,255,255,.62);
      font-weight: 600;
    }

    /* ── FOOTER ── */
    footer {
      background: #0e0b1e;
      padding: 2rem 3rem;
    }
    .flogo { font-family: 'Leckerli One', serif; font-size: 1rem; color: rgba(255,255,255,.3); }
    .fhan  { font-size: 1.1rem; color: rgba(212,192,240,.25); }
    .fnote { font-size: .67rem; letter-spacing: .1em; color: rgba(255,255,255,.18); }

    /* ── REVEAL ── */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity .85s ease, transform .85s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .d1 { transition-delay: .12s; }
    .d2 { transition-delay: .24s; }
    .d3 { transition-delay: .36s; }

    /* ── RESPONSIVE TWEAKS ── */
    @media (max-width: 768px) {
      #main-nav { padding: 1rem 1.5rem; }
      .hero-text-col { padding: 0 0 3rem; }
      .apc { width: 260px; }
      #hero .container-xl, #books .container-xl { padding-left: 3rem; padding-right: 3rem; }
      .about-quote { left: 0; border-radius: 0 10px 10px 0; max-width: 180px; }
      .acc-ring { left: -1rem; top: -1rem; }
      .acc-ring-2 { right: -1.5rem; }
      .acc-circle { right: -1rem; }
      .nl-bg-han { font-size: 14rem; }
      .nring-1 { width: 280px; height: 280px; }
      .nring-2 { width: 380px; height: 380px; }
      footer { flex-direction: column; text-align: center; gap: .75rem; }
    }