/* Evidence — shared design system

   The object: a graded evidence dossier. This studio sells audits that grade
   evidence and label the confidence of every recommendation, so the site is
   built to look like the artefact it sells — a printed report. Ruled, keyed,
   flat. Findings are separated by hairlines rather than floated on cards, and
   every key, grade and label is set in the sans as apparatus, not as prose.

   Newsreader carries the reading; Asap carries the apparatus. Both are
   self-hosted from /assets/fonts (licences in that directory), so the page
   renders identically on every platform and asks no third party for a font.
*/

@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-italic-400_600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-italic-400_600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-normal-400_600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-normal-400_600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Asap';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/asap-italic-400_600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Asap';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/asap-italic-400_600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Asap';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/asap-normal-400_700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Asap';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/asap-normal-400_700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --ink:#151518;
  --ink-soft:#33333c;
  --muted:#5c5c66;          /* darkened: 6b6b76 failed at 4.28:1 on tinted grounds */
  --line:#d9d5cc;
  --rule:#151518;           /* the heavy rule that opens a findings block */
  --paper:#faf8f4;
  --paper-2:#f2efe8;
  --card:#ffffff;

  /* Decoration. Brand only — never a grade. */
  --accent:#2f5d50;
  --accent-soft:#e7efec;
  --accent-2:#8f3f22;

  /* Recommendation confidence. These carry meaning and are read as a scale,
     so they are their own tokens: the brand green is no longer allowed to
     double as "high confidence", which made green unable to mean green. */
  --conf-high:#1f4d40;
  --conf-mod:#6f5c1c;
  --conf-low:#8a3a1e;
  --conf-high-bg:#e7efec;
  --conf-mod-bg:#f3ecdd;
  --conf-low-bg:#f6e8e1;

  --gold:#6f5c1c;           /* darkened from 8a7b3b (4.22:1) */
  --maxw:1120px;
  --radius:0px;             /* flattened: a report is not a stack of cards */
  --shadow:none;
  --serif:'Newsreader',Charter,"Bitstream Charter","Times New Roman",serif;
  --sans:'Asap','Helvetica Neue',Helvetica,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:var(--serif);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.13;letter-spacing:-.006em;color:var(--ink)}
h4{font-family:var(--sans);font-weight:700;line-height:1.2;color:var(--ink)}
h1{font-size:clamp(2.3rem,5vw,3.7rem);margin:.2em 0 .35em}
h2{font-size:clamp(1.6rem,3.2vw,2.35rem);margin:0 0 .5em}
h3{font-size:1.28rem;margin:0 0 .35em}
h4{font-size:.94rem;margin:0 0 .35em;letter-spacing:.02em}
p{margin:0 0 1.05em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.eyebrow{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-size:.7rem;color:var(--ink-soft);margin:0 0 .9em;padding-bottom:.5em;
  border-bottom:1px solid var(--line);display:block;font-variant-numeric:tabular-nums}
.lead{font-size:1.2rem;color:var(--ink-soft);max-width:60ch}
.muted{color:var(--muted)}
.center{text-align:center}
section{padding:76px 0}
.section-alt{background:var(--paper-2)}
.section-ink{background:var(--ink);color:#efeae1}
.section-ink h1,.section-ink h2,.section-ink h3,.section-ink h4{color:#fff}
.section-ink .muted,.section-ink p{color:#ddd7cc}
.section-ink .card{border-top-color:#6d6d78}
.section-ink .eyebrow{border-bottom-color:#4a4a54}
.section-ink .eyebrow{color:#d8c88f}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(250,248,244,.86);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin:0 auto;padding:13px 26px}
.brand{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--ink);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand span{color:var(--accent)}
.nav-links{display:flex;gap:22px;align-items:center;font-family:var(--sans);font-size:.9rem}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover{color:var(--accent);text-decoration:none}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.7em 1.15em;border-radius:2px;
  font-family:var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.02em;
  border:1px solid var(--accent);cursor:pointer;transition:.15s}
.btn:hover{background:#264a40;text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft);color:var(--accent)}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.big{padding:.85em 1.5em;font-size:1.02rem}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}

/* hero */
.hero{padding:78px 0 60px;background:
  radial-gradient(1200px 500px at 78% -10%,rgba(47,93,80,.10),transparent 60%),var(--paper)}
.hero h1{max-width:16ch}
.hero .lead{margin-bottom:1.6em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.proof-strip{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:2px solid var(--rule);
  font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.proof-strip b{color:var(--ink)}

/* grid + cards */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:transparent;border:0;border-top:2px solid var(--rule);border-radius:0;
  padding:16px 0 4px;box-shadow:none}
.card h3{margin-bottom:.3em}
.card .ki{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5em;font-variant-numeric:tabular-nums}
.card.pad-lg{padding:20px 0 8px}
.tag{display:inline-block;font-family:var(--sans);background:transparent;color:var(--accent);
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.2em 0;border:0;border-bottom:2px solid var(--accent);border-radius:0}
ul.clean{list-style:none;padding:0;margin:.4em 0 0}
ul.clean li{padding:.28em 0 .28em 1.4em;position:relative;color:var(--ink-soft)}
ul.clean li::before{content:"";position:absolute;left:0;top:.85em;width:7px;height:7px;border-radius:2px;background:var(--accent)}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0}
ol.steps li{counter-increment:s;position:relative;padding:0 0 1.1em 3rem}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:2rem;height:2rem;border-radius:50%;
  background:var(--accent);color:#fff;font-family:var(--sans);font-weight:700;display:grid;place-items:center;font-size:.95rem}

/* phase timeline */
.phases{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;counter-reset:p}
.phase{counter-increment:p;background:transparent;border:0;border-top:2px solid var(--rule);border-radius:0;padding:14px 0 4px}
.phase .n{font-family:var(--sans);font-size:1.5rem;font-weight:700;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.phase h4{margin:.4em 0 .3em}
.phase p{font-size:.9rem;color:var(--muted);margin:0}

/* evidence-letter block (EVIDENCE framework) */
.letters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.letter{background:transparent;border:0;border-top:2px solid var(--rule);border-radius:0;padding:14px 0 4px}
.letter .l{font-family:var(--serif);font-size:1.9rem;color:var(--accent);line-height:1;margin-bottom:.15em}
.letter b{display:block;font-size:.95rem;margin-bottom:.3em}
.letter p{font-size:.85rem;color:var(--muted);margin:0}

/* callout / bridge */
.callout{background:var(--accent);color:#fff;border-radius:0;padding:34px 30px}
.callout h2{color:#fff}
.callout.risk{background:#6f3019}
.note{border-left:3px solid var(--accent);background:var(--card);padding:16px 20px;border-radius:0}

/* comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:0;overflow:hidden}
.vs>div{padding:24px}
.vs .no{background:#fbf3ef}
.vs .yes{background:#eef4f1}
.vs h4{margin-bottom:.6em}

/* table */
table.tbl{width:100%;border-collapse:collapse;font-size:.95rem;background:transparent;
  border-radius:0;border:0;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
table.tbl th,table.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl th{background:transparent;font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--rule)}
table.tbl tr:last-child td{border-bottom:0}

/* forms */
.form{display:grid;gap:16px;max-width:720px}
.field{display:grid;gap:6px}
.field label{font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:1rem;padding:.7em .8em;
  border:1px solid #8b8578;border-radius:2px;background:#fff;color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  padding:.45em .7em;border-radius:2px;font-size:.9rem;font-weight:500;font-family:var(--sans)}

/* footer */
.footer{background:var(--ink);color:#cfcac0;padding:54px 0 30px;font-family:var(--sans);font-size:.88rem}
.footer h4{color:#fff}
.footer a{color:#cfcac0}
.footer a:hover{color:#fff;text-decoration:none}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
.foot-cols a{display:block;padding:.2em 0}
.foot-bottom{margin-top:34px;padding-top:18px;border-top:1px solid #3a3a41;color:#a09a90;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.section-head{max-width:66ch;margin-bottom:34px}
.hidden-badge{font-size:.8rem;color:var(--muted)}

@media(max-width:900px){
  .g3,.g4,.letters{grid-template-columns:repeat(2,1fr)}
  .phases{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:var(--paper);
    flex-direction:column;padding:14px 26px;border-bottom:1px solid var(--line);gap:14px}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .g2,.g3,.g4,.vs,.letters,.phases{grid-template-columns:1fr}
  section{padding:52px 0}
  .foot-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   Confidence grades. A recommendation's confidence is the one thing on this
   site that a reader acts on, so it gets its own scale, its own tokens, and a
   printed key rather than a coloured word. --accent is decoration again.
   --------------------------------------------------------------------------- */
.conf{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;display:inline-block;padding:.3em .6em;border-radius:2px}
.conf-high{color:var(--conf-high);background:var(--conf-high-bg)}
.conf-mod{color:var(--conf-mod);background:var(--conf-mod-bg)}
.conf-low{color:var(--conf-low);background:var(--conf-low-bg)}
h3.conf-high{color:var(--conf-high);background:none;padding:0}
h3.conf-mod{color:var(--conf-mod);background:none;padding:0}
h3.conf-low{color:var(--conf-low);background:none;padding:0}

/* the nav call-to-action is an .btn inside .nav-links; `.nav-links a` beat
   `.btn` on specificity and painted the label in body ink on the accent
   ground — 1.5:1, and 1.0:1 once site.js marked it as the current page. */
.nav-links a.btn{color:#fff}
.nav-links a.btn:hover{color:#fff}
.nav-links a[aria-current="page"]{color:var(--accent);text-decoration:underline;
  text-underline-offset:5px}
.nav-links a.btn[aria-current="page"]{color:#fff;text-decoration:none;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.7)}

/* ---------------------------------------------------------------------------
   Accessibility affordances. None of these were present before this pass.
   --------------------------------------------------------------------------- */
.skip-link{position:absolute;left:-999px;top:.5rem;z-index:999;background:#fff;color:var(--ink);
  font-family:var(--sans);font-weight:600;padding:.75rem 1rem;border:2px solid var(--ink)}
.skip-link:focus{left:.5rem}
.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}
:focus-visible{outline:3px solid #8a3a1e;outline-offset:3px}
main:focus{outline:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media(forced-colors:active){
  .card,.phase,.letter{border-top:2px solid CanvasText}
  .btn,.tag,.conf{border:1px solid ButtonText}
  .eyebrow{border-bottom:1px solid CanvasText}
}
@media print{
  .nav,.footer,.skip-link,.cta-row,.nav-toggle{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  section{padding:14pt 0;break-inside:avoid}
  .card,.phase,.letter,.note,.vs{break-inside:avoid}
  .callout{background:#fff!important;color:#000!important;border:1pt solid #000}
  .callout h2{color:#000}
  .section-ink{background:#fff!important;color:#000!important}
  .section-ink h1,.section-ink h2,.section-ink h3,.section-ink h4{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}