/* ============================================================
   VIBE AGENCY MAGAZINE LAYER v3 — 2026-07-04 (Lyra; v2 + wide-viewport shell fix: fixed 48px shell padding — the gutter var inside the 1170px max-width crushed content on >1500px screens. v2 retired same day, byte-intact for cache.)
   Light desktop redesign: warm paper canvas (matches the Journal's
   cream), plum ink, Spotify green as the single accent. bridgemind
   grammar (nav / committed hero / hairline tables / one flat canvas
   wonderfruit-style) tuned by taste-skill anti-slop rules.
   The page's own CSS custom properties are re-mapped ≥960px — the
   inline styles then re-theme themselves; hardcoded leftovers are
   spot-fixed below.
   Mobile (<960px) untouched: only .lyra-tldr styling + hiding the
   v2-only nav (which does not exist in the mobile experience).
   All hover rules gated in @media (hover:hover) — U7.
   Replaces va-mag-v1.css via the <link id="lyra-mag-layer"> swap;
   v1 file left byte-intact (immutable cache rule).
   ============================================================ */

:root{
  --w2-bg0:#faf7f2;
  --w2-bg1:#f5ede0;
  --w2-bg2:#efe6d8;
  --w2-card:#ffffff;
  --w2-ink:#2d1f3d;
  --w2-mut:#655672;
  --w2-soft:#93839f;
  --w2-green:#1DB954;
  --w2-green-ink:#0e7a3a;
  --w2-green-dark:#0b2818;
  --w2-hair:rgba(45,31,61,.12);
  --w2-hair-green:rgba(29,185,84,.35);
  --w2-display:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --w2-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --w2-gutter:max(48px,calc(50vw - 585px));
}

/* v2-only elements do not exist in the mobile experience
   (the <picture>'s <source> is desktop-gated too — zero bytes on mobile) */
.lyra-nav,.lyra-about-pic{display:none}

@media (min-width:960px){

  html{scroll-padding-top:96px}

  /* 0 · THE VARIABLE FLIP — the page re-themes itself */
  :root{
    --bg:#faf7f2;
    --bg-2:#ffffff;
    --bg-3:#f5ede0;
    --fg:#2d1f3d;
    --fg-dim:#655672;
    --fg-soft:#4c3f5c;
    --accent:#1DB954;
    --accent-2:#12934a;
    --accent-warm:#b98b3f;
    --accent-coral:#c96a52;
    --accent-purple:#7a63ad;
    --accent-blue:#4a7fa8;
    --line:rgba(45,31,61,.12);
    --line-strong:rgba(45,31,61,.22);
    --glass:rgba(45,31,61,.04);
    --glass-strong:rgba(45,31,61,.07);
  }

  .rv{opacity:1 !important;transform:none !important;transition:none !important}

  body.lyra-home{
    background:linear-gradient(180deg,var(--w2-bg0) 0%,var(--w2-bg1) 55%,var(--w2-bg2) 100%) !important;
    background-attachment:fixed !important;
    color:var(--w2-ink);
    font-family:var(--w2-display);
  }
  body.lyra-home .blobs,
  body.lyra-home .grain,
  body.lyra-home #particles{display:none !important}

  body.lyra-home :focus-visible{outline:2px solid var(--w2-green-ink);outline-offset:3px;border-radius:4px}

  /* 1 · STICKY NAV (v2 additive element, homepage only) */
  .lyra-nav{
    display:flex;align-items:center;justify-content:space-between;gap:32px;
    position:sticky;top:0;z-index:120;
    padding:15px var(--w2-gutter);
    background:rgba(250,247,242,.9);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    backdrop-filter:blur(14px) saturate(1.3);
    border-bottom:1px solid var(--w2-hair);
  }
  .lyra-nav .ln-brand{
    display:flex;align-items:center;gap:10px;text-decoration:none;
    color:var(--w2-ink);font-family:var(--w2-display);font-weight:900;
    font-size:.94rem;letter-spacing:.1em;text-transform:uppercase;
  }
  .lyra-nav .ln-brand svg{width:26px;height:26px;display:block}
  .lyra-nav .ln-links{display:flex;align-items:center;gap:30px}
  .lyra-nav .ln-links a{
    color:var(--w2-mut);text-decoration:none;
    font-family:var(--w2-display);font-weight:700;font-size:.87rem;letter-spacing:.02em;
  }
  .lyra-nav .ln-cta{
    color:var(--w2-green-dark);text-decoration:none;background:var(--w2-green);
    font-family:var(--w2-display);font-weight:800;font-size:.87rem;letter-spacing:.03em;
    padding:11px 22px;border-radius:999px;white-space:nowrap;
    box-shadow:0 10px 26px -12px rgba(29,185,84,.6);
  }
  .lyra-nav .ln-cta:active{transform:translateY(1px)}

  /* 2 · THE CANVAS — one warm paper sheet, hairline rhythm */
  body.lyra-home .wrap{
    max-width:1170px !important;margin:0 auto;
    padding:56px 48px 90px !important;
    display:grid;
    grid-template-columns:1.06fr .94fr;
    column-gap:56px;
  }
  body.lyra-home .wrap > *{grid-column:1 / -1;min-width:0}

  /* top module: hero left, stats panel right, CTA under hero */
  body.lyra-home .hero{
    grid-column:1;grid-row:1;
    display:flex;flex-direction:column;align-items:flex-start;gap:22px;
    text-align:left;padding:26px 0 8px;margin:0;
  }
  body.lyra-home .cta-primary{grid-column:1;grid-row:2;justify-self:start;align-self:start}
  body.lyra-home .stats{grid-column:2;grid-row:1 / 3;align-self:stretch}
  body.lyra-home .va-about{grid-column:1 / -1;grid-row:3}
  body.lyra-home .genre-strip{grid-column:1 / -1;grid-row:4}

  body.lyra-home .hero-mark{
    width:64px;height:64px;margin:0;transform:none;animation:none;
    background:var(--w2-card) !important;
    border:1px solid var(--w2-hair);border-radius:18px;
    box-shadow:0 10px 26px -12px rgba(29,185,84,.4) !important;
    display:flex;align-items:center;justify-content:center;
  }
  body.lyra-home .hero-mark::after,body.lyra-home .hero-mark::before{content:none}
  body.lyra-home .hero-mark svg{width:44px;height:44px;filter:none}
  body.lyra-home .hero h1{
    margin:0;
    font-family:var(--w2-display);font-weight:900;
    font-size:clamp(3.6rem,5.2vw,5rem);line-height:.97;letter-spacing:-.012em;
    color:var(--w2-ink);text-wrap:balance;
    background:none;-webkit-background-clip:initial;background-clip:initial;
    -webkit-text-fill-color:currentColor;text-shadow:none;
  }
  body.lyra-home .hero h1 .hl{
    background:linear-gradient(135deg,#1DB954 0%,#0e7a3a 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  body.lyra-home .tagline{
    margin:0;font-family:var(--w2-display);font-weight:400;
    font-size:1.16rem;line-height:1.6;color:var(--w2-mut);max-width:40ch;
  }
  body.lyra-home .hero-pills{margin:2px 0 0;gap:8px;flex-wrap:nowrap;justify-content:flex-start}
  body.lyra-home .pill{
    font-family:var(--w2-mono);font-size:.58rem;letter-spacing:.12em;
    color:var(--w2-mut);background:transparent;
    border:1px solid rgba(45,31,61,.18);
    padding:6px 12px;white-space:nowrap;
  }
  body.lyra-home .pill.live{
    color:var(--w2-green-ink);border-color:var(--w2-hair-green);
    background:rgba(29,185,84,.08);
  }

  /* stats panel — the proof card (shadow-only, no generic border tell) */
  body.lyra-home .stats{
    display:flex;flex-direction:column;justify-content:center;gap:26px;
    background:var(--w2-card);
    border:none;border-radius:24px;
    padding:38px 40px;margin:0;
    box-shadow:0 34px 80px -42px rgba(45,31,61,.4),0 12px 34px -22px rgba(29,185,84,.25);
    transition:none;
  }
  body.lyra-home .stats-grid{
    display:flex;flex-direction:column;gap:22px;margin:0;
  }
  body.lyra-home .stat-num{
    font-family:var(--w2-display);font-weight:900;font-size:2.5rem;line-height:1;
    color:var(--w2-ink);font-variant-numeric:tabular-nums;
    background:none;-webkit-background-clip:initial;background-clip:initial;
    -webkit-text-fill-color:currentColor;
  }
  body.lyra-home .stat-label{
    font-family:var(--w2-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--w2-soft);margin-top:6px;
  }
  body.lyra-home .stats-foot{
    border-top:1px solid var(--w2-hair);padding-top:16px;margin:0;
    font-family:var(--w2-display);font-size:.84rem;line-height:1.6;color:var(--w2-mut);
    letter-spacing:0;text-transform:none;
  }

  /* primary CTA — Spotify-green, ink text (AA) */
  body.lyra-home .cta-primary{
    background:var(--w2-green);color:var(--w2-green-dark);
    border:none;border-radius:999px;
    padding:18px 30px;margin:6px 0 0;
    font-family:var(--w2-display);font-weight:800;font-size:1.04rem;
    max-width:none;width:auto;display:inline-flex;gap:14px;align-items:center;
    box-shadow:0 16px 36px -16px rgba(29,185,84,.65);
  }
  body.lyra-home .cta-primary::after{content:none}
  body.lyra-home .cta-primary .cta-text{white-space:nowrap;flex:none}
  body.lyra-home .cta-primary .cta-sub{color:rgba(11,40,24,.72);white-space:nowrap}
  body.lyra-home .cta-primary .arrow{color:var(--w2-green-dark)}
  body.lyra-home .cta-primary:active{transform:translateY(1px)}

  /* lead prose + vinyl still-life right */
  body.lyra-home .va-about{
    margin:72px 0 0;padding:0;max-width:none;
    background:transparent;border:none;box-shadow:none;
    display:grid;grid-template-columns:1.2fr .8fr;column-gap:72px;align-items:start;
  }
  body.lyra-home .va-about > p{grid-column:1;max-width:62ch}
  body.lyra-home .va-about .lyra-about-pic{
    display:block;grid-column:2;grid-row:1 / span 3;align-self:center;
  }
  body.lyra-home .va-about .lyra-about-img{
    display:block;width:100%;max-width:420px;justify-self:end;margin-left:auto;
    border-radius:20px;
    box-shadow:0 34px 76px -42px rgba(45,31,61,.4),0 12px 34px -22px rgba(29,185,84,.3);
  }
  body.lyra-home .va-about p{font-size:1.05rem;line-height:1.75;color:var(--w2-mut)}
  body.lyra-home .va-about strong{color:var(--w2-ink);font-weight:700}
  body.lyra-home .va-about a{color:var(--w2-green-ink);border-bottom:1px solid rgba(14,122,58,.35)}
  body.lyra-home .genre-strip{margin:26px 0 0;gap:8px;justify-content:flex-start}
  body.lyra-home .genre-tag{
    font-family:var(--w2-mono);font-size:.62rem;letter-spacing:.14em;
    color:var(--w2-mut);background:transparent;
    border:1px solid rgba(45,31,61,.18);
  }

  /* 3 · SECTION HEADLINES — display type + hairline top */
  body.lyra-home .section-label{
    display:block;
    font-family:var(--w2-display);font-weight:900;
    font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.06;letter-spacing:-.01em;
    text-transform:none;color:var(--w2-ink);
    margin:96px 0 34px;padding-top:18px;position:relative;
    text-wrap:balance;
  }
  body.lyra-home .section-label::before{
    content:"";position:absolute;top:0;left:0;width:46px;height:4px;
    background:var(--w2-green);flex:none;
  }
  body.lyra-home .section-label::after{content:none}

  /* 4 · FEATURED PLAYLISTS — hairline table rows (accordion kept) */
  body.lyra-home .playlist{
    background:transparent;border:none;border-radius:0;
    border-bottom:1px solid var(--w2-hair);
    margin:0;
  }
  body.lyra-home .playlist:first-of-type{border-top:1px solid var(--w2-hair)}
  body.lyra-home .pl-head{padding:22px 6px;gap:20px;background:transparent}
  body.lyra-home .pl-head:active,body.lyra-home .card:active{transform:translateY(1px)}
  body.lyra-home .pl-cover{width:56px;height:56px;border-radius:12px;overflow:hidden;flex:none}
  body.lyra-home .pl-cover img{width:56px;height:56px}
  body.lyra-home .pl-genre{
    font-family:var(--w2-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--w2-green-ink);
  }
  body.lyra-home .pl-title{
    font-family:var(--w2-display);font-weight:700;font-size:1.22rem;color:var(--w2-ink);
  }
  body.lyra-home .pl-chevron{color:var(--w2-green-ink)}
  body.lyra-home .pl-body-inner{padding:0 6px 22px}
  body.lyra-home .pl-spotify{
    background:var(--w2-green);color:var(--w2-green-dark);font-weight:700;
    border-radius:999px;border:none;
  }
  body.lyra-home .pl-spotify svg{fill:var(--w2-green-dark)}
  body.lyra-home .pl-mini{
    background:var(--w2-card);border:1px solid var(--w2-hair);color:var(--w2-mut);
  }
  body.lyra-home .pl-mirrors-label{color:var(--w2-soft)}

  /* 5 · MEDIA — mix + previews in white panels */
  body.lyra-home .embed-wrap{
    background:var(--w2-card);border:1px solid var(--w2-hair);border-radius:20px;
    overflow:hidden;box-shadow:0 24px 60px -38px rgba(45,31,61,.35);
  }
  body.lyra-home .embed-wrap iframe{display:block;width:100%;height:100%}
  body.lyra-home .embed-wrap.spotify{grid-column:auto;margin:0 0 24px}
  body.lyra-home .embed-placeholder{color:var(--w2-soft);background:var(--w2-bg1)}

  /* 6 · THE CATALOG — hairline index rows */
  body.lyra-home .card{
    background:transparent;border:none;border-radius:0;
    border-top:1px solid var(--w2-hair);
    padding:24px 6px;margin:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;transition:none;
  }
  body.lyra-home .card:last-of-type{border-bottom:1px solid var(--w2-hair)}
  body.lyra-home .card-icon{background:rgba(29,185,84,.1);border:1px solid var(--w2-hair-green);border-radius:12px}
  body.lyra-home .card-title{color:var(--w2-ink);font-weight:700;font-size:1.12rem}
  body.lyra-home .card-sub{
    font-family:var(--w2-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--w2-soft);
  }
  body.lyra-home .card-arrow{color:var(--w2-green-ink)}

  /* 7 · SOCIALS — quiet chip row */
  body.lyra-home .socials{margin:44px 0 0;gap:12px}
  body.lyra-home .socials a{
    width:44px;height:44px;
    background:var(--w2-card);border:1px solid var(--w2-hair);
    color:var(--w2-mut);border-radius:50%;
    transition:none;
  }

  /* 8 · EXPLORE — pre-footer link block */
  body.lyra-home .explore-nav{
    margin:96px 0 0;padding:44px 0 0;
    border-top:1px solid var(--w2-hair);
    background:transparent;border-radius:0;
  }
  body.lyra-home .explore-nav h3{
    font-family:var(--w2-mono);font-size:.66rem;font-weight:700;
    letter-spacing:.26em;text-transform:uppercase;color:var(--w2-green-ink);
  }
  body.lyra-home .explore-nav-links a,
  body.lyra-home .explore-latest a{
    color:var(--w2-mut);border-color:var(--w2-hair);
  }

  /* 9 · FOOTER + journal pill */
  body.lyra-home footer{
    margin-top:64px;padding:36px 0 0;
    border-top:1px solid var(--w2-hair);
    color:var(--w2-soft);
  }
  body.lyra-home footer a{color:var(--w2-green-ink)}
  body.lyra-home .va-journal-pill{
    top:auto;bottom:26px;right:26px;
    background:var(--w2-card);border:1px solid var(--w2-hair);
    color:var(--w2-ink);
    box-shadow:0 14px 34px -16px rgba(45,31,61,.4);
  }

  /* ------------------------------------------------------------
     SUB-PAGES (journal hubs + articles) — structural polish on
     their own cream skins, green accents. Adapted from v1.
     ------------------------------------------------------------ */
  body.lyra-hub .page,body.lyra-article .page{max-width:1080px !important;
    padding-left:48px;padding-right:48px}
  body.lyra-article .page{max-width:880px !important}
  body.lyra-article .page p{max-width:70ch}
  body.lyra-article .page{font-size:1.075rem;line-height:1.75}

  body.lyra-hub h1,body.lyra-article h1{
    font-family:var(--w2-display);font-weight:900;letter-spacing:-.015em;
    font-size:clamp(2.6rem,4.6vw,4rem) !important;line-height:1.04 !important;
    text-wrap:balance;
  }
  body.lyra-hub h2,body.lyra-article h2{
    font-family:var(--w2-display);font-weight:900;
    font-size:clamp(1.6rem,2.4vw,2.2rem) !important;line-height:1.12 !important;
    padding-top:14px;position:relative;
  }
  body.lyra-hub h2::before,body.lyra-article h2::before{
    content:"";position:absolute;top:0;left:0;width:46px;height:4px;
    background:var(--w2-green);
  }
  body.lyra-hub h3,body.lyra-article h3{
    font-family:var(--w2-display);font-weight:700;
    font-size:clamp(1.15rem,1.6vw,1.42rem) !important;line-height:1.25;
  }

  body.lyra-hub .section-label,body.lyra-article .section-label,
  body.lyra-hub .kicker,body.lyra-article .kicker,
  body.lyra-hub .eyebrow,body.lyra-article .eyebrow{
    font-family:var(--w2-mono);letter-spacing:.22em;text-transform:uppercase;
    font-size:.68rem;color:var(--w2-green-ink);
  }

  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 .hub-card,body.lyra-hub .subgenre-card,.benefit-card{
    border:1px solid var(--w2-hair) !important;border-radius:18px;
    background:rgba(255,255,255,.72);
  }

  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%}

  .topbar{padding-top:22px;padding-bottom:18px}
  .topbar a{font-family:var(--w2-mono);letter-spacing:.18em;font-size:.72rem}

  footer,.related-foot{margin-top:64px}

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

  /* ------------------------------------------------------------
     HOVER LANGUAGE — pointer devices only (U7)
     ------------------------------------------------------------ */
  @media (hover:hover){
    .lyra-nav .ln-links a:hover{color:var(--w2-green-ink)}
    .lyra-nav .ln-cta:hover{transform:translateY(-1px);
      box-shadow:0 14px 30px -12px rgba(29,185,84,.75);
      transition:transform .2s ease,box-shadow .2s ease}
    body.lyra-home .cta-primary:hover{transform:translateY(-2px);
      box-shadow:0 20px 42px -16px rgba(29,185,84,.75);
      transition:transform .22s ease,box-shadow .22s ease}
    body.lyra-home .stats:hover{border-color:var(--w2-green);
      box-shadow:0 34px 76px -40px rgba(29,185,84,.5);
      transition:border-color .25s ease,box-shadow .25s ease;transform:none}
    body.lyra-home .pl-head:hover{background:rgba(29,185,84,.06);
      transition:background .2s ease}
    body.lyra-home .pl-head:hover .pl-title{color:var(--w2-green-ink);
      transition:color .2s ease}
    body.lyra-home .card:hover{background:rgba(29,185,84,.06);
      border-color:var(--w2-hair) !important;transform:none;box-shadow:none;
      transition:background .2s ease}
    body.lyra-home .card:hover .card-title{color:var(--w2-green-ink);
      transition:color .2s ease}
    body.lyra-home .socials a:hover{color:var(--w2-green-ink);border-color:var(--w2-green);
      transform:translateY(-2px);transition:all .22s ease}
    body.lyra-home .va-about a:hover,body.lyra-home footer a:hover{color:var(--w2-ink)}
    body.lyra-home .explore-nav-links a:hover,
    body.lyra-home .explore-latest a:hover{color:var(--w2-green-ink)}
    body.lyra-home .va-journal-pill:hover{border-color:var(--w2-green);
      color:var(--w2-green-ink);transition:border-color .2s ease,color .2s ease}
    body.lyra-hub .hub-card:hover,body.lyra-hub .subgenre-card:hover{
      transform:translateY(-4px);border-color:var(--w2-green) !important;
      box-shadow:0 22px 44px -18px rgba(29,185,84,.35);
      transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
    .topbar a:hover{color:var(--w2-green-ink)}
    body.lyra-article .inline-img img:hover,
    body.lyra-article figure img:hover{transform:scale(1.012);
      transition:transform .4s ease}
  }
}

/* Reduced motion — taste-skill 6.B (mandatory): the v2 layer goes fully
   static for users who ask for less motion. Desktop-only rules anyway. */
@media (min-width:960px) and (prefers-reduced-motion:reduce){
  .lyra-nav .ln-cta,body.lyra-home .cta-primary,body.lyra-home .stats,
  body.lyra-home .pl-head,body.lyra-home .card,body.lyra-home .socials a,
  body.lyra-hub .hub-card,body.lyra-hub .subgenre-card,
  body.lyra-article .inline-img img,body.lyra-article figure img{
    transition:none !important;transform:none !important;animation:none !important;
  }
}

/* Mobile gets ONLY the TL;DR component styling (light green, matches
   the cream journal pages where these boxes live; no layout changes) */
@media (max-width:959.9px){
  .lyra-tldr,.short-answer{
    border:1px solid rgba(29,185,84,.35);border-left:4px solid #1DB954;
    border-radius:12px;padding:14px 16px;margin:18px 0;
    background:rgba(29,185,84,.07);line-height:1.55;
  }
  .lyra-tldr b:first-child{
    font-family:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
    letter-spacing:.2em;text-transform:uppercase;
    font-size:.66rem;color:#0e7a3a;display:block;margin-bottom:6px;
  }
}