/* ============================================================
   DHT MAGAZINE LAYER v2 — 2026-07-04 (Lyra)
   Light "Bangkok sunset" desktop redesign. bridgemind.ai grammar
   (nav / committed hero / section rhythm / hairlines) + wonderfruit
   event-brand warmth, tuned by taste-skill anti-slop rules
   (1 eyebrow max, layout-family diversity, AA CTAs, one accent).
   Palette = DHT's own sunset: cream base (matches sub-pages),
   salmon-pink accent, lavender only inside the brand gradient.
   Mobile (<960px) experience untouched: the only sub-960 rules are
   .lyra-tldr styling + hiding v2-only elements (new, desktop-only).
   All hover rules gated in @media (hover:hover) — U7.
   Replaces dht-mag-v1.css via the <link id="lyra-mag-layer"> swap;
   v1 file left byte-intact (immutable cache rule).
   ============================================================ */

@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/fonts/outfit-300.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/outfit-400.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/outfit-700.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:900;font-display:swap;
  src:url('/assets/fonts/outfit-900.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/space-mono-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/space-mono-700.woff2') format('woff2')}

:root{
  --v2-bg0:#faf7f2;
  --v2-bg1:#f5ede0;
  --v2-bg2:#efe6d8;
  --v2-card:#ffffff;
  --v2-ink:#2d1f3d;
  --v2-mut:#655672;
  --v2-soft:#93839f;
  --v2-rose:#e08871;
  --v2-rose-ink:#a84636;
  --v2-hair:rgba(45,31,61,.12);
  --v2-hair-rose:rgba(224,136,113,.38);
  --v2-grad:linear-gradient(135deg,#c9604a 0%,#b05a76 55%,#7a63ad 100%);
  --v2-grad-cta:linear-gradient(135deg,#b6503c 0%,#96486b 55%,#6b549f 100%);
  --v2-display:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --v2-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --v2-gutter:max(48px,calc(50vw - 585px));
}

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

/* ------------------------------------------------------------
   DESKTOP LAYER
   ------------------------------------------------------------ */
@media (min-width:960px){

  html{scroll-padding-top:96px}

  /* 0 · Kill the reveal-race; keep the grain, lose the dark props */
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
  .card-spotify{animation:none !important}

  body.lyra-home{
    background:linear-gradient(180deg,var(--v2-bg0) 0%,var(--v2-bg1) 55%,var(--v2-bg2) 100%) !important;
    background-attachment:fixed !important;
    color:var(--v2-ink);
    font-family:var(--v2-display);
  }
  body.lyra-home .ambient,
  body.lyra-home .orb,
  body.lyra-home #particles{display:none !important}
  body.lyra-home .noise{opacity:.05;mix-blend-mode:multiply}

  body.lyra-home :focus-visible{outline:2px solid var(--v2-rose-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(--v2-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(--v2-hair);
  }
  .lyra-nav .ln-brand{
    display:flex;align-items:center;gap:12px;text-decoration:none;
    color:var(--v2-ink);font-family:var(--v2-display);font-weight:900;
    font-size:.94rem;letter-spacing:.1em;text-transform:uppercase;
  }
  .lyra-nav .ln-brand img{width:30px;height:30px;border-radius:50%;display:block}
  .lyra-nav .ln-links{display:flex;align-items:center;gap:30px}
  .lyra-nav .ln-links a{
    color:var(--v2-mut);text-decoration:none;
    font-family:var(--v2-display);font-weight:700;font-size:.87rem;letter-spacing:.02em;
  }
  .lyra-nav .ln-cta{
    color:#fff;text-decoration:none;background:var(--v2-grad-cta);
    font-family:var(--v2-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(182,80,60,.55);
  }
  .lyra-nav .ln-cta:active{transform:translateY(1px)}

  /* 2 · THE CANVAS — free the page, sections become full-bleed bands */
  body.lyra-home .page{
    max-width:none !important;
    padding:0 !important;
    display:flex;flex-direction:column;
  }
  body.lyra-home .page > *{width:100%;margin:0}

  /* band order (desktop recomposition, DOM untouched) */
  body.lyra-home .hero{order:1}
  body.lyra-home .identity-bar{order:2}
  body.lyra-home section[aria-label="Upcoming events"]{order:3}
  body.lyra-home nav[aria-label="Quick links"]{order:4}
  body.lyra-home section[aria-label="Bangkok deep house guides"]{order:5}
  body.lyra-home section[aria-label="Event formats"]{order:6}
  body.lyra-home section[aria-label="Event highlights"]{order:7}
  body.lyra-home section[aria-label="Curated playlists"]{order:8}
  body.lyra-home article.story{order:9}
  body.lyra-home section.story[aria-label="Questions people ask"]{order:10}
  body.lyra-home footer.foot{order:11}

  body.lyra-home .page > section,
  body.lyra-home .page > nav[aria-label="Quick links"],
  body.lyra-home .page > article.story{
    padding:78px var(--v2-gutter) 92px;
  }
  /* white bands */
  body.lyra-home section[aria-label="Upcoming events"],
  body.lyra-home section[aria-label="Bangkok deep house guides"],
  body.lyra-home section[aria-label="Event highlights"],
  body.lyra-home section.story[aria-label="Questions people ask"]{
    background:var(--v2-card);
    border-top:1px solid var(--v2-hair);
    border-bottom:1px solid var(--v2-hair);
  }
  body.lyra-home article.story{border-top:1px solid var(--v2-hair)}

  /* 3 · SECTION HEADLINES — real headlines, not label soup
        (taste-skill: max 1 eyebrow per 3 sections; ours lives on
        "Upcoming". Everything else speaks in display type.) */
  body.lyra-home h2.sec{
    font-family:var(--v2-display);font-weight:900;
    font-size:clamp(1.8rem,2.6vw,2.5rem);line-height:1.06;letter-spacing:-.01em;
    text-transform:none;color:var(--v2-ink);
    margin:0 0 36px;padding-top:18px;position:relative;
    text-wrap:balance;
  }
  body.lyra-home h2.sec::before{
    content:"";position:absolute;top:0;left:0;width:46px;height:4px;
    background:var(--v2-rose);
  }
  /* the one eyebrow: UPCOMING */
  body.lyra-home section[aria-label="Upcoming events"] h2.sec{
    display:flex;align-items:center;gap:18px;
    font-family:var(--v2-mono);font-size:.74rem;font-weight:700;
    letter-spacing:.32em;text-transform:uppercase;
    color:var(--v2-rose-ink);margin:0 0 34px;padding-top:0;
  }
  body.lyra-home section[aria-label="Upcoming events"] h2.sec::before{content:none}
  body.lyra-home section[aria-label="Upcoming events"] h2.sec::after{
    content:"";flex:1;height:1px;background:var(--v2-hair);
  }

  /* 4 · HERO — committed split hero, sunset photo as the panel */
  body.lyra-home .hero{
    display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center;
    padding:60px var(--v2-gutter) 76px;
    border-radius:0;overflow:visible;box-shadow:none;margin:0;
    background:transparent;
  }
  body.lyra-home .hero::after{content:none}
  body.lyra-home .hero img.hero-bg{
    grid-column:2;grid-row:1;
    width:100%;aspect-ratio:5/4.4;object-fit:cover;object-position:center;
    border-radius:24px;
    filter:saturate(1.06) brightness(1.02);
    box-shadow:0 42px 90px -42px rgba(122,99,173,.5),0 24px 54px -30px rgba(201,96,74,.42);
    transition:none;
  }
  body.lyra-home .hero-ov{
    position:static;grid-column:1;grid-row:1;
    display:flex;flex-direction:column;align-items:flex-start;gap:22px;
    padding:0;text-align:left;color:var(--v2-ink);
  }
  body.lyra-home .hero-profile{
    order:-3;width:46px;height:46px;margin:0;
    border:2px solid #fff;
    box-shadow:0 8px 22px -8px rgba(45,31,61,.35);
  }
  body.lyra-home .hero-ov h1{
    order:-2;margin:0;
    font-family:var(--v2-display);font-weight:900;
    font-size:clamp(3.6rem,5.4vw,5.2rem);line-height:.97;letter-spacing:-.012em;
    background:none;-webkit-background-clip:initial;background-clip:initial;
    -webkit-text-fill-color:currentColor;color:var(--v2-ink);
    text-shadow:none;text-wrap:balance;
  }
  body.lyra-home .hero-ov h1 .hl{
    background:var(--v2-grad);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  body.lyra-home .hero-ov .sub{
    order:-1;margin:0;
    font-family:var(--v2-display);font-weight:400;
    font-size:1.14rem;line-height:1.6;letter-spacing:.01em;
    text-transform:none;color:var(--v2-mut);max-width:38ch;
  }
  .lyra-hero-cta{display:flex;align-items:center;gap:14px;margin-top:4px}
  .lyra-hero-cta a{text-decoration:none;border-radius:999px;font-family:var(--v2-display)}
  .lyra-hero-cta a:active{transform:translateY(1px)}
  .lyra-hero-cta .lhc-primary{
    background:var(--v2-grad-cta);color:#fff;font-weight:800;font-size:1.02rem;
    padding:16px 30px;letter-spacing:.01em;
    box-shadow:0 16px 36px -16px rgba(182,80,60,.6);
  }
  .lyra-hero-cta .lhc-ghost{
    border:1.5px solid rgba(45,31,61,.28);color:var(--v2-ink);
    font-weight:700;font-size:1rem;padding:15px 26px;background:rgba(255,255,255,.55);
  }
  body.lyra-home .hero-socials{margin:2px 0 0;justify-content:flex-start}
  body.lyra-home .hero-socials a{
    width:40px;height:40px;
    background:var(--v2-card);border:1px solid var(--v2-hair);
    color:var(--v2-mut);backdrop-filter:none;-webkit-backdrop-filter:none;
    transition:none;
  }
  /* explore chips float on the photo's lower-right corner */
  body.lyra-home .hero-blog-pill,
  body.lyra-home .hero-guides-pill,
  body.lyra-home .hero-dj-pill{
    top:auto;left:auto;z-index:3;
    font-family:var(--v2-mono);font-size:.56rem;letter-spacing:.16em;
    color:var(--v2-ink);
    background:rgba(250,247,242,.85);border:1px solid rgba(45,31,61,.13);
    padding:8px 14px;border-radius:999px;backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);transition:none;
  }
  body.lyra-home .hero-dj-pill{right:calc(var(--v2-gutter) + 22px);bottom:98px}
  body.lyra-home .hero-blog-pill{right:calc(var(--v2-gutter) + 22px);bottom:140px}
  body.lyra-home .hero-guides-pill{right:calc(var(--v2-gutter) + 22px);bottom:182px}

  /* 5 · STATS RIBBON (identity bar reborn) */
  body.lyra-home .identity-bar{
    display:flex;align-items:center;justify-content:space-between;gap:36px;
    margin:0;padding:26px var(--v2-gutter);
    background:var(--v2-card);
    border:none;border-top:1px solid var(--v2-hair);border-bottom:1px solid var(--v2-hair);
    border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:none;opacity:1;animation:none;text-align:left;
    overflow:visible;
  }
  body.lyra-home .identity-bar::before{content:none}
  body.lyra-home .identity-edge{display:none}
  body.lyra-home .reach-row{order:1;margin:0;gap:44px;justify-content:flex-start}
  body.lyra-home .reach-val{
    font-family:var(--v2-display);font-weight:900;font-size:1.7rem;
    font-variant-numeric:tabular-nums;
    background:none;-webkit-background-clip:initial;background-clip:initial;
    -webkit-text-fill-color:currentColor;color:var(--v2-ink);
  }
  body.lyra-home .reach-lbl{
    font-family:var(--v2-mono);font-size:.58rem;letter-spacing:.22em;
    color:var(--v2-soft);margin-top:4px;
  }
  body.lyra-home .reach-sep{background:var(--v2-hair)}
  body.lyra-home .genre-row{order:2;justify-content:flex-end;gap:8px;padding:0;flex-wrap:nowrap}
  body.lyra-home .genre-tag{
    font-family:var(--v2-mono);font-size:.6rem;letter-spacing:.14em;
    color:var(--v2-mut);background:transparent;
    border:1px solid rgba(45,31,61,.16);padding:6px 13px;
    white-space:nowrap;transition:none;
  }
  body.lyra-home .genre-dot{display:none}

  /* 6 · UPCOMING — the featured block (order 3, white band) */
  body.lyra-home section[aria-label="Upcoming events"] .evt-list{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;
  }
  body.lyra-home section[aria-label="Upcoming events"] .evt{
    background:var(--v2-bg0);
    border:1px solid var(--v2-hair) !important;
    border-radius:18px;padding:26px 26px 24px;margin:0;
    box-shadow:none !important;display:flex;flex-direction:column;gap:10px;
  }
  /* pin card CTAs to a shared baseline (taste-skill: bottom-aligned buttons) */
  body.lyra-home section[aria-label="Upcoming events"] .evt:not(:nth-child(2)) > div:last-child{margin-top:auto}
  body.lyra-home section[aria-label="Event highlights"] .evt > .evt-djs:last-child,
  body.lyra-home section[aria-label="Event highlights"] .evt > div:last-child{margin-top:auto}
  /* flagship = 2nd card (July 18 pool party): full-width split w/ banner,
     promoted to row 1; the dated cards form clean rows below
     (explicit placement for all cards — auto-flow would seat card 1 first) */
  body.lyra-home section[aria-label="Upcoming events"] .evt:nth-child(1){grid-row:2;grid-column:1}
  body.lyra-home section[aria-label="Upcoming events"] .evt:nth-child(3){grid-row:2;grid-column:2}
  body.lyra-home section[aria-label="Upcoming events"] .evt:nth-child(4){grid-row:2;grid-column:3}
  body.lyra-home section[aria-label="Upcoming events"] .evt:nth-child(5){grid-row:3;grid-column:1}
  body.lyra-home section[aria-label="Upcoming events"] .evt:nth-child(2){
    grid-column:1 / -1;grid-row:1;
    display:grid;grid-template-columns:1.08fr .92fr;gap:44px;
    align-items:start;align-content:center;
    padding:40px 44px;
    background:linear-gradient(135deg,rgba(224,136,113,.09),rgba(153,132,196,.1)),var(--v2-card);
    border:1px solid var(--v2-hair-rose) !important;
    border-radius:24px;
  }
  body.lyra-home section[aria-label="Upcoming events"] .evt:nth-child(2) > *{grid-column:1}
  body.lyra-home section[aria-label="Upcoming events"] .evt:nth-child(2) .lyra-evt-pic{
    display:block;grid-column:2;grid-row:1 / span 6;
    width:100%;height:100%;min-height:300px;
  }
  body.lyra-home section[aria-label="Upcoming events"] .evt:nth-child(2) .lyra-evt-banner{
    display:block;width:100%;height:100%;min-height:300px;object-fit:cover;
    border-radius:16px;
    box-shadow:0 26px 60px -28px rgba(45,31,61,.4);
  }
  body.lyra-home section[aria-label="Upcoming events"] .evt:nth-child(2) .evt-name{
    font-size:clamp(1.8rem,2.6vw,2.5rem);line-height:1.03;text-wrap:balance;
  }
  body.lyra-home .evt-top{align-items:center;gap:14px}
  body.lyra-home .evt-name{
    font-family:var(--v2-display);font-weight:900;font-size:1.14rem;line-height:1.2;
    color:var(--v2-ink);
  }
  body.lyra-home .evt-badge{
    font-family:var(--v2-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--v2-rose-ink);
    background:rgba(224,136,113,.14) !important;
    border:1px solid rgba(224,136,113,.35);border-radius:999px;padding:5px 12px;
  }
  body.lyra-home .evt-meta{
    font-family:var(--v2-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--v2-soft);
  }
  body.lyra-home .evt-desc{font-size:.95rem;line-height:1.65;color:var(--v2-mut)}
  body.lyra-home .evt-desc strong{color:var(--v2-ink)}
  body.lyra-home .evt-desc a{color:var(--v2-rose-ink) !important}
  body.lyra-home .evt-djs{margin-top:2px}
  body.lyra-home .evt-dj{
    font-family:var(--v2-mono);font-size:.62rem;letter-spacing:.1em;
    color:var(--v2-mut);background:transparent;
    border:1px solid rgba(45,31,61,.18);border-radius:999px;padding:5px 12px;
    text-decoration:none;
  }
  /* ticket + guestlist links (inline-styled in markup → assertive overrides) */
  body.lyra-home .evt a[href*="ticketmelon"]{
    display:inline-block;
    background:var(--v2-grad-cta) !important;
    color:#fff !important;border:none !important;
    font-family:var(--v2-display) !important;font-weight:800 !important;
    font-size:.92rem !important;letter-spacing:.04em;
    padding:13px 26px !important;border-radius:999px !important;
    box-shadow:0 14px 30px -14px rgba(182,80,60,.6);
  }
  body.lyra-home .evt a[href*="ticketmelon"]:active{transform:translateY(1px)}
  body.lyra-home .evt a[href*="instagram"]:not(.evt-dj){
    color:var(--v2-rose-ink) !important;
    border-bottom-color:rgba(168,70,54,.4) !important;
    font-size:.85rem !important;
  }
  body.lyra-home a.evt-dj{
    font-family:var(--v2-mono);font-size:.62rem;letter-spacing:.1em;
    color:var(--v2-mut);
  }

  /* 7 · QUICK LINKS — "The Sound" asymmetric bento (cream band)
        taste-skill 9.C: no 3-equal-card rows → featured 2-col tile + 2+3 rhythm */
  body.lyra-home nav[aria-label="Quick links"]{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;
  }
  body.lyra-home nav[aria-label="Quick links"] h2.sec{grid-column:1 / -1;margin-bottom:18px}
  body.lyra-home .card-spotify{
    grid-column:span 2;
    background:linear-gradient(135deg,rgba(224,136,113,.12),rgba(153,132,196,.12)),var(--v2-card) !important;
    border-color:var(--v2-hair-rose) !important;
  }
  body.lyra-home #cal-btn ~ a.card[href^="mailto"],
  body.lyra-home a.card[data-track="booking_dht_inquiry"]{
    background:linear-gradient(180deg,rgba(224,136,113,.07),rgba(255,255,255,0)),var(--v2-card);
  }
  body.lyra-home .card{
    background:var(--v2-card);
    border:1px solid var(--v2-hair);border-radius:18px;
    padding:20px 22px;margin:0;
    color:var(--v2-ink);backdrop-filter:none;-webkit-backdrop-filter:none;
    transition:none;
  }
  body.lyra-home .card:active{transform:translateY(1px)}
  body.lyra-home .card::before{content:none}
  body.lyra-home .card .lb-t{color:var(--v2-ink);font-weight:700;font-size:.95rem}
  body.lyra-home .card .lb-s{color:var(--v2-soft);font-size:.78rem}
  body.lyra-home .card .ar{color:var(--v2-rose)}
  body.lyra-home .music-menu,body.lyra-home .cal-menu{grid-column:1 / -1}
  body.lyra-home .music-menu a,body.lyra-home .cal-menu a{color:var(--v2-ink)}
  body.lyra-home .music-menu.open,body.lyra-home .cal-menu.open{
    background:var(--v2-card);border:1px solid var(--v2-hair);border-radius:16px;
  }

  /* 8 · BANGKOK GUIDES — editorial index rows, no cards (white band) */
  body.lyra-home section[aria-label="Bangkok deep house guides"] .card{
    background:transparent;border:none;border-radius:0;
    border-top:1px solid var(--v2-hair);
    padding:24px 10px;margin:0;
  }
  body.lyra-home section[aria-label="Bangkok deep house guides"] .card:last-of-type{
    border-bottom:1px solid var(--v2-hair);
  }
  body.lyra-home section[aria-label="Bangkok deep house guides"] .card .lb-t{
    font-size:1.16rem;font-weight:700;
  }
  body.lyra-home section[aria-label="Bangkok deep house guides"] .card .lb-s{
    font-size:.85rem;margin-top:2px;
  }
  body.lyra-home section[aria-label="Bangkok deep house guides"] .card .ic{
    border-radius:12px;
  }

  /* 9 · EVENT FORMATS — photo columns (cream band) */
  body.lyra-home .fmt-grid{
    display:grid !important;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;
  }
  body.lyra-home .fmt{
    background:transparent;border:none;border-radius:0;
    padding:0;margin:0;display:flex;flex-direction:column;gap:12px;
  }
  body.lyra-home .fmt .lyra-fmt-pic{display:block;margin:0 0 6px}
  body.lyra-home .fmt .lyra-fmt-img{
    display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
    border-radius:16px;
    box-shadow:0 18px 40px -22px rgba(45,31,61,.35);
  }
  body.lyra-home .fmt-em{font-size:1.5rem;line-height:1}
  body.lyra-home .fmt-t{
    font-family:var(--v2-display);font-weight:900;font-size:1.08rem;color:var(--v2-ink);
  }
  body.lyra-home .fmt-s{font-size:.86rem;line-height:1.62;color:var(--v2-mut)}

  /* 10 · EVENT HIGHLIGHTS — horizontal archive reel (white band) */
  body.lyra-home section[aria-label="Event highlights"] .evt-list{
    display:grid;grid-auto-flow:column;
    grid-auto-columns:minmax(360px,31%);
    gap:18px;margin:0;
    overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:16px;
    scrollbar-width:thin;scrollbar-color:var(--v2-rose) transparent;
  }
  body.lyra-home section[aria-label="Event highlights"] .evt{
    scroll-snap-align:start;
    background:var(--v2-bg0);border:1px solid var(--v2-hair);border-radius:18px;
    padding:24px;margin:0;display:flex;flex-direction:column;gap:9px;
  }
  body.lyra-home section[aria-label="Event highlights"] .evt-list::-webkit-scrollbar{height:6px}
  body.lyra-home section[aria-label="Event highlights"] .evt-list::-webkit-scrollbar-thumb{
    background:var(--v2-hair-rose);border-radius:999px;
  }
  body.lyra-home section[aria-label="Event highlights"] .evt-list::-webkit-scrollbar-track{
    background:transparent;
  }

  /* 11 · PLAYLISTS — two racks side by side (cream band) */
  body.lyra-home section[aria-label="Curated playlists"]{
    display:grid;grid-template-columns:1fr 1fr;gap:26px;
  }
  body.lyra-home section[aria-label="Curated playlists"] h2.sec{grid-column:1 / -1}
  body.lyra-home .playlist-section{
    background:var(--v2-card);border:1px solid var(--v2-hair);border-radius:20px;
    padding:26px;margin:0;
  }
  body.lyra-home .playlist-label{
    font-family:var(--v2-display);font-weight:900;font-size:1.3rem;color:var(--v2-ink);
  }
  body.lyra-home .playlist-sub{
    font-family:var(--v2-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--v2-soft);margin:6px 0 16px;
  }
  body.lyra-home .yt-link{color:var(--v2-rose-ink);margin-top:14px}

  /* 12 · STORY — the statement moment, dusk panel right (cream band) */
  body.lyra-home article.story{
    background:transparent;border-left:none;border-right:none;border-bottom:none;
    box-shadow:none;border-radius:0;max-width:none;
    display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:min-content 1fr;
    column-gap:72px;align-items:start;
  }
  body.lyra-home article.story::before{content:none}
  body.lyra-home article.story h2,
  body.lyra-home article.story [itemprop="articleBody"]{grid-column:1}
  body.lyra-home article.story .lyra-story-pic{
    display:block;grid-column:2;grid-row:1 / span 2;
    position:sticky;top:110px;
  }
  body.lyra-home article.story .lyra-story-img{
    display:block;width:100%;border-radius:24px;
    box-shadow:0 42px 90px -42px rgba(122,99,173,.5),0 24px 54px -30px rgba(201,96,74,.4);
  }
  body.lyra-home article.story h2{
    font-family:var(--v2-display);font-weight:900;
    font-size:clamp(2.3rem,3.6vw,3.4rem);line-height:1.04;letter-spacing:-.01em;
    color:var(--v2-ink);max-width:22ch;margin:0 0 28px;text-wrap:balance;
  }
  body.lyra-home article.story [itemprop="articleBody"]{max-width:68ch}
  body.lyra-home .story p{font-size:1.02rem;line-height:1.75;color:var(--v2-mut)}
  body.lyra-home .story strong{color:var(--v2-ink);font-weight:700}
  body.lyra-home .story a{
    color:var(--v2-rose-ink);border-bottom:1px solid rgba(168,70,54,.35);transition:none;
  }
  body.lyra-home .story h3{
    font-family:var(--v2-display);font-weight:700;font-size:1.2rem;color:var(--v2-ink);
    margin:26px 0 10px;
  }
  body.lyra-home .story details{margin-top:18px}
  body.lyra-home .story summary{
    font-family:var(--v2-mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--v2-rose-ink);cursor:pointer;
  }

  /* 13 · FAQ — hairline Q&A rows (white band) */
  body.lyra-home section.story[aria-label="Questions people ask"]{
    max-width:none;border-radius:0;box-shadow:none;border-left:none;border-right:none;
  }
  body.lyra-home section.story[aria-label="Questions people ask"] h2{
    font-family:var(--v2-display);font-weight:900;
    font-size:clamp(1.8rem,2.6vw,2.5rem);line-height:1.06;letter-spacing:-.01em;
    color:var(--v2-ink);margin:0 0 8px;max-width:none;padding-top:18px;position:relative;
  }
  body.lyra-home section.story[aria-label="Questions people ask"] h2::before{
    content:"";position:absolute;top:0;left:0;width:46px;height:4px;background:var(--v2-rose);
  }
  body.lyra-home section.story[aria-label="Questions people ask"]{
    display:grid;grid-template-columns:minmax(300px,.85fr) 1.65fr;
    column-gap:56px;row-gap:0;align-items:start;
  }
  body.lyra-home section.story[aria-label="Questions people ask"] h2{grid-column:1 / -1;margin-bottom:24px}
  body.lyra-home section.story[aria-label="Questions people ask"] h3{
    grid-column:1;
    border-top:1px solid var(--v2-hair);
    padding-top:26px;margin:0 0 26px;
    font-family:var(--v2-display);font-weight:700;font-size:1.14rem;line-height:1.3;color:var(--v2-ink);
  }
  body.lyra-home section.story[aria-label="Questions people ask"] p{
    grid-column:2;max-width:75ch;
    border-top:1px solid var(--v2-hair);
    padding-top:26px;margin:0 0 26px;
  }
  body.lyra-home section.story[aria-label="Questions people ask"] h3:first-of-type,
  body.lyra-home section.story[aria-label="Questions people ask"] p:first-of-type{
    border-top:none;padding-top:4px;
  }

  /* 14 · FOOTER */
  body.lyra-home footer.foot{
    padding:44px var(--v2-gutter) 58px;margin:0;
    border-top:1px solid var(--v2-hair);
    text-align:left;color:var(--v2-mut);font-size:.88rem;
  }
  body.lyra-home .foot-line{display:none}
  body.lyra-home footer.foot a{color:var(--v2-rose-ink)}

  /* ------------------------------------------------------------
     SUB-PAGES (hubs + articles) — structural polish on their own
     cream skins; backgrounds NOT flipped (Thai layer stays dark
     safely). Adapted from v1, sunset-family accents.
     ------------------------------------------------------------ */
  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(--v2-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(--v2-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(--v2-rose);
  }
  body.lyra-hub h3,body.lyra-article h3{
    font-family:var(--v2-display);font-weight:700;
    font-size:clamp(1.15rem,1.6vw,1.42rem) !important;line-height:1.25;
  }

  .section-label,.article-header .kicker,.eyebrow,.faq-num,.gc-meta{
    font-family:var(--v2-mono);letter-spacing:.24em;text-transform:uppercase;
    font-size:.68rem;color:var(--v2-rose-ink);
  }

  /* hub card runs → magazine grid (CSS-only, order kept) */
  body.lyra-hub .page{display:flex;flex-wrap:wrap;gap:26px;align-content:flex-start}
  body.lyra-hub .page > *{flex:1 1 100%;min-width:0}
  body.lyra-hub .page > .guide-card,
  body.lyra-hub .page > .faq-card,
  body.lyra-hub .page > .article-card,
  body.lyra-hub .page > .dj-card,
  body.lyra-hub .page > .dj-text-card,
  body.lyra-hub .page > .evt,
  body.lyra-hub .page > .venue-card{flex:0 1 calc(33.333% - 18px)}
  @media (max-width:1199px){
    body.lyra-hub .page > .guide-card,
    body.lyra-hub .page > .faq-card,
    body.lyra-hub .page > .article-card,
    body.lyra-hub .page > .dj-card,
    body.lyra-hub .page > .dj-text-card,
    body.lyra-hub .page > .evt,
    body.lyra-hub .page > .venue-card{flex:0 1 calc(50% - 13px)}
  }

  body.lyra-hub .guide-card,body.lyra-hub .faq-card,body.lyra-hub .article-card,
  body.lyra-hub .dj-card,body.lyra-hub .dj-text-card,body.lyra-hub .venue-card,
  body.lyra-article .related-foot .guide-card{
    border:1px solid var(--v2-hair) !important;border-radius:18px;
    padding:26px 24px;display:flex;flex-direction:column;gap:10px;
    background:rgba(255,255,255,.72);
  }

  body.lyra-article .inline-img,body.lyra-article figure{
    margin-left:-46px;margin-right:-46px}
  body.lyra-article .inline-img img,body.lyra-article figure img{
    border-radius:18px;width:100%}

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

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

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

  /* ------------------------------------------------------------
     HOVER LANGUAGE — pointer devices only (U7)
     ------------------------------------------------------------ */
  @media (hover:hover){
    .lyra-nav .ln-links a:hover{color:var(--v2-rose-ink)}
    .lyra-nav .ln-cta:hover{transform:translateY(-1px);
      box-shadow:0 14px 30px -12px rgba(182,80,60,.7);
      transition:transform .2s ease,box-shadow .2s ease}
    .lyra-hero-cta .lhc-primary:hover{transform:translateY(-2px);
      box-shadow:0 20px 42px -16px rgba(182,80,60,.7);
      transition:transform .22s ease,box-shadow .22s ease}
    .lyra-hero-cta .lhc-ghost:hover{border-color:var(--v2-rose);color:var(--v2-rose-ink);
      transition:border-color .2s ease,color .2s ease}
    body.lyra-home .hero-socials a:hover{color:var(--v2-rose-ink);border-color:var(--v2-rose);
      background:var(--v2-card);transform:translateY(-2px);
      transition:all .22s ease}
    body.lyra-home .hero-blog-pill:hover,
    body.lyra-home .hero-guides-pill:hover,
    body.lyra-home .hero-dj-pill:hover{border-color:var(--v2-rose);color:var(--v2-rose-ink);
      transition:border-color .2s ease,color .2s ease}
    body.lyra-home .card:hover{transform:translateY(-4px);
      border-color:var(--v2-rose) !important;
      box-shadow:0 22px 44px -20px rgba(224,136,113,.45);
      transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
    body.lyra-home section[aria-label="Bangkok deep house guides"] .card:hover{
      transform:none;box-shadow:none;border-color:var(--v2-hair) !important;
      background:rgba(224,136,113,.06);
      transition:background .2s ease}
    body.lyra-home section[aria-label="Bangkok deep house guides"] .card:hover .lb-t{
      color:var(--v2-rose-ink);transition:color .2s ease}
    body.lyra-home .evt a[href*="ticketmelon"]:hover{transform:translateY(-2px);
      box-shadow:0 18px 38px -14px rgba(182,80,60,.7);
      transition:transform .2s ease,box-shadow .2s ease}
    body.lyra-home .playlist-section:hover,
    body.lyra-home section[aria-label="Event highlights"] .evt:hover,
    body.lyra-home section[aria-label="Upcoming events"] .evt:hover{
      transform:translateY(-4px);border-color:var(--v2-rose) !important;
      box-shadow:0 22px 44px -20px rgba(224,136,113,.4);
      transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
    body.lyra-home section[aria-label="Upcoming events"] .evt:nth-child(2):hover{
      transform:none;
      box-shadow:0 30px 60px -26px rgba(224,136,113,.45);
      transition:box-shadow .25s ease}
    body.lyra-home footer.foot a:hover,body.lyra-home .story a:hover{color:var(--v2-ink)}
    body.lyra-hub .guide-card:hover,body.lyra-hub .faq-card:hover,
    body.lyra-hub .article-card:hover,body.lyra-hub .dj-card:hover,
    body.lyra-hub .dj-text-card:hover,body.lyra-hub .venue-card:hover{
      transform:translateY(-4px);border-color:var(--v2-rose) !important;
      box-shadow:0 22px 44px -18px rgba(224,136,113,.4);
      transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
    .topbar a:hover{color:var(--v2-rose)}
    body.lyra-article .inline-img 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,.lyra-hero-cta a,body.lyra-home .card,
  body.lyra-home .evt,body.lyra-home .evt a,body.lyra-home .fmt,
  body.lyra-home .playlist-section,body.lyra-home .hero-socials a,
  body.lyra-hub .guide-card,body.lyra-hub .faq-card,body.lyra-hub .article-card,
  body.lyra-hub .dj-card,body.lyra-hub .dj-text-card,body.lyra-hub .venue-card,
  body.lyra-article .inline-img img{
    transition:none !important;transform:none !important;animation:none !important;
  }
}

/* Mobile gets ONLY the TL;DR component styling (light rose, matches
   the cream sub-pages where these boxes live; no layout changes) */
@media (max-width:959.9px){
  .lyra-tldr{
    border:1px solid rgba(224,136,113,.38);border-left:4px solid #e08871;
    border-radius:12px;padding:14px 16px;margin:18px 0;
    background:rgba(224,136,113,.08);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:#a84636;display:block;margin-bottom:6px;
  }
}