/* ==========================
   THEME — easy to tweak
   ========================== */
:root {
  --bg: #ffffff;              /* page background */
  --paper: #eef0f6;           /* soft paper card */
  --text: #0b1d14;            /* near-black green */
  --muted: #526478;           /* secondary text */
  --brand: #2c4974;           /* matches banner text */
  --border: #e3e8e4;          /* subtle borders */
  --radius: 16px;             /* rounded corners */
  --maxw: 1100px;             /* content width */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Noto Sans, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

a { color: var(--brand); text-decoration: none; }
a:hover { opacity: .9; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }

/* ======= Header with banner ======= */
header {
  border-bottom: 1px solid var(--border);
  background: #fff;
}

/* Your banner amendment (centered and width-limited) */
.banner {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 400px; /* limits how wide it can get */
  height: auto;
  max-height: 400px;
}

/* ======= Top nav ======= */
.topbar {
  display: flex;
  justify-content: flex-end; /* pushes navbar to the right */
  align-items: center;
  padding: .75rem 0;
}
.site-title { font-weight: 800; color: var(--brand); letter-spacing: .4px; }
.nav a { color: var(--muted); font-weight: 600; margin-left: 1rem; }
.nav a:hover { color: var(--brand); }

/* ======= Layout: main + sidebar (right) ======= */
main { padding: 4rem 0; }

.layout{
  display: grid;
  column-gap: clamp(2rem, 4vw, 3rem);  /* space between main + sidebar */
  row-gap: clamp(1.25rem, 3vw, 2rem);  /* vertical spacing between rows */
  align-items: start;
  grid-template-columns: 1fr 340px;    /* main | sidebar */
  margin-top: 1.5rem;                  /* space below the banner */
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  aside { order: -1; } /* About me moves above on mobile */
}

/* ======= Cards ======= */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;                     /* a little more interior space */
  box-shadow: 0 10px 28px rgba(2,6,23,0.05);
  margin-bottom: 1.25rem;               /* spacing between stacked cards */
}

h1, h2, h3 { line-height: 1.25; margin: .2rem 0 .5rem; }
h2 { font-size: clamp(1.4rem, 2vw, 1.6rem); }
h3 { font-size: 1.05rem; color: var(--brand); }
.muted { color: var(--muted); }

/* ======= Latest Updates list ======= */
.updates { display: grid; gap: .75rem; }
.update {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .85rem;
}
.update time { font-size: .85rem; color: var(--muted); }
.update p { margin: .25rem 0 0; }

.update-body img {
 
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 200px !important; /* adjust height limit */
  object-fit: contain !important; /* show full image */
  border-radius: 8px !important;
  margin-top: .5rem !important;
  margin-bottom: .25rem !important;
}

/* ======= Sidebar ======= */
aside .about p { margin: .5rem 0; }
.buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.btn { display: inline-block; padding: .6rem .85rem; border-radius: 12px; border: 1px solid var(--border); font-weight: 700; }
.btn.primary { background: var(--brand); color: #fff; border-color: transparent; }

/* ======= Footer ======= */
footer { border-top: 1px solid var(--border); padding: 2rem 0; color: var(--muted); }