/* --- BASE THEME --- */
:root {
	--bg: #f6f7fb;
	--panel: #ffffff;
	--card: #ffffff;
	--fg: #182230;
	--muted: #5d6b82;
	--brand: #0b6efb;
	--accent: #1a88ff;
	--border: #e6e9f0;
	--line: #e9edf4;
}

* {
	box-sizing: border-box
}

body {
	margin: 0;
	background: linear-gradient(180deg, #f8f9fc 0%, #f3f5fa 100%);
	color: var(--fg);
	font: 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif
}

a {
	color: var(--brand);
	text-decoration: none
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px
}

nav {
	position: sticky;
	top: 0;
	background: rgba(255, 255, 255, 0.8);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(8px)
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px
}

.brand {
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--brand)
}

nav .links a {
	margin-left: 18px;
	color: var(--muted)
}

.hero {
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: 24px;
	padding: 40px 24px
}

.kicker {
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brand);
	font-weight: 600
}

h1 {
	margin: .1em 0 .3em;
	font-size: clamp(28px, 4.6vw, 46px)
}

p.lead {
	color: var(--muted);
	max-width: 62ch
}

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px
}

.btn {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--accent);
	color: #071423;
	font-weight: 600
}

/* grids */
.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px
}

.section {
	padding: 28px 24px
}

.section h2 {
	margin: 0 0 8px
}

.sub {
	color: #97b3d7;
	margin: 0 0 16px
}

.footer {
	border-top: 1px solid var(--line);
	color: #9fb7d8;
	padding: 20px 24px;
	margin-top: 24px
}

.avatar {
	display: flex;
	align-items: center;
	gap: 16px
}

.avatar img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--border)
}

.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}

.badges.nowrap {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.badges.nowrap .tag {
	white-space: nowrap;
	font-size: 12px;
	padding: 3px 10px
}

.tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: #102040;
	border: 1px solid var(--border);
	color: #bcd4ff;
	font-size: 12px
}

.article {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.article h3 {
	margin: 0
}

.meta {
	color: #9fb7d8;
	font-size: 14px
}

/* --- PROFILE CARD TIGHTENING --- */
#profile-card {
	line-height: 1.5;
  height: 265px;
	max-width: 760px;

}

#profile-card { min-height: 220px; }

#profile-card p {
	margin: 4px 0
}

#profile-card .profile-link {
	margin: 4px 0 2px
}

#profile-card .hero-certs {
  margin-top: 6px !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;                /* consistent spacing */
  align-items: center;     /* vertical alignment */
  justify-items: center;   /* horizontal centering */
}

#profile-card .hero-certs a {
  padding: 4px;            /* prevents overlap */
  display: inline-block;
}

#profile-card .hero-certs img {
  height: 95px;            /* consistent badge size */
  width: 95px;
  object-fit: contain;     /* keeps proportions */
}

.profile-contact p {
  margin: 6px 0;
}

/* responsive */
@media (max-width:920px) {
	.hero {
		grid-template-columns: 1fr
	}

	#profile-card {
		max-width: 100%
	}
}

@media (max-width:640px) {
	.grid-2 {
		grid-template-columns: 1fr
	}

	.grid-3 {
		grid-template-columns: 1fr
	}
}

/* Tiny thumbnails next to titles */
.article-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 56px;
  border: 1px solid var(--border);
}

.article-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.article-row h3 {
  margin: 0;
  line-height: 1.3;
}

#articles-list .article-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

#articles-list .article-thumb {
  width: 56px !important;
  height: 56px !important;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex: 0 0 56px;
}

/* Safety: if any global img rule sets width:100%, clamp it for article list */
#articles-list img {
  width: auto;
  max-width: none;
  height: auto;
}

/* Optional: tighten article cards so the row looks compact */
#articles-list .card.article {
  padding: 12px 14px;
}

/* ==== Compact layout tuning (drop-in) ==== */

/* HERO: closer columns, tighter heading & CTA */
.hero{
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  padding: 10px 10px;        /* was ~40px */
}
.hero h2{
  margin: 8px 0 10px;        /* reduce whitespace above/below */
  line-height: 1.15;
  font-size: clamp(28px, 4vw, 44px);
}
.hero .lead{ margin-top: 8px; }
.hero .btn{ margin-top: 10px; }

/* PROFILE CARD: smaller padding + avatar, less space above badges */
#profile-card{
  padding: 14px 16px !important;
}
#profile-card .avatar{ gap: 12px; }
#profile-card .avatar img{
  width: 88px; height: 88px; /* was 120 */
}
#profile-card .badges.nowrap{ gap: 6px; margin-top: 6px; }
#profile-card .hero-certs{ margin-top: 8px !important; }

/* SECTION SPACING: bring Articles up */
.section{ padding: 18px 24px; }            /* was 28px */
.section h2{ margin: 0 0 6px; }
.section .sub{ margin: 0 0 10px; }

/* ARTICLES GRID: denser grid, compact cards */
#articles-list.grid-3{ gap: 12px; }
#articles-list .card.article{
  padding: 12px 14px;
}
#articles-list .article-row{ gap: 10px; }
#articles-list .article-thumb{
  width: 56px !important; height: 56px !important;
  border-radius: 8px; object-fit: cover;
  border: 1px solid var(--border);
  flex: 0 0 56px;
}
#articles-list .article h3{ margin: 0 0 6px; }
#articles-list .article p{ margin: 0 0 6px; }
#articles-list .article .meta{ font-size: 12px; }

/* NAV: a touch less tall */
.navbar{ padding: 10px 24px; }

/* Small screens keep breathing room automatically */
@media (max-width: 920px){
  .hero{ grid-template-columns: 1fr; gap: 14px; }
}

.subscribe {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background: var(--card); border:1px solid var(--border);
  padding:12px; border-radius:12px;
}
.subscribe input[type="email"]{
  flex:1 1 280px; min-width:240px; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px; font-size:16px;
}
.subscribe button{
  padding:10px 14px; border-radius:10px; background:var(--accent);
  color:#071423; font-weight:600; border:0; cursor:pointer;
}