/* ===========================================================================
   Penjester — deck

   A deck that is a web page: scroll it, project it, or print it to PDF. This
   lives in a file rather than a <style> block because the site's CSP sets
   style-src 'self' with no 'unsafe-inline' — inline, the deck deployed as
   unstyled text and looked fine locally until it did not.
   =========================================================================== */

/* A deck that is a web page: scroll it, project it, or print it to PDF.
   No framework and no slide library — each section is one slide, sized to the
   viewport, and the print stylesheet turns it into landscape pages. */
:root{
  --ink:#0A0C0F; --surface:#12151A; --raised:#171B21; --line:#242A33;
  --line-sub:#1C2128; --text:#E6E9ED; --dim:#8B939F; --dimmer:#5F6773;
  --accent:#E5484D; --good:#35C28F;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
     line-height:1.6;-webkit-font-smoothing:antialiased}
.slide{min-height:100vh;display:flex;align-items:center;padding:72px 8vw;
       border-bottom:1px solid var(--line-sub);scroll-snap-align:start}
.slide > div{width:100%;max-width:1040px;margin:0 auto}
html{scroll-snap-type:y proximity}
.n{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
   color:var(--dimmer);margin-bottom:20px}
h1{font-size:clamp(2.2rem,5.4vw,3.8rem);line-height:1.1;letter-spacing:-.022em;
   margin:0 0 .4em;font-weight:640}
h2{font-size:clamp(1.7rem,3.8vw,2.6rem);line-height:1.15;letter-spacing:-.02em;
   margin:0 0 .5em;font-weight:620}
p{margin:0 0 1em;font-size:1.1rem;color:var(--dim);max-width:60ch}
p.big{font-size:1.35rem;color:var(--text)}
.mark{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.mark img{width:40px;height:40px}
.mark span{font-size:1.4rem;font-weight:620;letter-spacing:-.02em}
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;align-items:start}
.cols.three{grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:820px){.cols,.cols.three{grid-template-columns:1fr}}
.box{background:var(--surface);border:1px solid var(--line-sub);border-radius:10px;
     padding:22px}
.box h3{margin:0 0 .4em;font-size:1rem;font-weight:620}
.box p{font-size:.95rem;margin:0}
.ev{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent);
    border-radius:10px;padding:22px;font-family:var(--mono);font-size:.84rem;
    line-height:1.8;color:var(--dim)}
.ev b{color:var(--text)} .ev .hit{color:var(--accent)} .ev .ok{color:var(--good)}
ul{padding-left:1.2em;margin:0 0 1em} li{color:var(--dim);margin-bottom:.5em;font-size:1.05rem}
li b{color:var(--text)}
.kpi{display:flex;gap:56px;flex-wrap:wrap;margin-top:20px}
.kpi div span{display:block;font-size:2.6rem;font-weight:640;letter-spacing:-.02em;
              line-height:1.1}
.kpi div small{color:var(--dimmer);font-family:var(--mono);font-size:.74rem;
               letter-spacing:.1em;text-transform:uppercase}
@media print{
  @page{size:landscape;margin:12mm}
  :root{--ink:#fff;--surface:#fff;--text:#000;--dim:#333;--line:#bbb;--line-sub:#ddd}
  body{background:#fff}
  .slide{min-height:auto;page-break-after:always;border:0;padding:0 0 24px}
  html{scroll-snap-type:none}
}
/* Used where a line is quoting what a scanner would say, not what we say. */
.dimmer { color: var(--dimmer); }


/* Same names as the site's, because the deck does not load site.css. */
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 32px; }

/* Used inside an evidence block to mark the quieter half of a contrast. It was
   referenced in the markup and never defined; the class check now catches that. */
.dim { color: var(--dim); }