/* ============================================================
   TECHNOLOGY & AI — shared handout styling for /tech-ai/decks/
   Consumes the program brand.css variables. Paper + ink with a
   signal-red accent; Newsreader + Source Serif + JetBrains Mono.
   Print-friendly (students may print these).
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;0,6..72,700;1,6..72,400&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@500;700&display=swap");

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1117;--bg2:#161b22;--on-dark:#f7f1e3;--on-dark-muted:#d0c7b8;
  --dark-border:rgba(247,241,227,.1);--dark-border-mid:rgba(247,241,227,.16);
  --paper:#f7f1e3;--paper2:#ece6d4;--card:#faf6ec;--ink:#3a110d;--slate:#504338;
  --hair:#d9cfb8;--hair-dark:#b9ad8d;--red:#e8552a;--red2:#c2410c;
  --red-bg:rgba(191,58,43,.08);--red-border:rgba(191,58,43,.22);
  --fd:"Newsreader",Georgia,serif;--fb:"Source Serif 4",Georgia,serif;--fm:"JetBrains Mono",ui-monospace,monospace;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.7}
a{color:var(--red2);text-decoration:none}

/* top bar (dark) */
.hb{position:sticky;top:0;z-index:50;background:rgba(13,17,23,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--dark-border);height:50px;display:flex;align-items:center;
  justify-content:space-between;padding:0 22px}
.hb .b{font-family:var(--fm);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark)}
.hb .links{display:flex;gap:10px}
.hb a{font-family:var(--fm);font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-dark-muted);border:1px solid var(--dark-border-mid);padding:6px 11px;border-radius:3px;transition:.2s}
.hb a:hover{color:var(--on-dark);border-color:rgba(247,241,227,.35)}
.hb a.solid{background:var(--red);color:var(--paper);border-color:var(--red)}
.hb a.solid:hover{background:var(--red2);color:var(--paper)}

.wrap{max-width:840px;margin:0 auto;padding:0 26px}

/* header block */
.hd{padding:54px 0 30px;border-bottom:2px solid var(--red);margin-bottom:8px}
.hd .kick{display:inline-block;font-family:var(--fm);font-size:.64rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);background:var(--red-bg);border:1px solid var(--red-border);
  padding:5px 12px;border-radius:2px;margin-bottom:18px}
.hd h1{font-family:var(--fd);font-weight:700;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.hd .sub{font-family:var(--fd);font-style:italic;font-size:1.12rem;color:var(--slate);margin-top:10px}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:.04em;color:var(--ink);
  background:var(--card);border:1px solid var(--hair);border-radius:3px;padding:7px 12px}
.chip b{color:var(--red);text-transform:uppercase;letter-spacing:.08em;font-size:.6rem;margin-right:6px}

/* sections */
section{padding:26px 0;border-bottom:1px solid var(--hair)}
section:last-of-type{border-bottom:none}
h2{font-family:var(--fd);font-weight:700;font-size:1.4rem;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
h3{font-family:var(--fd);font-weight:700;font-size:1.08rem;color:var(--ink);margin:18px 0 6px}
p{margin-bottom:12px;max-width:70ch}
ul,ol{margin:6px 0 14px 4px;padding-left:22px}
li{margin-bottom:7px}
li::marker{color:var(--red)}
strong{color:var(--ink)}
em{color:var(--slate)}
.lead{font-family:var(--fd);font-size:1.16rem;line-height:1.55;color:var(--ink)}
.note{background:var(--card);border-left:3px solid var(--red);border-radius:0 4px 4px 0;padding:14px 18px;margin:14px 0}
.note .t{font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:5px}

/* numbered task blocks */
.steps{counter-reset:st;list-style:none;margin:10px 0;padding:0}
.steps>li{counter-increment:st;position:relative;padding:12px 0 12px 46px;border-top:1px solid var(--hair)}
.steps>li:first-child{border-top:none}
.steps>li::before{content:counter(st);position:absolute;left:0;top:12px;width:30px;height:30px;
  font-family:var(--fd);font-weight:700;color:var(--red);background:var(--red-bg);border:1px solid var(--red-border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.steps>li b{display:block;font-family:var(--fd);font-size:1.02rem;color:var(--ink);margin-bottom:2px}

/* rubric tables */
.rub{width:100%;border-collapse:collapse;font-size:.82rem;margin:12px 0}
.rub th{background:var(--ink);color:var(--paper);font-family:var(--fm);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.08em;text-align:left;padding:9px 11px;font-weight:700}
.rub td{border:1px solid var(--hair-dark);padding:9px 11px;vertical-align:top;background:var(--card)}
.rub td:first-child{font-family:var(--fd);font-weight:700;color:var(--ink);white-space:nowrap}
.rub .pts{font-family:var(--fm);font-weight:700;color:var(--red);text-align:center;white-space:nowrap}
.rtot{font-family:var(--fm);font-weight:700;color:var(--red);text-align:right;margin-top:8px;font-size:.9rem}

/* materials index cards */
.mat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:14px 0 6px}
.matcard{background:var(--card);border:1px solid var(--hair);border-radius:6px;padding:20px;transition:.2s;display:block}
.matcard:hover{border-color:var(--red);box-shadow:0 6px 18px rgba(191,58,43,.1);transform:translateY(-2px)}
.matcard .k{font-family:var(--fm);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.matcard h3{margin:6px 0 6px}
.matcard p{font-size:.86rem;color:var(--slate);margin:0}
.matcard .go{font-family:var(--fm);font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red2);margin-top:12px;display:inline-block}

footer{background:var(--bg2);color:var(--on-dark-muted);margin-top:20px;padding:26px;text-align:center;
  font-family:var(--fm);font-size:.64rem;letter-spacing:.05em;border-top:1px solid var(--dark-border)}
footer a{color:var(--on-dark-muted)}footer a:hover{color:var(--red)}

@media print{.hb{display:none}body{background:#fff}.hd{border-color:#000}}