.article-detail-main{
  --article-orange:#d74713;
  --article-orange-dark:#ad3510;
  --article-yellow:#eec908;
  --article-tan:#ba864e;
  --article-green:#78805a;
  --article-cream:#f3eada;
  --article-paper:#fffaf0;
  --article-ink:#021124;
  background:
    radial-gradient(circle at 16% 8%,rgba(238,201,8,.12),transparent 24rem),
    radial-gradient(circle at 90% 34%,rgba(215,71,19,.09),transparent 28rem),
    repeating-linear-gradient(0deg,rgba(2,17,36,.018) 0 1px,transparent 1px 5px),
    var(--article-cream);
  padding:40px 20px 78px;
  color:var(--article-ink)
}
.article-detail-wrap{max-width:1100px;margin:auto}
.article-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;color:var(--article-ink);
  font-weight:900;text-decoration:none;border-bottom:3px solid var(--article-yellow);padding:0 2px 3px
}
.article-back:hover{border-bottom-color:var(--article-orange)}
.article-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    linear-gradient(110deg,rgba(255,255,255,.72),rgba(255,250,240,.92)),
    repeating-linear-gradient(0deg,rgba(2,17,36,.025) 0 1px,transparent 1px 4px),
    var(--article-paper);
  border:2px solid var(--article-ink);border-radius:18px;
  padding:clamp(30px,6vw,66px);box-shadow:10px 10px 0 rgba(2,17,36,.14)
}
.article-hero:before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:15px;background:var(--article-orange)}
.article-hero:after{
  content:"NDAF";position:absolute;right:clamp(18px,4vw,46px);top:30px;z-index:-1;
  color:rgba(215,71,19,.075);font:900 clamp(5rem,13vw,10rem)/1 Arial,sans-serif;
  letter-spacing:-.09em;transform:rotate(-4deg);pointer-events:none
}
.article-kicker{
  display:inline-block;margin:0 0 16px;padding:8px 12px 7px;
  color:#fff;background:var(--article-orange);border:2px solid var(--article-ink);
  box-shadow:4px 4px 0 var(--article-yellow);font-weight:900;text-transform:uppercase;letter-spacing:.1em
}
.article-hero h1{max-width:850px;margin:0;font-family:Georgia,serif;font-size:clamp(2.35rem,6vw,5.2rem);line-height:.94;letter-spacing:-.025em}
.article-dek{
  position:relative;max-width:760px;margin:28px 0 0;padding-left:18px;
  font-size:clamp(1.08rem,2vw,1.4rem);font-weight:800;line-height:1.42
}
.article-dek:before{content:"";position:absolute;left:0;top:.1em;bottom:.08em;width:7px;background:var(--article-yellow);border-radius:3px}
.article-byline{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:26px;font-weight:900}
.article-byline span{display:inline-flex;align-items:center;min-height:34px;padding:6px 11px;border:1.5px solid var(--article-ink);background:rgba(255,255,255,.7)}
.article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,1fr);gap:28px;margin-top:34px;align-items:start}
.article-body,.article-side-card{border:2px solid var(--article-ink);border-radius:16px}
.article-body{
  counter-reset:article-section;padding:clamp(26px,5vw,56px);
  background:
    repeating-linear-gradient(0deg,rgba(2,17,36,.018) 0 1px,transparent 1px 5px),
    #fffdf7;
  box-shadow:7px 7px 0 rgba(186,134,78,.2)
}
.article-body section{position:relative;padding-top:4px}
.article-body section+section{margin-top:42px;padding-top:40px;border-top:2px dashed rgba(2,17,36,.22)}
.article-body section:not(:last-child){counter-increment:article-section}
.article-body section:not(:last-child):before{
  content:counter(article-section,decimal-leading-zero);position:absolute;right:0;top:0;
  color:rgba(215,71,19,.18);font:900 2.15rem/1 Arial,sans-serif;letter-spacing:-.08em
}
.article-body h2{
  display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  margin:0;font-family:Georgia,serif;font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.1;
  background:linear-gradient(transparent 68%,rgba(238,201,8,.58) 68% 92%,transparent 92%);
  padding:0 .08em
}
.article-body h2+p{margin-top:18px;font-weight:650;color:#12243b}
.article-body p{margin:0 0 15px;font-size:1.08rem;line-height:1.72}
.article-body p:last-child{margin-bottom:0}
.article-body section:nth-child(2n):not(:last-child){margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px;background:linear-gradient(90deg,rgba(120,128,90,.09),transparent 82%)}
.article-body section:last-child{
  margin-left:-10px;margin-right:-10px;border:2px solid var(--article-ink);border-left:11px solid var(--article-orange);
  padding:25px 25px 22px;background:
    repeating-linear-gradient(-2deg,rgba(215,71,19,.03) 0 2px,transparent 2px 7px),
    #f8eadf;box-shadow:5px 5px 0 var(--article-yellow)
}
.article-body section:last-child h2{background:none;color:var(--article-orange-dark)}
.article-side{display:grid;gap:18px;position:sticky;top:22px}
.article-side-card{
  position:relative;overflow:hidden;padding:23px;background:
    repeating-linear-gradient(0deg,rgba(2,17,36,.02) 0 1px,transparent 1px 5px),
    #fffdf7;box-shadow:5px 5px 0 rgba(2,17,36,.11)
}
.article-side-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--article-orange)}
.article-side-card:nth-child(2){background:#f3edcf}.article-side-card:nth-child(2):before{background:var(--article-yellow)}
.article-side-card:nth-child(3){background:#e9eddf}.article-side-card:nth-child(3):before{background:var(--article-green)}
.article-side-card h2{margin:0 0 12px;font-family:Georgia,serif;font-size:1.15rem}
.article-side-card:first-child h2:after{content:"";display:block;width:56px;height:5px;margin-top:8px;background:var(--article-orange);transform:rotate(-2deg)}
.article-tags{display:flex;flex-wrap:wrap;gap:8px}
.article-tags span{border:1.5px solid var(--article-ink);border-radius:999px;padding:6px 10px;background:#fffaf0;font-size:.82rem;font-weight:850}
.article-next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px;padding-top:26px;border-top:2px solid var(--article-ink)}
.article-next a{
  display:flex;align-items:center;background:var(--article-ink);color:#fff;border:2px solid var(--article-ink);
  border-radius:10px;padding:14px 16px;font-weight:850;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease
}
.article-next a:last-child{justify-content:flex-end;text-align:right;background:var(--article-orange)}
.article-next a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--article-yellow)}

/* The light version keeps the full article, typography and category color, but strips decorative weight. */
.low-data .article-detail-main{background:var(--article-cream)}
.low-data .article-hero,.low-data .article-body,.low-data .article-side-card{box-shadow:none;background:#fff;border-radius:8px}
.low-data .article-hero:after,.low-data .article-body section:not(:last-child):before{display:none}
.low-data .article-hero:before{display:block;height:8px}
.low-data .article-kicker{box-shadow:none}
.low-data .article-body section:nth-child(2n):not(:last-child){background:none}
.low-data .article-body section:last-child{box-shadow:none;background:#fff7ef}
.low-data .article-side{position:static}

@media(max-width:800px){
  .article-detail-main{padding:24px 14px 54px}
  .article-layout{grid-template-columns:1fr;gap:22px}
  .article-hero{padding:38px 22px 32px}
  .article-hero:after{right:12px;top:42px;font-size:5rem}
  .article-kicker{font-size:.83rem}
  .article-body{padding:28px 21px}
  .article-body section:nth-child(2n):not(:last-child){margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}
  .article-side{position:static}
  .article-next{grid-template-columns:1fr}
  .article-next a:last-child{justify-content:flex-start;text-align:left}
}