:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height: 1.55; }
*{box-sizing:border-box}
body { margin: 0; color: #0b1220; background: linear-gradient(180deg,#f7f9fc 0%,#e9eef7 100%); }
header { background: #0b1220; color: #fff; padding: 0; }
.hero-banner {
  width: 100%;
  height: 280px;              /* adjust this number to make the banner taller/shorter */
  background-size: cover;     /* fills the area */
  background-position: center 35%; /* move up/down focal point: 0% top, 50% center, 100% bottom */
  display:block;
}
.brand { padding: 10px 20px; display:flex; align-items:center; gap:10px; }
.brand h1 { margin: 0; font-size: 18px; }
.brand p { margin: 2px 0 0 0; opacity:.8; font-size: 13px; }
nav { background: #12243a; color: #fff; padding: 8px 16px; display:flex; gap:12px; flex-wrap:wrap; position: sticky; top: 0; z-index: 10; }
nav a { color: #bfe1ff; text-decoration:none; padding:6px 10px; border-radius:6px; }
nav a:hover { background: #1b3555; }
main { max-width: 980px; margin: 24px auto; background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 10px 30px rgba(3,18,33,.08); }
h2 { margin-top: 28px; }
code, .tag { background:#f2f6ff; border:1px solid #d6e4ff; padding:2px 6px; border-radius:6px; }
footer { max-width:980px; margin: 0 auto; padding: 16px 0 40px; color:#4b5b74; text-align:center; }
.kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color:#5c738f; }
.callout { background:#fff7e6; border:1px solid #ffd591; padding:12px 14px; border-radius:8px; }
hr { border:0; border-top:1px solid #eef2f7; margin:24px 0; }
ul.grid { list-style:none; padding:0; margin:0; display:grid; gap:12px; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); }
.card { background:#fbfdff; border:1px solid #e6eef7; padding:14px; border-radius:10px; transition: all .18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(3,18,33,.12); }
.small { font-size: 14px; }
.badge { display:inline-block; padding:4px 8px; border-radius:6px; background:#0b1220; color:#bfe1ff; font-size:12px; border:1px solid #1b3555; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #d6e4ff; background:#f2f6ff; font-size:12px; }
.figure { border-radius: 10px; border:1px solid #e6eef7; overflow:hidden; }
.meta { color:#5c738f; font-size: 13px; }
.table { width:100%; border-collapse: collapse; }
.table td, .table th { border:1px solid #eef2f7; padding:8px; text-align:left; }
/* Portrait helpers */
.portrait {
  width: 100%;
  height: 520px;              /* controls visible height of the portrait */
  object-fit: cover;          /* fill box without distortion */
  object-position: center top;/* keep faces near top in view */
  display:block;
  border-radius: 10px;
  border:1px solid #e6eef7;
}