/* Brainrot Fortnite blog article — editorial layout */

body.blog-article-page {

  --blog-accent: #4fe269;

  --blog-accent-strong: #25bd45;

  --blog-purple: #6c5ce7;

  background:

    radial-gradient(circle at 50% 0, rgba(108, 92, 231, .13), transparent 34rem),

    var(--blog-page-bg);

}



/* Article editorial refresh: the heading and body share the primary rail,

   while the contextual cards occupy a calm, sticky secondary rail. */

.blog-article-shell { max-width: 1180px; }

.blog-article-hero { height: clamp(230px, 27vw, 350px); border-radius: 16px; }

.blog-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; max-width: none; margin-top: 20px; align-items: start; }

.blog-article-layout > main { display: contents; }

.blog-article-heading-card { grid-column: 1; width: auto; margin: 0; padding: 28px 30px; border: 1px solid var(--blog-border); border-top: 3px solid var(--blog-purple); border-radius: 16px; box-shadow: 0 12px 32px var(--blog-shadow); }

.blog-article-heading-card h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -.025em; }

.blog-article-heading-card p { margin-top: 10px; line-height: 1.5; }

.blog-article-author { margin-top: 18px; padding-top: 14px; }

.blog-article-card { grid-column: 1; padding: 28px 30px; border-radius: 16px; }

.blog-article-sidecard { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 82px; display: block; padding: 20px; border-radius: 16px; }

.blog-side-group + .blog-side-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--blog-border); }

.blog-toc-list { display: grid; gap: 6px; }

.blog-toc-list a, .blog-mobile-toc a { display: block; padding: 7px 9px; border-left: 2px solid transparent; color: var(--blog-muted); font-size: .82rem; line-height: 1.35; }

.blog-toc-list a:hover, .blog-toc-list a:focus-visible { border-color: var(--blog-purple); color: var(--blog-heading); background: rgba(108,92,231,.1); }

.blog-toc-level-3 { padding-left: 20px !important; font-size: .78rem !important; }

.blog-community-card { grid-column: 1; }

.blog-mobile-toc { display: none; grid-column: 1; }



.blog-post-page.content-grid.full {

  padding: 0 0 76px;

}



.blog-article-shell {

  max-width: 1180px;

  padding: 34px 24px 0;

}



.blog-article-breadcrumb {

  display: flex;

  align-items: center;

  gap: 9px;

  min-height: 34px;

  margin: 0 0 18px;

  color: var(--blog-muted);

  font-size: .78rem;

  font-weight: 800;

}



.blog-article-breadcrumb a {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: var(--blog-muted);

  transition: color .18s ease;

}



.blog-article-breadcrumb a::before {

  content: "\2190";

  color: var(--blog-accent-strong);

  font-size: 1rem;

}



.blog-article-breadcrumb a:hover,

.blog-article-breadcrumb a:focus-visible {

  color: var(--blog-heading);

  outline: none;

}



.blog-article-breadcrumb-separator {

  opacity: .48;

}



.blog-article-breadcrumb-current {

  max-width: min(62vw, 520px);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.blog-article-hero {

  height: clamp(280px, 31vw, 410px);

  min-height: 0;

  border: 1px solid var(--blog-border);

  border-radius: 28px;

  box-shadow: 0 22px 54px var(--blog-shadow);

}



.blog-article-hero img {

  opacity: .94;

  transform: scale(1.002);

}



.blog-article-hero::after {

  background: linear-gradient(180deg, rgba(10, 14, 26, 0) 38%, rgba(10, 14, 26, .62));

}



.blog-article-heading-card {

  width: min(920px, calc(100% - 72px));

  margin: -82px auto 0;

  padding: clamp(30px, 4.5vw, 50px);

  border-top: 4px solid var(--blog-accent);

  border-radius: 24px;

  background: var(--blog-surface);

  box-shadow: 0 24px 64px var(--blog-shadow);

}



.blog-article-meta-line {

  gap: 8px;

  margin-bottom: 22px;

  letter-spacing: .035em;

}



.blog-article-meta-line span {

  display: inline-flex;

  align-items: center;

  min-height: 28px;

  padding: 0 10px;

  border: 1px solid var(--blog-border);

  border-radius: 999px;

  background: var(--blog-surface-soft);

}



.blog-article-meta-line span:first-child {

  border-color: rgba(79, 226, 105, .28);

  background: rgba(79, 226, 105, .11);

  color: var(--blog-accent-strong);

}



.blog-article-heading-card h1 {

  max-width: 800px;

  font-size: clamp(2.35rem, 5vw, 4.4rem);

  letter-spacing: -.04em;

  line-height: .98;

  overflow-wrap: anywhere;

}



.blog-article-heading-card p {

  max-width: 740px;

  margin-top: 22px;

  font-size: clamp(1rem, 1.5vw, 1.12rem);

  font-weight: 550;

  line-height: 1.7;

}



.blog-article-author {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 26px;

  padding-top: 22px;

  border-top: 1px solid var(--blog-border);

}



.blog-article-author img {

  width: 42px;

  height: 42px;

  object-fit: contain;

  border: 1px solid var(--blog-border);

  border-radius: 13px;

  background: #111728;

  padding: 5px;

}



.blog-article-author strong,

.blog-article-author span {

  display: block;

}



.blog-article-author strong {

  color: var(--blog-heading);

  font-size: .9rem;

  font-weight: 900;

}



.blog-article-author span {

  margin-top: 3px;

  color: var(--blog-muted);

  font-size: .78rem;

  font-weight: 700;

}



.blog-article-layout {

  grid-template-columns: minmax(0, 760px) 240px;

  gap: 32px;

  max-width: 1032px;

  margin-top: 38px;

}



.blog-article-layout > main {

  min-width: 0;

  order: 1;

}



.blog-article-sidecard {

  top: 104px;

  order: 2;

  gap: 20px;

  padding: 22px;

  border-top: 4px solid var(--blog-purple);

  box-shadow: 0 12px 34px var(--blog-shadow);

}



.blog-side-group + .blog-side-group {

  padding-top: 18px;

  border-top: 1px solid var(--blog-border);

}



.blog-side-back {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--blog-heading);

  font-size: .84rem;

  font-weight: 900;

}



.blog-side-back::before {

  content: "\2190";

  color: var(--blog-accent-strong);

}



.blog-side-title {

  margin-bottom: 10px;

  color: var(--blog-heading);

}



.blog-article-card {

  padding: clamp(32px, 5vw, 58px);

  border-radius: 24px;

  box-shadow: 0 16px 46px var(--blog-shadow);

}



.blog-article-body {

  font-family: Inter, "Trebuchet MS", Arial, sans-serif;

  font-size: clamp(1rem, 1.3vw, 1.08rem);

  font-weight: 500;

  line-height: 1.82;

}



.blog-article-body > p:first-child {

  color: var(--blog-heading);

  font-size: clamp(1.08rem, 1.6vw, 1.2rem);

  font-weight: 650;

  line-height: 1.72;

}



.blog-article-body h2 {

  position: relative;

  margin-top: 48px;

  padding-left: 18px;

  font-size: clamp(1.55rem, 2.6vw, 2rem);

  line-height: 1.2;

}



.blog-article-body h2::before {

  content: "";

  position: absolute;

  top: .12em;

  bottom: .12em;

  left: 0;

  width: 5px;

  border-radius: 999px;

  background: linear-gradient(180deg, var(--blog-accent), var(--blog-purple));

}



.blog-article-body h3 {

  margin-top: 38px;

  font-size: clamp(1.25rem, 2vw, 1.5rem);

}



.blog-article-body a {

  color: var(--blog-purple);

  text-decoration: underline;

  text-decoration-color: rgba(108, 92, 231, .28);

  text-decoration-thickness: 2px;

  text-underline-offset: 3px;

}



.blog-article-body img,

.blog-article-body iframe,

.blog-article-body video {

  border: 1px solid var(--blog-border);

  border-radius: 18px;

  box-shadow: 0 14px 34px var(--blog-shadow);

}



.blog-article-body blockquote {

  border-left-color: var(--blog-accent);

  border-radius: 0 16px 16px 0;

}



.blog-share-button {

  min-height: 42px;

  border-color: var(--blog-border);

  background: var(--blog-surface-soft);

  color: var(--blog-heading);

}



.blog-community-card.timeline-post-card {

  overflow: hidden;

  border-radius: 24px;

  box-shadow: 0 14px 38px var(--blog-shadow);

}



.blog-social-stats,

.blog-post-options.timeline-post-options,

.blog-comments-panel .timeline-comment,

.blog-comments-panel .timeline-comment-form-wrap {

  border-color: var(--blog-border);

}



.blog-social-stats .meta-line-text,

.blog-social-stats .meta-line-link,

.blog-comments-panel .timeline-comments-title,

.blog-comments-panel .timeline-comment-empty,

.blog-auth-note,

.blog-comments-panel .timeline-comment-actions {

  color: var(--blog-muted);

}



.blog-post-options .post-option {

  color: var(--blog-muted);

}



.blog-post-options .post-option:hover,

.blog-post-options .post-option:focus-visible,

.blog-post-options .post-option.active {

  border-color: var(--blog-border);

  background: var(--blog-surface-soft);

  color: var(--blog-heading);

}



.blog-comments-panel .post-comment-text,

.blog-comments-panel .timeline-comment-body,

.blog-comments-panel .post-comment-text-author {

  color: var(--blog-text);

}



.blog-comments-panel .timeline-comment-input-wrap {

  border-color: var(--blog-border);

  background: var(--blog-surface-soft);

}



.blog-comments-panel .timeline-comment-input {

  color: var(--blog-heading);

}



.blog-auth-note {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding: 20px 0 4px;

}



.blog-auth-note p {

  margin: 0;

  line-height: 1.5;

}



.blog-related-section {

  padding-bottom: 72px;

}



@media screen and (max-width: 960px) {

  .blog-article-layout { grid-template-columns: 1fr; }

  .blog-article-layout > main { display: contents; }



  .blog-article-sidecard { grid-column: 1; grid-row: auto; position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }



  .blog-side-group + .blog-side-group {

    padding-top: 0;

    padding-left: 18px;

    border-top: 0;

    border-left: 1px solid var(--blog-border);

  }



  .blog-share-actions {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media screen and (max-width: 680px) {

  .blog-post-page.content-grid.full {

    padding-right: 0;

    padding-left: 0;

  }



  .blog-article-shell {

    padding: 20px 12px 0;

  }



  .blog-article-breadcrumb {

    margin-right: 6px;

    margin-left: 6px;

  }



  .blog-article-hero {

    height: 230px;

    border-radius: 20px;

  }



  .blog-article-heading-card {

    width: auto;

    margin-top: 0;

    padding: 26px 22px;

    border-radius: 20px;

  }



  .blog-article-meta-line span:nth-last-child(-n+2) {

    display: none;

  }



  .blog-article-layout {

    gap: 20px;

    margin-top: 22px;

  }



  .blog-article-card {

    padding: 30px 22px;

    border-radius: 20px;

  }



  .blog-article-sidecard {

    grid-template-columns: 1fr;

    padding: 22px;

  }

  .blog-toc-group { display: none; }

  .blog-mobile-toc { display: block; padding: 14px 16px; border: 1px solid var(--blog-border); border-radius: 14px; background: var(--blog-surface); }

  .blog-mobile-toc summary { cursor: pointer; color: var(--blog-heading); font-weight: 800; }



  .blog-side-group + .blog-side-group {

    padding-top: 18px;

    padding-left: 0;

    border-top: 1px solid var(--blog-border);

    border-left: 0;

  }



  .blog-share-actions {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .blog-auth-note {

    align-items: stretch;

    flex-direction: column;

  }



  .blog-auth-note .button {

    width: 100%;

  }

}



/* Final scoped layout rules override the legacy editorial presentation. */

.blog-cover-placeholder { height:100%; display:flex; flex-direction:column; justify-content:center; gap:18px; padding:32px; color:#fff; background:radial-gradient(ellipse at 75% 30%,#6932d6,transparent 55%),linear-gradient(120deg,#081535,#191044); }

.blog-cover-placeholder span { color:#d5b6ff; font-size:14px; text-transform:uppercase; letter-spacing:.12em; }

.blog-cover-placeholder strong { max-width:740px; font-size:clamp(22px,3vw,38px); line-height:1.25; }

.blog-media-unavailable { display:block; padding:24px; border:1px dashed #37466a; border-radius:14px; color:#b8c8ea; background:#081a37; }

.blog-discussion-empty { padding:18px 0; text-align:center; line-height:1.6; color:#b8c8ea; }

.blog-article-page .blog-article-body p,.blog-article-page .blog-article-body li { font-weight:400; }

.blog-article-page .blog-cover-placeholder strong { font-size:clamp(30px,5vw,62px); }

body.blog-article-page { --blog-page-bg:#080c11; --blog-surface:#02132e; --blog-surface-soft:#081d40; --blog-border:#14305a; --blog-purple:#a66bff; --blog-accent:#8548ff; --blog-heading:#f5f5ff; --blog-text:#d3ddf5; --blog-muted:#afc2e8; background:#080c11; }

.blog-article-page .blog-post-page.content-grid.full { padding:0 24px 16px; margin:0; width:100%; }

.blog-article-page .blog-article-shell { max-width:1180px; margin:0 auto; padding:20px 0 0; }

.blog-article-page .blog-article-breadcrumb { margin:0 0 14px; font-size:13px; flex-wrap:wrap; }

.blog-article-page .blog-article-breadcrumb a::before { content:none; }

.blog-article-page .blog-article-breadcrumb a:first-child::before { content:'←'; }

.blog-article-page .blog-article-hero { height:clamp(210px,25vw,320px); border-radius:16px; margin:0; overflow:hidden; }

.blog-article-page .blog-article-hero img { width:100%; height:100%; object-fit:cover; }

.blog-article-page .blog-article-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; max-width:none; margin:16px 0 0; align-items:start; }

.blog-article-page .blog-primary-rail { display:contents; }

.blog-article-page .blog-article-heading-card { grid-column:1; grid-row:1; width:auto; margin:0; padding:28px 30px; border:1px solid var(--blog-border); border-radius:16px; }

.blog-article-page .blog-article-heading-card h1 { font-size:clamp(28px,3vw,40px); line-height:1.2; letter-spacing:-.025em; }

.blog-article-page .blog-article-heading-card p { margin-top:12px; }

.blog-article-page .blog-article-heading-card .blog-article-category { margin:0 0 10px; }

.blog-article-page .blog-article-meta-line { margin:0 0 12px; letter-spacing:0; text-transform:none; font-weight:500; }

.blog-article-page .blog-article-meta-line span { padding:0; min-height:0; border:0; background:none; color:var(--blog-muted); }

.blog-article-page .blog-article-meta-line span:nth-last-child(-n+2) { display:none; }

.blog-article-page .blog-article-sidecard { grid-column:2; grid-row:1 / span 4; position:static; display:block; padding:0; background:transparent; border:0; box-shadow:none; }

.blog-article-page .blog-side-group { margin:0 0 10px; padding:20px; background:var(--blog-surface); border:1px solid var(--blog-border); border-radius:16px; }

.blog-article-page .blog-side-group + .blog-side-group { margin-top:0; padding:20px; border:1px solid var(--blog-border); }

.blog-article-page .blog-side-title { font-size:16px; letter-spacing:0; text-transform:none; padding-bottom:12px; border-bottom:1px solid var(--blog-border); }

.blog-article-page .blog-share-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.blog-article-page .blog-article-card { grid-column:1; padding:28px 30px; border-radius:16px; }

.blog-article-page .hc-article-event { grid-column:1; }

.blog-article-page .blog-article-body { font-size:18px; line-height:1.7; font-weight:400; }

.blog-article-page .blog-article-body p { margin-bottom:18px; }

.blog-article-page .blog-article-body h2 { font-size:26px; line-height:1.3; margin:30px 0 16px; }

.blog-article-page .blog-article-body h3 { font-size:23px; line-height:1.3; }

.blog-article-page .blog-article-body h2, .blog-article-page .blog-article-body h3 { scroll-margin-top:90px; }

.blog-article-page .blog-article-body img { max-width:100%; height:auto; }

.blog-article-page .blog-article-body table { display:block; max-width:100%; overflow-x:auto; }

.blog-article-page .blog-community-card { grid-column:1; border-radius:16px; }

.blog-article-page .blog-related-section { max-width:1180px; padding:0 24px 24px; }

.blog-article-page .hc-news-card__link { display:flex; }

.blog-article-page .hc-news-card__media { flex:0 0 110px; width:110px; min-height:130px; }

.blog-article-page .hc-news-card__title { font-size:16px; }

.blog-article-page :focus-visible { outline:2px solid #bc91ff; outline-offset:4px; }

.blog-article-page .blog-toc-list a.is-active { color:#fff; border-left-color:#a66bff; background:#101d42; }

@media(max-width:960px) {

 .blog-article-page .blog-article-layout { grid-template-columns:minmax(0,1fr); }

 .blog-article-page .blog-article-heading-card { grid-row:auto; }

 .blog-article-page .blog-article-sidecard { grid-column:1; grid-row:auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; }

 .blog-article-page .blog-toc-group { display:none; }

 .blog-article-page .blog-mobile-toc { display:block; grid-column:1; padding:16px; border:1px solid var(--blog-border); border-radius:14px; background:var(--blog-surface); }

 .blog-article-page .blog-mobile-toc summary { cursor:pointer; color:var(--blog-heading); font-weight:700; }

}

@media(max-width:600px) {

 .blog-article-page .blog-post-page.content-grid.full { padding:0 14px 16px; }

 .blog-article-page .blog-article-heading-card,.blog-article-page .blog-article-card { padding:22px 20px; }

 .blog-article-page .blog-article-sidecard { grid-template-columns:1fr; }

 .blog-article-page .hc-news-grid { grid-template-columns:1fr; }

 .blog-article-page .blog-related-section { padding:0 14px 24px; }

}