:root{
  --page-bg: #fff9f9;
  --black: #121212;
  --blue: #0267B1;
  --container-w: 1648px;
  --pad: 80px;
  --main-w: 836px;
  --side-w: 772px;
  --col-gap: 40px;
  --article-img-w: 836px;
  --article-img-h: 556px;
  --side-thumb-w: 200px;
  --side-thumb-h: 200px;
  --side-item-vpad: 20px;
  --side-img-text-gap: 24px;
  --side-text-gap: 30px;
}

/* base reset */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: 'Manrope', sans-serif;
  background: var(--page-bg);
  color: var(--black);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Page container */
.page-wrap{
  padding: var(--pad);
  padding-top: 0 !important;
}


/* Container */
.container{
  width: var(--container-w);
  margin: 0 auto;
}

/* content columns */
.content{
  display:flex;
  gap: var(--col-gap);
}

/* ARTICLE (main column) */
.article{
  width: var(--main-w);
  padding: 0;
  font-family: 'Manrope', sans-serif;
}

/* Article title */
.article-title{
  font-family: 'Domine', serif;
  font-weight:700;
  font-size:40px;
  color: var(--black);
  margin-bottom: 22px; /* title and metadata gap per spec (though metadata removed) */
  line-height:1.05;
}

/* Article image */
.article-image-wrapper{
  margin-bottom:32px; /* gap between title/meta and image */
}
.article-image{
  width: var(--article-img-w);
  height: var(--article-img-h);
  object-fit:cover;
  border-radius:8px;
  display:block;
}

/* Article body */
.article-body{
  margin-top:32px; /* gap between image and article text */
  font-family: 'Manrope', sans-serif;
  font-weight:500;
  font-size:24px;
  line-height:1.5; /* "auto line height" — readable */
  color: var(--black);
}
.article-body p{
  margin-bottom:1em; /* paragraph spacing = 1 line (approx) */
}

/* SIDEBAR */
.sidebar{
  width: var(--side-w);
}

/* Sidebar heading */
.sidebar-heading{
  font-family: 'Domine', serif;
  font-weight:700;
  font-size:32px;
  color: var(--black);
  margin-bottom: 24px;
}

/* Each sidebar item */
.sidebar-item{
  display:flex;
  align-items:flex-start;
  gap: var(--side-img-text-gap); /* 46px between image and text */
  padding: var(--side-item-vpad) 0; /* vertical padding of 48px */
}

/* Thumbnail */
.side-thumb{
  width: var(--side-thumb-w);
  height: var(--side-thumb-h);
  object-fit:cover;
  border-radius:8px;
  flex-shrink:0;
}

/* Side content (title, desc) */
.side-content{
  max-width: calc(var(--side-w) - var(--side-thumb-w) - var(--side-img-text-gap));
}
.side-title{
  font-family: 'Domine', serif;
  font-weight:700;
  font-size:20px;
  color: var(--black);
  margin: 0 0 var(--side-text-gap) 0; /* 30px gap to description */
}
.side-desc{
  font-family: 'Manrope', sans-serif;
  font-weight:500;
  font-size:14px;
  color: var(--black);
  margin: 0 0 var(--side-text-gap) 0; /* 30px gap to metadata (metadata removed) */
}

/* separator between sidebar items */
.side-sep{
  border:0;
  border-top:1px solid rgba(0,0,0,0.12);
  margin:0;
}

.dynamic-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}
@media (max-width: 768px) {

  .page-wrap {
    padding: 20px;
  }

  .container {
    width: 100%;
  }

  .content {
    flex-direction: column;
  }

  .article,
  .sidebar {
    width: 100%;
  }

  .article-image,
  .side-thumb {
    width: 100%;
    height: auto;
  }

  .side-content {
    max-width: 100%;
  }
}
@media (max-width: 768px) {

  .sidebar-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .side-thumb {
    width: 100%;
    height: auto;
  }

  .side-content {
    max-width: 100%;
  }

  .side-title {
    font-size: 18px;
  }

  .side-desc {
    font-size: 14px;
  }
}