:root {
  --ct-black:#000000;
  --ct-yellow:#FFD700;
  --ct-text:#111;
  --wrap:1200px;
}

* { box-sizing:border-box }
body {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ct-text);
  background:#f5f5f5;
}

/* ===== HEADER ===== */
.ct-header { position:relative }

/* Black top bar */
.ct-topbar {
  background:var(--ct-black);
  color:#fff;
  height:56px;
  display:flex;
  align-items:center;
}
.ct-wrap {
  max-width:var(--wrap);
  margin:0 auto;
  width:100%;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ct-logo-link { display:inline-flex;align-items:center;gap:10px }
.ct-logo { height:36px;width:auto;display:block }

/* Right utilities */
.ct-utils { display:flex;align-items:center;gap:18px }

/* Ecosystem dropdown */
.ct-ecosystem { position:relative }
.ct-ecosystem-btn {
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.3);
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
}
.ct-caret { margin-left:4px }
.ct-ecosystem-menu {
  position:absolute;
  top:40px;left:0;
  min-width:180px;
  background:#111;
  border:1px solid #333;
  border-radius:8px;
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:20;
}
.ct-ecosystem:hover .ct-ecosystem-menu { display:flex }
.ct-ecosystem-menu a {
  color:#fff;
  text-decoration:none;
  padding:10px 12px;
  font-size:14px;
}
.ct-ecosystem-menu a:hover { background:#1c1c1c }

/* Socials */
.ct-socials { display:flex;gap:10px }
.ct-socials a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  font-size:12px;
}
.ct-socials a:hover { background:#1c1c1c }

/* Language selector */
.ct-lang select {
  background:#0d0d0d;
  color:#fff;
  border:1px solid #333;
  border-radius:6px;
  padding:6px 8px;
  font-size:14px;
}

/* Hairlines */
.ct-hairline { width:100%;height:1px }
.ct-hairline--black { background:#111 }
.ct-hairline--yellow-bottom { background:#caa800 }

/* Yellow nav bar */
.ct-mainnav {
  background:var(--ct-yellow);
  min-height:48px;
  display:flex;
  align-items:center;
}
.ct-menu {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.ct-menu a {
  color:#000;
  text-decoration:none;
  font-weight:700;
  text-transform:uppercase;
  font-size:14px;
}
.ct-menu a:hover { text-decoration:underline }

/* Search */
.ct-search { display:flex;align-items:center }
.ct-search input {
  height:34px;
  border:1px solid #bfa000;
  border-radius:999px;
  padding:0 12px;
  min-width:200px;
  background:#fff;
}

/* ===== CONTENT ===== */
.container {
  max-width:var(--wrap);
  margin:24px auto;
  background:#fff;
  padding:24px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
.article-img { width:100%;border-radius:10px;margin-bottom:16px }
h2 { margin-top:0;font-size:28px }
p { line-height:1.65;margin:1rem 0 }
.highlight { background:#f9f1c6;padding:0.15rem 0.4rem;border-radius:4px;font-weight:700 }

/* Footer */
footer { background:#111;color:#aaa;text-align:center;padding:16px }

/* Accessibility */
.sr-only {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Hamburger */
.ct-hamburger {
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:28px;height:22px;
  background:var(--ct-yellow);
  border:none;
  padding:4px;
  cursor:pointer;
  position: relative;
  z-index: 2001; /* above overlay background */
}
.ct-hamburger span {
  display:block;
  height:3px;
  background:#000;
  border-radius:2px;
}
/* Mobile overlay menu */
.ct-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;
  color: #fff;
  display: none;
  flex-direction: column;
  padding: 20px;
  z-index: 2000; /* above everything else */
  overflow-y: auto;
}

.ct-mobile-overlay.active {
  display: flex;
}
/* Backdrop behind the slide-in menu */
/* Backdrop behind the slide-in menu */
.ct-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  z-index: 1500; /* below menu, above page */
}
.ct-backdrop.show { display: block; }

/* Mobile menu above backdrop */
.ct-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: #111;
  color: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1600; /* higher than backdrop */
  padding: 1rem;
  overflow-y: auto;
}
.ct-mobile-menu.open {
  transform: translateX(0);
}
.ct-mobile-menu {
  position:fixed;
  top:0;right:-100%;
  width:75%;height:100%;
  background:var(--ct-yellow);
  color:#000;
  padding:2rem 1rem;
}
.ct-mobile-menu.open { right:0 }
.ct-mobile-menu nav {
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.ct-mobile-menu nav a {
  text-decoration:none;
  font-weight:700;
  color:#000;
}
.ct-mobile-menu .mobile-utils {
  margin-top:2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.ct-mobile-menu .ct-socials a { color:#000 }

/* ===== Responsive ===== */
@media (max-width:900px) {
  .ct-wrap { padding:0 12px }
  .ct-menu { gap:12px }
  .ct-search input { min-width:140px }
}
@media (max-width:768px) {
  .ct-utils, .ct-mainnav, .ct-search { display:none }
  .ct-hamburger { 
  display:flex;
  }
}
@media (max-width:680px) {
  .ct-utils { gap:12px }
  .ct-socials a { width:26px;height:26px;font-size:11px }
  .ct-logo { height:30px }
  .ct-menu { font-size:13px }
}