/* ==========================================================================
   James Poindexter IV — the shell: fonts, colours, top bar, footer.
   ONE file for every page and app on james-poindexter-iv.com and its
   subdomains. Markup comes from shell.js (same folder). Everything here is
   prefixed jp- so it can sit on top of any app's own stylesheet.

   Apps:  <link rel="stylesheet" href="https://james-poindexter-iv.com/brand/shell/shell.css">
          <script type="module" src="https://james-poindexter-iv.com/brand/shell/shell.js"></script>
   ========================================================================== */

@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/archivo.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/plex-mono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/plex-mono-600.woff2") format("woff2")}

:root{
  --jp-paper:#FCFCFB; --jp-panel:#F2F4F5; --jp-ink:#1A1C1E; --jp-ink-2:#55595E;
  --jp-line:#D8DBDE; --jp-line-soft:#E7E9EB; --jp-blue:#0F6FD6; --jp-blue-ink:#0B5CB4;
  --jp-blue-wash:#E8F1FB; --jp-header-fill:#26282B; --jp-header-text:#FFFFFF;
  --jp-sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --jp-mono:"IBM Plex Mono","Courier New",monospace;
  --jp-max:960px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --jp-paper:#141619; --jp-panel:#1D2024; --jp-ink:#E9EBED; --jp-ink-2:#A2A7AD;
  --jp-line:#383C41; --jp-line-soft:#2A2E33; --jp-blue:#4D9BF0; --jp-blue-ink:#6FAEF4;
  --jp-blue-wash:#1A2836; --jp-header-fill:#2E3237; --jp-header-text:#F2F4F5}}
:root[data-theme="dark"]{
  --jp-paper:#141619; --jp-panel:#1D2024; --jp-ink:#E9EBED; --jp-ink-2:#A2A7AD;
  --jp-line:#383C41; --jp-line-soft:#2A2E33; --jp-blue:#4D9BF0; --jp-blue-ink:#6FAEF4;
  --jp-blue-wash:#1A2836; --jp-header-fill:#2E3237; --jp-header-text:#F2F4F5}

/* ---------- top bar ---------- */
.jp-bar{position:sticky;top:0;z-index:40;background:var(--jp-paper);border-bottom:1px solid var(--jp-line)}
.jp-bar-in{max-width:var(--jp-max);margin:0 auto;padding:9px 24px;display:flex;flex-wrap:wrap;
  align-items:center;gap:1px;font-family:var(--jp-mono);font-size:12.5px;line-height:1.55}
.jp-bar a{font-family:var(--jp-mono);font-size:12.5px;color:var(--jp-ink-2);text-decoration:none;
  border-bottom:0;padding:5px 10px;white-space:nowrap}
.jp-bar a:hover,.jp-bar a:focus-visible{color:var(--jp-blue-ink);background:var(--jp-panel)}
.jp-bar a:focus-visible{outline:2px solid var(--jp-blue);outline-offset:2px}
.jp-bar a.jp-ai{display:inline-flex;align-items:center;gap:6px;color:var(--jp-blue-ink);font-weight:600}
.jp-spark{display:block;flex:none} .jp-spark rect{fill:var(--jp-blue)} .jp-spark path{fill:var(--jp-paper)}
.jp-bar .jp-brand{padding-left:0}
.jp-bar .jp-brand:hover{background:transparent}
/* 119px puts the wordmark's cap height at the links' 8.73px: same optical weight. */
.jp-wordmark{display:inline-block;width:119px;height:auto;vertical-align:baseline}
.jp-app{font-weight:600;color:var(--jp-ink);letter-spacing:.02em;padding:5px 10px;margin-left:4px;
  border-left:1px solid var(--jp-line);white-space:nowrap}
.jp-links{display:flex;flex-wrap:wrap;align-items:center;gap:1px}
.jp-bar a[aria-current="page"],.jp-bar a.active{color:var(--jp-blue-ink);border-bottom:2px solid var(--jp-blue);padding-bottom:3px}
.jp-actions{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--jp-ink-2);white-space:nowrap}
.jp-bar a.jp-cta{background:var(--jp-blue);color:#fff;font-weight:600}
.jp-bar a.jp-cta:hover{background:var(--jp-blue-ink);color:#fff}
.jp-actions button{font:600 12.5px var(--jp-mono);padding:5px 10px;border:1px solid var(--jp-line);
  background:var(--jp-paper);color:var(--jp-ink-2);cursor:pointer;border-radius:0}
.jp-actions button:hover{color:var(--jp-blue-ink);border-color:var(--jp-blue)}
/* Phones: wordmark and actions share the first row; the links become one row you
   swipe, so the sticky bar stays two lines tall however many links an app has. */
@media (max-width:760px){
  .jp-bar-in{padding:7px 16px}
  .jp-bar .jp-brand{padding:2px 0 4px}
  .jp-actions{order:2;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;white-space:normal;overflow-wrap:anywhere}
  .jp-links{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:2px -10px 0}
  .jp-links::-webkit-scrollbar{display:none}}

/* ---------- footer ---------- */
.jp-foot{background:var(--jp-paper);color:var(--jp-ink-2);font-family:var(--jp-sans)}
.jp-foot-in{max-width:var(--jp-max);margin:0 auto;padding:0 24px 40px}
.jp-foot a{color:var(--jp-ink-2);text-decoration:none;border-bottom:1px solid var(--jp-line-soft)}
.jp-foot a:hover{color:var(--jp-blue-ink);border-bottom-color:var(--jp-blue)}
.jp-foot-full .jp-grid{padding-top:26px;border-top:3px solid var(--jp-ink);font-size:13.5px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px 24px}
.jp-foot-col h4{font-family:var(--jp-mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--jp-ink);margin:0 0 11px}
.jp-foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.jp-foot-id p{margin:0 0 7px;max-width:34ch}
.jp-foot-id .jp-name{color:var(--jp-ink);font-weight:600;font-size:14.5px}
.jp-foot-bottom{grid-column:1/-1;border-top:1px solid var(--jp-line-soft);padding-top:15px;
  display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px}
.jp-foot-slim .jp-grid{border-top:1px solid var(--jp-line);padding-top:14px;display:flex;flex-wrap:wrap;
  gap:6px 18px;font:12px/1.6 var(--jp-mono);letter-spacing:.06em;text-transform:uppercase}
@media (max-width:760px){.jp-foot-full .jp-grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.jp-foot-full .jp-grid{grid-template-columns:1fr}}