/* ==========================================================
   christopherjyork.com — shared stylesheet
   Navy + gold palette, system fonts only (no third-party font
   calls, so visitors' browsers never contact Google/Adobe).
   ========================================================== */
:root{
  --navy-900:#0f1b28;
  --navy-800:#14202e;   /* page ground */
  --navy-700:#1b2a3b;   /* raised surfaces */
  --navy-ink:#16324f;   /* headings on white */
  --ink:#e8ecf1;        /* body text on navy */
  --slate:#9fb0c2;      /* secondary text on navy */
  --line:#2b3a4a;       /* hairlines on navy */
  --gold:#c8a45e;       /* single accent */
  --gold-bright:#d4af5a;
  --white:#ffffff;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Avenir Next",Avenir,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nav-h:56px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--navy-800);color:var(--ink);
  font-family:var(--serif);line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%;height:auto}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--navy-900);
  padding:8px 14px;font-family:var(--sans);font-weight:600;z-index:100;border-radius:4px}
.skip:focus{left:12px}

/* ---------- top navigation (always visible) ---------- */
.topnav{
  position:sticky;top:0;z-index:50;background:rgba(15,27,40,.94);
  backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:2px solid var(--gold);padding-top:env(safe-area-inset-top,0px);
}
.topnav .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:var(--nav-h)}
.brand{font-family:var(--serif);font-weight:700;color:var(--gold-bright);text-decoration:none;
  font-size:1.05rem;letter-spacing:.04em;white-space:nowrap}
.topnav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none}
.topnav ul::-webkit-scrollbar{display:none}
.topnav a.navlink{display:block;font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:8px 10px;border-radius:4px;white-space:nowrap}
.topnav a.navlink:hover{color:var(--gold-bright)}
.topnav a.navlink[aria-current="true"],.topnav a.navlink[aria-current="page"]{color:var(--gold-bright)}
@media (max-width:520px){
  .brand-full{display:none}
  .topnav ul{gap:0}
  .topnav a.navlink{padding:8px 6px;font-size:.7rem;letter-spacing:.03em}
}
@media (max-width:360px){.brand{display:none}.topnav .wrap{justify-content:center}}
@media (min-width:521px){.brand-short{display:none}}

/* ---------- hero ---------- */
header.hero{background:var(--white);color:var(--navy-ink);padding:64px 0 52px;
  text-align:center;border-bottom:1px solid #e5e2da}
.headshot{width:132px;height:132px;border-radius:50%;object-fit:cover;
  border:3px solid var(--gold-bright);margin:0 auto 20px;display:block}
.name{font-size:clamp(2.3rem,6vw,3.5rem);line-height:1.05;letter-spacing:-.01em;
  margin:0 0 14px;font-weight:600;color:var(--navy-ink)}
.role{font-family:var(--sans);font-size:clamp(1rem,2.4vw,1.16rem);color:#3f6088;
  font-weight:500;margin:0 0 22px}
.creds{font-family:var(--sans);font-size:.86rem;letter-spacing:.02em;color:#5a7597;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px}
.creds span{white-space:nowrap}
.creds span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gold-bright);margin-right:8px;vertical-align:middle}

/* ---------- sections ---------- */
main{padding:8px 0 40px}
section{padding:44px 0;border-bottom:1px solid var(--line)}
section:last-child{border-bottom:0}
h2{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin:0 0 20px}
section p{margin:0 0 16px;font-size:1.06rem}
section p:last-child{margin-bottom:0}
a{color:var(--gold-bright)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* competencies */
.cols{display:grid;grid-template-columns:1fr;gap:0 28px;margin-top:26px}
@media(min-width:560px){.cols{grid-template-columns:1fr 1fr}}
.cols div{font-family:var(--sans);font-size:.95rem;padding:8px 0;border-bottom:1px solid var(--line)}

/* experience */
.job{margin:0 0 30px;padding-left:18px;border-left:2px solid var(--line)}
.job:last-child{margin-bottom:0}
.job h3{font-family:var(--sans);font-size:1.04rem;margin:0 0 2px;font-weight:600}
.job .meta{font-family:var(--sans);font-size:.84rem;color:var(--slate);margin:0 0 10px}
.job p{font-size:1rem;margin:0}
.subhead{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink);margin:34px 0 10px}

/* articles list */
.posts{list-style:none;margin:0;padding:0}
.posts li{padding:18px 0;border-bottom:1px solid var(--line)}
.posts li:first-child{padding-top:0}
.posts li:last-child{border-bottom:0}
.posts a.post-title{font-family:var(--sans);font-size:1.08rem;font-weight:600;color:var(--ink);
  text-decoration:none}
.posts a.post-title:hover{color:var(--gold-bright)}
.posts time{display:block;font-family:var(--sans);font-size:.8rem;color:var(--slate);margin:2px 0 6px}
.posts p{font-size:.98rem;margin:0;color:var(--ink)}
.more{font-family:var(--sans);font-size:.88rem;margin-top:20px}

/* contact */
.contact-list{list-style:none;margin:0 0 18px;padding:0;font-family:var(--sans)}
.contact-list li{padding:6px 0}
.contact-list .k{display:inline-block;min-width:88px;color:var(--slate);font-size:.85rem}
.contact-list a{color:var(--gold-bright);text-decoration:none;border-bottom:1px solid var(--line)}
.contact-list a:hover{border-bottom-color:var(--gold)}

/* article pages */
.article-head{background:var(--white);color:var(--navy-ink);padding:52px 0 40px;border-bottom:1px solid #e5e2da}
.article-head .kicker{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:#9a7a36;font-weight:600;margin:0 0 12px}
.article-head h1{font-size:clamp(1.8rem,4.6vw,2.6rem);line-height:1.15;margin:0 0 14px;font-weight:600}
.article-head .byline{font-family:var(--sans);font-size:.88rem;color:#5a7597;margin:0}
.article-head .byline a{color:#3f6088}
.prose{padding:36px 0 20px}
.prose p,.prose li{font-size:1.06rem}
.prose h2{margin-top:36px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:8px}
.prose table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.92rem;margin:8px 0 20px}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--gold);font-weight:600}
.prose code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;color:var(--gold-bright)}
.table-scroll{overflow-x:auto}
.author-box{margin:30px 0 0;padding:20px;border:1px solid var(--line);border-radius:6px;
  font-family:var(--sans);font-size:.92rem;background:var(--navy-700)}
.author-box strong{color:var(--ink)}

/* footer */
footer{padding:26px 0 44px;color:var(--slate);font-family:var(--sans);font-size:.8rem;
  border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
footer a{color:var(--slate)}