/* ============================================================
   layout.css — page frame: nav, container, sections, hero,
   full-bleed bands, footer. No component internals here.
   ============================================================ */

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}

/* ---------- nav ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex; align-items:center; gap:22px; height:var(--nav-h)}
nav .brand{
  font-weight:650; letter-spacing:-.01em; margin-right:auto;
  color:var(--fg); white-space:nowrap;
}
nav .brand:hover{text-decoration:none}
nav a.nl{font-size:14.5px; color:var(--muted)}
nav a.nl:hover{color:var(--fg); text-decoration:none}
nav a.nl[aria-current="page"]{color:var(--fg)}
#theme-toggle{
  background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:20px; width:30px; height:30px; cursor:pointer;
  font-size:13px; line-height:1; flex:0 0 auto;
}
#theme-toggle:hover{color:var(--fg)}
/* progressively drop nav links as space runs out; .keep always survives */
@media(max-width:820px){ nav .wrap{gap:16px} nav a.nl:nth-of-type(n+5){display:none} }
@media(max-width:620px){ nav a.nl:not(.keep){display:none} }

/* ---------- sections ---------- */
section{padding:74px 0 0}
section:first-of-type{padding-top:58px}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:250px 1fr; gap:44px; align-items:start}
.hero-photo{
  width:250px; height:250px; object-fit:cover; display:block;
  border-radius:var(--r); border:1px solid var(--line);
}
.roles{margin:0 0 22px; font-size:15.5px; line-height:1.6}

/* the opening statement — serif, larger, sets the tone before the body prose */
.lead{
  font-family:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua","Times New Roman",serif;
  font-size:1.5rem; font-weight:400; line-height:1.34;
  letter-spacing:-.008em; margin:0 0 22px; max-width:none;
}
@media(max-width:760px){ .lead{font-size:1.22rem; line-height:1.38} }
.roles .org{color:var(--muted)}
.ilinks{display:flex; flex-wrap:wrap; gap:0 6px; margin-top:15px; font-size:14px}
.ilinks span{color:var(--muted); opacity:.4}
@media(max-width:760px){
  .hero{grid-template-columns:1fr; gap:24px}
  .hero-photo{width:170px; height:170px}
}

/* ---------- full-bleed band (InfraMind) ---------- */
.band{
  background:var(--band);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:74px;
  padding:56px 0 52px;
}
.band + section{padding-top:74px}

/* ---------- footer ---------- */
footer{
  margin-top:74px; padding:26px 0 54px;
  border-top:1px solid var(--line);
  font-size:14px; color:var(--muted);
}
footer a{color:var(--muted)}

/* ---------- generic two-column split ---------- */
.split{display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:start}
@media(max-width:760px){ .split{grid-template-columns:1fr} }