* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: #c9c9c9;
}

body {
  font-family: "Roboto", system-ui, sans-serif;
  color: #1e1e1e;
  max-width: 360px;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 32px;
}

/* ===== Header ===== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  height: 48px;
  background: #e8e8e8;
}
.menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 21px;
  height: 17px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.menu span {
  display: block;
  height: 3px;
  background: #1e1e1e;
  border-radius: 1px;
}
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  color: #1e1e1e;
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
}
.logo-icon {
  margin-right: 8px;
}
.logo-rbk {
  display: inline-flex;
  align-items: baseline;
  font-weight: 900;
}
.logo-text {
  color: #1e1e1e;
  font-weight: 400;
}
.lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
}
.lang a {
  color: #1e1e1e;
  text-decoration: none;
}
.lang span {
  color: #1e1e1e;
}

/* ===== Article container ===== */
.article {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
}

.breadcrumbs {
  font-size: 10px;
  line-height: 12px;
  color: #373435;
}

.article h1 {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  color: #000;
}

/* ===== Meta (date / read time / tags) ===== */
.meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  line-height: 12px;
  color: #373435;
}
.time-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tags {
  display: flex;
  gap: 8px;
}
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  height: 16px;
  font-size: 10px;
  line-height: 12px;
  color: #fff;
  border-radius: 4px;
}
.tag-blue {
  background: #0c8ce9;
}
.tag-dark {
  background: #1e1e1e;
}

/* ===== Subtitle / Author ===== */
.subtitle {
  font-size: 14px;
  line-height: 16px;
  color: #1e1e1e;
}
.author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
}
.author-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d9d9d9;
  flex: none;
}
.author-name {
  font-size: 10px;
  line-height: 12px;
  color: #028ac5;
}
.bookmark {
  width: 16px;
  height: 16px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== Photo ===== */
.photo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.photo-img {
  width: 100%;
  aspect-ratio: 328 / 184.5;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.6)),
    linear-gradient(180deg, #4a4a4a, #1f1f1f);
}
.photo figcaption {
  font-size: 10px;
  line-height: 12px;
  color: #373435;
}

/* ===== CTA / Google blocks ===== */
.cta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #0c8ce9;
  border-radius: 8px;
  text-decoration: none;
  color: #000;
}
.cta-text {
  flex: 1;
  font-size: 14px;
  line-height: 16px;
}
.g-icon,
.gnews-icon {
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%234285F4' d='M22 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.6c-.2 1.3-1 2.4-2.1 3.1v2.6h3.4c2-1.8 3.1-4.5 3.1-7.6z'/><path fill='%2334A853' d='M12 22c2.8 0 5.2-.9 6.9-2.5l-3.4-2.6c-.9.6-2.1 1-3.5 1-2.7 0-5-1.8-5.9-4.3H2.6v2.7C4.3 19.7 7.9 22 12 22z'/><path fill='%23FBBC05' d='M6.1 13.6c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V6.9H2.6C1.9 8.4 1.5 10.1 1.5 12s.4 3.6 1.1 5.1l3.5-2.7z'/><path fill='%23EA4335' d='M12 5.8c1.5 0 2.9.5 4 1.5l3-3C17.2 2.6 14.8 1.5 12 1.5 7.9 1.5 4.3 3.8 2.6 7l3.5 2.7C7 7.6 9.3 5.8 12 5.8z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.check {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.check svg {
  position: absolute;
  inset: 0;
  transition: opacity 0.15s ease;
}
.check .check-fill {
  opacity: 0;
}
.check:hover .check-outline,
.check:focus-visible .check-outline {
  opacity: 0;
}
.check:hover .check-fill,
.check:focus-visible .check-fill {
  opacity: 1;
}

/* ===== Body paragraphs ===== */
.article p {
  font-size: 14px;
  line-height: 16px;
  color: #000;
}

/* ===== Callouts with blue left bar ===== */
.callout,
.main-points,
.faq {
  position: relative;
  padding-left: 16px;
}
.callout::before,
.main-points::before,
.faq::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #028ac5;
}
.callout {
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: #000;
}

/* ===== Main points (bulleted) ===== */
.main-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.main-points h3 {
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
}
.main-points ul {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 16px;
}

/* ===== FAQ ===== */
.faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq h3 {
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
}
.faq details {
  border-top: 1px solid #cccccc;
  padding: 8px 0;
}
.faq details:last-of-type {
  border-bottom: 1px solid #cccccc;
}
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/contain no-repeat;
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(-180deg);
}
.faq details p {
  margin-top: 8px;
  font-weight: 400;
}

/* ===== Ad placeholder (WINTER OFFER COLLECTION) ===== */
.ad {
  width: 100%;
  aspect-ratio: 328 / 203;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(160deg, #4a1aa0 0%, #2c0c66 55%, #160438 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.ad::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 70%, rgba(120, 60, 200, 0.4), transparent 50%);
}
.ad-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Georgia", "Times New Roman", serif;
  font-style: italic;
  letter-spacing: 0.08em;
  line-height: 1.05;
}
.ad-top,
.ad-bot {
  font-size: 24px;
  font-weight: 400;
}
.ad-mid {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: -4px 0;
}

/* ===== Subscribe (gray border) ===== */
.cta-subscribe {
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0;
  padding: 16px;
  gap: 14px;
  text-align: center;
}
.cta-subscribe .cta-text {
  text-align: center;
  font-weight: 700;
}

/* ===== Channels ===== */
.channels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.channels h3 {
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}
.channels-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.ch {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ch svg {
  display: block;
}

/* ===== More topics ===== */
.more-topics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.more-topics h3 {
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
}
.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.topic-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  height: 24px;
  min-width: 99px;
  background: #fafcfc;
  box-shadow: 0 0 0 1px #c0c4c7;
  border-radius: 4px;
  font-size: 14px;
  line-height: 16px;
  color: #000;
}