/* ============================================================
   jfsteiner.com — site stylesheet
   Colors, spacing, and fonts all live here. The pages
   (index.html, code/, cv/) only contain content.
   ============================================================ */

:root{
  --ink:#212730;        /* main text */
  --mut:#5b6672;        /* muted text */
  --acc:#155e8c;        /* accent (links, rules) */
  --acc-dark:#0d3f60;   /* link hover */
  --line:#e4e8ec;       /* hairlines */
  --soft:#f5f7f9;       /* soft panel background */
  --note-bg:#fff7e6;    /* callout background */
  --note-bd:#d9a400;    /* callout border */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:#fff; color:var(--ink);
  font:17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------- header / navigation ---------- */
.wrap{ max-width:50rem; margin:0 auto; padding:0 1.25rem; }
.site-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.5rem;
  padding:1.5rem 0 1rem; border-bottom:3px solid var(--acc); margin-bottom:2rem;
}
.site-id{ margin-right:auto; }
.site-title{
  margin:0; font-family: Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  font-size:1.55rem; line-height:1.2; font-weight:700;
}
.site-title a{ color:var(--ink); text-decoration:none; }
.tagline{
  margin:.15rem 0 0; color:var(--mut); font-size:.92rem;
  letter-spacing:.06em; text-transform:uppercase;
}
nav.site-nav a{
  color:var(--mut); text-decoration:none; font-size:1rem;
  padding:.2rem .1rem; margin-left:1.2rem;
}
nav.site-nav a:first-child{ margin-left:0; }
nav.site-nav a:hover{ color:var(--acc-dark); text-decoration:underline; }
nav.site-nav a[aria-current="page"]{ color:var(--acc); font-weight:600; }

/* ---------- general content ---------- */
h1{
  font-family: Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  font-size:1.7rem; margin:0 0 1rem;
}
h2{
  font-family: Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  font-size:1.3rem; margin:2.2rem 0 .6rem; padding-bottom:.25rem;
  border-bottom:1px solid var(--line);
}
a{ color:var(--acc); }
a:hover{ color:var(--acc-dark); }
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.88em; background:var(--soft); border:1px solid var(--line);
  border-radius:5px; padding:.08em .35em;
}

/* ---------- home page ---------- */
.bio{ display:flex; gap:1.8rem; align-items:flex-start; margin:0 0 1.5rem; }
.portrait{ width:200px; height:auto; border-radius:8px; flex-shrink:0; }
.bio p{ margin:.2rem 0 1rem; }
figure.wide{ margin:2.2rem 0; }
figure.wide img{ width:100%; height:auto; border-radius:8px; display:block; }
.contact{
  margin:2.2rem 0; padding-top:1.2rem; border-top:1px solid var(--line);
  color:var(--mut);
}
.contact strong{ color:var(--ink); }

/* ---------- code page ---------- */
article.model{ margin:0 0 3rem; }
.note{
  background:var(--note-bg); border:1px solid var(--note-bd);
  border-radius:8px; padding:.7rem 1rem; margin:1rem 0;
}
ol.params{ padding-left:1.6rem; }
ol.params li{ margin:.35rem 0; }
ol.params code{ font-weight:600; }
ul.downloads{ list-style:none; padding:0; margin:1rem 0; }
ul.downloads li{ margin:.4rem 0; }
ul.downloads li::before{ content:"\2913\00a0\00a0"; color:var(--acc); } /* ⤓ */
.filesize{ color:var(--mut); font-size:.9em; }

/* ---------- footer ---------- */
.site-foot{
  margin-top:3.5rem; padding:1.2rem 0 2.2rem; border-top:1px solid var(--line);
  color:var(--mut); font-size:.9rem;
}
.site-foot a{ color:var(--mut); }
.site-foot a:hover{ color:var(--acc-dark); }

/* ---------- small screens ---------- */
@media (max-width:640px){
  .bio{ flex-direction:column; align-items:center; text-align:left; }
  .portrait{ width:180px; }
  .site-head{ padding-top:1.1rem; }
  nav.site-nav{ width:100%; }
  nav.site-nav a{ margin-left:0; margin-right:1.2rem; }
}

/* ===== EDIT HERE: header banner (delete this whole block to go back to plain) ===== */
.site-head{
  background:
    linear-gradient(rgba(8,12,20,.20), rgba(8,12,20,.20)),  /* darkening veil: keeps the text readable */
    url("../img/banner.jpg") center 22%/cover no-repeat;
  color:#fff;
  padding:3.5rem 1.5rem;      /* banner height — raise to 5rem for a taller one */
  border-radius:12px;
}
.site-head .site-title a,
.site-head .tagline,
.site-head .site-nav a{ color:#fff; }
.site-head .site-nav a[aria-current="page"]{ color:#fff; border-bottom:2px solid #fff; }
.site-head .site-nav a:hover{ color:#fff; }