/* ============================================================
   VIBE AGENCY MAGAZINE LAYER v1 — 2026-07-02 (Lyra)
   Editorial desktop upgrade, Mixmag-Asia-inspired, VA navy/green skin.
   Mobile (<960px) is UNTOUCHED. All hover rules gated (U7).
   Loaded after each page's inline styles; relies on existing classes.
   ============================================================ */

:root{
  --mag-green:#1DB954;
  --mag-blue:#67d3ff;
  --mag-purple:#a785ff;
  --mag-ink:#f3f4f8;
  --mag-dim:#9b9eaf;
  --mag-hairline:rgba(29,185,84,.22);
  --mag-display:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mag-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

@media (min-width:960px){

  /* 1 · Free the phone column */
  .page{max-width:1080px !important;padding-left:48px;padding-right:48px}
  body.lyra-home .wrap{max-width:1120px !important;margin:0 auto;
     padding-left:48px !important;padding-right:48px !important}
  body.lyra-article .page{max-width:860px !important}
  body.lyra-article .page p{max-width:68ch}
  body.lyra-article .page{font-size:1.075rem;line-height:1.75}

  /* 2 · Editorial display type */
  h1{font-family:var(--mag-display);font-weight:900;letter-spacing:-0.015em;
     font-size:clamp(2.6rem,4.6vw,4.2rem) !important;line-height:1.04 !important}
  h2{font-family:var(--mag-display);font-weight:900;
     font-size:clamp(1.6rem,2.4vw,2.3rem) !important;line-height:1.12 !important;
     padding-top:14px;position:relative}
  h2::before{content:"";position:absolute;top:0;left:0;width:46px;height:4px;
     background:var(--mag-green)}
  h3{font-family:var(--mag-display);font-weight:700;
     font-size:clamp(1.15rem,1.6vw,1.45rem) !important;line-height:1.25}

  /* 3 · Kickers / labels */
  .section-label,.kicker,.eyebrow,.pl-genre,.card-sub{
     font-family:var(--mag-mono);letter-spacing:.22em;text-transform:uppercase;
     font-size:.68rem;color:var(--mag-green)}
  .section-label{display:flex;align-items:center;gap:14px}
  .section-label::after{content:"";flex:1;height:1px;background:var(--mag-hairline)}

  /* 4 · Homepage becomes a front page */
  body.lyra-home .hero-mark{transform:scale(1.25);margin-bottom:10px}
  body.lyra-home h1{font-size:clamp(3.4rem,6.6vw,6rem) !important;
     letter-spacing:-0.02em}
  body.lyra-home .stats{max-width:none}

  /* Featured playlists: two-column magazine rack (order preserved) */
  body.lyra-home .wrap{display:flex;flex-wrap:wrap;gap:24px;align-content:flex-start}
  body.lyra-home .wrap > *{flex:1 1 100%;min-width:0}
  body.lyra-home .wrap > .playlist{flex:0 1 calc(50% - 12px)}

  /* 5 · HUB PAGES — hub-grid becomes a real grid */
  body.lyra-hub .hub-grid{display:grid !important;
     grid-template-columns:repeat(3,1fr);gap:26px}
  @media (max-width:1199px){
    body.lyra-hub .hub-grid{grid-template-columns:repeat(2,1fr)}
  }
  body.lyra-hub .page{max-width:1080px !important}

  /* 6 · Card polish */
  .hub-card,.subgenre-card,.benefit-card{
     border:1px solid var(--mag-hairline) !important;border-radius:18px;
     background:linear-gradient(180deg,rgba(29,185,84,.05),rgba(0,0,0,.14))}
  .playlist{border-radius:18px}

  /* 7 · Article imagery breathes */
  body.lyra-article figure,body.lyra-article .inline-img{
     margin-left:-46px;margin-right:-46px}
  body.lyra-article figure img,body.lyra-article .inline-img img{
     border-radius:18px;width:100%}

  /* 8 · TL;DR / Short Answer boxes (Edward: answer above the fold) */
  .lyra-tldr,.short-answer{border:1px solid var(--mag-hairline);
     border-left:4px solid var(--mag-green);border-radius:14px;
     padding:18px 22px;margin:22px 0;background:rgba(29,185,84,.06);
     font-size:1.02rem;line-height:1.6}
  .lyra-tldr b:first-child{font-family:var(--mag-mono);letter-spacing:.2em;
     text-transform:uppercase;font-size:.7rem;color:var(--mag-green);
     display:block;margin-bottom:8px}

  /* 9 · Money-page CTA gets front-page weight */
  body.lyra-home .cta-primary{font-size:1.05rem;padding:18px 34px}

  footer{margin-top:64px}

  /* Hover language — pointer devices only (U7-gated) */
  @media (hover:hover){
    .hub-card:hover,.subgenre-card:hover,.benefit-card:hover{
       transform:translateY(-4px);border-color:var(--mag-green) !important;
       box-shadow:0 22px 44px -18px rgba(29,185,84,.30);
       transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
    body.lyra-article .inline-img img:hover,
    body.lyra-article figure img:hover{transform:scale(1.012);
       transition:transform .4s ease}
  }
}

/* Mobile gets ONLY the TL;DR component styling (no layout changes) */
@media (max-width:959.9px){
  .lyra-tldr{border:1px solid var(--mag-hairline);border-left:4px solid var(--mag-green);
     border-radius:12px;padding:14px 16px;margin:18px 0;
     background:rgba(29,185,84,.06);line-height:1.55}
  .lyra-tldr b:first-child{font-family:var(--mag-mono);letter-spacing:.2em;
     text-transform:uppercase;font-size:.66rem;color:var(--mag-green);
     display:block;margin-bottom:6px}
}