/*
Theme Name: Blue Prysm
Theme URI: https://blueprysm.com
Author: Blue Prysm
Description: The Blue Prysm theme for blueprysm.com (ADR-0011). Light modernist ground, the official mark, and the three blues sampled from the logo files. Instrument Sans and IBM Plex Mono on a twelve-column grid. Block theme; the reading-pattern editorial blocks live in the blueprysm-blocks plugin.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: blueprysm
*/

/* Design tokens (ADR-0011, VISUAL-DESIGN.md §2). Held as custom properties so the
   theme and the block CSS resolve against one source.

   The three blues are sampled from the logo PNGs, not picked to match them. Each
   one is only allowed where it has the contrast for the job:

     --accent  #005DD6   5.45:1 on paper   — the only blue that may carry text on light
     --bright  #009CFF   6.31:1 on ink     — text on dark panels; graphic only on light
     --sky     #58D1FC  10.47:1 on ink     — text on dark panels; graphic only on light

   Reverse any of those and the text fails AA. */
:root{
  --ground:#F6F5F2; --surface:#FFFFFF; --surface-2:#FBFAF8;
  --ink:#12141A; --ink-2:#565B66; --ink-3:#5F6472;
  --rule:#DCDAD3; --rule-2:#C9C6BD;

  --accent:#005DD6; --accent-deep:#003E8F; --accent-soft:rgba(0,93,214,.10);
  --bright:#009CFF; --sky:#58D1FC;

  /* Evidence classes. All four clear AA on paper, and each also renders a text
     label, so colour reinforces the class rather than being the only signal. */
  --filed:#1E3A6E; --calc:#005DD6; --reported:#8A6100; --judge:#565B66;
  --reference:#1E3A6E; --reference-deep:#005DD6;
  --focus:#005DD6;

  --display:"Instrument Sans",system-ui,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--display);           /* alias: existing rules ask for --serif */
  --sans:"Instrument Sans",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* Type scale.
     One ladder, eight steps, absolute — so a size never depends on what a rule
     happens to be nested inside. The site previously carried 131 font-size
     declarations holding 63 distinct values in a mix of px, rem and em, and the
     em ones compounded: a paragraph inside the analysis container resolved to
     21.6px while the same paragraph on /about/ was 16px.

     Two of these steps are prose and the rest are labels. The rule is simple
     enough to hold: text you read continuously is --fs-base; prose inside a
     card, a list row or a rail is --fs-sm; anything smaller is a label, not a
     sentence. */
  --fs-3xs:.625rem;    /* 10px — micro mono: axis ticks, unit rows, counts */
  --fs-2xs:.6875rem;   /* 11px — mono eyebrows, keys, legends */
  --fs-xs:.8125rem;    /* 13px — notes, captions, legal, table units, sources */
  --fs-sm:.9375rem;    /* 15px — component prose, table cells, nav, buttons */
  --fs-base:1.0625rem; /* 17px — running body copy, every page */
  --fs-md:1.1875rem;   /* 19px — emphasis prose, section leads */
  --fs-lg:1.375rem;    /* 22px — page ledes */
  --fs-xl:1.625rem;    /* 26px — figure values, in-flow h2 */

  --lh-body:1.6;       /* all prose, at any size on the ladder */
  --lh-label:1.45;     /* labels and table rows */
  --lh-tight:1.38;     /* ledes and large text in flow */

  /* One reading column, site-wide. 48rem holds the widest numeric table at
     --fs-sm cells (the six-column carrier table measures 694px) and keeps
     --fs-base prose near 80 characters a line. Prose was previously capped at
     34rem, 38rem, 40rem, 41rem, 42rem, 44rem, 46rem, 60rem and 62ch by
     different components, which is why the same paragraph changed width from
     one page to the next. */
  --col:48rem;
  color-scheme:light;
}

*{box-sizing:border-box}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-base);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;margin:0;
}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Display type is tight rather than expanded — restraint is the authority signal. */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.1;text-wrap:balance}

.blueprysm-shell{max-width:70rem;margin:0 auto;padding-inline:20px}
.blueprysm-col{max-width:var(--col)}

/* Site header / footer parts */
.site-header{border-bottom:1px solid var(--rule);padding-block:18px}
.site-footer{border-top:1px solid var(--rule);padding-block:40px;font-size:var(--fs-xs);color:var(--ink-3);line-height:var(--lh-body)}
.site-footer .footer-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 20px}
.site-footer .footer-nav a{color:var(--ink-2);font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase}
.site-footer .footer-nav a:hover{color:var(--accent);text-decoration:none}
.site-footer .wp-block-search{max-width:26rem;margin:0 0 26px}
.site-footer .wp-block-search__input{background:var(--surface);border:1px solid var(--rule-2);color:var(--ink);font-family:var(--mono);font-size:var(--fs-xs);padding:10px 11px}
.site-footer .wp-block-search__button{background:var(--accent);color:#FFFFFF;border:0;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;padding:10px 15px;cursor:pointer}
.site-footer .footer-mark{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.site-footer .footer-mark img{width:26px;height:23px;display:block}
.site-footer .footer-mark span{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);letter-spacing:-.02em;color:var(--ink)}

/* Site navigation. Dark on every page, and solid rather than a translucent
   blur — the old backdrop-filter existed to sit over the wave field, and there
   is no field now.

   Why dark everywhere: the homepage hero is dark (ADR-0011 §3a), and a light bar
   above it leaves a seam. The usual fix is a bar that turns light on scroll,
   which needs JavaScript this design does not have. A dark bar above light pages
   is a coherent pattern on its own, and it lets the white logo variant do real
   work. Contrast on ink: brand 18.41:1, links 8.37:1, CTA 6.31:1. */
.site-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:22px;padding:14px clamp(18px,4vw,56px);background:var(--ink);border-bottom:1px solid #262A33}
.site-brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:var(--fs-base);letter-spacing:-.03em;color:#FFFFFF}
.site-brand img{width:30px;height:26px;display:block}
.site-brand:hover{text-decoration:none}
.site-nav ul{list-style:none;display:flex;gap:clamp(12px,2vw,26px);margin:0;padding:0;font-size:var(--fs-sm)}
.site-nav li a{color:#A9AFBC}
.site-nav li a:hover{color:#FFFFFF;text-decoration:none}
.site-nav-cta{margin-left:auto;font-size:var(--fs-sm);font-weight:600;background:var(--bright);color:var(--ink);padding:10px 18px}
.site-nav-cta:hover{background:var(--sky);color:var(--ink);text-decoration:none}
/* Narrow: the links wrap onto a second row rather than disappearing. The theme
   used to hide them outright, which left a phone with no navigation at all
   except the footer. Wrapping keeps every destination reachable and needs no
   disclosure widget, so the page stays free of JavaScript. */
@media(max-width:820px){
  .site-nav{flex-wrap:wrap;gap:10px 16px;padding-block:12px}
  .site-nav ul{order:3;flex-basis:100%;flex-wrap:wrap;gap:10px 18px;font-size:var(--fs-xs);border-top:1px solid #262A33;padding-top:10px}
  .site-nav-cta{padding:9px 15px;font-size:var(--fs-xs)}
}
/* The nav is sticky, not fixed, so it needs no spacer under it. */

/* WordPress puts --wp--style--block-gap (24px) between top-level blocks, which
   dropped a 24px band of paper between the dark nav and the dark hero, and
   another between the last section and the footer. Header, main and footer are
   separate regions stacked edge to edge, not content that needs breathing room
   between it. Content inside them keeps the normal block gap. */
.wp-site-blocks > *{margin-block-start:0}

/* Post header */
.entry-eyebrow{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.entry-title{font-family:var(--display);font-weight:600;font-size:clamp(2.1rem,5.2vw,3.1rem);line-height:1.08;letter-spacing:-.035em;margin:0}
.entry-content{max-width:var(--col)}
/* Unless the content is a .pad layout, which sets the column on its own blocks
   — capping both levels subtracts the gutter twice. */
.entry-content:has(.pad){max-width:none}
.entry-content p{color:var(--ink-2);max-width:none}
.entry-content strong{color:var(--ink);font-weight:600}