:root {
  
  --bg:           #1a0808;
  --panel:        #241209;
  --panel2:       #2c160c;
  --line:         #4a2414;
  --line-soft:    rgba(248, 192, 0, .08);

  
  --ink:          #f2e6d8;
  --mut:          #b89a86;
  --heading:      #ffedb3;

  
  --brand:        #ffc107;
  --brand2:       #d00000;
  --on:           #1a0f00;
  --brand-grad:   linear-gradient(135deg, #ffd54a, #e0a000);
  --glow:         0 0 0 1px rgba(248,192,0,.35), 0 8px 26px -8px rgba(248,192,0,.45);

  
  --accent-red:   #d00000;

  
  --panel-grad:   linear-gradient(160deg, #2c160c, #160a05);
  --panel-grad2:  linear-gradient(160deg, #34190d, #1a0e07);

  
  --shadow:       0 6px 18px -8px rgba(0, 0, 0, .75);
  --shadow-lg:    0 16px 40px -14px rgba(0, 0, 0, .85);

  
  --ok:           #34d399;
  --warn:         #fbbf24;
}



.lib {
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(248,192,0,.10), transparent 60%),
    radial-gradient(700px 500px at 90% 10%, rgba(208,0,0,.08), transparent 55%),
    var(--bg);
}


.lh.sticky {
  background: rgba(20, 8, 4, .90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(248, 192, 0, .18);
}


.drawer {
  background: linear-gradient(180deg, #241209, #140805);
}


body.drawer-open {
  overflow: hidden;
}


@media (max-width: 640px) {
  .sticky-cta {
    background: rgba(20, 8, 4, .97);
    border-top-color: rgba(248, 192, 0, .2);
    box-shadow: 0 -8px 24px -10px rgba(248, 192, 0, .12), 0 -2px 0 rgba(248, 192, 0, .08);
  }
}


.lh .logo img,
.lf-logo img,
.drawer .logo img {
  aspect-ratio: 2467 / 1035;
  width: auto;
}

.lf-logo img {
  width: 100px;
  height: auto;
}


.lh .lh-main .logo img { max-height: 56px; width: auto; }


.lh-nav { justify-content: center; }
.lh nav a { text-transform: uppercase; letter-spacing: .4px; }


.read .cta-block, .cta-block { text-align: center; }
.cta-block .btn { margin-left: auto; margin-right: auto; }


.lf-badges img[alt^="18+"] {
  background: #fff;
  border-radius: 8px;
  padding: 3px;
}




.h1 {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  color: var(--heading);
}

.hero .h1 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .7), 0 0 30px rgba(248, 192, 0, .12);
}


.hero {
  background:
    radial-gradient(900px 360px at 70% -60px, rgba(248, 192, 0, .16), transparent 60%),
    radial-gradient(600px 300px at 0% 120%, rgba(208, 0, 0, .12), transparent 55%),
    var(--panel-grad2);
}


.lf {
  background: linear-gradient(180deg, #200f07, #0d0503);
}


.lf h4 {
  color: var(--brand);
  margin-top: 24px;
}

.lf .lf-cols > div:first-child h4 {
  margin-top: 0;
}


* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}


@media (max-width: 640px) {
  .lh .lh-main .logo img {
    max-height: 40px;
    width: auto;
  }

  .wrap {
    padding: 0 14px;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }

  
  .hero,
  section {
    max-width: 100vw;
    overflow-x: clip;
  }

  .lay-mag,
  .related-grid,
  .lay-363 {
    grid-template-columns: 1fr !important;
  }

  body {
    overflow-x: clip;
  }
}


@media (max-width: 1024px) {
  .lay-363 > main { order: 0; }
  .lay-363 > aside.rail { order: 1; }
}


.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; }
.tabs .tab { white-space: normal; text-align: center; flex: none; }