/* print.css — the twelve-questions sheet. Screen preview mirrors the printed page.
   Its palette and its type stack are the ones the funnel already uses, so a sheet
   printed out of the room agrees with the page the reader just left. Nothing here
   is scoped to a treatment, because this page loads no other stylesheet. */
@page{size:Letter;margin:0.62in 0.62in 0.55in}
body.printsheet{background:#fff;font-size:10pt;line-height:1.42}
body.printsheet .site-nav,body.printsheet .site-foot,body.printsheet .skip{display:none}
body.printsheet main{max-width:7.3in;margin:0 auto;padding:26px 18px}
@media print{body.printsheet main{padding:0;max-width:none}}

.printsheet .sheet{
  --ink:#1D1D1F; --muted:#4A4A50; --faint:#6E6E76; --accent:#0059B3; --hair:#D9DADE;
  font-family:"Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
}

/* masthead */
.printsheet .sheet-mark{font-size:7.6pt;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:0 0 5px}
.printsheet .sheet h1{font-family:inherit;font-size:16.5pt;font-weight:700;line-height:1.16;
  letter-spacing:-.015em;margin:0}
.printsheet .sheet-lede{font-size:9pt;line-height:1.45;color:var(--muted);margin:7px 0 0;max-width:58em}
.printsheet .sheet-head{padding-bottom:9px;border-bottom:1.5px solid var(--ink);margin-bottom:11px}

/* four themes down two columns. Each block is kept whole, so a theme never
   breaks across the fold with its first question orphaned above it. */
.printsheet .sheet-cols{columns:2;column-gap:26px}
.printsheet .theme{break-inside:avoid;margin:0 0 11px}
.printsheet .theme h2{font-family:inherit;font-size:10.5pt;font-weight:700;letter-spacing:.01em;margin:0;
  color:var(--accent)}
.printsheet .theme-blurb{font-size:8.2pt;line-height:1.4;color:var(--faint);margin:2px 0 7px}

/* one question: a box to mark, its number, and the three things it carries */
.printsheet .qlist{list-style:none;margin:0;padding:0}
.printsheet .qlist li{display:grid;grid-template-columns:12px 20px 1fr;gap:0 6px;
  padding:5px 0;border-top:1px solid var(--hair)}
.printsheet .q-box{width:9px;height:9px;border:1px solid #9A9BA2;border-radius:2px;margin-top:3px}
.printsheet .q-n{font-size:8pt;font-weight:700;color:var(--accent);padding-top:1px;letter-spacing:.02em}
.printsheet .q-body{min-width:0}
.printsheet .q-q{font-size:9.4pt;font-weight:700;line-height:1.28;margin:0}
.printsheet .q-w{font-size:8.4pt;line-height:1.38;color:var(--muted);margin:2px 0 0}
.printsheet .q-s{font-size:8.4pt;line-height:1.38;color:var(--ink);margin:3px 0 0}
.printsheet .q-s b{font-weight:700;color:var(--accent)}

/* one line back to where the reasoning lives, so a photocopy still says where it came from */
.printsheet .sheet-foot{display:flex;justify-content:space-between;gap:16px;
  margin:4px 0 0;padding-top:7px;border-top:1.5px solid var(--ink);
  font-size:7.8pt;letter-spacing:.02em;color:var(--faint)}

/* On a phone the two columns become one and the sheet reads as a page. */
@media screen and (max-width:640px){
  .printsheet .sheet-cols{columns:1}
  .printsheet .sheet-foot{flex-direction:column;gap:4px}
}