/* Riil editorial layer
   The article system borrows the warmth, spacing, typography and restrained depth of
   the main Riil product. The global shell remains in riil.css.
*/

.article-page{
  color:var(--ink);
  background:
    radial-gradient(900px 420px at 8% 0%,rgba(184,83,53,.045),transparent 68%),
    linear-gradient(180deg,#FAF9F6 0%,var(--bg) 48%,#F5F7F6 100%);
}

.article-page .article-detail-hero{
  padding:28px 0 64px;
  border-bottom:1px solid var(--hair);
}

.article-detail-hero-inner{
  max-width:1020px;
}

.article-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 30px;
  color:var(--ink-muted);
  font-size:.8rem;
  line-height:1.4;
}

.article-breadcrumb a{
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
}
.article-breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.article-breadcrumb span{color:var(--ink-decor)}

.article-detail-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  margin-bottom:18px;
  color:var(--ink-muted);
  font-size:.76rem;
  font-weight:700;
}
.article-detail-meta span{position:relative}
.article-detail-meta span+span::before{
  content:"";
  position:absolute;
  left:-11px;
  top:50%;
  width:3px;
  height:3px;
  margin-top:-2px;
  border-radius:50%;
  background:var(--ink-decor);
}
.article-detail-topic{color:var(--reveal-ink)}

.article-detail-hero h1{
  max-width:880px;
  margin:0;
  font-size:clamp(3rem,7vw,6rem);
  line-height:.98;
  letter-spacing:-.06em;
  font-weight:760;
}

.article-detail-excerpt{
  max-width:760px;
  margin:24px 0 18px;
  color:var(--ink-muted);
  font-size:clamp(1.08rem,1.7vw,1.3rem);
  line-height:1.65;
}

.article-detail-byline{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  color:var(--ink-faint);
  font-size:.79rem;
}
.article-detail-byline span+span{
  position:relative;
  padding-left:18px;
}
.article-detail-byline span+span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:4px;
  height:4px;
  margin-top:-2px;
  border-radius:50%;
  background:var(--ink-decor);
}

.article-reading{
  padding:58px 0 98px;
}

.article-reading-grid{
  display:grid;
  grid-template-columns:190px minmax(0,700px);
  gap:48px;
  align-items:start;
  max-width:940px;
}

/* Articles without a takeaways panel need the full reading width. */
.article-reading-grid--no-takeaways{
  grid-template-columns:minmax(0,700px);
  justify-content:center;
}

.article-takeaways{
  position:sticky;
  top:96px;
  padding:17px 15px;
  border:1px solid #E6E1D9;
  border-radius:18px;
  background:#FBF7F1;
  box-shadow:0 14px 32px -28px rgba(37,51,60,.26);
}

.article-label{
  margin:0 0 12px;
  color:var(--reveal-ink);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.article-takeaways ul{
  margin:0;
  padding:0;
  list-style:none;
}
.article-takeaways li{
  margin:0;
  padding:11px 0;
  border-top:1px solid #E8E0D7;
  color:var(--ink);
  font-size:.72rem;
  line-height:1.48;
}
.article-takeaways li:first-child{border-top:0;padding-top:0}

.article-reading-main{
  min-width:0;
}

.article-cover{
  display:block;
  width:100%;
  max-width:900px;
  margin:0 0 44px;
  border-radius:22px;
  background:var(--face);
}

.article-body{
  max-width:720px;
  color:var(--ink);
  font-size:1.06rem;
  line-height:1.86;
}

.article-body>p:first-child{
  margin-top:0;
  margin-bottom:30px;
  color:#26363F;
  font-size:1.18rem;
  line-height:1.72;
}

.article-body h2{
  margin:58px 0 18px;
  color:var(--ink);
  font-size:clamp(1.65rem,3vw,2.3rem);
  line-height:1.08;
  letter-spacing:-.035em;
}

.article-body h3{
  margin:38px 0 13px;
  color:var(--ink);
  font-size:1.2rem;
  line-height:1.3;
}

.article-body p{margin:0 0 22px}

.article-body ul,.article-body ol{
  margin:0 0 28px;
  padding-left:1.3rem;
}
.article-body li{margin-bottom:9px}

.article-body strong{font-weight:760}

.article-body blockquote{
  margin:32px 0;
  padding:16px 20px;
  border-left:3px solid var(--reveal);
  border-radius:0 14px 14px 0;
  background:#FBF7F1;
  color:var(--ink-muted);
}

.article-body code{
  padding:2px 6px;
  border-radius:5px;
  background:var(--face);
  font-size:.9em;
}

.article-feature{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,420px);
  align-items:center;
  gap:34px;
  margin:56px 0 0;
  padding:26px 0 0;
  border-top:1px solid var(--hair);
}

.article-feature-copy{
  min-width:0;
}

.article-feature-label{
  margin:0 0 8px;
  color:var(--reveal-ink);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.article-feature-copy h2{
  margin:0;
  color:var(--ink);
  font-size:clamp(1.55rem,2.8vw,2.15rem);
  line-height:1.08;
  letter-spacing:-.035em;
}

.article-feature-intro{
  max-width:500px;
  margin:10px 0 0;
  color:var(--ink-muted);
  font-size:.94rem;
  line-height:1.58;
}

.article-feature-links{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.article-feature-link{
  display:flex;
  min-height:52px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  box-sizing:border-box;
  padding:13px 15px 13px 17px;
  border:1px solid #D9D4CE;
  border-radius:14px;
  background:#FFFDFC;
  color:var(--ink);
  font-size:.84rem;
  font-weight:800;
  text-decoration:none;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.article-feature-link:hover{
  transform:translateY(-1px);
  background:#FBF7F1;
  border-color:#C8BFB5;
  box-shadow:0 8px 20px -18px rgba(37,51,60,.35);
}

.article-feature-link-arrow{
  flex:0 0 auto;
  color:var(--accent);
  font-size:1rem;
  transition:transform .16s ease;
}

.article-feature-link:hover .article-feature-link-arrow{
  transform:translateX(3px);
}

.article-detail-return{
  margin:22px 0 0;
}
.article-detail-return a{
  color:var(--ink-muted);
  font-size:.8rem;
  font-weight:700;
  text-decoration:none;
}
.article-detail-return a:hover{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px;
}

.article-footer{
  border-top:1px solid var(--hair);
}

@media(max-width:900px){
  .article-detail-hero{padding-bottom:54px}
  .article-reading-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .article-takeaways{
    position:static;
    order:-1;
    max-width:720px;
  }
  .article-takeaways ul{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 22px;
  }
}

@media(max-width:640px){
  .article-page .article-detail-hero{padding:20px 0 44px}
  .article-detail-hero h1{
    font-size:clamp(2.75rem,13vw,4.4rem);
    letter-spacing:-.055em;
  }
  .article-detail-excerpt{font-size:1.02rem}
  .article-reading{padding:38px 0 64px}
  .article-reading-grid{gap:26px}
  .article-takeaways{padding:18px 16px;border-radius:16px}
  .article-takeaways ul{grid-template-columns:1fr}
  .article-body{font-size:1rem;line-height:1.8}
  .article-body>p:first-child{font-size:1.12rem}
  .article-feature{
    display:block;
    margin-top:46px;
    padding-top:22px;
  }
  .article-feature-links{
    margin-top:18px;
  }
  .article-detail-byline{gap:6px 12px}
}


/* Articles stays visibly selected in the shared Riil header, just like the main product sections. */
.article-page .nav-links a[data-article-nav][aria-current="page"]{
  color:var(--ink);
  font-weight:750;
}
.article-page .nav-links a[data-article-nav][aria-current="page"]::after{
  content:"";
  display:block;
  height:2px;
  margin-top:6px;
  border-radius:999px;
  background:var(--accent);
}

/* Mobile editorial pass: restore comfortable side margins on narrow screens. */
@media(max-width:640px){
  .article-page .container{
    padding-inline:20px;
  }
  .article-page .article-detail-hero{
    padding-top:24px;
  }
  .article-reading{
    padding-top:34px;
  }
  .article-reading-grid{
    gap:30px;
  }
  .article-body{
    max-width:68ch;
  }
  .article-body p{
    margin-bottom:20px;
  }
  .article-body h2{
    margin-top:48px;
  }
  .article-feature{
    margin-top:40px;
  }
}