/* ============================================================
   STRATEGIC PERSONAL BRANDING, shared handout styling for
   /personal-branding/handouts/. Paper and ink with a green
   accent; Poppins + Inter + JetBrains Mono. Print friendly,
   students may print these.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Caveat:wght@600&display=swap");

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b1710;--bg2:#12211a;--on-dark:#f3f5f1;--on-dark-muted:#8ba394;
  --dark-border:rgba(243,245,241,.1);--dark-border-mid:rgba(243,245,241,.16);
  --paper:#f3f5f1;--paper2:#e9ede8;--card:#ffffff;--ink:#101512;--slate:#4a5750;
  --hair:#d7ded8;--hair-dark:#b7c4ba;
  --green:#12a150;--green2:#0f8b47;--green3:#0d5c3f;--lite:#66e0a0;
  --green-bg:rgba(18,161,80,.08);--green-border:rgba(18,161,80,.24);
  --fd:"Poppins",system-ui,sans-serif;--fb:"Inter",system-ui,sans-serif;--fm:"JetBrains Mono",ui-monospace,monospace;--fh:"Caveat",cursive;
}
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(--green2);text-decoration:none}

/* top bar (dark) */
.hb{position:sticky;top:0;z-index:50;background:rgba(11,23,16,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--dark-border);min-height:52px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:8px 22px;flex-wrap:wrap}
.hb .b{font-family:var(--fm);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark)}
.hb .links{display:flex;gap:9px;flex-wrap:wrap}
.hb a{font-family:var(--fm);font-size:.62rem;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:999px;transition:.2s}
.hb a:hover{color:var(--on-dark);border-color:rgba(243,245,241,.35)}
.hb a.solid{background:var(--green);color:#04140b;border-color:var(--green)}
.hb a.solid:hover{background:var(--green2);color:#04140b}
.hb a.back{color:var(--lite);border-color:var(--green-border)}
.hb a.back:hover{color:var(--on-dark);border-color:rgba(102,224,160,.7)}

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

/* header block */
.hd{padding:52px 0 28px;border-bottom:2px solid var(--green);margin-bottom:8px}
.hd .kick{display:inline-block;font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green2);background:var(--green-bg);border:1px solid var(--green-border);
  padding:5px 12px;border-radius:999px;margin-bottom:18px}
.hd h1{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.04;letter-spacing:-.025em;color:var(--ink)}
.hd .sub{font-family:var(--fb);font-size:1.14rem;color:var(--slate);margin-top:12px;max-width:60ch}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:.03em;color:var(--ink);
  background:var(--card);border:1px solid var(--hair);border-radius:999px;padding:7px 13px}
.chip b{color:var(--green2);text-transform:uppercase;letter-spacing:.08em;font-size:.58rem;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:-.015em}
h3{font-family:var(--fd);font-weight:700;font-size:1.06rem;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(--green)}
strong{color:var(--ink)}
em{color:var(--slate)}
.lead{font-family:var(--fb);font-size:1.16rem;line-height:1.55;color:var(--ink)}
.hand{font-family:var(--fh);font-size:1.35rem;color:var(--green2);transform:rotate(-1deg);display:inline-block}
.note{background:var(--card);border-left:3px solid var(--green);border-radius:0 6px 6px 0;padding:14px 18px;margin:14px 0}
.note .t{font-family:var(--fm);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green2);margin-bottom:5px}

/* numbered heading/component blocks */
.steps{counter-reset:st;list-style:none;margin:10px 0;padding:0}
.steps>li{counter-increment:st;position:relative;padding:13px 0 13px 48px;border-top:1px solid var(--hair)}
.steps>li:first-child{border-top:none}
.steps>li::before{content:counter(st);position:absolute;left:0;top:13px;width:32px;height:32px;
  font-family:var(--fd);font-weight:700;color:var(--green2);background:var(--green-bg);border:1px solid var(--green-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:3px}

/* checklist */
.check{list-style:none;margin:10px 0;padding:0}
.check li{position:relative;padding:9px 0 9px 34px;border-top:1px solid var(--hair);font-size:.96rem}
.check li:first-child{border-top:none}
.check li::before{content:"";position:absolute;left:2px;top:12px;width:16px;height:16px;border:2px solid var(--green);border-radius:4px}

/* weight/component tables */
.rub{width:100%;border-collapse:collapse;font-size:.86rem;margin:12px 0}
.rub th{background:var(--ink);color:var(--paper);font-family:var(--fm);font-size:.58rem;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)}
.rub .pts{font-family:var(--fm);font-weight:700;color:var(--green2);text-align:center;white-space:nowrap}
.rtot{font-family:var(--fm);font-weight:700;color:var(--green2);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:12px;padding:22px;transition:.2s;display:block}
.matcard:hover{border-color:var(--green);box-shadow:0 8px 22px rgba(18,161,80,.12);transform:translateY(-2px)}
.matcard .k{font-family:var(--fm);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green2)}
.matcard h3{margin:7px 0 6px}
.matcard p{font-size:.86rem;color:var(--slate);margin:0}
.matcard .go{font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green2);margin-top:12px;display:inline-block}

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

@media print{.hb{display:none}body{background:#fff}.hd{border-color:#000}.matcard:hover{transform:none;box-shadow:none}}