/* IPVectors — shared site styles.
   Layout: one reading column at ~68ch; evidence (captures, pillars, shelves) breaks wider. */
:root{
  --ink:#102636; --paper:#F3F6F8; --card:#FFFFFF; --line:#C7D3DC;
  --text:#1C2B36; --muted:#4A5B66;
  --brass:#D9B45B; --brass-deep:#7A5600;
  --good:#11924E; --warn:#B06F00; --bad:#D22F49; --violet:#5B4BD6;
  --rule:#DCE4EA; --shade:#E9EFF3; --veil:rgba(12,26,38,.54);
  --serif:"Newsreader",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ink:#0A141C; --paper:#0E1A24; --card:#14222E; --line:#2A3B49;
  --text:#E6ECF0; --muted:#A8B6C0; --brass:#D9B45B; --brass-deep:#E7C67A;
  --good:#45C47E; --warn:#D9A13A; --bad:#F0657C; --violet:#9A8DF0;
  --rule:#243542; --shade:#16242F; --veil:rgba(4,10,16,.62); color-scheme: dark;
}}
:root[data-theme="dark"]{
  --ink:#0A141C; --paper:#0E1A24; --card:#14222E; --line:#2A3B49;
  --text:#E6ECF0; --muted:#A8B6C0; --brass:#D9B45B; --brass-deep:#E7C67A;
  --good:#45C47E; --warn:#D9A13A; --bad:#F0657C; --violet:#9A8DF0;
  --rule:#243542; --shade:#16242F; --veil:rgba(4,10,16,.62); color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px))}
.col{max-width:68ch;margin:0 auto}
h1,h2,h3{font-family:var(--serif);font-weight:600;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,5.3vw,3.5rem);line-height:1.07;letter-spacing:-.018em}
h2{font-size:clamp(1.48rem,3.1vw,2.05rem);line-height:1.18}
h3{font-size:1.1rem;line-height:1.3}
p{margin:0}
a{color:inherit}
/* label size up 15% (.73 -> .84rem); now a block so its spacing is explicit rather
   than inherited from an inline line box, and scaled with the larger type */
.eyebrow{display:block;font-size:.84rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-deep);line-height:1.25;margin:0 0 9px}
.stack{display:flex;flex-direction:column;gap:1.05rem}
.fine{font-size:.85rem;color:var(--muted);line-height:1.6}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- masthead + nav ---------- */
.mast{background:var(--ink);color:#E6ECF0;border-bottom:3px solid var(--brass);
  position:sticky;top:env(safe-area-inset-top, 0px);z-index:20}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);
  z-index:21;background:var(--ink)}
.mast .wrap{padding-block:11px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{font-family:var(--serif);font-size:1.12rem;font-weight:600;text-decoration:none;color:#E6ECF0;white-space:nowrap;display:flex;align-items:center}
.brand span{color:var(--brass)}
/* The logo is square and must never be distorted: width and height are locked
   equal, and align-self / flex stop a column flex parent stretching it. */
.brand img{display:block;width:80px;height:80px;flex:0 0 auto;object-fit:contain}
@media (max-width:620px){
  .brand img{width:60px;height:60px}
}
.navbtn{display:none;background:none;border:1px solid #2A3B49;color:#E6ECF0;
  border-radius:2px;padding:6px 11px;font-size:.82rem;cursor:pointer}
.mast nav{display:flex;gap:17px;flex-wrap:wrap}
.mast nav a{font-size:.85rem;color:#A8B6C0;text-decoration:none;padding:3px 0;
  border-bottom:1px solid transparent}
.mast nav a:hover{color:#E6ECF0;border-bottom-color:var(--brass)}
.mast nav a[aria-current="page"]{color:var(--brass);border-bottom-color:var(--brass)}
@media (max-width:760px){
  .navbtn{display:block}
  .mast .wrap{flex-wrap:wrap}
  .mast nav{flex-basis:100%;flex-direction:column;gap:0;padding-bottom:8px}
  .mast nav[hidden]{display:none}
  .mast nav a{padding:9px 0;border-bottom:1px solid #1E3243}
}

/* ---------- sections ---------- */
section{border-bottom:1px solid var(--rule)}
section .wrap{padding-block:clamp(38px,6vw,70px)}
.shade{background:var(--shade)}
.dark{background:var(--ink);color:#E6ECF0}
.dark h2,.dark h1{color:#F3F6F8}
.dark p{color:#C3CFD8}
.dark .eyebrow{color:var(--brass)}
.hero{background:var(--card);border-bottom:1px solid var(--rule)}
.hero .wrap{padding-block:clamp(44px,7.5vw,90px)}
.hero h1{margin:5px 0 21px;max-width:18ch}
.lede{font-family:var(--serif);font-size:clamp(1.13rem,2.1vw,1.4rem);line-height:1.48;max-width:54ch}
.lede b{font-weight:600;box-shadow:inset 0 -.42em 0 rgba(217,180,91,.3)}

/* ---------- promise band (brass, sits directly under the masthead) ---------- */
/* Option C: headline open on a quiet field, the two columns in a card with a brass edge */
.promise{background:var(--shade);border-bottom:1px solid var(--rule)}
.promise .wrap{padding-top:clamp(34px,4.6vw,56px);padding-bottom:clamp(26px,3.4vw,44px)}
.promise .col{max-width:none}
.promise .eyebrow{color:var(--brass-deep)}
/* one line at every width: 27 characters, so size tracks the viewport and caps */
.promise h1{color:var(--ink);margin:3px 0 0;max-width:none;font-weight:400;
  white-space:nowrap;font-size:min(3.2rem,6.4vw);line-height:1.04;letter-spacing:-.012em}
.promise .rule{display:none}
.promise .split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start;
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--brass);
  border-radius:3px;margin-top:22px;padding:26px 0}
.promise .split > div:first-child{padding-left:28px;padding-right:34px}
.promise .split > div:last-child{padding-left:34px;padding-right:28px;border-left:1px solid var(--line)}
@media (max-width:820px){
  .promise .split{grid-template-columns:1fr;padding:22px 0;margin-top:18px}
  .promise .split > div:first-child{padding:0 22px 20px}
  .promise .split > div:last-child{padding:20px 22px 0;border-left:0;border-top:1px solid var(--line)}
}
.promise .beats{font-family:var(--sans);font-weight:600;color:var(--text);
  font-size:clamp(1.06rem,2vw,1.32rem);line-height:1.3}
.promise .mis{margin-top:10px;font-size:.96rem;line-height:1.56;color:var(--muted)}
.promise .hook{font-family:var(--serif);font-size:clamp(1.02rem,1.8vw,1.17rem);
  line-height:1.48;color:var(--text)}
.promise .hook + .hook{margin-top:10px;font-family:var(--sans);font-size:.95rem;
  line-height:1.55;color:var(--muted)}
.promise .ctas{margin-top:17px}
button.cta{font-family:var(--sans);background:transparent;cursor:pointer;line-height:1.2}
.promise .msnote{margin-top:10px;font-size:.88rem;font-weight:600;color:var(--brass-deep)}
.promise .cta{border-color:var(--brass);color:var(--brass-deep)}
.promise .cta:hover{background:var(--brass);color:var(--ink)}
.promise .cta.solid{background:var(--ink);border-color:var(--ink);color:var(--brass)}
.promise .cta.solid:hover{background:transparent;color:var(--brass-deep)}

/* ---------- what you'll find here ---------- */
.find{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:24px}
@media (max-width:780px){.find{grid-template-columns:1fr}}
.fi{background:var(--card);padding:20px 21px 18px;display:flex;flex-direction:column;gap:7px;min-width:0}
.fi h3{font-size:1.04rem}
.fi p{font-size:.92rem;color:var(--muted);line-height:1.55}
.fi a{margin-top:auto;padding-top:12px;font-size:.88rem;font-weight:600;
  color:var(--brass-deep);text-decoration:none}
.fi a:hover{text-decoration:underline}

/* ---------- the jobs it does: 8 items, 4/2/1 across (always divides evenly) ---------- */
.jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:24px}
@media (max-width:980px){.jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.jobs{grid-template-columns:1fr}}
.jb{background:var(--card);padding:17px 18px 19px;min-width:0}
.jb h3{font-size:.97rem;margin-bottom:5px}
.jb p{font-size:.87rem;color:var(--muted);line-height:1.5}
.jb.lead{background:var(--ink)}
.jb.lead h3{color:#F3F6F8}
.jb.lead p{color:#C3CFD8}
.jb .tag{display:block;font-size:.65rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);margin-bottom:6px}

/* ---------- buttons ---------- */
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
.cta{display:inline-block;font-size:.93rem;font-weight:600;border:1px solid var(--brass-deep);
  color:var(--brass-deep);padding:11px 23px;border-radius:2px;text-decoration:none}
/* contrast (2026-10-24): on light sections the outlined button reads in deep brass (6.5:1); dark bands keep the bright brass */
.shade .cta,.hero .cta,.hero-k .cta{border-color:var(--brass-deep);color:var(--brass-deep)}
.dark .cta,footer .cta,.hero-a .cta,.hero-c.ink .cta{border-color:var(--brass);color:var(--brass)}
.cta:hover{background:var(--brass);color:var(--ink)}
.cta.solid{background:var(--brass);color:var(--ink)}
.cta.solid:hover{background:transparent;color:var(--brass)}

/* ---------- cards / grids ---------- */
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:22px;margin-top:28px}
.make{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--brass);
  border-radius:3px;padding:23px;display:flex;flex-direction:column;gap:10px;min-width:0}
.make .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.make h3{font-size:1.3rem}
.make p{font-size:.96rem;color:var(--muted);line-height:1.58}
.make .does{font-size:.92rem;color:var(--text);border-top:1px solid var(--rule);padding-top:12px}

/* 3 items: 3 across or 1 across — never 2, which would orphan a cell */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:28px}
@media (max-width:780px){.pillars{grid-template-columns:1fr}}
.pil{background:var(--card);padding:21px;min-width:0}
.pil .n{font-family:var(--mono);font-size:.72rem;color:var(--brass-deep);display:block;margin-bottom:8px}
.pil h3{margin-bottom:6px}
.pil p{font-size:.92rem;color:var(--muted);line-height:1.58}

.shelves{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px;margin-top:26px}
.shelf{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:17px 18px;
  display:flex;flex-direction:column;gap:6px;position:relative;min-width:0}
.shelf.hit{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.shelf .lab{font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.shelf.hit .lab{color:var(--brass-deep)}
.shelf h3{font-size:1rem}
.shelf p{font-size:.88rem;color:var(--muted);line-height:1.55}
.shelf .mark{position:absolute;top:13px;right:15px;font-size:.67rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep)}

/* 6 items: 3, 2 or 1 across — all divide evenly, so no empty cell */
.limits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:24px}
@media (max-width:900px){.limits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.limits{grid-template-columns:1fr}}
.lim{background:var(--card);padding:17px 18px;min-width:0}
.lim h3{font-size:.96rem;margin-bottom:4px}
.lim p{font-size:.88rem;color:var(--muted);line-height:1.55}

.steps{counter-reset:s;display:flex;flex-direction:column;gap:1px;margin-top:26px;
  border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--line)}
.stp{background:var(--card);padding:16px 19px;display:grid;grid-template-columns:auto 1fr;gap:3px 15px}
.stp .sn{counter-increment:s;font-family:var(--mono);font-size:.74rem;color:var(--brass-deep);padding-top:3px}
.stp .sn::before{content:counter(s)}
.stp h3{font-size:1rem}
.stp p{font-size:.9rem;color:var(--muted);grid-column:2;line-height:1.55}

/* ---------- figures ---------- */
.fig{margin:26px 0 0;background:var(--card);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.fig img{display:block;width:100%;height:auto}
.fig figcaption{border-top:1px solid var(--rule);padding:12px 16px;font-size:.85rem;
  line-height:1.5;color:var(--muted);background:var(--paper)}
.fig figcaption b{color:var(--text);font-weight:600}
.stamp{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:3px}

.pull{margin-top:26px;border-left:3px solid var(--brass);padding:4px 0 4px 19px}
.pull p{font-family:var(--serif);font-size:clamp(1.16rem,2.3vw,1.46rem);line-height:1.38}
.pull cite{display:block;margin-top:9px;font-style:normal;font-size:.79rem;color:var(--muted)}

.tbl-w{overflow-x:auto;margin-top:24px;border:1px solid var(--line);border-radius:3px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:.93rem}
caption{text-align:left;padding:12px 16px;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--rule);font-weight:600}
th,td{text-align:left;padding:9px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
th{font-weight:500;color:var(--muted);font-size:.89rem}
td{font-family:var(--serif);font-size:1.02rem;font-variant-numeric:tabular-nums}
td code,.lbl code{font-family:var(--mono);font-size:.85em}

.facts{margin-top:26px;border-top:1px solid var(--rule);padding-top:18px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:18px 26px}
.facts .k{font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.facts .v{font-family:var(--serif);font-size:1rem;line-height:1.3}
.facts .v code{font-family:var(--mono);font-size:.88em}

.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:24px}
.who .person{display:flex;align-items:flex-start;gap:14px;min-width:0}
.who .bio{margin-top:8px;font-family:var(--serif);font-size:1.02rem;line-height:1.45;color:var(--text)}
.who .cred{margin-top:6px;font-size:.85rem;line-height:1.45;color:var(--muted)}
.who .person img{flex:0 0 68px;width:68px;height:68px;border-radius:50%;
  object-fit:cover;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.who .nm{font-family:var(--serif);font-size:1.1rem;font-weight:600}
.who .rl{font-size:.85rem;color:var(--muted)}

footer{background:var(--ink);color:#A8B6C0;font-size:.82rem}
footer .fine{color:#A8B6C0}
footer .wrap{padding-block:28px;display:flex;flex-direction:column;gap:11px}
footer a{color:var(--brass)}
footer .fnav{display:flex;gap:16px;flex-wrap:wrap}
footer .fnav a{text-decoration:none}
footer .fnav a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:620px){body{font-size:16px}}