/* HorrorJunk Reader
   Editorial article layout below the existing image hero. */

.page-news-detail{
  --reader-width:760px;
  --reader-rail:330px;
  --reader-rule:color-mix(in srgb, var(--t-text, #f4f8fb) 14%, transparent);
  --reader-rule-strong:color-mix(in srgb, var(--t-text, #f4f8fb) 23%, transparent);
  --reader-muted:color-mix(in srgb, var(--t-text, #f4f8fb) 62%, transparent);
}

/* The story begins as a page, not as another card over the hero. */
.page-news-detail .article-read__body{
  position:relative;
  z-index:2;
  width:min(1210px, calc(100% - 124px));
  margin:0 0 0 62px;
  padding:64px 0 28px;
  display:grid;
  grid-template-columns:minmax(0, var(--reader-width)) minmax(280px, var(--reader-rail));
  justify-content:space-between;
  gap:clamp(52px, 5vw, 82px);
  align-items:start;
}

.page-news-detail .article__main{
  min-width:0;
  width:100%;
  max-width:var(--reader-width);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.page-news-detail .article__excerpt{
  max-width:none;
  margin:0 0 36px;
  padding:0 0 30px;
  border:0;
  border-bottom:1px solid var(--reader-rule-strong);
  border-radius:0;
  background:transparent;
  color:var(--t-text, #edf2f6);
  font-size:clamp(20px, 1.35vw, 23px);
  font-weight:620;
  line-height:1.52;
  letter-spacing:-.012em;
  text-wrap:pretty;
}

.page-news-detail .article__cover-credit{
  margin:-21px 0 32px;
  color:var(--reader-muted);
  font-size:11px;
  line-height:1.45;
  text-align:left;
}

.page-news-detail .article__cover-credit a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--reader-rule-strong);
  text-underline-offset:3px;
}

.page-news-detail .article__content{
  max-width:var(--reader-width);
  color:color-mix(in srgb, var(--t-text, #f4f8fb) 88%, transparent);
  font-family:var(--font-main), Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:18px;
  font-weight:430;
  line-height:1.82;
  letter-spacing:.001em;
  -webkit-hyphens:none;
  hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

/* Keep article prose readable even when imported HTML contains soft hyphens. */
.page-news-detail .article__content :where(p, li, blockquote){
  -webkit-hyphens:none;
  hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

.page-news-detail .article__content p{
  margin:0 0 24px;
}

.page-news-detail .article__content > p:first-child{
  font-size:1.035em;
}

.page-news-detail .article__content h2,
.page-news-detail .article__content h3,
.page-news-detail .article__content h4{
  padding:0;
  color:var(--t-text, #fff);
  font-family:var(--font-main), Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight:820;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.page-news-detail .article__content h2{
  margin:50px 0 20px;
  padding-top:27px;
  border-top:1px solid var(--reader-rule);
  font-size:clamp(27px, 2.15vw, 32px);
  line-height:1.2;
}

.page-news-detail .article__content h2::before{
  content:none;
}

.page-news-detail .article__content h3{
  margin:38px 0 16px;
  font-size:23px;
  line-height:1.28;
}

.page-news-detail .article__content h4{
  margin:30px 0 12px;
  font-size:19px;
  line-height:1.35;
}

.page-news-detail .article__content strong{
  color:var(--t-text, #fff);
  font-weight:750;
}

.page-news-detail .article__content a{
  color:var(--t-text, #fff);
  text-decoration:underline;
  text-decoration-color:var(--hj-acid, currentColor);
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  transition:color .15s ease, text-decoration-color .15s ease;
}

.page-news-detail .article__content a:hover,
.page-news-detail .article__content a:focus-visible{
  color:var(--hj-acid, #fff);
  text-decoration-color:currentColor;
}

.page-news-detail .article__content ul,
.page-news-detail .article__content ol{
  margin:8px 0 26px;
  padding-left:1.35em;
}

.page-news-detail .article__content li{
  margin:8px 0;
  padding-left:.25em;
}

.page-news-detail .article__content blockquote{
  margin:36px 0;
  padding:2px 0 2px 25px;
  border:0;
  border-left:2px solid var(--hj-acid, var(--t-text, #fff));
  border-radius:0;
  background:transparent;
  color:var(--t-text, #edf2f6);
  font-size:20px;
  font-style:normal;
  font-weight:560;
  line-height:1.62;
}

.page-news-detail .article__content blockquote p:last-child{
  margin-bottom:0;
}

.page-news-detail .article__content figure{
  margin:36px 0;
}

.page-news-detail .article__content img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:3px;
}

.page-news-detail .article__content figcaption,
.page-news-detail .article-image__source{
  margin-top:9px;
  color:var(--reader-muted);
  font-size:11.5px;
  line-height:1.45;
  text-align:left;
}

.page-news-detail .article__content iframe,
.page-news-detail .article__content .article-embed--video-card .article-embed__poster{
  border-radius:3px;
}

.page-news-detail .article__content hr{
  height:1px;
  margin:42px 0;
  border:0;
  background:var(--reader-rule);
}

.page-news-detail .article__content pre,
.page-news-detail .article__content table{
  max-width:100%;
  overflow:auto;
}

.page-news-detail .article__sources{
  margin:48px 0 0;
  padding:24px 0 0;
  border:0;
  border-top:1px solid var(--reader-rule-strong);
  border-radius:0;
  background:transparent;
}

.page-news-detail .article__sources h2{
  margin:0 0 13px;
  color:var(--t-text, #fff);
  font-size:12px;
  font-weight:820;
  line-height:1.3;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.page-news-detail .article__sources ol{
  display:grid;
  gap:9px;
  margin:0;
  padding-left:20px;
  color:var(--reader-muted);
  font-size:13px;
  line-height:1.5;
}

.page-news-detail .article__sources a{
  color:var(--t-text, #edf2f6);
  text-decoration:underline;
  text-decoration-color:var(--reader-rule-strong);
  text-underline-offset:3px;
}

.page-news-detail .article__sources a:hover{
  text-decoration-color:currentColor;
}

.page-news-detail .article__sources small{
  margin-top:2px;
  color:var(--reader-muted);
}

/* Flat editorial rail. Every recommendation has the same visual weight. */
.page-news-detail .article__sidebar{
  position:sticky;
  top:30px;
  min-width:0;
  padding:0 0 0 32px;
  border-left:1px solid var(--reader-rule);
}

.page-news-detail .article-related.article-related--reader{
  display:block;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--t-text, #f4f8fb);
}

.page-news-detail .article-related--reader .article-related__head{
  display:block;
  margin:0 0 7px;
  padding:0 0 17px;
  border-bottom:1px solid var(--reader-rule-strong);
}

.page-news-detail .article-related--reader .article-related__bar{
  display:none;
}

.page-news-detail .article-related--reader .article-related__heading{
  display:block;
}

.page-news-detail .article-related--reader .article-related__title{
  margin:0;
  color:var(--t-text, #fff);
  font-size:19px;
  font-weight:820;
  line-height:1.25;
  letter-spacing:-.02em;
}

.page-news-detail .article-related--reader .article-related__subtitle{
  margin:5px 0 0;
  color:var(--reader-muted);
  font-size:12px;
  font-weight:500;
  line-height:1.4;
}

.page-news-detail .article-related--reader .article-related__list{
  display:block;
  margin:0;
  padding:0;
  list-style:none;
}

.page-news-detail .article-related--reader .article-related__item,
.page-news-detail .article-related--reader .article-related__item:first-child{
  margin:0;
  padding:0;
  border:0;
  border-bottom:1px solid var(--reader-rule);
}

.page-news-detail .article-related.article-related--reader .article-related__link,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__link{
  position:relative;
  display:grid;
  grid-template-columns:94px minmax(0, 1fr);
  gap:14px;
  align-items:center;
  min-height:0;
  padding:16px 0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  text-decoration:none;
  isolation:auto;
}

.page-news-detail .article-related.article-related--reader .article-related__thumb,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__thumb{
  position:relative;
  inset:auto;
  display:block;
  width:94px;
  height:auto;
  aspect-ratio:16 / 10;
  margin:0;
  overflow:hidden;
  border-radius:3px;
  background:color-mix(in srgb, var(--t-text, #fff) 8%, transparent);
}

.page-news-detail .article-related.article-related--reader .article-related__thumb::after,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__thumb::after{
  content:none;
}

.page-news-detail .article-related--reader .article-related__thumb img,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:none;
  transform:none;
  transition:opacity .18s ease;
}

.page-news-detail .article-related--reader .article-related__thumb-fallback,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__thumb-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--reader-muted);
  font-size:18px;
  font-weight:800;
  background:transparent;
}

.page-news-detail .article-related.article-related--reader .article-related__text,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__text{
  position:static;
  inset:auto;
  z-index:auto;
  min-width:0;
  display:grid;
  gap:6px;
  align-content:center;
  padding:0;
  color:inherit;
}

.page-news-detail .article-related--reader .article-related__meta,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  color:var(--reader-muted);
  font-size:10px;
  font-weight:650;
  line-height:1.25;
  text-shadow:none;
}

.page-news-detail .article-related--reader .article-related__meta span,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__meta span{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--hj-acid, var(--t-text, #fff));
  font-size:10px;
  font-weight:780;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.page-news-detail .article-related--reader .article-related__meta time,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__meta time{
  color:var(--reader-muted);
}

.page-news-detail .article-related--reader .article-related__meta time:not(:only-child)::before{
  content:"·";
  margin-right:7px;
  color:var(--reader-muted);
}

.page-news-detail .article-related--reader .article-related__name,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__name{
  display:-webkit-box;
  overflow:hidden;
  color:var(--t-text, #f4f8fb);
  font-size:14px;
  font-weight:720;
  line-height:1.38;
  letter-spacing:-.01em;
  text-decoration:none;
  text-shadow:none;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
}

.page-news-detail .article-related--reader .article-related__excerpt,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__excerpt,
.page-news-detail .article-related--reader .article-related__arrow,
.page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__arrow{
  display:none;
}

.page-news-detail .article-related--reader .article-related__more{
  width:auto;
  min-height:0;
  margin:20px 0 0;
  padding:0 0 4px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  border-bottom:1px solid var(--reader-rule-strong);
  border-radius:0;
  background:transparent;
  color:var(--t-text, #f4f8fb);
  font-size:11px;
  font-weight:780;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color .15s ease;
}

.page-news-detail .article-related--reader .article-related__more span{
  width:auto;
  height:auto;
  margin:0;
  display:inline;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-size:14px;
  transition:transform .15s ease;
}

@media (hover:hover){
  .page-news-detail .article-related--reader .article-related__link:hover .article-related__thumb img{
    opacity:.78;
    transform:none;
  }

  .page-news-detail .article-related--reader .article-related__link:hover .article-related__name{
    color:var(--hj-acid, var(--t-text, #fff));
  }

  .page-news-detail .article-related--reader .article-related__more:hover{
    border-color:currentColor;
    background:transparent;
    color:var(--t-text, #fff);
    transform:none;
  }

  .page-news-detail .article-related--reader .article-related__more:hover span{
    background:transparent;
    color:inherit;
    transform:translateX(3px);
  }
}

.page-news-detail .article-related--reader .article-related__link:focus-visible,
.page-news-detail .article-related--reader .article-related__more:focus-visible{
  outline:2px solid var(--hj-acid, currentColor);
  outline-offset:4px;
}

/* Comments continue the same reading column. */
.page-news-detail .news-comments{
  width:min(var(--reader-width), calc(100% - 124px));
  max-width:var(--reader-width);
  margin:38px 0 72px 62px;
  padding:34px 0 0;
  border-top:1px solid var(--reader-rule-strong);
}

.page-news-detail .news-comments__title{
  margin:0 0 24px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
}

.page-news-detail .nc-composer textarea{
  border-color:var(--reader-rule-strong);
  border-radius:3px;
  background:transparent;
}

.page-news-detail .nc-composer button{
  border-radius:3px;
}

.page-news-detail .nc-item{
  padding:18px 0;
  border-bottom-color:var(--reader-rule);
}

@media (max-width:1280px){
  .page-news-detail .article-read__body{
    width:calc(100% - 76px);
    margin-left:38px;
    grid-template-columns:minmax(0, 1fr) minmax(270px, 310px);
    gap:44px;
  }

  .page-news-detail .news-comments{
    width:min(var(--reader-width), calc(100% - 76px));
    margin-left:38px;
  }
}

@media (max-width:1100px){
  .page-news-detail .article-read__body{
    width:calc(100% - 56px);
    margin-left:28px;
    padding-top:52px;
    grid-template-columns:minmax(0, var(--reader-width));
    justify-content:start;
    gap:62px;
  }

  .page-news-detail .article__sidebar{
    position:static;
    width:100%;
    max-width:var(--reader-width);
    padding:30px 0 0;
    border-top:1px solid var(--reader-rule-strong);
    border-left:0;
  }

  .page-news-detail .article-related.article-related--reader .article-related__link,
  .page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__link{
    grid-template-columns:126px minmax(0, 1fr);
  }

  .page-news-detail .article-related.article-related--reader .article-related__thumb,
  .page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__thumb{
    width:126px;
  }

  .page-news-detail .article-related--reader .article-related__name,
  .page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__name{
    font-size:15px;
  }

  .page-news-detail .news-comments{
    width:min(var(--reader-width), calc(100% - 56px));
    margin-left:28px;
  }
}

@media (max-width:620px){
  .page-news-detail .article-read__body{
    width:calc(100% - 32px);
    margin-left:16px;
    padding-top:40px;
    gap:50px;
  }

  .page-news-detail .article__excerpt{
    margin-bottom:29px;
    padding-bottom:25px;
    font-size:19px;
    line-height:1.5;
  }

  .page-news-detail .article__cover-credit{
    margin-top:-15px;
    margin-bottom:28px;
  }

  .page-news-detail .article__content{
    font-size:17px;
    line-height:1.76;
  }

  .page-news-detail .article__content p{
    margin-bottom:22px;
  }

  .page-news-detail .article__content h2{
    margin-top:42px;
    padding-top:23px;
    font-size:26px;
  }

  .page-news-detail .article__content h3{
    margin-top:34px;
    font-size:21px;
  }

  .page-news-detail .article__content blockquote{
    margin:30px 0;
    padding-left:19px;
    font-size:18px;
  }

  .page-news-detail .article__content figure{
    margin:30px 0;
  }

  .page-news-detail .article__sidebar{
    padding-top:26px;
  }

  .page-news-detail .article-related.article-related--reader .article-related__link,
  .page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__link{
    grid-template-columns:104px minmax(0, 1fr);
    gap:12px;
    padding:14px 0;
  }

  .page-news-detail .article-related.article-related--reader .article-related__thumb,
  .page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__thumb{
    width:104px;
  }

  .page-news-detail .article-related--reader .article-related__name,
  .page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__name{
    font-size:13.5px;
  }

  .page-news-detail .article-related--reader .article-related__meta,
  .page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__meta,
  .page-news-detail .article-related--reader .article-related__meta span,
  .page-news-detail .article-related.article-related--reader .article-related__item:first-child .article-related__meta span{
    font-size:9px;
  }

  .page-news-detail .news-comments{
    width:calc(100% - 32px);
    margin:30px 0 60px 16px;
    padding-top:28px;
  }

  .page-news-detail .nc-composer{
    gap:9px;
  }

  .page-news-detail .nc-ava{
    flex-basis:34px;
    width:34px;
    height:34px;
  }
}

@media (min-width:981px) and (max-height:760px){
  .page-news-detail .article__sidebar{
    position:static;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-news-detail .article-related--reader *,
  .page-news-detail .article-related--reader *::before,
  .page-news-detail .article-related--reader *::after{
    transition:none !important;
  }
}