/* nickmhall.com — shared stylesheet
   Extends the palette and type of the original one-pager. */

:root{
  --ink:#16181a; --mute:#5f6469; --rule:#e2e0dc;
  --accent:#0f4c47; --paper:#fbfaf8; --band:#12211f;
  --sunk:#efece7;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#eceae6; --mute:#9a9791; --rule:#2b2e31;
    --accent:#6fb3aa; --paper:#131517; --band:#0e1618; --sunk:#1b1e21;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:var(--accent)}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.wrap{max-width:760px; margin:0 auto; padding:0 24px}
.wrap-wide{max-width:1000px; margin:0 auto; padding:0 24px}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--rule); background:var(--paper)}
.nav .wrap{
  display:flex; flex-wrap:wrap; gap:6px 28px; align-items:baseline;
  padding-top:18px; padding-bottom:18px;
}
.nav .brand{
  font-weight:700; letter-spacing:-.02em; font-size:17px;
  color:var(--ink); text-decoration:none; margin-right:auto;
}
.nav a.link{
  font-size:14px; color:var(--mute); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.nav a.link:hover{color:var(--ink); border-bottom-color:var(--rule)}
.nav a.link[aria-current="page"]{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}

/* ---------- headings / text ---------- */
header.page{padding:64px 0 40px}
.eyebrow{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:0 0 18px;
}
h1{font-size:clamp(32px,5.4vw,50px); line-height:1.03; letter-spacing:-.025em; margin:0; font-weight:700; text-wrap:balance}
h1 span{font-weight:300; color:var(--mute)}
.lede{font-size:clamp(18px,2.4vw,21px); line-height:1.5; margin:22px 0 0; max-width:34em}
.lede b{font-weight:600}
.meta{margin:26px 0 0; font-size:15px; color:var(--mute)}
.meta a{text-decoration:none; border-bottom:1px solid var(--rule)}

section{padding:44px 0; border-top:1px solid var(--rule)}
h2{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:0 0 22px;
}
h3{font-size:20px; margin:0 0 4px; letter-spacing:-.01em}
p{margin:0 0 16px; max-width:36em}
p:last-child{margin-bottom:0}
ul.plain{margin:0 0 16px; padding-left:20px; max-width:36em}
ul.plain li{margin:0 0 8px}

/* ---------- images ---------- */
figure{margin:34px 0 0}
figure img{border-radius:6px; background:var(--sunk); width:100%}
figcaption{margin-top:10px; font-size:13px; color:var(--mute)}
.banner{margin:40px 0 0}
.banner img{border-radius:6px; width:100%}

.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,240px); gap:32px; align-items:start}
.split img{border-radius:6px}
@media (max-width:640px){ .split{grid-template-columns:1fr} .split .side{max-width:320px} }

/* ---------- proof cards ---------- */
.proof{margin:0 0 38px}
.proof:last-child{margin-bottom:0}
.role{font-size:13px; color:var(--mute); margin:0 0 12px}
.role b{color:var(--accent); font-weight:600}
.figures{
  display:flex; flex-wrap:wrap; gap:10px 34px; margin:16px 0 0;
  padding:16px 0 0; border-top:1px solid var(--rule);
}
.fig b{display:block; font-size:23px; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.fig span{font-size:13px; color:var(--mute)}

/* ---------- career rows ---------- */
.career{border-top:1px solid var(--rule); padding:13px 0 0; margin:0 0 13px}
.career-head{display:flex; justify-content:space-between; gap:16px; align-items:baseline}
.career b{font-size:16px}
.career .yr{font-size:13px; color:var(--mute); white-space:nowrap; font-variant-numeric:tabular-nums}
.career p{font-size:15px; color:var(--mute); margin:3px 0 0}

/* ---------- article list ---------- */
.piece{border-top:1px solid var(--rule); padding:22px 0 0; margin:0 0 22px}
.piece a.t{font-size:20px; font-weight:700; letter-spacing:-.01em; text-decoration:none; color:var(--ink)}
.piece a.t:hover{color:var(--accent)}
.piece .when{font-size:13px; color:var(--mute); margin:5px 0 0; font-variant-numeric:tabular-nums}
.piece p{font-size:15px; color:var(--mute); margin:8px 0 0}

/* ---------- article body ---------- */
.article-body p{font-size:17px; max-width:34em}
.article-body h3{margin:32px 0 8px}
.article-body blockquote{
  margin:26px 0; padding:0 0 0 20px; border-left:3px solid var(--accent);
  color:var(--mute); max-width:34em;
}

/* ---------- note / disclosure ---------- */
.note{
  background:var(--sunk); border-radius:6px; padding:18px 20px;
  font-size:14px; color:var(--mute); margin:30px 0 0; max-width:40em;
}
.note b{color:var(--ink)}

/* ---------- contact band ---------- */
.band{background:var(--band); color:#f3f1ec; margin-top:44px}
.band .wrap{padding-top:52px; padding-bottom:52px}
.band h2{color:#7fb3ab}
.band a{color:#fff}
.band p{color:#c9c6c0; max-width:32em}
.band .big{font-size:clamp(20px,3vw,26px); color:#fff; margin:0 0 6px; letter-spacing:-.01em}
.band .big a{text-decoration:none; border-bottom:1px solid #3d5a56}

footer{padding:26px 0; font-size:13px; color:var(--mute); border-top:1px solid var(--rule)}
footer .wrap{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between}
footer a{color:var(--mute); text-decoration:none; border-bottom:1px solid var(--rule)}