/* The Reality Gap — design system.
   Reference set: audit report, exam paper, editorial investigation.
   Rules, not cards. Paper, not white. One mark, used as evidence. */

:root{
  --paper:#FBFAF7;
  --paper-2:#F3F1EA;
  --ink:#15151B;
  --muted:#45454F;
  --faint:#85858F;
  --line:#E2E0D8;
  --hair:#EEEBE3;
  --panel:#F3F1EA;

  --mark:#C2411F;      /* the one accent: failures, marks, emphasis */
  --hold:#1F5B3D;
  --warn:#8A6212;

  /* kept for the app layer */
  --indigo:#C2411F;
  --indigo-soft:#FAF0EC;
  --indigo-line:#EBD5CA;
  --amber:#C2411F;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter Tight",Inter,system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --gut:140px;          /* left gutter for section marks */
  --wrap:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;margin:0;color:var(--ink)}
h1{font-size:clamp(42px,5.6vw,74px);line-height:1.02}
h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08}
h3{font-size:23px;line-height:1.25}
h4{font-size:19px;line-height:1.3}
em{font-style:italic}
p{margin:0}
.lead{font-family:var(--serif);font-size:clamp(20px,2.1vw,25px);line-height:1.45;color:var(--muted);max-width:30em}
.body{font-size:17px;line-height:1.62;color:var(--muted);max-width:34em}
.body.ink{color:var(--ink)}
.sub{color:var(--muted);font-size:16px;line-height:1.55}
.small{font-size:15px;line-height:1.5;color:var(--muted)}

.mono,.eyebrow,.label,.fignum{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:500;color:var(--faint);
}
.label.ink,.eyebrow.ink{color:var(--ink)}
.mark{color:var(--mark)}

/* ---------- structure ---------- */
.rule{border:0;border-top:1px solid var(--line);margin:0}
.hair{border:0;border-top:1px solid var(--hair);margin:0}

section.band{padding:92px 0}
section.band.tight{padding:60px 0}
section.band.paper2{background:var(--paper-2)}
section.band.ink{background:var(--ink);color:var(--paper)}
section.band.ink h2,section.band.ink h3{color:var(--paper)}
section.band.ink .body,section.band.ink .sub{color:#BCBAC2}
section.band.ink .mono{color:#88868F}

/* a section head: mono mark in the gutter, content to the right */
.sec{display:grid;grid-template-columns:var(--gut) 1fr;gap:0 40px;align-items:start}
.sec > .gutter{padding-top:8px}
.sec + .sec{margin-top:72px}
.sec-head{margin-bottom:38px}

/* ---------- nav ---------- */
nav.top{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:60}
nav.top .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:28px;padding-top:20px;padding-bottom:20px}
nav.top .brand{text-decoration:none;display:flex;align-items:baseline;gap:12px}
nav.top .brand b{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:-.01em}
nav.top .brand span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
nav.top .links{display:flex;align-items:baseline;gap:30px}
nav.top .links a{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
nav.top .links a:hover{color:var(--ink)}
nav.top .links a.cta{color:var(--ink);border-bottom:1.5px solid var(--mark);padding-bottom:3px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);text-decoration:none;padding:15px 24px;border:1px solid var(--ink);
  border-radius:2px;transition:background .14s,color .14s;cursor:pointer;
}
.btn:hover{background:var(--mark);border-color:var(--mark)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.onink{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.onink:hover{background:var(--mark);border-color:var(--mark);color:var(--paper)}
.textlink{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--mark);padding-bottom:2px}
.textlink:hover{color:var(--mark)}

/* ---------- figures: product shown as document exhibits ---------- */
.fig{border:1px solid var(--line);background:#fff}
.fig .figbar{border-bottom:1px solid var(--line);padding:10px 16px;display:flex;gap:10px;align-items:center;background:var(--paper-2)}
.fig .figbar code{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.02em;text-transform:none}
.fig .figbody{padding:26px}
figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-top:12px}
figure{margin:0}

/* ---------- lists that read like an index ---------- */
.index{border-top:1px solid var(--line)}
.index .row{display:grid;grid-template-columns:54px 1fr;gap:0 26px;padding:24px 0;border-bottom:1px solid var(--hair);align-items:start}
.index .row .n{font-family:var(--mono);font-size:12px;color:var(--mark);padding-top:4px;letter-spacing:.06em}
.index .row h4{margin-bottom:7px}
.index .row p{color:var(--muted);font-size:16px;line-height:1.55;max-width:46em}

/* two and three column text runs, separated by rules not boxes */
.cols{display:grid;gap:0}
.cols.c2{grid-template-columns:1fr 1fr}
.cols.c3{grid-template-columns:repeat(3,1fr)}
.cols > div{padding:30px 34px;border-left:1px solid var(--hair)}
.cols > div:first-child{padding-left:0;border-left:0}
.cols h4{margin-bottom:9px}
.cols p{font-size:16px;line-height:1.55;color:var(--muted)}

/* ---------- data ---------- */
table.data{width:100%;border-collapse:collapse;font-size:15px}
table.data th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  font-weight:500;text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--ink);
}
table.data td{padding:15px 16px 15px 0;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--muted)}
table.data td:first-child{color:var(--ink)}
table.data td.num{font-family:var(--mono);font-size:13px;white-space:nowrap}

.stat{display:flex;gap:56px;flex-wrap:wrap}
.stat div b{display:block;font-family:var(--serif);font-weight:400;font-size:52px;line-height:1;letter-spacing:-.02em}
.stat div span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:8px}

/* ---------- quotes / specimen ---------- */
.specimen{border-left:2px solid var(--mark);padding:4px 0 4px 26px}
.specimen p{font-family:var(--serif);font-size:21px;line-height:1.45}
.specimen .who{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:12px}

.verdict{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.verdict.hold{color:var(--hold)}
.verdict.warn{color:var(--warn)}
.verdict.bad{color:var(--mark)}

/* ---------- proof ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:30px 44px}
.logos img{height:24px;width:auto;max-width:112px;object-fit:contain;opacity:.5;filter:grayscale(1);transition:opacity .15s}
.logos img:hover{opacity:.9}
/* a wall of wordmarks reads as a wall only on an even grid: cells, not a ragged row */
.logos.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:32px 24px;align-items:center;justify-items:center}
.logos.wall img{max-height:26px;height:auto;max-width:100%}
@media(max-width:980px){.logos.wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.logos.wall{grid-template-columns:repeat(2,1fr)}}
.proofline{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.phbadge{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);padding:9px 15px 9px 11px;background:#fff}
.phmark{width:22px;height:22px;border:1px solid var(--mark);color:var(--mark);display:grid;place-items:center;font-family:var(--mono);font-size:11px}
.phtxt{display:flex;flex-direction:column;line-height:1.15}
.phtxt em{font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.phtxt b{font-family:var(--sans);font-size:12px;font-weight:600}

/* ---------- price ---------- */
.price{border-top:1px solid var(--ink);padding-top:26px}
.price .amt{font-family:var(--serif);font-size:46px;line-height:1}
.price ul{list-style:none;margin:20px 0 0;padding:0}
.price li{font-size:15.5px;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--hair)}

/* hard line breaks are a desktop typesetting choice; on a phone they strand words */
@media(max-width:760px){
  table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  h1 br, h2 br, .lead br { display:none }
  h1{font-size:clamp(34px,8.6vw,44px)}
}
@media(max-width:980px){
  :root{--gut:0px}
  .wrap{padding:0 24px}
  .sec{grid-template-columns:1fr;gap:16px}
  .sec > .gutter{padding-top:0}
  .cols.c2,.cols.c3{grid-template-columns:1fr}
  .cols > div{padding:26px 0;border-left:0;border-top:1px solid var(--hair)}
  .cols > div:first-child{border-top:0;padding-top:0}
  section.band{padding:62px 0}
  .stat{gap:34px}
  .stat div b{font-size:40px}
  nav.top .links{gap:18px}
  nav.top .links a:not(.cta){display:none}
}
@media print{nav.top,.btn,.textlink{display:none!important}body{background:#fff}}