/* ==========================================================================
   PLUMBLINE — site stylesheet
   --------------------------------------------------------------------------
   One stylesheet for every page. Nothing is loaded from anywhere except
   Google Fonts, so the site works on any ordinary web host with no build
   step, no framework and no npm.

   HOW THIS FILE IS ORGANISED
     1.  Design tokens      colours, type, spacing — change these, not the rules
     2.  Dark mode          the same tokens, redefined
     3.  Base elements      html, body, headings, text, links
     4.  Layout             the page shell, grids, sections
     5.  Header and nav
     6.  Components         buttons, cards, tables, notes, the plumb rule
     7.  Forms
     8.  Footer
     9.  Responsive         phone and tablet adjustments
     10. Print

   TO RESTYLE THE WHOLE SITE, edit section 1. Every colour on every page is
   drawn from those tokens, so changing --accent there changes it everywhere.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* --- colour: surfaces ------------------------------------------------- */
  --paper:#f5f7f8;          /* page background                               */
  --card:#ffffff;           /* raised panels                                 */
  --sunk:#e9eef1;           /* inset blocks, code, quoted document text      */
  --rule:#d2dade;           /* strong borders                                */
  --rule-2:#e3e9ec;         /* hairlines inside components                   */

  /* --- colour: text ----------------------------------------------------- */
  --ink:#0e141a;            /* headings and primary text                     */
  --ink-2:#3a4650;          /* body copy                                     */
  --ink-3:#69757e;          /* captions, labels, muted detail                */

  /* --- colour: brand and semantics -------------------------------------- */
  --accent:#1d4f72;         /* Plumbline slate blue — links, buttons, rules  */
  --accent-2:#15384f;       /* darker, for hover and deep panels             */
  --accent-soft:#e2edf4;    /* tinted background for accent notes            */
  --true:#1f5f40;           /* "plumb" / verified / correct                  */
  --true-soft:#e2efe9;
  --off:#9a3324;            /* "off true" / exception / error                */
  --off-soft:#f8e8e5;
  --hold:#8a5c0c;           /* held for review / caution                     */
  --hold-soft:#f9efda;

  /* --- type ------------------------------------------------------------- */
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;

  /* --- spacing and measure ---------------------------------------------- */
  --wrap:1140px;            /* maximum content width                         */
  --gut:clamp(18px,4vw,40px); /* side gutter — never below 16px             */
  --band:clamp(56px,8vw,104px); /* vertical padding on a full-width band    */
  --radius:12px;
}

/* ==========================================================================
   2. DARK MODE
   --------------------------------------------------------------------------
   Two blocks, on purpose. The media query covers visitors whose device is set
   to dark. The [data-theme] block covers the toggle in the header, so an
   explicit choice beats the device setting in both directions.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0b1015; --card:#141b22; --sunk:#111921; --rule:#27323b; --rule-2:#1c242c;
    --ink:#e8eef3; --ink-2:#b1bdc7; --ink-3:#7f8d99;
    --accent:#74b4db; --accent-2:#9ccbe9; --accent-soft:#122939;
    --true:#6bbf93; --true-soft:#102219;
    --off:#e8958b; --off-soft:#2a1816;
    --hold:#daaa5c; --hold-soft:#261e11;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0b1015; --card:#141b22; --sunk:#111921; --rule:#27323b; --rule-2:#1c242c;
  --ink:#e8eef3; --ink-2:#b1bdc7; --ink-3:#7f8d99;
  --accent:#74b4db; --accent-2:#9ccbe9; --accent-soft:#122939;
  --true:#6bbf93; --true-soft:#102219;
  --off:#e8958b; --off-soft:#2a1816;
  --hold:#daaa5c; --hold-soft:#261e11;
  color-scheme:dark;
}

/* ==========================================================================
   3. BASE ELEMENTS
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font:400 17px/1.65 var(--sans);
}

h1,h2,h3,h4{
  margin:0;
  color:var(--ink);
  font-family:var(--serif);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1{font-size:clamp(32px,5vw,54px);line-height:1.06}
h2{font-size:clamp(25px,3.4vw,38px)}
h3{font-size:clamp(18px,1.9vw,22px)}
h4{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em}

p{margin:0 0 1em;max-width:66ch}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--ink)}

ul,ol{margin:0 0 1em;padding-left:22px;max-width:66ch}
li{margin:0 0 9px}

a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

code{font-family:var(--mono);font-size:.87em;background:var(--sunk);
  padding:.1em .36em;border-radius:3px}

img,svg{max-width:100%;height:auto}

/* Screen-reader-only text. Used for the skip link and for labels that would
   be redundant on screen but are needed by assistive technology. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Keyboard users get a visible "Skip to content" link as soon as they tab. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
  color:#fff;padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

/* The standard content container. Every band of the page puts its contents
   inside one of these, which is what keeps the side gutter consistent and
   stops text running to the screen edge on a phone. */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-left:max(16px,var(--gut));
  padding-right:max(16px,var(--gut));
}

/* A full-width horizontal band. Vertical padding only — the side gutter
   belongs to .wrap inside it, so background colours reach the screen edge. */
.band{padding-block:var(--band);border-top:1px solid var(--rule-2)}
.band.tint{background:var(--card)}
.band.deep{background:var(--accent);color:#eaf3f8;border-top:0}
.band.deep h2,.band.deep h3{color:#fff}
.band.deep a{color:#fff}
.band.first{border-top:0}

.grid{display:grid;gap:22px}
/* Grid and flex children do not shrink below their content by default, which
   is what lets one wide table or code block push the whole page sideways on a
   phone. min-width:0 lets the child shrink and scroll inside itself instead. */
.grid > *,.split > *{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:start}

.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px}
.lede{font-family:var(--serif);font-size:clamp(18px,2.1vw,21px);line-height:1.5;
  color:var(--ink-2);max-width:58ch;margin-top:18px}
.stack > * + *{margin-top:18px}

/* ==========================================================================
   5. HEADER AND NAVIGATION
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;align-items:center;gap:18px;padding-block:14px}

/* The wordmark. The small SVG to its left is a plumb bob on its line —
   the instrument the company is named after. */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.02em}
.brand svg{flex:0 0 auto;color:var(--accent)}
.brand span{font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-top:2px}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.site-nav a{display:inline-block;padding:9px 13px;border-radius:7px;
  color:var(--ink-2);text-decoration:none;font-size:15px}
.site-nav a:hover{background:var(--sunk);color:var(--ink)}
/* aria-current="page" is set in the HTML of each page on its own nav link. */
.site-nav a[aria-current="page"]{color:var(--accent);font-weight:600}
.site-nav a.cta{background:var(--accent);color:#fff;font-weight:600;margin-left:6px}
.site-nav a.cta:hover{background:var(--accent-2);color:#fff}

.nav-toggle{display:none;margin-left:auto;background:var(--card);
  border:1px solid var(--rule);border-radius:8px;padding:9px 13px;
  font:600 14px/1 var(--sans);color:var(--ink);cursor:pointer;min-height:40px}
.theme-toggle{background:none;border:1px solid var(--rule);border-radius:8px;
  width:38px;height:38px;cursor:pointer;color:var(--ink-3);font-size:15px;
  display:inline-flex;align-items:center;justify-content:center}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 24px;border-radius:9px;border:1px solid transparent;
  font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;
  background:var(--accent);color:#fff}
.btn:hover{background:var(--accent-2);color:#fff}
.btn.ghost{background:transparent;border-color:var(--rule);color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn.light{background:#fff;color:var(--accent-2)}
.btn.light:hover{background:#eaf3f8;color:var(--accent-2)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* --- cards ------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:24px;min-width:0}
.card h3{margin-bottom:9px}
.card p{font-size:15.5px;max-width:none}
.card .num{display:block;font:600 11px/1 var(--mono);letter-spacing:.1em;
  color:var(--ink-3);margin-bottom:13px}
.card.edge-true{border-left:4px solid var(--true)}
.card.edge-off{border-left:4px solid var(--off)}
.card.edge-hold{border-left:4px solid var(--hold)}
.card.edge-accent{border-left:4px solid var(--accent)}

/* --- the plumb rule ----------------------------------------------------
   A thin vertical line with a weight at the bottom: the brand motif, used
   to mark a definition list of facts. Decorative only.                    */
.rail{margin-top:30px;border-top:1px solid var(--rule)}
.rail-row{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:26px;padding:20px 0;border-bottom:1px solid var(--rule-2)}
.rail-row dt,.rail-k{font:600 12.5px/1.5 var(--mono);letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent);margin:0}
.rail-row dd,.rail-v{margin:0;font-size:16px;max-width:66ch}

/* --- stat ------------------------------------------------------------- */
.stat{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:var(--ink);display:block}
.stat.lg{font-size:clamp(30px,4vw,44px);line-height:1.05}
.stat-label{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;display:block}

/* --- notes ------------------------------------------------------------- */
.note{border-left:4px solid var(--accent);background:var(--accent-soft);
  border-radius:0 10px 10px 0;padding:18px 22px;margin-top:24px;max-width:74ch}
.note h4{margin-bottom:6px;color:var(--accent)}
.note p{max-width:none;font-size:16px}
.note.true{border-color:var(--true);background:var(--true-soft)}
.note.true h4{color:var(--true)}
.note.off{border-color:var(--off);background:var(--off-soft)}
.note.off h4{color:var(--off)}

/* --- tables ------------------------------------------------------------ */
.table-scroll{overflow-x:auto;margin-top:24px}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:540px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule-2);
  vertical-align:top}
th{font:600 10.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--rule)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* --- field rows -------------------------------------------------------
   The small evidence list used on the home page. Not a <table>: at phone
   width a table either scrolls sideways or wraps raggedly, and this needs
   to do neither.                                                          */
.fieldrows > div{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--rule-2)}
.fieldrows > div:last-child{border-bottom:0}
.fieldrows .f{flex:1 1 118px;font-size:15px;color:var(--ink-2)}
.fieldrows .v{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:600}
.fieldrows .c{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.fieldrows .tag{margin-left:auto}

/* --- tags -------------------------------------------------------------- */
.tag{display:inline-block;font:600 10.5px/1.85 var(--mono);letter-spacing:.05em;
  border-radius:4px;padding:0 8px;border:1px solid;white-space:nowrap}
.tag.true{color:var(--true);border-color:var(--true);background:var(--true-soft)}
.tag.off{color:var(--off);border-color:var(--off);background:var(--off-soft)}
.tag.hold{color:var(--hold);border-color:var(--hold);background:var(--hold-soft)}

/* --- quoted document text ---------------------------------------------- */
.doc{background:var(--sunk);border:1px solid var(--rule-2);border-radius:10px;
  padding:16px 18px;font-family:var(--mono);font-size:13.5px;line-height:1.75;
  white-space:pre-wrap;color:var(--ink-2);overflow-x:auto}
.doc mark{background:var(--hold-soft);color:var(--ink);padding:0 3px;border-radius:2px}

.fine{font:400 13px/1.65 var(--mono);color:var(--ink-3);margin-top:26px;
  padding-top:14px;border-top:1px solid var(--rule-2);max-width:74ch}

/* ==========================================================================
   7. FORMS
   ========================================================================== */
.form{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:26px;max-width:620px}
.field{margin-bottom:18px}
.field label{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;
  /* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
  font-size:16px;
  padding:12px 14px;border:1px solid var(--rule);border-radius:8px;
  background:var(--paper);color:var(--ink)}
.field textarea{min-height:130px;resize:vertical;line-height:1.55}
.field .hint{font-size:13px;color:var(--ink-3);margin-top:6px}
.form-status{margin-top:16px;font-size:15px;font-weight:600}
.form-status.ok{color:var(--true)}
.form-status.err{color:var(--off)}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer{background:var(--card);border-top:1px solid var(--rule);
  padding-block:48px 36px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:34px}
.site-footer h4{color:var(--ink-3);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:var(--ink-2);text-decoration:none;font-size:15px}
.site-footer a:hover{color:var(--accent)}
.footer-legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule-2);
  font-size:13.5px;color:var(--ink-3);display:flex;gap:18px;flex-wrap:wrap}

/* ==========================================================================
   9. RESPONSIVE
   --------------------------------------------------------------------------
   One breakpoint for tablets, one for phones. The nav collapses behind a
   Menu button below 860px; site.js toggles the .open class.
   ========================================================================== */
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:860px){
  .nav-toggle{display:inline-block}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--card);
    border-bottom:1px solid var(--rule);padding:10px max(16px,var(--gut)) 18px}
  .site-nav.open{display:flex}
  .site-nav a{padding:13px 10px;border-radius:8px}
  .site-nav a.cta{margin:8px 0 0;text-align:center}
  .site-header .wrap{position:relative}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .rail-row{grid-template-columns:minmax(0,1fr);gap:5px}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .btn{width:100%}
  .btn-row{flex-direction:column}
}

/* ==========================================================================
   10. PRINT
   --------------------------------------------------------------------------
   Someone will print a page to take into a meeting. Drop the chrome and the
   backgrounds so it does not waste ink.
   ========================================================================== */
@media print{
  .site-header,.site-footer,.btn-row,.nav-toggle,.theme-toggle{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .band{padding-block:18px;border:0}
  .card,.note,.form{border:1px solid #999;background:#fff}
  a{color:#000;text-decoration:underline}
}