/* PrairieStack public-site chrome -- the shell every light public page shares.

   ONE source.  Before this the same ``:root`` token block, base element rules and
   ``.page``/``.header``/``.brand``/``.nav``/``.footer*`` rules were inlined in
   ``home.html``, ``services.html``, ``products.html``, ``product_detail.html``,
   ``company_page.html`` and (a shorter, already-differing copy) in
   ``prairiestack_public_shell.html``: six copies of one fact, which is exactly how
   the legal pages ended up with none of it.  A change to the masthead or the
   footer meant remembering to make it five times and getting the sixth right too.

   The stylesheet is versioned in its filename (immutable) AND cache-busted with a
   ``?v=`` derived from its own content hash (``_ps_public_chrome_v``), so a stale
   copy can never outlive a change to this file.

   Declarations here are the canonical ones: where a page's inline copy had drifted
   (a different mark aspect-ratio, a 28px footer gap, a nav highlighter keyed on
   ``:last-child``, a missing ``--coral`` token) the drift was resolved here rather
   than carried forward.  Page-specific CSS stays in the page, after this file.
*/
:root { --ink:#10363a; --ink-2:#1a4d52; --slate:#406a6d; --flax:#e6bf4d; --flax-soft:#f5eccf; --coral:#D37B62; --mist:#F1F5F3; --paper:#FCFDF9; --line:#CCDAD7; --muted:#627578; --font:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; }
* { box-sizing:border-box; } html { background:var(--mist); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; } body { margin:0; background:var(--mist); }
a { color:inherit; text-decoration:none; } .page { max-width:1600px; margin:0 auto; overflow:hidden; background:var(--mist); }
.header { height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 76px; border-bottom:1px solid var(--line); background:rgba(241,245,243,.92); }
.brand { display:flex; align-items:center; gap:12px; min-height:44px; font-weight:780; letter-spacing:-.055em; font-size:25px; } .brand img.prairiestack-mark-canonical { width:44px; height:auto; aspect-ratio:600/480; display:block; object-fit:contain; } .footer .brand img.prairiestack-mark-canonical { box-sizing:border-box; padding:3px; border-radius:7px; background:var(--paper); }
.booksforge-nav-link, .immage-nav-link { color:var(--ink); font-weight:720; }
.nav { display:flex; align-items:center; gap:34px; font-size:15px; color:var(--slate); }
/* Touch/pointer targets: a nav entry is 44px tall even though its text is 15px.
   WCAG 2.5.5 asks for 44x44 CSS px; the entries were ~21px of clickable box. */
.nav a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; } .nav a[aria-current="page"] { color:var(--ink); font-weight:720; border-bottom:2px solid var(--flax); padding-bottom:5px; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; display:inline-flex; align-items:center; min-height:44px; background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; font-weight:700; }
.skip-link:focus { left:0; outline:3px solid var(--flax); outline-offset:2px; }
.footer { display:flex; justify-content:space-between; gap:32px; padding:42px 76px 55px; background:var(--ink); border-top:1px solid rgba(255,255,255,.22); color:#D6E5E1; } .footer .brand { color:#F8FBF5; } .footer small { font-size:15px; line-height:1.55; max-width:390px; }
.footer-links { display:flex; gap:44px; align-items:flex-start; font-size:15px; color:#F8FBF5; } .footer-group { display:flex; flex-direction:column; gap:9px; } .footer-group strong { font:700 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#9FB8B4; } .footer-group a { align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; min-width:44px; border-bottom:1px solid rgba(255,255,255,.35); }
@media (max-width: 900px) { .header { padding:0 28px; } .nav { gap:16px; } .footer { padding-left:28px; padding-right:28px; } }
@media (max-width: 580px) { .header { height:auto; flex-direction:column; align-items:flex-start; gap:12px; padding:16px 20px 18px; } .brand { font-size:22px; } .nav { gap:14px; font-size:14px; flex-wrap:wrap; } .footer { display:block; } .footer-links { margin-top:28px; flex-wrap:wrap; gap:28px; } }