/*
Theme Name: KB DaVirgo
Theme URI: https://kbdavirgo.com
Author: KB DaVirgo
Description: Custom theme for KB DaVirgo — content creator hub combining vlogs, diary posts, and a social feed with the brand's signature neon-ring look.
Version: 1.0
Text Domain: kbdavirgo
*/

  :root{
    --navy-deep:#0a0324;
    --navy:#140467;
    --navy-soft:#241a6b;
    --black:#000000;
    --magenta:#e419ce;
    --orchid:#db6bcf;
    --white:#ffffff;
    --mist:#f1ecf9;
    --ring:linear-gradient(135deg, var(--magenta) 0%, #7b4de0 45%, var(--orchid) 100%);
    --ring-soft:linear-gradient(135deg, rgba(228,25,206,.55), rgba(123,77,224,.45), rgba(219,107,207,.55));
    --font-display:'Playfair Display', serif;
    --font-body:'Manrope', sans-serif;
    --font-script:'Beau Rivage', cursive;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--navy-deep);
    color:var(--mist);
    font-family:var(--font-body);
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }

  .eyebrow{
    font-family:var(--font-body);
    font-size:.72rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--orchid);
  }

  /* ---------- Background atmosphere ---------- */
  .bg-noise{
    position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
    background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
    background-size:3px 3px;
  }
  .smoke{
    position:absolute; border-radius:50%; filter:blur(60px); z-index:0; pointer-events:none;
  }

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:.8rem 1.2rem;
    padding:1.1rem clamp(1.2rem,4vw,3.2rem);
    background:rgba(10,3,36,.72);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(219,107,207,.18);
  }
  .brand-mark{
    display:flex; align-items:center; gap:.65rem;
    font-family:var(--font-script);
    font-size:1.9rem;
    line-height:1;
    color:var(--white);
  }
  .brand-mark .dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--ring);
    box-shadow:0 0 14px var(--magenta);
  }
  /* Reset WordPress's default menu-item markup (each item is wrapped in <li> even
     when the outer <ul> is removed) so the nav always renders as a clean row,
     regardless of whether a custom walker is active. */
  nav.links{
    display:flex; flex-wrap:wrap; align-items:center; gap:clamp(.9rem,2.2vw,2.2rem);
    list-style:none; margin:0; padding:0;
  }
  nav.links li{ list-style:none; margin:0; padding:0; }
  nav.links a, nav.links li a{
    display:inline-block;
    font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
    color:var(--mist); opacity:.75; position:relative; padding-bottom:4px;
    transition:opacity .25s ease;
  }
  nav.links a:hover, nav.links a:focus-visible{opacity:1;}
  nav.links a::after{
    content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
    background:var(--ring); transition:width .3s ease;
  }
  nav.links a:hover::after, nav.links a:focus-visible::after{width:100%;}
  .nav-cta{
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
    padding:.65rem 1.3rem; border-radius:999px;
    background:var(--ring); color:var(--white);
    box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;
    transition:transform .25s ease, box-shadow .25s ease;
    white-space:nowrap;
  }
  .nav-cta:hover, .nav-cta:focus-visible{transform:translateY(-2px); box-shadow:0 8px 22px rgba(228,25,206,.4);}
  .menu-toggle{
    display:none; background:none; border:none; color:var(--white); font-size:1.4rem; cursor:pointer;
    margin-left:auto;
  }

  .nav-status{display:flex; align-items:center; gap:1rem;}
  .live-pill, .bell-btn{ cursor:pointer; text-decoration:none; }
  .live-pill{
    display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase; color:#fff; padding:.4rem .7rem .4rem .55rem;
    border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,64,64,.4);
    transition:background .2s ease;
  }
  .live-pill:hover{ background:rgba(255,255,255,.14); }
  .live-pill .dot-live{width:7px; height:7px; border-radius:50%; background:#ff4040; box-shadow:0 0 8px #ff4040; animation:blink-live 1.4s ease-in-out infinite;}
  @keyframes blink-live{0%,100%{opacity:1;} 50%{opacity:.25;}}
  .bell-btn{
    position:relative; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.05); border:1px solid rgba(219,107,207,.25); color:var(--white); font-size:1rem;
    transition:background .2s ease;
  }
  .bell-btn:hover{ background:rgba(255,255,255,.14); }
  .bell-btn .badge-count{
    position:absolute; top:-3px; right:-3px; background:var(--ring); color:#fff; font-size:.6rem; font-weight:800;
    width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  }

  /* ---------- Mobile: accordion-style dropdown menu ---------- */
  @media (max-width:860px){
    header{ position:relative; }
    nav.links{
      flex-basis:100%; flex-direction:column; align-items:flex-start; gap:0;
      max-height:0; overflow:hidden; opacity:0;
      transition:max-height .35s ease, opacity .25s ease;
      order:5;
      background:rgba(10,3,36,.96);
      border-radius:14px;
      width:100%;
    }
    nav.links.open{ max-height:600px; opacity:1; padding:.75rem .25rem; }
    nav.links li{ width:100%; }
    nav.links a{
      display:block; width:100%; padding:.85rem .75rem; font-size:.95rem;
      border-bottom:1px solid rgba(219,107,207,.12);
    }
    nav.links li:last-child a{ border-bottom:none; }
    .menu-toggle{display:block;}
    .nav-cta{display:none;}
  }

  /* ---------- Stories bar ---------- */
  .stories-wrap{
    position:relative; z-index:1; padding:1.1rem clamp(1.2rem,5vw,4rem) .3rem;
    max-width:1400px; margin:0 auto;
  }
  .stories-row{display:flex; gap:1.3rem; overflow-x:auto; padding-bottom:.4rem;}
  .stories-row::-webkit-scrollbar{display:none;}
  .story{display:flex; flex-direction:column; align-items:center; gap:.5rem; flex:0 0 auto; cursor:pointer;}
  .story .ring{
    width:66px; height:66px; border-radius:50%; padding:3px; background:var(--ring);
    display:flex; align-items:center; justify-content:center;
  }
  .story.seen .ring{background:rgba(241,236,249,.22);}
  .story .ring-inner{
    width:100%; height:100%; border-radius:50%; background:var(--navy);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
    font-weight:700; color:var(--white); font-size:1.1rem; border:2px solid var(--navy-deep);
  }
  .story span{font-size:.68rem; color:rgba(241,236,249,.75); font-weight:600; max-width:70px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .story.add .ring{background:rgba(255,255,255,.08);}
  .story.add .ring-inner{font-size:1.4rem; color:var(--orchid); border:2px dashed rgba(219,107,207,.5); background:transparent;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:2rem;
    padding:clamp(3rem,8vw,6rem) clamp(1.2rem,5vw,4rem) clamp(4rem,8vw,6rem);
    max-width:1400px; margin:0 auto;
  }
  .hero-copy h1{
    font-family:var(--font-script);
    font-size:clamp(3.4rem, 8vw, 6rem);
    line-height:.95;
    color:var(--white);
    margin:.6rem 0 1rem;
    background:linear-gradient(100deg, #ffffff 20%, var(--orchid) 65%, var(--magenta) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .hero-copy p{
    font-size:1.05rem; line-height:1.7; color:rgba(241,236,249,.78); max-width:38ch; margin-bottom:2rem;
  }
  .hero-actions{display:flex; gap:1rem; flex-wrap:wrap;}
  .btn-primary, .btn-ghost{
    font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
    padding:.95rem 1.8rem; border-radius:999px; display:inline-flex; align-items:center; gap:.5rem;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .btn-primary{background:var(--ring); color:var(--white);}
  .btn-primary:hover, .btn-primary:focus-visible{transform:translateY(-2px); box-shadow:0 10px 26px rgba(228,25,206,.4);}
  .btn-ghost{border:1.5px solid rgba(241,236,249,.35); color:var(--mist);}
  .btn-ghost:hover, .btn-ghost:focus-visible{border-color:var(--orchid); color:var(--white);}

  .hero-visual{position:relative; display:flex; justify-content:center; align-items:center;}
  .ring-frame{
    position:relative; width:min(420px, 86vw); aspect-ratio:1/1; border-radius:50%;
    padding:10px; background:var(--ring); box-shadow:0 0 60px rgba(228,25,206,.35), 0 0 110px rgba(123,77,224,.25);
    animation:pulse-ring 5s ease-in-out infinite;
  }
  .ring-frame img{width:100%; height:100%; object-fit:cover; border-radius:50%; background:var(--navy);}
  @keyframes pulse-ring{
    0%,100%{box-shadow:0 0 60px rgba(228,25,206,.35), 0 0 110px rgba(123,77,224,.25);}
    50%{box-shadow:0 0 80px rgba(228,25,206,.55), 0 0 140px rgba(123,77,224,.4);}
  }
  .orbit-tag{
    position:absolute; padding:.5rem 1rem; border-radius:999px; font-size:.68rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; background:rgba(10,3,36,.7); backdrop-filter:blur(8px);
    border:1px solid rgba(219,107,207,.4); color:var(--white);
  }
  .orbit-tag.t1{top:6%; right:0%;}
  .orbit-tag.t2{bottom:8%; left:-4%;}

  @media (max-width:900px){
    .hero{grid-template-columns:1fr; text-align:center;}
    .hero-copy p{margin-left:auto; margin-right:auto;}
    .hero-actions{justify-content:center;}
    .hero-visual{order:-1;}
  }

  /* ---------- Marquee ---------- */
  .marquee-wrap{
    border-top:1px solid rgba(219,107,207,.25); border-bottom:1px solid rgba(219,107,207,.25);
    background:linear-gradient(90deg, var(--navy), var(--navy-soft));
    overflow:hidden; padding:.85rem 0; position:relative; z-index:1;
  }
  .marquee-track{display:flex; gap:2.5rem; white-space:nowrap; animation:scroll-left 26s linear infinite; width:max-content;}
  .marquee-track span{
    font-family:var(--font-display); font-style:italic; font-weight:600; font-size:1rem;
    color:var(--mist); display:flex; align-items:center; gap:2.5rem;
  }
  .marquee-track span::after{content:'✦'; color:var(--magenta); font-style:normal;}
  @keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- Section shell ---------- */
  section.block, .light-section .block{
    position:relative; z-index:1;
    max-width:1400px; margin:0 auto;
    padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,5vw,4rem);
  }
  .block-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem;
    margin-bottom:2.4rem; flex-wrap:wrap;
  }
  .block-head h2{
    font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.8rem);
    color:var(--white); margin-top:.5rem;
  }
  .block-head p{color:rgba(241,236,249,.65); max-width:34ch; font-size:.95rem; line-height:1.6;}
  .view-all{
    font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--orchid);
    display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  }
  .view-all::after{content:'→'; transition:transform .25s ease;}
  .view-all:hover::after{transform:translateX(4px);}

  /* ---------- Vlog row ---------- */
  .vlog-row{
    display:flex; gap:1.4rem; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory;
  }
  .vlog-row::-webkit-scrollbar{height:6px;}
  .vlog-row::-webkit-scrollbar-thumb{background:var(--navy-soft); border-radius:4px;}
  .vlog-card{
    flex:0 0 clamp(220px, 27vw, 300px); scroll-snap-align:start;
    border-radius:18px; overflow:hidden; background:var(--navy);
    border:1px solid rgba(219,107,207,.15); transition:transform .3s ease, border-color .3s ease;
  }
  .vlog-card:hover{transform:translateY(-6px); border-color:rgba(219,107,207,.5);}
  .vlog-thumb{
    position:relative; aspect-ratio:9/12; display:flex; align-items:center; justify-content:center;
  }
  .vlog-thumb .play{
    width:52px; height:52px; border-radius:50%; background:var(--ring);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem;
    box-shadow:0 0 22px rgba(228,25,206,.5);
  }
  .vlog-thumb .dur{
    position:absolute; bottom:.7rem; right:.7rem; font-size:.68rem; font-weight:700;
    background:rgba(0,0,0,.55); padding:.25rem .55rem; border-radius:6px; color:#fff;
  }
  .vlog-info{padding:1rem 1.1rem 1.2rem;}
  .vlog-info .tag{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orchid); font-weight:700;}
  .vlog-info h3{font-family:var(--font-display); font-size:1.05rem; font-weight:600; margin-top:.4rem; color:var(--white); line-height:1.3;}
  .engagement-row{
    display:flex; align-items:center; justify-content:space-between; margin-top:.8rem;
    padding-top:.7rem; border-top:1px solid rgba(219,107,207,.15);
  }
  .engagement-row .stats{display:flex; gap:.8rem; font-size:.72rem; color:rgba(241,236,249,.55); font-weight:600;}
  .engagement-row .stats span{display:flex; align-items:center; gap:.3rem;}
  .engagement-row .icon-btn{
    background:none; border:none; color:rgba(241,236,249,.55); font-size:.9rem; cursor:pointer;
    transition:color .2s ease, transform .2s ease;
  }
  .engagement-row .icon-btn:hover, .engagement-row .icon-btn:focus-visible{color:var(--orchid); transform:scale(1.12);}
  .trending-badge{
    position:absolute; top:.7rem; left:.7rem; background:rgba(10,3,36,.7); backdrop-filter:blur(6px);
    color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(255,64,64,.5); display:flex; align-items:center; gap:.3rem;
  }

  /* ---------- Diary / magazine grid ---------- */
  .diary-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:1.8rem;}
  .feature-article{
    border-radius:20px; overflow:hidden; background:var(--navy);
    border:1px solid rgba(219,107,207,.15); display:flex; flex-direction:column;
  }
  .feature-article .cover{aspect-ratio:16/10; position:relative;}
  .feature-article .cover .badge{
    position:absolute; top:1rem; left:1rem; background:var(--ring); color:#fff; font-size:.66rem;
    font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.4rem .8rem; border-radius:999px;
  }
  .feature-article .copy{padding:1.8rem;}
  .feature-article h3{font-family:var(--font-display); font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--white); line-height:1.25; margin:.6rem 0 .8rem;}
  .feature-article p{color:rgba(241,236,249,.68); font-size:.92rem; line-height:1.65; margin-bottom:1rem;}
  .byline{display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:rgba(241,236,249,.6);}
  .byline .avatar{width:26px; height:26px; border-radius:50%; background:var(--ring);}

  .diary-list{display:flex; flex-direction:column; gap:1.2rem;}
  .diary-item{
    display:flex; gap:1rem; padding:1rem; border-radius:14px; border:1px solid transparent;
    transition:border-color .25s ease, background .25s ease;
  }
  .diary-item:hover{border-color:rgba(219,107,207,.3); background:rgba(219,107,207,.05);}
  .diary-item .thumb{width:88px; height:88px; border-radius:12px; flex:0 0 auto; background:var(--navy-soft);}
  .diary-item .txt .tag{font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orchid); font-weight:700;}
  .diary-item .txt h4{font-family:var(--font-display); font-size:1rem; color:var(--white); margin:.3rem 0; line-height:1.3;}
  .diary-item .txt span{font-size:.75rem; color:rgba(241,236,249,.55);}
  .diary-item .txt .meta{display:flex; gap:.9rem; margin-top:.4rem; align-items:center;}
  .diary-item .txt .meta em{font-style:normal; display:flex; align-items:center; gap:.25rem; font-size:.72rem; color:rgba(241,236,249,.5); font-weight:600;}

  @media (max-width:900px){ .diary-grid{grid-template-columns:1fr;} }

  /* ---------- Feed grid ---------- */
  .feed-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:.9rem;
  }
  .feed-tile{
    position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; cursor:pointer;
  }
  .feed-tile .overlay{
    position:absolute; inset:0; background:rgba(10,3,36,.4); opacity:0; display:flex; align-items:center;
    justify-content:center; gap:1.2rem; transition:opacity .3s ease; backdrop-filter:blur(1px);
  }
  .feed-tile:hover .overlay{opacity:1;}
  .feed-tile .stat{color:#fff; font-size:.85rem; font-weight:700; display:flex; align-items:center; gap:.35rem;}
  .feed-tile .caption-bar{
    position:absolute; left:0; right:0; bottom:0; padding:.6rem .65rem;
    background:linear-gradient(to top, rgba(10,3,36,.88), transparent);
    display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  }
  .feed-tile .caption-bar .stat{font-size:.72rem; gap:.25rem;}
  .feed-tile .heart-pop{
    position:absolute; top:50%; left:50%; font-size:3.2rem; color:#fff; pointer-events:none;
    transform:translate(-50%,-50%) scale(0); opacity:0; filter:drop-shadow(0 0 12px rgba(228,25,206,.7));
  }
  .feed-tile .heart-pop.pop{animation:heart-pop .7s ease forwards;}
  @keyframes heart-pop{
    0%{transform:translate(-50%,-50%) scale(0); opacity:0;}
    30%{transform:translate(-50%,-50%) scale(1.15); opacity:1;}
    45%{transform:translate(-50%,-50%) scale(1); opacity:1;}
    100%{transform:translate(-50%,-50%) scale(1); opacity:0;}
  }
  @media (max-width:860px){ .feed-grid{grid-template-columns:repeat(2, 1fr);} }
  @media (hover:none){ .feed-tile .overlay{display:none;} }

  .follow-bar{
    margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
  }
  .follow-bar a{
    padding:.75rem 1.4rem; border-radius:999px; border:1.5px solid rgba(241,236,249,.3);
    font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    transition:border-color .25s ease, color .25s ease, transform .25s ease;
  }
  .follow-bar a:hover{border-color:var(--orchid); color:var(--white); transform:translateY(-2px);}

  /* ---------- About / press band ---------- */
  .about-band{
    background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 70%);
    border-top:1px solid rgba(219,107,207,.2); border-bottom:1px solid rgba(219,107,207,.2);
  }
  .about-inner{
    display:grid; grid-template-columns:.85fr 1.15fr; gap:3rem; align-items:center;
  }
  .about-photo{display:flex; justify-content:center;}
  .about-photo .ring-frame{width:min(320px,80vw);}
  .about-copy .eyebrow{margin-bottom:.6rem;}
  .about-copy h2{font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.5rem); color:var(--white); margin-bottom:1rem;}
  .about-copy p{color:rgba(241,236,249,.75); line-height:1.75; font-size:.98rem; margin-bottom:1.6rem;}
  .stat-row{display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem;}
  .stat-chip{
    padding:.9rem 1.3rem; border-radius:14px; background:rgba(255,255,255,.04);
    border:1px solid rgba(219,107,207,.25); min-width:120px;
  }
  .stat-chip strong{display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--white);}
  .stat-chip span{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(241,236,249,.6);}

  @media (max-width:900px){
    .about-inner{grid-template-columns:1fr; text-align:center;}
    .stat-row{justify-content:center;}
  }

  /* ---------- Footer ---------- */
  footer{
    position:relative; z-index:1; padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,5vw,4rem) 2rem;
    max-width:1400px; margin:0 auto;
  }
  .newsletter{
    display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
    padding:2.4rem clamp(1.5rem,4vw,3rem); border-radius:24px;
    background:linear-gradient(120deg, rgba(228,25,206,.14), rgba(20,4,103,.5));
    border:1px solid rgba(219,107,207,.25); margin-bottom:3rem;
  }
  .newsletter h3{font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--white); max-width:20ch;}
  .newsletter form{display:flex; gap:.7rem; flex-wrap:wrap;}
  .newsletter input{
    padding:.85rem 1.2rem; border-radius:999px; border:1.5px solid rgba(241,236,249,.3);
    background:rgba(255,255,255,.05); color:var(--white); font-family:var(--font-body); font-size:.9rem; min-width:220px;
  }
  .newsletter input::placeholder{color:rgba(241,236,249,.5);}
  .newsletter input:focus-visible{outline:2px solid var(--orchid); outline-offset:2px;}

  .footer-grid{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-bottom:2rem; border-bottom:1px solid rgba(219,107,207,.15);}
  .footer-brand .brand-mark{margin-bottom:.8rem;}
  .footer-brand p{color:rgba(241,236,249,.55); font-size:.85rem; max-width:32ch; line-height:1.6;}
  .footer-links{display:flex; gap:3rem; flex-wrap:wrap;}
  .footer-links h5{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orchid); margin-bottom:.9rem;}
  .footer-links li{margin-bottom:.6rem; font-size:.88rem; color:rgba(241,236,249,.75);}
  .footer-links a:hover{color:var(--white);}
  .copyright{
    display:flex; justify-content:space-between; padding-top:1.6rem; font-size:.78rem;
    color:rgba(241,236,249,.45); flex-wrap:wrap; gap:.8rem;
  }

  /* ---------- Light section (Diary) ---------- */
  .light-section{
    position:relative; z-index:1; background:var(--mist); width:100%;
  }
  .light-section .block-head h2, .light-section .feature-article h3, .light-section .diary-item h4{
    color:var(--navy-deep);
  }
  .light-section .block-head p, .light-section .feature-article p{
    color:rgba(10,3,36,.65);
  }
  .light-section .view-all{color:var(--magenta);}
  .light-section .feature-article{
    background:#fff; border:1px solid rgba(20,4,103,.1); box-shadow:0 12px 30px rgba(20,4,103,.08);
  }
  .light-section .byline{color:rgba(10,3,36,.55);}
  .light-section .diary-item:hover{background:rgba(228,25,206,.06); border-color:rgba(228,25,206,.25);}
  .light-section .diary-item .thumb{background:linear-gradient(140deg,#ece6f7,#f6e9f3);}
  .light-section .diary-item .txt span, .light-section .diary-item .txt .meta em{color:rgba(10,3,36,.5);}

  /* ---------- Mobile app-style tab bar ---------- */
  .tab-bar{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(10,3,36,.9); backdrop-filter:blur(16px);
    border-top:1px solid rgba(219,107,207,.22);
    padding:.6rem .5rem calc(.6rem + env(safe-area-inset-bottom));
    justify-content:space-around; align-items:center;
  }
  .tab-bar a{
    display:flex; flex-direction:column; align-items:center; gap:.25rem;
    font-size:.62rem; font-weight:700; letter-spacing:.03em; color:rgba(241,236,249,.55);
  }
  .tab-bar a .tab-icon{font-size:1.15rem;}
  .tab-bar a.active{color:var(--white);}
  .tab-bar a.active .tab-icon{
    background:var(--ring); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .tab-bar a.post .tab-icon{
    width:30px; height:30px; border-radius:9px; background:var(--ring); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1rem; -webkit-text-fill-color:#fff;
  }
  @media (max-width:640px){
    .tab-bar{display:flex;}
    body{padding-bottom:64px;}
  }

  /* ---------- Promo bar ---------- */
  .promo-bar{
    display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap;
    padding:.7rem 1.2rem; text-align:center; position:relative; z-index:51;
    background:var(--ring); color:#fff;
  }
  .promo-bar p{font-size:.82rem; font-weight:700;}
  .promo-bar p strong{font-weight:800;}
  .promo-bar a.promo-cta{
    font-size:.74rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    background:rgba(10,3,36,.9); color:#fff; padding:.45rem 1rem; border-radius:999px; white-space:nowrap;
    transition:transform .2s ease;
  }
  .promo-bar a.promo-cta:hover{transform:translateY(-1px);}
  .promo-bar .dismiss{
    background:none; border:none; color:rgba(255,255,255,.8); font-size:1rem; cursor:pointer; padding:0 .3rem;
  }
  @media (max-width:640px){ .promo-bar p{font-size:.72rem;} }

  /* ---------- Category pill strip ---------- */
  .pill-strip{
    position:relative; z-index:1; max-width:1400px; margin:0 auto;
    padding:0 clamp(1.2rem,5vw,4rem) clamp(2.5rem,5vw,3.5rem); text-align:center;
  }
  .pill-strip .eyebrow{display:block; margin-bottom:1.1rem;}
  .pill-strip .pills{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;}
  .pill-strip .pills a{
    padding:.6rem 1.3rem; border-radius:999px; font-size:.82rem; font-weight:700;
    border:1.5px solid rgba(219,107,207,.3); color:rgba(241,236,249,.85);
    transition:all .25s ease;
  }
  .pill-strip .pills a:hover, .pill-strip .pills a:focus-visible{
    background:var(--ring); border-color:transparent; color:#fff; transform:translateY(-2px);
  }

  /* ---------- Photo collage strip ---------- */
  .collage-strip{display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:1;}
  .collage-tile{
    position:relative; aspect-ratio:3/4; overflow:hidden; display:flex; align-items:flex-end; padding:1.1rem;
  }
  .collage-tile::before{
    content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.65), transparent 60%);
  }
  .collage-tile span{position:relative; z-index:1; color:#fff; font-weight:700; font-size:1rem; font-family:var(--font-display);}
  @media (max-width:760px){ .collage-strip{grid-template-columns:repeat(2,1fr);} }

  /* ---------- Stat band ---------- */
  .stat-band{
    display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:1;
    background:var(--navy); border-top:1px solid rgba(219,107,207,.2); border-bottom:1px solid rgba(219,107,207,.2);
  }
  .stat-band .cell{
    text-align:center; padding:clamp(2rem,4vw,2.8rem) 1rem; border-right:1px solid rgba(219,107,207,.15);
  }
  .stat-band .cell:last-child{border-right:none;}
  .stat-band .cell .icon{font-size:1.6rem; margin-bottom:.5rem; display:block;}
  .stat-band .cell strong{
    display:block; font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2rem); color:var(--white);
  }
  .stat-band .cell span.label{font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(241,236,249,.6);}
  @media (max-width:760px){
    .stat-band{grid-template-columns:repeat(2,1fr);}
    .stat-band .cell:nth-child(2){border-right:none;}
  }

  /* ---------- Split CTA band ---------- */
  .split-cta{display:grid; grid-template-columns:1fr 1fr; position:relative; z-index:1;}
  .split-cta .panel{padding:clamp(3rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem);}
  .split-cta .fans{background:var(--navy-deep);}
  .split-cta .brands{background:var(--ring);}
  .split-cta .panel .eyebrow{display:block; margin-bottom:.8rem;}
  .split-cta .brands .eyebrow{color:rgba(255,255,255,.85);}
  .split-cta .panel h3{font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.3rem); color:#fff; line-height:1.2; margin-bottom:1rem;}
  .split-cta .panel p{color:rgba(255,255,255,.75); font-size:.94rem; line-height:1.65; margin-bottom:1.8rem; max-width:38ch;}
  .split-cta .brands p{color:rgba(255,255,255,.9);}
  .split-cta .actions{display:flex; gap:.9rem; flex-wrap:wrap;}
  .split-cta .brands .btn-primary{background:#fff; color:var(--magenta);}
  .split-cta .brands .btn-primary:hover{box-shadow:0 10px 26px rgba(0,0,0,.25);}
  .split-cta .brands .btn-ghost{border-color:rgba(255,255,255,.6); color:#fff;}
  @media (max-width:860px){ .split-cta{grid-template-columns:1fr;} }

  /* ---------- Fan club banner ---------- */
  .fanclub-band{
    position:relative; z-index:1; text-align:center; padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,5vw,4rem);
    background:linear-gradient(135deg, var(--navy) 0%, #3a1560 60%, var(--navy) 100%);
    border-top:1px solid rgba(219,107,207,.2); border-bottom:1px solid rgba(219,107,207,.2);
  }
  .fanclub-band .kicker{
    display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1.1rem; border-radius:999px;
    background:rgba(228,25,206,.15); border:1px solid rgba(228,25,206,.4); color:var(--orchid);
    font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.4rem;
  }
  .fanclub-band h3{font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.8rem); color:#fff; margin-bottom:1rem;}
  .fanclub-band p{color:rgba(241,236,249,.75); max-width:52ch; margin:0 auto 1.8rem; line-height:1.7; font-size:.98rem;}