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

@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:'Outfit';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/outfit-700.woff2') format('woff2')}

:root{
  --mag-accent:#c5603e;
  --mag-accent-soft:#e0a17e;
  --mag-ink:#f4ece4;
  --mag-hairline:rgba(224,161,126,.22);
  --mag-display:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mag-mono:ui-monospace,'SF Mono','Space Mono',Menlo,monospace;
}

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

  /* 1 · The canvas: free the phone column */
  .page{max-width:1080px !important;padding-left:48px;padding-right:48px}
  body.lyra-article .page{max-width:860px !important}
  body.lyra-article .page > p,
  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;
     text-transform:none}
  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-accent)}
  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 — the magazine eyebrow */
  .section-label,.article-header .kicker,.eyebrow,.faq-num,.gc-meta{
     font-family:var(--mag-mono);letter-spacing:.24em;text-transform:uppercase;
     font-size:.68rem;color:var(--mag-accent-soft)}

  /* 4 · The homepage hero goes cinematic */
  body.lyra-home .hero{max-width:none;min-height:min(74vh,660px);
     border-radius:28px;}
  body.lyra-home .hero h1,body.lyra-home .hero .brand-name{
     font-family:var(--mag-display);font-weight:900;letter-spacing:.02em;
     font-size:clamp(3.2rem,6.4vw,5.6rem) !important;line-height:.98 !important;
     text-transform:uppercase}
  body.lyra-home .hero-ov{padding-bottom:56px}

  /* 5 · HUB PAGES — card runs become a magazine grid (CSS-only, order kept):
        the container flexes, every child spans full width, card classes
        get fractional columns. */
  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)}
  }

  /* 6 · Card polish — editorial frames */
  .guide-card,.faq-card,.article-card,.dj-card,.dj-text-card,.venue-card{
     border:1px solid var(--mag-hairline) !important;border-radius:18px;
     padding:26px 24px;display:flex;flex-direction:column;gap:10px;
     background:linear-gradient(180deg,rgba(224,161,126,.05),rgba(0,0,0,.12))}
  .guide-card h3,.faq-card h3,.article-card h3{margin-top:2px}

  /* 7 · Images: full-bleed feel inside articles */
  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%}

  /* 8 · Top bar: give it magazine weight */
  .topbar{padding-top:22px;padding-bottom:18px}
  .topbar a{font-family:var(--mag-mono);letter-spacing:.18em;font-size:.72rem}

  /* 9 · TL;DR / short-answer boxes (Edward: answer above the fold) */
  .lyra-tldr{border:1px solid var(--mag-hairline);border-left:4px solid var(--mag-accent);
     border-radius:14px;padding:18px 22px;margin:22px 0;
     background:rgba(197,96,62,.07);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-accent-soft);
     display:block;margin-bottom:8px}

  /* 10 · Footer breathing room */
  footer,.related-foot{margin-top:64px}

  /* Hover language — desktop only, pointer devices only (U7-gated) */
  @media (hover:hover){
    .guide-card:hover,.faq-card:hover,.article-card:hover,.dj-card:hover,
    .dj-text-card:hover,.venue-card:hover{
       transform:translateY(-4px);border-color:var(--mag-accent) !important;
       box-shadow:0 22px 44px -18px rgba(197,96,62,.35);
       transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
    .topbar a:hover{color:var(--mag-accent-soft)}
    body.lyra-article .inline-img 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-accent);
     border-radius:12px;padding:14px 16px;margin:18px 0;
     background:rgba(197,96,62,.07);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-accent-soft);
     display:block;margin-bottom:6px}
}