/* ==========================================================================
   The Poindex — the shell: fonts, colours, top bar, footer, and the few
   pieces every Poindex screen shares (Poindexter's voice, index chips).
   ONE file for thepoindex.com and life.thepoindex.com. Markup comes from
   shell.js (same folder). Everything is prefixed px- so it sits on top of
   any section's own stylesheet.

   Identity: direction 1a "The Ledger" (Claude Design, "The Poindex identity",
   picked by James 21 Sep 2026). The tokens below are copied from that file's
   "SHELL TOKENS · --px-*" block, value for value -- change them there first.

     paper/ink + one cobalt + one clay. Clay is decorative only, never text.
     IBM Plex Serif  wordmark, Poindexter's voice, page titles
     IBM Plex Sans   everything else the person reads
     IBM Plex Mono   labels, chips, "THE" -- the shared gene with JP IV's "IV"

   Sections:  <link rel="stylesheet" href="https://thepoindex.com/brand/shell/shell.css">
              <script type="module" src="https://thepoindex.com/brand/shell/shell.js"></script>
   ========================================================================== */

@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/plex-serif-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/plex-serif-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/plex-sans-600.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")}

/* ---------- tokens (1a, light) ---------- */
:root{
  --px-bg:#F5F0E6;      --px-fg:#1E2126;
  --px-muted:#6B7079;   --px-rule:#DDD5C5;
  --px-accent:#2450B8;  --px-accent-fg:#F5F0E6;
  --px-tint:#DCE6FA;    --px-warm:#C96A3B;
  --px-font-display:"IBM Plex Serif",Georgia,serif;
  --px-font-ui:"IBM Plex Sans",system-ui,sans-serif;
  --px-font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --px-radius:10px;
  --px-max:960px;
}
/* ---------- tokens (1a, dark): the same five names, remapped; cobalt lifts to clear 7:1 on Night ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --px-bg:#15181D;  --px-fg:#EDE7DA;  --px-muted:#9AA0A8;
  --px-rule:#2A2F37; --px-accent:#7D9CEB; --px-accent-fg:#15181D;
  --px-tint:#22304F; --px-warm:#D98A5E}}
:root[data-theme="dark"]{
  --px-bg:#15181D;  --px-fg:#EDE7DA;  --px-muted:#9AA0A8;
  --px-rule:#2A2F37; --px-accent:#7D9CEB; --px-accent-fg:#15181D;
  --px-tint:#22304F; --px-warm:#D98A5E}

/* ---------- page defaults for Poindex screens (opt-in: body.px) ---------- */
body.px{margin:0;background:var(--px-bg);color:var(--px-fg);font:16px/1.55 var(--px-font-ui);-webkit-font-smoothing:antialiased}
body.px h1,body.px h2.px-title{font-family:var(--px-font-display);font-weight:600;letter-spacing:-.01em;line-height:1.2}
body.px a{color:var(--px-accent)}
body.px :focus-visible{outline:2px solid var(--px-accent);outline-offset:2px}

/* ---------- the nameplate ----------
   INTERIM, until Claude Design exports the outlined masters: the wordmark set in
   live type exactly as the identity file previews it ("THE" a mono eyebrow, "Po"
   in ink, "index" in cobalt). shell.js swaps it for poindex-horizontal-*.svg when
   MASTERS is true. Never export this as a logo file. */
.px-nameplate{display:inline-flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--px-fg)}
.px-nameplate .px-the{font:500 9px/1 var(--px-font-mono);letter-spacing:.18em;color:var(--px-muted);margin-bottom:3px}
.px-nameplate .px-name{font:600 21px/1 var(--px-font-display);letter-spacing:-.015em}
.px-nameplate .px-index{color:var(--px-accent)}
.px-nameplate.px-compact .px-the{display:none}
.px-wordmark{display:block;height:30px;width:auto}

/* ---------- top bar ---------- */
.px-bar{position:sticky;top:0;z-index:40;background:var(--px-bg);border-bottom:1px solid var(--px-rule)}
.px-bar-in{max-width:var(--px-max);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;font:500 13px/1.4 var(--px-font-ui)}
.px-bar a{text-decoration:none}
.px-section{font:500 11px/1 var(--px-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--px-muted);
  padding-left:14px;border-left:1px solid var(--px-rule)}
.px-links{display:flex;gap:4px;flex-wrap:wrap}
.px-links a{color:var(--px-muted);padding:6px 10px;border-radius:var(--px-radius)}
.px-links a:hover,.px-links a[aria-current="page"]{color:var(--px-fg);background:var(--px-tint)}
.px-actions{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap}
.px-signin{color:var(--px-accent-fg)!important;background:var(--px-accent);padding:7px 14px;border-radius:var(--px-radius);font-weight:600}
.px-who{display:inline-flex;align-items:center;gap:8px;color:var(--px-fg)!important}
.px-initials{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--px-tint);
  color:var(--px-accent);font:500 11px/1 var(--px-font-mono)}
.px-signout button{font:500 13px var(--px-font-ui);color:var(--px-muted);background:none;border:1px solid var(--px-rule);
  border-radius:var(--px-radius);padding:5px 10px;cursor:pointer}
.px-signout button:hover{color:var(--px-fg);border-color:var(--px-fg)}
@media (max-width:560px){.px-who-name,.px-section{display:none}}

/* ---------- footer ---------- */
.px-foot{border-top:1px solid var(--px-rule);margin-top:48px}
.px-foot-in{max-width:var(--px-max);margin:0 auto;padding:20px 16px 28px;display:flex;flex-wrap:wrap;gap:8px 20px;
  font:400 13px/1.5 var(--px-font-ui);color:var(--px-muted)}
.px-foot a{color:var(--px-muted)}
.px-foot a:hover{color:var(--px-fg)}
.px-credit{margin-left:auto}

/* ---------- Poindexter: a voice, not a face ----------
   He is the only thing on the page set in serif, so his words are recognisable
   before they are read. His presence is an 8px cobalt dot that breathes while he
   thinks and goes still once he has filed. */
.px-voice{font:500 1.2rem/1.45 var(--px-font-display);color:var(--px-fg);display:flex;gap:12px;align-items:baseline}
.px-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--px-accent);transform:translateY(-2px)}
.px-dot.thinking{animation:px-breathe 1.6s ease-in-out infinite}
@keyframes px-breathe{0%,100%{opacity:.35;transform:translateY(-2px) scale(.8)}50%{opacity:1;transform:translateY(-2px) scale(1)}}
@media (prefers-reduced-motion:reduce){.px-dot.thinking{animation:none}}

/* ---------- index chips: filed items, the product doing what the name says ---------- */
.px-chip{display:inline-flex;gap:6px;align-items:center;font:500 11px/1 var(--px-font-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--px-accent);background:var(--px-tint);padding:5px 8px;border-radius:calc(var(--px-radius) / 2)}
.px-label{font:500 11px/1 var(--px-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--px-muted)}