/*
Theme name: MMMBOP 2026
Author: Michele Cristina Born | Quietoode.com
Version: 2
*/


    :root{
      --bg0:#0b0b0f;
      --bg1:#11111a;
      --text:#f5f2ea;
      --muted: rgba(245,242,234,.72);
      --muted2: rgba(245,242,234,.55);
      --gold:#f2b23b;
      --gold2:#d58a10;
      --ring: rgba(242,178,59,.45);
      --card: rgba(255,255,255,.06);
      --stroke: rgba(255,255,255,.12);
      --shadow: 0 30px 80px rgba(0,0,0,.55);
      --radius: 18px;
        --mm-bg0:#0b0b0f;
        --mm-bg1:#12121b;
        --mm-text:#f5f2ea;
        --mm-muted: rgba(245,242,234,.72);
        --mm-muted2: rgba(245,242,234,.55);
        --mm-stroke: rgba(255,255,255,.10);
        --mm-card: rgba(255,255,255,.06);
        --mm-gold:#f2b23b;
        --mm-gold2:#d58a10;
        --mm-radius: 18px;
        --mm-shadow: 0 30px 90px rgba(0,0,0,.55);
        --mm-max: 1120px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--text);
      background: radial-gradient(1200px 900px at 50% 45%, rgba(242,178,59,.12), transparent 55%),
                  radial-gradient(900px 700px at 10% 10%, rgba(166,74,255,.08), transparent 55%),
                  linear-gradient(180deg, var(--bg1), var(--bg0));
      overflow-x:hidden;
      background-repeat: no-repeat;
      background-color: var(--bg0);
    }
    a {
        color: white;
    }

    /* subtle grain */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 0 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,.045) 0 1px, transparent 1px);
      background-size: 140px 140px, 180px 180px, 220px 220px;
      opacity:.22;
      mix-blend-mode: overlay;
      filter: blur(.2px);
    }

    #container {
        max-width: 90%;
        margin: auto;
        width: 720px;
        padding: 100px;
    }

    .wrap{
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }

    /* Top nav */
    header{
      position:sticky;
      top:0;
      z-index:10;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.10));
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .nav{
      max-width: 1120px;
      margin: 0 auto;
      padding: 16px 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap: wrap;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color: var(--text);
      font-weight: 650;
      letter-spacing:.2px;
    }
    .brand span{
      color: rgba(245,242,234,.86);
      font-weight: 600;
    }
    .brand .dot{
      color: rgba(245,242,234,.5);
      font-weight: 500;
    }

    nav{
      display:flex;
      align-items:center;
      gap:18px;
    }
    nav a{
      color: rgba(245,242,234,.72);
      text-decoration:none;
      font-size: 14px;
      padding: 10px 10px;
      border-radius: 10px;
      transition: color .18s ease, background .18s ease;
    }
    nav a:hover{
      color: rgba(245,242,234,.92);
      background: rgba(255,255,255,.06);
    }
    .searchBtn{
      width:40px;height:40px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition: transform .15s ease, border-color .15s ease;
    }
    .searchBtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
    .searchBtn svg{ opacity:.8; }

    /* Hero */
    main{
      flex:1;
      display:grid;
      place-items:center;
      padding: 56px 20px 40px;
    }
    .hero{
      width:min(980px, 100%);
      text-align:center;
      position:relative;
      padding: 64px 18px 40px;
    }

    .hero::after{
      content:"";
      position:absolute;
      inset: -40px -20px -20px;
      border-radius: 32px;
      background: radial-gradient(500px 280px at 50% 35%, rgba(242,178,59,.22), transparent 60%),
                  radial-gradient(800px 380px at 50% 70%, rgba(255,255,255,.06), transparent 60%);
      filter: blur(0px);
      z-index:-1;
      height: 100dvh;
    }

    .mm{
      display:inline-flex;
      align-items:flex-start;
      justify-content:center;
      gap: 16px;
      margin: 0 0 18px;
    }
    .star{
      width: 44px;
      height: 44px;
      margin-top: 18px;
      flex:0 0 auto;
      filter: drop-shadow(0 14px 25px rgba(242,178,59,.18));
      opacity:.95;
    }

    h1{
      margin:0;
      font-size: clamp(56px, 9vw, 104px);
      line-height: .92;
      letter-spacing: -1.5px;
      font-weight: 800;
      color: var(--gold);
      text-shadow: 0 30px 70px rgba(242,178,59,.12);
    }

    .kicker{
      margin: 8px auto 10px;
      max-width: 740px;
      font-size: clamp(18px, 2.6vw, 28px);
      line-height: 1.25;
      color: rgba(245,242,234,.92);
      letter-spacing: -.2px;
    }

    .kicker u{
      text-decoration: none;
      border-bottom: 2px solid rgba(242,178,59,.70);
      padding-bottom: 2px;
    }

    .sub{
      margin: 0 auto 26px;
      max-width: 680px;
      font-size: 16px;
      line-height: 1.6;
      color: var(--muted);
    }

    .actions{
      display:flex;
      gap: 12px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top: 16px;
    }

    .btn{
      appearance:none;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(245,242,234,.92);
      padding: 12px 18px;
      border-radius: 14px;
      font-weight: 650;
      font-size: 14px;
      letter-spacing:.2px;
      cursor:pointer;
      transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:10px;
    }
    .btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }

    .btn.primary{
      border-color: rgba(242,178,59,.35);
      background: linear-gradient(180deg, rgba(242,178,59,.20), rgba(242,178,59,.12));
      box-shadow: 0 18px 50px rgba(242,178,59,.10);
    }
    .btn.primary:hover{
      box-shadow: 0 22px 70px rgba(242,178,59,.14);
    }
    .btn .arrow{
      opacity:.9;
      transition: transform .15s ease;
    }
    .btn:hover .arrow{ transform: translateX(2px); }

    /* Right-side stack preview (optional / decorative) */
    .stack{
      position:absolute;
      right: -12px;
      top: 50%;
      transform: translateY(-22%);
      width: min(220px, 32vw);
      display:flex;
      flex-direction:column;
      gap:10px;
      opacity:.65;
      filter: drop-shadow(0 25px 50px rgba(0,0,0,.55));
      display: none;
    }
    .thumb{
      aspect-ratio: 4 / 3;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
        radial-gradient(140px 90px at 30% 30%, rgba(242,178,59,.20), transparent 60%),
        radial-gradient(120px 80px at 70% 70%, rgba(166,74,255,.16), transparent 60%);
      overflow:hidden;
      position:relative;
    }
    .thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, transparent, rgba(0,0,0,.35));
    }
    .thumb small{
      position:absolute;
      left:12px;
      bottom:10px;
      color: rgba(245,242,234,.72);
      font-size:12px;
      z-index:1;
    }

    /* Footer */
    footer{
      max-width:1120px;
      margin: 0 auto;
      padding: 26px 20px 34px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      color: var(--muted2);
      font-size: 13px;
      border-top: 1px solid rgba(255,255,255,.06);
      flex-direction: column;
    }
    .footer-section ul {
      display: flex;
      gap: 32px;
      list-style: none;
      flex-wrap: wrap;
    }
    .since{
      letter-spacing:.5px;
      text-transform:uppercase;
      font-size:12px;
      color: rgba(245,242,234,.45);
    }

    /* Single page */


/* page shell */
.mm-page{
  padding: 56px 20px 80px;
}
.mm-shell{
  max-width: var(--mm-max);
  margin: 0 auto;
}

/* article */
.mm-article{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
  border-radius: calc(var(--mm-radius) + 8px);
  box-shadow: var(--mm-shadow);
  overflow:hidden;
}
.mm-article__header{
  padding: 44px 28px 26px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* breadcrumbs */
.mm-breadcrumbs{
  font-size: 13px;
  color: var(--mm-muted2);
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.mm-breadcrumbs a{
  color: var(--mm-muted);
  text-decoration:none;
}
.mm-breadcrumbs a:hover{
  color: rgba(245,242,234,.9);
}
.mm-breadcrumbs__sep{
  opacity:.6;
}

/* title + lede */
.mm-title{
  margin: 14px 0 10px;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.8px;
}
.mm-lede{
  margin: 0 0 14px;
  max-width: 70ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mm-muted);
}
.mm-meta{
  font-size: 13px;
  color: var(--mm-muted2);
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;
}
.mm-dot{ opacity:.5; }

/* hero image */
.mm-hero{
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mm-hero__img{
  width: 100%;
  height: auto;
  display:block;
  max-height: 420px;
  object-fit: cover;
}

/* layout grid */
.mm-grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  padding: 28px;
}

/* aside */
.mm-aside{
  min-width: 0;
}
.mm-card{
  background: var(--mm-card);
  border: 1px solid var(--mm-stroke);
  border-radius: var(--mm-radius);
  padding: 18px;
}
.mm-card--sticky{
  position: sticky;
  top: 88px;
}
.mm-card__title{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(245,242,234,.82);
  margin-bottom: 10px;
}
.mm-card__divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}
.mm-toc{
  font-size: 14px;
  color: var(--mm-muted);
}
.mm-toc__hint{
  color: var(--mm-muted2);
  font-size: 13px;
  line-height: 1.4;
}

/* buttons */
.mm-btn{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(245,242,234,.92);
  text-decoration:none;
  font-weight: 650;
  font-size: 14px;
  margin-top: 10px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mm-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
}
.mm-btn--primary{
  border-color: rgba(242,178,59,.35);
  background: linear-gradient(180deg, rgba(242,178,59,.20), rgba(242,178,59,.10));
  box-shadow: 0 18px 60px rgba(242,178,59,.10);
}

/* content typography */
.mm-content{
  min-width: 0;
  padding: 4px 2px 10px;
}
.mm-content > *:first-child{ margin-top: 0; }

.mm-content p{
  font-size: 16px;
  line-height: 1.75;
  color: rgba(245,242,234,.82);
  max-width: 75ch;
}

.mm-content h2,
.mm-content h3{
  margin-top: 34px;
  margin-bottom: 12px;
  line-height: 1.15;
  letter-spacing: -.4px;
}
.mm-content h2{
  font-size: 26px;
}
.mm-content h3{
  font-size: 20px;
  color: rgba(245,242,234,.92);
}

.mm-content a{
  color: var(--mm-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(242,178,59,.35);
}
.mm-content a:hover{
  border-bottom-color: rgba(242,178,59,.65);
}

.mm-content blockquote{
  margin: 24px 0;
  padding: 16px 18px;
  border-left: 3px solid rgba(242,178,59,.55);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  color: rgba(245,242,234,.80);
}

.mm-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 2px 7px;
  border-radius: 10px;
}

.mm-content pre{
  overflow:auto;
  padding: 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--mm-radius);
}

.mm-article__footer{
  padding: 20px 28px 30px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--mm-muted2);
  font-size: 13px;
}


    @media (max-width: 860px){
      nav{ gap:8px; }
      nav a{ padding: 10px 8px; }
      .stack{ display:none; }
      .star{ width: 38px; height: 38px; margin-top: 14px; }

      .mm-grid {
    grid-template-columns: 1fr;
}
    }
    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; scroll-behavior:auto !important; }
    }