:root{
    --black: #0a0912;
    --bg-soft: #161226;
    --purple-deep: #3d1f78;
    --purple: #8b5cf6;
    --purple-glow: #b79bfa;
    --mint: #7fe8cf;
    --blush: #f0a8d0;
    --cream: #f4eefa;
    --muted: #a89bc4;
    --line: rgba(139,92,246,0.28);
  }

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

  body{
    background: var(--black);
    color: var(--cream);
    font-family: "Inter", system-ui, sans-serif;
    line-height: 1.7;
    overflow-x: hidden;
  }
  h1, h2, h3, .brand, .resume-name, .orb::after, .chapter h3, .story-hero h1{
    font-family: "Fraunces", "Times New Roman", serif;
  }

  ::selection{ background: var(--purple); color: var(--black); }
  a{ color: inherit; text-decoration: none; }

  .eyebrow{
    display:inline-flex; align-items:center; gap: 0.5rem;
    font-style: italic; letter-spacing: 0.28em; text-transform: uppercase;
    font-size: 0.72rem; color: var(--mint); margin-bottom: 1.1rem;
  }
  .eyebrow .dot{
    width:7px; height:7px; border-radius:50%; background: var(--mint);
    box-shadow: 0 0 10px var(--mint); animation: blink 2s infinite ease-in-out;
  }
  @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

  /* ---------- NAV ---------- */
  nav{
    position: fixed; top:0; left:0; right:0; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    padding: 1.3rem 6vw;
    background: linear-gradient(to bottom, rgba(10,9,18,0.95), rgba(10,9,18,0));
    transition: 0.4s ease;
  }
  nav.scrolled{
    padding: 0.7rem 6vw; background: rgba(16,13,28,0.85);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  }
  .brand{ font-size:1.15rem; letter-spacing:0.12em; font-style:italic; display:flex; align-items:center; gap:0.5rem; }
  .brand .pulse-dot{ width:9px; height:9px; border-radius:50%; background: var(--purple); box-shadow: 0 0 12px var(--purple-glow); }
  .nav-links{ display:flex; gap: 0.4rem; padding: 0.35rem; background: rgba(139,92,246,0.08); border: 1px solid var(--line); border-radius: 999px; }
  .nav-links a{
    font-size: 0.76rem; letter-spacing:0.06em; text-transform:uppercase;
    color: var(--muted); padding: 0.5rem 0.95rem; border-radius: 999px; transition: 0.3s ease;
  }
  .nav-links a:hover{ color: var(--black); background: var(--mint); }

  /* ---------- MOBILE NAV TOGGLE ---------- */
  .nav-toggle{
    display:none; width:42px; height:42px; border-radius:50%;
    border:1px solid var(--line); background: rgba(139,92,246,0.08);
    align-items:center; justify-content:center; flex-direction:column; gap:5px;
    cursor:pointer; flex-shrink:0;
  }
  .nav-toggle span{ width:18px; height:2px; background: var(--cream); transition:0.3s ease; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* ---------- HERO ---------- */
  .hero{
    position:relative; height:100vh; min-height:640px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; overflow:hidden;
    background:
      radial-gradient(650px 650px at 50% 30%, rgba(139,92,246,0.28), transparent 60%),
      linear-gradient(180deg, var(--black) 0%, var(--bg-soft) 55%, var(--black) 100%);
  }
  .orb-wrap{ position:relative; width:200px; height:200px; margin-bottom: 2rem; }
  .orb{
    width:100%; height:100%; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #cdb8ff, var(--purple) 45%, var(--purple-deep) 100%);
    box-shadow: 0 0 50px rgba(139,92,246,0.55), 0 0 100px rgba(139,92,246,0.25);
    animation: breathe 3.4s ease-in-out infinite; position:relative;
  }
  .orb-logo{ position:absolute; inset:0; margin:auto; width:112px; height:112px; }
  .orb-logo .pulse-dot-mark{ animation: blink 2s infinite ease-in-out; transform-origin: 378px 90px; }
  .orb-ring{ position:absolute; inset:-14px; border: 1px solid var(--line); border-radius:50%; animation: spin 14s linear infinite; }
  .orb-ring::before{ content:"◆"; position:absolute; top:-6px; left:50%; transform:translateX(-50%); color: var(--mint); font-size:0.6rem; }
  @keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
  @keyframes spin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }

  .hero h1{ font-size: clamp(2.4rem, 7.5vw, 5rem); font-weight:400; letter-spacing:0.03em; color: var(--cream); }
  .hero h1 em{ display:block; font-style:italic; font-size:0.34em; color: var(--mint); letter-spacing:0.4em; margin-bottom:0.7rem; }
  .hero p.tagline{ margin-top:1.2rem; font-style:italic; color: var(--muted); font-size:1.05rem; max-width: 520px; }
  .hero .badges{ display:flex; gap:0.7rem; margin-top:1.6rem; flex-wrap:wrap; justify-content:center; }
  .badge{
    font-size:0.68rem; letter-spacing:0.09em; text-transform:uppercase;
    padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid var(--line);
    color: var(--muted); background: rgba(139,92,246,0.06);
  }
  .hero .cta{
    margin-top:2.6rem; display:inline-block; padding:0.9rem 2.6rem; border-radius: 999px;
    background: var(--purple); color: var(--black); letter-spacing:0.12em; text-transform:uppercase;
    font-size:0.8rem; box-shadow: 0 0 25px rgba(139,92,246,0.4); transition: 0.35s ease;
  }
  .hero .cta:hover{ background: var(--mint); box-shadow: 0 0 30px rgba(127,232,207,0.5); }
  .ekg-strip{ position:absolute; bottom:0; left:0; width:100%; height:60px; opacity:0.55; }

  /* ---------- SECTION SHELL ---------- */
  section{ position:relative; padding: 2rem 8vw 5.5rem; max-width:1180px; margin:0 auto; }
  .reveal{ opacity:0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  .section-title{ font-size: clamp(1.8rem, 4vw, 2.5rem); font-style:italic; color: var(--cream); margin-bottom:0.6rem; }
  .section-title .num{ color: var(--mint); font-style:normal; margin-right:0.5rem; }
  .section-lede{ color: var(--muted); max-width:600px; margin-bottom:2.6rem; }

  /* ---------- RESUME / PROFILE CARD ---------- */
  .resume-card{
    display:grid; grid-template-columns: 220px 1fr; gap: 2.4rem;
    border: 1px solid var(--line); border-radius: 26px; padding: 2.2rem;
    background: linear-gradient(160deg, rgba(139,92,246,0.09), rgba(16,13,28,0.5));
  }
  .photo-frame{
    aspect-ratio: 1/1; border-radius: 18px; border: 1px solid rgba(139,92,246,0.16);
    display:block;
    position:relative; overflow:hidden; padding:0;
  }
  .photo-frame .silhouette{
    display:block; width:100%; height:100%;
    object-fit: cover; object-position: center top;
  }
  .photo-frame .cap-small{
    position:absolute; left:0; right:0; bottom:0;
    font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; color: var(--cream);
    text-align:center; padding: 0.6rem 0.8rem 0.5rem;
    background: linear-gradient(to top, rgba(10,9,18,0.85), transparent);
  }
  .photo-frame .corner-tag{ position:absolute; top:10px; right:10px; font-size:0.6rem; color: var(--mint); letter-spacing:0.1em; border: 1px solid var(--line); padding: 0.2rem 0.5rem; border-radius:999px; background: rgba(10,9,18,0.55); backdrop-filter: blur(3px); z-index:2; }
  .resume-fields{ display:flex; flex-direction:column; justify-content:center; gap: 0; }
  .resume-name{ font-size: 1.9rem; font-style: italic; color: var(--cream); margin-bottom: 0.2rem; }
  .resume-role{ font-size: 0.85rem; color: var(--mint); letter-spacing:0.1em; text-transform:uppercase; margin-bottom: 1.4rem; }
  .resume-row{ display:grid; grid-template-columns: 160px 1fr; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
  .resume-row:first-of-type{ border-top: none; }
  .resume-row b{ color: var(--muted); font-style:italic; font-weight:400; font-size:0.9rem; }
  .resume-row span{ color: #e7ddf1; }

  /* ---------- ABOUT ---------- */
  .about-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap:3rem; align-items:center; }
  .about-visual{
    aspect-ratio: 4/5; border-radius: 26px; position:relative; overflow:hidden;
    background: radial-gradient(circle at 50% 25%, rgba(139,92,246,0.4), transparent 65%),
                linear-gradient(160deg, var(--bg-soft), var(--black));
    border: 1px solid var(--line); display:flex; align-items:flex-end; justify-content:center;
  }
  .about-visual .pulse-icon{ position:absolute; top:26%; font-size:5rem; color: rgba(244,238,250,0.08); font-style:italic; }
  .about-visual .cap{ padding:1.1rem; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color: var(--muted); border-top:1px solid var(--line); width:100%; text-align:center; }
  .about-text p{ margin-bottom:1.1rem; color:#e2d8ec; }
  .about-text p:first-of-type::first-letter{ font-family:"Fraunces",serif; font-size:3rem; float:left; line-height:0.75; padding-right:0.5rem; color: var(--mint); font-style:italic; }
  .stat-row{ display:flex; gap:1.6rem; margin-top:1.8rem; flex-wrap:wrap; }
  .stat{ border-radius:16px; border:1px solid var(--line); padding:0.9rem 1.2rem; background: rgba(139,92,246,0.06); }
  .stat b{ display:block; font-size:1.4rem; color: var(--mint); font-style:italic; }
  .stat span{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--muted); }
  .about-visual .about-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
}

  /* ---------- SKILLS flip cards ---------- */
  .rep-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:1.5rem; }
  .flip-card{ perspective:1400px; height:250px; }
  .flip-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition: transform 0.7s cubic-bezier(.4,.2,.2,1); }
  .flip-card.flipped .flip-inner{ transform: rotateY(180deg); }
  .flip-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius: 22px; border:1px solid var(--line); padding:1.7rem; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; }
  .flip-front{ background: linear-gradient(160deg, var(--bg-soft), var(--black)); }
  .flip-front .mark{ width:44px; height:44px; border-radius:50%; background: rgba(139,92,246,0.15); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color: var(--mint); }
  .flip-front h3{ font-style:italic; font-size:1.3rem; margin-top:1.1rem; }
  .flip-front .hint{ font-size:0.68rem; color: var(--muted); letter-spacing:0.12em; text-transform:uppercase; }
  .flip-back{ background: linear-gradient(160deg, var(--purple-deep), var(--bg-soft)); transform: rotateY(180deg); font-size:0.9rem; }
  .flip-back h4{ color: var(--mint); font-style:italic; margin-bottom:0.5rem; }

  /* ---------- TIMELINE ---------- */
  .timeline{ border-left: 1px solid var(--line); margin-left:8px; }
  .tl-item{ position:relative; padding: 0 0 2.4rem 2.2rem; }
  .tl-item::before{ content:""; position:absolute; left:-8px; top:4px; width:14px; height:14px; border-radius:50%; background: var(--black); border:2px solid var(--purple); box-shadow: 0 0 10px rgba(139,92,246,0.5); }
  .tl-year{ color: var(--mint); font-style:italic; font-size:1.05rem; }
  .tl-title{ font-size:1.1rem; margin:0.25rem 0; }
  .tl-desc{ color: var(--muted); font-size:0.92rem; max-width:540px; }

  /* ---------- VOICES ---------- */
  .whispers-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:1.6rem; }
  .whisper{ border-radius:22px; border:1px solid var(--line); padding:2rem 1.7rem; background: linear-gradient(180deg, rgba(139,92,246,0.08), transparent); }
  .whisper .qmark{ font-size:2.6rem; font-style:italic; color: var(--mint); line-height:0.5; display:block; margin-bottom:0.5rem; }
  .whisper p.quote{ color:#ece2f5; font-style:italic; margin-bottom:1rem; }
  .whisper .src{ font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--muted); }

  /* ---------- CONTACT ---------- */
  .contact-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:3.2rem; }
  .contact-info p{ color: var(--muted); margin-bottom:1.5rem; max-width:400px; }
  .contact-info .line-item{ margin-bottom:1rem; }
  .contact-info .line-item b{ display:block; color: var(--mint); font-style:italic; font-size:0.92rem; }
  .social-links{ display:flex; gap:0.6rem; flex-wrap:wrap; margin:1.2rem 0; }
  .social-links a{
    font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase;
    padding:0.5rem 1.05rem; border-radius:999px; border:1px solid var(--line);
    color: var(--mint); background: rgba(139,92,246,0.07); transition:0.3s ease;
  }
  .social-links a:hover{ color: var(--black); background: var(--mint); border-color: var(--mint); }

  /* ---------- HER STORY ---------- */
  .story-wrap{ max-width: 720px; margin: 0 auto; }
  .chapter{ margin-bottom: 2.8rem; }
  .chapter .chap-num{ color: var(--mint); font-style:italic; font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase; display:block; margin-bottom:0.6rem; }
  .chapter h3{ font-size: clamp(1.3rem, 2.6vw, 1.6rem); font-style:italic; color: var(--cream); margin-bottom:1rem; }
  .chapter p{ color:#e2d8ec; margin-bottom:1rem; }
  .chapter p:first-of-type::first-letter{ font-family:"Fraunces",serif; font-size:2.3rem; float:left; line-height:0.75; padding-right:0.5rem; color: var(--mint); font-style:italic; }
  .story-divider{ width:56px; height:1px; background: var(--line); margin: 2.6rem auto; }
  .pull-quote{
    border-left: 2px solid var(--mint); padding: 0.4rem 0 0.4rem 1.3rem;
    font-style: italic; color: var(--purple-glow); margin: 1.6rem 0; font-size: 1rem;
  }

  /* ---------- PAGE TOGGLE ---------- */
  .page-hidden{ display:none; }
  .story-nav{
    position: fixed; top:0; left:0; right:0; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    padding: 1.3rem 6vw; background: rgba(16,13,28,0.9);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  }
  .back-link{
    font-size: 0.76rem; letter-spacing:0.06em; text-transform:uppercase;
    color: var(--muted); padding: 0.55rem 1.1rem; border-radius: 999px;
    border: 1px solid var(--line); background: rgba(139,92,246,0.08); transition:0.3s ease;
  }
  .back-link:hover{ color: var(--black); background: var(--mint); border-color: var(--mint); }
  .story-hero{
    position:relative; padding: 9rem 8vw 4rem; text-align:center;
    background:
      radial-gradient(650px 650px at 50% 20%, rgba(139,92,246,0.25), transparent 60%),
      linear-gradient(180deg, var(--black) 0%, var(--bg-soft) 70%, var(--black) 100%);
  }
  .story-hero h1{ font-size: clamp(2.2rem, 6vw, 3.6rem); font-style:italic; font-weight:400; color: var(--cream); }
  .story-hero p.sub{ margin-top:1rem; color: var(--muted); font-style:italic; max-width:520px; margin-left:auto; margin-right:auto; }
  .story-main{ max-width: 720px; margin: 0 auto; padding: 1rem 8vw 5rem; }
  #page-story footer{ text-align:center; padding: 2.5rem 8vw; color: var(--muted); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:0.6rem; }
  form{ display:flex; flex-direction:column; gap:1.2rem; }
  .field{ position:relative; }
  .field input, .field textarea{
    width:100%; background: rgba(139,92,246,0.05); border: 1px solid var(--line);
    border-radius:14px; color: var(--cream); font-family:inherit; font-size:1rem;
    padding: 1.1rem 1rem 0.5rem; outline:none;
  }
  .field textarea{ resize:vertical; min-height:80px; }
  .field label{ position:absolute; left:1rem; top:1rem; color: var(--muted); font-style:italic; pointer-events:none; transition:0.25s ease; }
  .field input:focus + label, .field input:not(:placeholder-shown) + label,
  .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
    top:0.35rem; font-size:0.68rem; letter-spacing:0.1em; color: var(--mint);
  }
  .field input:focus, .field textarea:focus{ border-color: var(--purple); }
  .submit-btn{
    align-self:flex-start; margin-top:0.4rem; padding:0.85rem 2.3rem; border-radius:999px;
    background: var(--purple); color: var(--black); border:none; letter-spacing:0.12em;
    text-transform:uppercase; font-size:0.78rem; font-family:inherit; cursor:pointer;
    box-shadow: 0 0 20px rgba(139,92,246,0.35); transition:0.3s ease;
  }
  .submit-btn:hover{ background: var(--mint); }
  .form-msg{ font-size:0.85rem; color: var(--mint); font-style:italic; min-height:1.2rem; }

  footer{
    text-align:center; padding:2.4rem 1rem 3rem; color: var(--muted); font-size:0.75rem;
    letter-spacing:0.14em; text-transform:uppercase; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; gap:0.5rem;
  }
  footer .pulse-dot{ width:7px; height:7px; border-radius:50%; background: var(--mint); box-shadow:0 0 8px var(--mint); }

  @media (max-width: 820px){
    .nav-toggle{ display:flex; }
    .nav-links{
      position:fixed; top:0; right:0; height:100vh; width:min(78vw, 300px);
      display:flex; flex-direction:column; align-items:stretch; justify-content:center;
      gap:0.6rem; padding: 2rem 1.6rem; border-radius:0; border:none; border-left:1px solid var(--line);
      background: rgba(16,13,28,0.98); backdrop-filter: blur(14px);
      transform: translateX(100%); transition: transform 0.35s ease; z-index:99;
    }
    .nav-links.open{ transform: translateX(0); }
    .nav-links a{ text-align:center; padding:0.85rem 1rem; font-size:0.82rem; }
    .nav-overlay{
      display:none; position:fixed; inset:0; background:rgba(10,9,18,0.6); z-index:98;
    }
    .nav-overlay.open{ display:block; }
    .about-grid, .contact-wrap{ grid-template-columns: 1fr; }
    .story-nav{ padding: 1rem 5vw; }
  }
  @media (max-width: 620px){
    .resume-card{ grid-template-columns: 1fr; }
    .photo-frame{ max-width: 220px; margin: 0 auto; }
    section{ padding: 1.5rem 6vw 4rem; }
    .orb-wrap{ width:150px; height:150px; }
    .orb-logo{ width:84px; height:84px; }
    .hero{ min-height:580px; }
    .hero .cta{ padding:0.85rem 2rem; }
    .resume-row{ grid-template-columns: 1fr; gap:0.25rem; padding:0.65rem 0; }
    .resume-row b{ font-size:0.78rem; }
    .story-hero{ padding: 7rem 6vw 3rem; }
    .story-main{ padding: 1rem 6vw 4rem; }
    .whispers-grid, .rep-grid{ gap:1.1rem; }
    .flip-card{ height:220px; }
    .contact-wrap{ gap:2rem; }
    .submit-btn{ align-self:stretch; text-align:center; }
    footer{ padding:2rem 1.2rem 2.4rem; font-size:0.68rem; text-align:center; flex-wrap:wrap; }
  }
  @media (max-width: 380px){
    .hero h1{ font-size: clamp(1.9rem, 9vw, 2.6rem); }
    .badge{ font-size:0.62rem; padding:0.4rem 0.8rem; }
    .brand{ font-size:1rem; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
  }
    :root{ --banner-h: 44px; }

  .fiction-banner{
    position:fixed;
    top:0; left:0; right:0;
    z-index:300;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height: var(--banner-h);
    padding:8px 16px;
    text-align:center;
    font-family:'Inter', sans-serif;
    font-size:0.76rem;
    line-height:1.4;
    letter-spacing:0.01em;
    color:#e8e2ff;
    background:linear-gradient(90deg, rgba(61,31,120,0.92), rgba(139,92,246,0.6), rgba(127,232,207,0.4));
    border-bottom:1px solid rgba(127,232,207,0.45);
    backdrop-filter: blur(6px);
  }
  .fiction-banner .fn-mark{
    flex:0 0 auto;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#f0a8d0;
    box-shadow:0 0 8px rgba(240,168,208,0.8);
  }
  #mainNav{ top: var(--banner-h); }
  .hero{ padding-top: var(--banner-h); }
  .story-nav{ top: var(--banner-h); }
  .story-hero{ padding-top: calc(9rem + var(--banner-h)); }

  section{
    scroll-margin-top: calc(var(--banner-h) + 90px);
  }
  @media (max-width: 820px){
    section{ scroll-margin-top: calc(var(--banner-h) + 78px); }
  }
  .fiction-note-footer{
    margin-top:10px;
    font-family:'Inter', sans-serif;
    font-size:0.78rem;
    color:#7fe8cf;
    opacity:0.9;
  }
  @media (max-width: 620px){
    :root{ --banner-h: 64px; }
  }
  @media (max-width: 380px){
    :root{ --banner-h: 80px; }
  }