:root{
  /* Color tokens (navy on white) */
  --bg: #ffffff;
  --text: #0b1f3a;      /* navy */
  --muted: #4a5b73;     /* subdued slate */
  --border: #e7edf5;    /* very light line */
  --soft: #f6f8fb;      /* faint surface */
  --link: #0b1f3a;
  --linkHover: #0a2e6a;

  /* Typography */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-heading: "Source Serif 4", ui-serif, Georgia, "Times New Roman", Times, serif;

  /* Layout */
  --max: 760px;         /* narrower = more editorial */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 28px;
  --space-5: 44px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a{ color: var(--link); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
a:hover{ color: var(--linkHover); }

/* Container */
.container{
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.site-header .container{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}

.brand{
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text);
  text-decoration: none;
}

/* Nav: quiet + compact */
.nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.nav a{
  font-size: 0.95rem;
  color: var(--muted);
  padding: 4px 6px;
  border-radius: 8px;
  text-decoration: none;
}

.nav a:hover{
  color: var(--text);
  background: var(--soft);
}

.nav a.active{
  color: var(--text);
  background: #eef3fb;
}

/* Main */
main{
  padding: var(--space-5) 0 var(--space-5);
}

/* Typography */
h1, h2, h3{
  font-family: var(--font-heading);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.4px;
  line-height: 1.2;
}
h1{ font-size: clamp(30px, 3.4vw, 46px); }
h2{ font-size: 1.15rem; margin-top: var(--space-4); }
h3{ font-size: 1.02rem; margin-top: var(--space-3); }

p{ margin: 0 0 var(--space-2); }
.lead{
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 68ch;
}

/* Simple section separator */
.rule{
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0;
}

/* Meta row under hero */
.meta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.98rem;
}
.meta a{ color: var(--muted); }
.meta a:hover{ color: var(--text); }

/* Two-column block list (stacks on mobile) */
.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
@media (max-width: 740px){
  .grid{ grid-template-columns: 1fr; }
}

/* Lists */
ul, ol{
  margin: 0 0 var(--space-2);
  padding-left: 18px;
  color: var(--muted);
}
li{ margin: 8px 0; }

/* “Links list” presentation */
.linklist{
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
}
.linklist li{ margin: 8px 0; }

/* Simple callout box */
.callout{
  border: 1px solid var(--border);
  background: var(--soft);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}
.small{
  font-size: 0.95rem;
  color: var(--muted);
}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 0.95em;
  background: #f3f6fb;
  padding: 0 4px;
  border-radius: 4px;
}

/* Footer */
.footer{
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}