.body{
  background-color: #0c0c22;
}
:root{
  /* type scale */
  --fs-xxs: clamp(.78rem, .70rem + .25vw, .88rem);
  --fs-xs:  clamp(.88rem, .80rem + .35vw, .98rem);
  --fs-sm:  clamp(.95rem, .90rem + .40vw, 1.05rem);
  --fs-md:  clamp(1.05rem, 1.0rem + .6vw, 1.25rem);
  --fs-lg:  clamp(1.25rem, 1.1rem + 1vw, 1.6rem);
  --fs-xl:  clamp(1.5rem, 1.2rem + 1.8vw, 2.2rem);

  /* spacing & radius */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;

  /* colors */
  --c-bg-1: #0c0c22;
  --c-bg-2: #111132;
  --c-bg-3: #151538;
  --c-card: #1a1a3c;
  --c-grad-1: linear-gradient(90deg, #1b1b4d, #0022a0);
  --c-text: #ffffff;
  --c-text-dim: #ccc;
  --c-text-muted: #aaa;
  --c-link: #b6c6ff;
}

/* ===== Layout ===== */
.container{
    background-color: #0c0c22;
  justify-content: start;
  align-items: start;
  justify-items: start;
  margin-top: 5%;
  padding: var(--sp-3) clamp(1rem, 4vw, 2.5rem);
  display: flex;
  gap: clamp(.75rem, 2vw, 1.25rem);
  color: var(--c-text);
}

.left-column{ flex: 2; }
.right-column{
  flex: 1;
  background: var(--c-bg-3);
  padding: var(--sp-2);
  border-radius: var(--radius-s);
}

/* Stack on narrow screens */
@media (max-width: 900px){
  .container{ flex-direction: column; }
  .right-column{ order: 2; }
}

/* ===== Breadcrumb ===== */
.breadcrumb{
  background: var(--c-grad-1);
  border-radius: var(--radius-l);
  padding: .45rem .8rem;
  font-size: var(--fs-xs);
  margin-bottom: .75rem;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
.breadcrumb a{ color: var(--c-link); text-decoration: none; }
.breadcrumb a:hover{ text-decoration: underline; }
.breadcrumb span{ color: var(--c-text-dim); }
.breadcrumb .current{ color: var(--c-text); font-weight: 700; }

/* ===== Hero card ===== */
.hero-card{
  background: var(--c-card);
  padding: var(--sp-2);
  border-radius: var(--radius-s);
  margin-bottom: var(--sp-4);
}
.hero-card img{
  width: 100%;
  border-radius: var(--radius-s);
}

/* ===== Typography in left column ===== */
.left-column h1{ margin: .5rem 0; font-size: var(--fs-xl); color: var(--c-text) !important; }
.left-column h2{ margin: .75rem 0 .5rem; font-size: var(--fs-lg); color: var(--c-text) !important; }
.left-column h3{ margin: .6rem 0 .4rem; font-size: var(--fs-md); color: var(--c-text) !important; }
.left-column p,
.left-column h4,
.left-column h5,
.left-column h6{ color: var(--c-text) !important; }
.p{ color: var(--c-text); } /* if you're using a .p utility */

/* ===== Tag & meta ===== */
.tag{ margin-top: .5rem; font-size: var(--fs-sm); color: var(--c-text-dim); }
.meta{ font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ===== Author card ===== */
.author-card{ text-align: center; margin-bottom: 1.25rem; }
.author-card .avatar{ width: 64px; aspect-ratio: 1/1; border-radius: 50%; margin-bottom: .5rem; }

/* ===== Share buttons ===== */
.share button{
  background: #292960;
  color: var(--c-text);
  padding: .55rem 1rem;
  margin-right: .5rem;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
}
.share button:focus-visible{ outline: 2px solid #7f8cff; outline-offset: 2px; }

/* ===== TOC ===== */
.toc ul{
  margin-top: .6rem;
  color: var(--c-text);
  padding-left: .5rem;
}
.toc ul li{ color: var(--c-text); margin-bottom: .35rem; }
.toc ul li a{
  color: #d7d7ff;
  text-decoration: none;
  font-size: var(--fs-sm);
}
.toc ul li a:hover{ text-decoration: underline; }

/* ===== Sidebar / sticky ===== */
.sidebar{
  position: sticky;
  top: 1rem;   /* was 1%—use a fixed offset for consistency */
  z-index: 5;
  height: fit-content;
  padding: 1rem;
}

/* ===== Newsletter box ===== */
.newsletter-box{
  background: #fff;
  border-radius: 30px;
  padding: var(--sp-2);
  text-align: center;
  color: #000;
  margin-top: 2rem;
}
.newsletter-box h4{ margin: .25rem 0; font-size: var(--fs-md); color: #000; }
.newsletter-box p{ font-size: var(--fs-xs); margin: .2rem 0; color: #111; }
.newsletter-form{
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.newsletter-box input{
  padding: .55rem .75rem;
  font-size: var(--fs-sm);
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
}
.newsletter-form button{
  padding: .55rem .9rem;
  font-size: var(--fs-sm);
  background: var(--c-grad-1);
  color: var(--c-text);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* ===== Share boxes ===== */
.share-box{
  background: var(--c-grad-1);
  border-radius: var(--radius-s);
  padding: .75rem;
  margin-top: .75rem;
}
.share-box-bot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-grad-1);
  border-radius: var(--radius-s);
  padding: .6rem .9rem;
  margin-top: 1rem;
}
.share-box-bot p{
  color: var(--c-text);
  font-size: var(--fs-sm);
  margin: 0;
}

/* ===== “In this article” ===== */
.in-this-article{
  background: var(--c-bg-2);
  border-radius: var(--radius-s);
  padding: .75rem;
}
.in-this-article h4{
  margin: 0 0 .5rem 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.in-this-article ul{ list-style: none; padding: 0; margin: 0; }
.in-this-article li{
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .4rem 0 .4rem .6rem;
  position: relative;
  transition: border-color .3s, color .3s;
}
.in-this-article li:last-child{ border-bottom: none; }
.in-this-article li::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: .4rem;
  width: 3px;
  background: transparent;
  border-radius: 2px;
  transition: background-color .3s;
}
.in-this-article li:hover{ color: #e9ecff; }
.in-this-article li.active{ color: var(--c-text); }
.in-this-article li.active::before{ background: #ffffff; }
.in-this-article li a{
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ===== Article preview ===== */
.article-preview{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: .6rem;
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--c-bg-1);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.article-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-overlay{
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  backdrop-filter: blur(10px);
  background: linear-gradient(to top, rgba(12,12,34,.95), rgba(12,12,34,0));
  color: var(--c-text);
}
.article-title{
  font-size: var(--fs-lg);
  font-weight: 800;
  margin: 0 0 .25rem;
}
.article-meta{
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* ===== Social icons ===== */
.social-icons a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: .35rem;
  width: 1.8rem;
  height: 1.8rem;
}
.social-icons img{
  width: 100%;
  height: auto;
}

/* ===== List (top-level) hover state kept, deduped ===== */
.in-this-article li{ padding-left: .6rem; }
/* ===== MOBILE/TABLET (<=1024px) ===== */
@media (max-width: 1024px){
  .container{
    display:flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-2) clamp(.75rem, 4vw, 1.25rem);
    margin-top: 4rem;
  }

  .left-column{
    flex: 0 1 auto;   
    width: 100%;
    min-width: 0;
  }
  .right-column{
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
  }

  .breadcrumb{
    font-size: var(--fs-xxs);
    padding: .35rem .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    white-space: normal;
  }

  .article-preview{ aspect-ratio: 16/9; border-radius: .5rem; }
  .article-overlay{ padding: .75rem; }
  .article-title{ font-size: clamp(1.1rem, 1.2rem + 1.2vw, 1.6rem); }
  .article-meta{ font-size: var(--fs-xxs); }

  /* TOC & “in this article” */
  .in-this-article{ padding: .6rem; }
  .in-this-article li{ font-size: var(--fs-xs); padding: .35rem 0 .35rem .5rem; }

  /* Buttons & icons a touch smaller */
  .social-icons a{ width: 1.4rem; height: 1.4rem; padding: .25rem; }
  .newsletter-box{ margin-top: 1.25rem; border-radius: 20px; padding: 1rem; }
  .newsletter-box input,
  .newsletter-form button{ font-size: var(--fs-xxs); padding: .5rem .7rem; }
}

/* ===== SMALL PHONES (<=640px) – tighter rhythm ===== */
@media (max-width: 640px){
  :root{
    --sp-2: .85rem;
    --sp-3: 1.1rem;
  }
  .article-title{ font-size: clamp(1rem, .95rem + 2.2vw, 1.45rem); }
  .left-column h2{ font-size: clamp(1.05rem, 1rem + 1.4vw, 1.25rem); }
  .left-column h3{ font-size: clamp(.98rem, .95rem + 1vw, 1.15rem); }
}

/* Avoid anchor targets hiding behind sticky elements */
.left-column [id]{ scroll-margin-top: 110px; }