/* ===== Kernel Engineering — two-surface design system ===== */
:root{
  /* terminal shell */
  --bg:#07130c; --bg2:#0b1a10; --panel:#0e2114;
  --green:#7ef0a3; --green-dim:#4f9a6b; --lime:#b9f56e; --lime-ink:#08160c;
  --line:#173925; --line2:#20492f; --chip-bd:#2c6340;
  /* paper article */
  --paper:#fdfcf9; --ink:#1c1b19; --ink-soft:#5a564d; --rule:#e6e0d3;
  --red:#b3382c; --paper-accent:#b3382c;
  --serif:'EB Garamond',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
html[data-theme="light"]{
  --bg:#f4f2ec; --bg2:#eceae2; --panel:#e6e3d9;
  --green:#20302a; --green-dim:#6b7169; --lime:#1f7a3f; --lime-ink:#fff;
  --line:#d7d3c7; --line2:#cbc6b8; --chip-bd:#c3bdac;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--green);font-family:var(--mono);font-size:14px;line-height:1.6}
a{color:inherit;text-decoration:none}
kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--line2);border-radius:3px;padding:1px 4px;color:var(--green-dim)}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:16px;height:52px;
  padding:0 18px;background:rgba(7,19,12,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
html[data-theme="light"] .topbar{background:rgba(244,242,236,.94)}
.brand{font-weight:700;letter-spacing:.02em;color:var(--green);display:flex;align-items:center;gap:9px;font-size:14px}
.brand .logo{color:var(--lime)}
.top-links{margin-left:auto;display:flex;align-items:center;gap:10px}
.tbtn{font-family:var(--mono);font-size:12px;background:transparent;border:1px solid var(--line2);color:var(--green-dim);
  padding:6px 11px;border-radius:5px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:6px}
.tbtn:hover{border-color:var(--lime);color:var(--green)}
.tbtn.enroll{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);font-weight:600}
.tbtn.enroll:hover{filter:brightness(1.08)}
.menu-btn{display:none;background:none;border:1px solid var(--line2);color:var(--green);border-radius:5px;padding:5px 10px;cursor:pointer}

/* ---------- layout ---------- */
.layout{display:flex;align-items:flex-start;max-width:1500px;margin:0 auto}
.sidebar{width:288px;flex:0 0 288px;position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto;
  padding:16px 10px 60px;border-right:1px solid var(--line);background:var(--bg)}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.sb-home{display:block;color:var(--green-dim);font-size:12px;padding:6px 12px 12px;letter-spacing:.03em}
.sb-home:hover{color:var(--lime)}
.sb-sec{margin-bottom:2px}
.sb-sec>summary{list-style:none;cursor:pointer;padding:7px 12px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green);border-radius:6px;user-select:none;display:flex;align-items:center;gap:8px}
.sb-sec>summary::-webkit-details-marker{display:none}
.sb-sec>summary::after{content:"+";margin-left:auto;color:var(--green-dim)}
.sb-sec[open]>summary::after{content:"–"}
.sb-sec>summary:hover{background:var(--bg2)}
.sb-num{color:var(--green-dim);font-weight:400}
.sb-item{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 26px;font-size:12.5px;color:var(--green-dim);
  border-radius:6px;line-height:1.35}
.sb-item:hover{color:var(--green);background:var(--bg2)}
.sb-item.active{background:var(--lime);color:var(--lime-ink);font-weight:600}
.chip{font-size:9px;letter-spacing:.08em;border:1px solid var(--chip-bd);color:var(--green-dim);
  padding:1px 5px;border-radius:4px;margin-left:auto;white-space:nowrap;text-transform:none}
.sb-item.active .chip{border-color:var(--lime-ink);color:var(--lime-ink)}
.chip.lg{font-size:11px;padding:3px 9px;vertical-align:middle;margin-left:8px}

.content{flex:1 1 auto;min-width:0}

/* ================= DARK CANVAS (home + section index) ================= */
.canvas-dark .content{background:var(--bg);color:var(--green);min-height:calc(100vh - 52px)}

/* home */
.home{max-width:1080px;margin:0 auto;padding:30px 34px 80px}
.hero{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;padding:26px 0 40px;border-bottom:1px solid var(--line)}
.ascii{font-family:var(--mono);font-size:10.5px;line-height:1.28;color:var(--lime);white-space:pre;opacity:.92}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-dim);margin-bottom:14px}
.hero-txt h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:40px;line-height:1.12;color:var(--green);letter-spacing:-.01em}
.hero-txt h1 .hl{border-bottom:3px solid var(--lime)}
.sub{color:var(--green-dim);max-width:60ch;margin:18px 0 24px;font-size:13.5px;line-height:1.7}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--mono);font-size:12.5px;padding:10px 18px;border:1px solid var(--line2);
  color:var(--green);border-radius:6px;transition:.15s;cursor:pointer}
.btn:hover{border-color:var(--lime);color:var(--lime)}
.btn.solid{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);font-weight:600}
.btn.solid:hover{filter:brightness(1.08);color:var(--lime-ink)}
.start-strip{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:22px}
.start-link{font-size:12px;color:var(--green-dim)}.start-link:hover{color:var(--lime)}

.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:36px}
.home-sec{background:var(--bg);padding:22px 22px 20px;display:block;transition:.15s}
.home-sec:hover{background:var(--bg2)}
.hs-num{font-size:11px;color:var(--green-dim);letter-spacing:.1em}
.hs-title{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--green);margin:4px 0 8px}
.hs-blurb{font-size:12px;color:var(--green-dim);line-height:1.6;margin-bottom:12px}
.hs-list{list-style:none;font-size:11.5px;color:var(--green-dim)}
.hs-list li{padding:2px 0 2px 14px;position:relative}
.hs-list li::before{content:"›";position:absolute;left:0;color:var(--chip-bd)}
.hs-list li.more{color:var(--lime)}
.home-foot{margin-top:44px}
.skill-pitch{border:1px solid var(--line);border-left:3px solid var(--lime);padding:26px 28px;background:var(--bg2)}
.skill-pitch h2{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--green);margin-bottom:12px}
.skill-pitch p{font-size:13px;color:var(--green-dim);line-height:1.75;max-width:75ch;margin-bottom:16px}

/* section index */
.section-page{max-width:920px;margin:0 auto;padding:34px 34px 80px}
.crumb{font-size:12px;color:var(--green-dim);margin-bottom:14px}
.sec-h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:38px;color:var(--green);margin-bottom:14px}
.sec-num{color:var(--green-dim);font-size:26px}
.sec-blurb{color:var(--green-dim);font-size:13.5px;line-height:1.75;max-width:78ch;margin-bottom:30px}
.idx-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.idx-item{display:flex;gap:16px;padding:18px 8px;border-bottom:1px solid var(--line);transition:.15s}
.idx-item:hover{background:var(--bg2);padding-left:14px}
.idx-arrow{color:var(--lime);font-size:15px}
.idx-title{font-size:15px;color:var(--green);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.idx-blurb{font-size:12.5px;color:var(--green-dim);line-height:1.6;max-width:74ch}

/* workshop page */
.ws-h2{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--green);margin:34px 0 16px}
.ws-sub{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--green-dim);letter-spacing:.06em;margin-left:8px}
.lec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.lec{display:flex;gap:14px;background:var(--bg);padding:16px 18px}
.lec.wk{background:var(--bg2)}
.lec-tag{font-weight:700;color:var(--lime);font-size:13px;flex:0 0 30px}
.lec-title{font-size:14px;color:var(--green);margin-bottom:5px}
.lec-desc{font-size:12px;color:var(--green-dim);line-height:1.55}
.ws-cta{margin-top:36px;text-align:center;border:1px solid var(--line);padding:34px;background:var(--bg2)}
.ws-price{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--green);margin-bottom:18px}
.ws-note{font-size:12px;color:var(--green-dim);margin-top:14px}
.ws-note a,.skill-pitch a{color:var(--lime)}

/* ================= PAPER CANVAS (articles) ================= */
.canvas-paper .content{background:var(--paper);color:var(--ink);min-height:calc(100vh - 52px)}
.worklog{max-width:1000px;margin:0 auto;padding:44px 40px 90px}
.art-kicker{margin-bottom:14px}
.art-sec{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.art-title{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.14;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:8px;max-width:22ch}
.chip.lg{border-color:#d8b3ae;color:var(--red)}
.art-body{max-width:660px;font-family:var(--serif);font-size:20px;line-height:1.75;color:var(--ink);margin-top:26px}
.art-body p{margin:0 0 1.15em}
.art-body .lead{font-size:22px;color:#3a372f}
.art-body h1,.art-body h2,.art-body h3,.art-body h4{font-family:var(--serif);font-weight:600;color:var(--ink);
  line-height:1.2;margin:1.7em 0 .5em;max-width:24ch}
.art-body h2{font-size:29px;padding-bottom:.2em;border-bottom:1px solid var(--rule)}
.art-body h3{font-size:23px}.art-body h4{font-size:20px;font-style:italic}
.art-body a{color:var(--red);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.5px}
.art-body strong{font-weight:600}
.art-body em{font-style:italic}
.art-body code{font-family:var(--mono);font-size:.82em;color:var(--red)}
.art-body ul,.art-body ol{margin:0 0 1.15em;padding-left:1.4em}
.art-body li{margin-bottom:.35em}
.art-body blockquote{border-left:3px solid var(--rule);padding:.2em 0 .2em 1.1em;margin:0 0 1.15em;color:#403c33;font-style:italic}
.art-body pre.code{font-family:var(--mono);font-size:14px;line-height:1.6;background:#f6f4ef;border:1px solid var(--rule);
  border-radius:8px;padding:16px 18px;overflow-x:auto;margin:1.3em 0;color:#2b2a26;white-space:pre}
.art-body pre.code code{color:#2b2a26;font-size:13.5px}
.tbl-wrap{overflow-x:auto;margin:1.4em 0}
.art-body table{border-collapse:collapse;font-family:var(--mono);font-size:13px;width:100%}
.art-body th,.art-body td{border:1px solid var(--rule);padding:7px 12px;text-align:left}
.art-body th{background:#f2efe8;font-weight:600}

/* figures */
.fig{margin:1.9em 0}
.fig-frame{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:10px;text-align:center;box-shadow:0 10px 30px -22px rgba(0,0,0,.35)}
.fig-frame img{max-width:100%;display:block;margin:0 auto;border-radius:3px}
.fig-ph{display:none;font-family:var(--mono);font-size:12px;color:#9a9484;padding:46px 10px}
.fig-missing .fig-ph{display:block}
.fig-missing{background:repeating-linear-gradient(45deg,#faf8f3,#faf8f3 10px,#f3f0e9 10px,#f3f0e9 20px);border-style:dashed}
.fig figcaption{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft);text-align:center;margin-top:9px}

/* sidenotes (Tufte margin notes) */
.sn-ref{color:var(--red);cursor:pointer;font-family:var(--mono);font-size:.62em;vertical-align:super;font-weight:600;padding:0 1px}
.sn-toggle{display:none}
.sidenote{float:right;clear:right;width:250px;margin-right:-290px;margin-top:.25rem;margin-bottom:1rem;
  font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.sidenote sup{color:var(--red);font-weight:600}
.sidenote code{font-size:.9em}

.stub{font-family:var(--mono);font-size:13px;color:#9a9484;border:1px dashed var(--rule);border-radius:8px;padding:20px;margin-top:20px}

/* prev/next */
.prevnext{display:flex;justify-content:space-between;gap:16px;margin-top:60px;padding-top:24px;border-top:1px solid var(--rule)}
.pn{font-family:var(--mono);font-size:13px;color:var(--ink);max-width:46%}
.pn span{display:block;font-size:11px;color:var(--red);margin-bottom:4px}
.pn.next{text-align:right}
.pn:hover{color:var(--red)}

/* ---------- search modal ---------- */
.search-modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(3,10,6,.72);padding-top:12vh}
.search-modal.open{display:block}
.search-box{max-width:640px;margin:0 auto;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px -30px #000}
#search-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--green);
  font-family:var(--mono);font-size:16px;padding:18px 20px;outline:none}
#search-results{max-height:52vh;overflow-y:auto}
.sr-item{display:block;padding:12px 20px;border-bottom:1px solid var(--line);cursor:pointer}
.sr-item.sel,.sr-item:hover{background:var(--panel)}
.sr-title{color:var(--green);font-size:14px;display:flex;gap:8px;align-items:center}
.sr-sec{color:var(--green-dim);font-size:11px;margin-top:2px}
.search-hint{padding:10px 20px;font-size:11px;color:var(--green-dim);border-top:1px solid var(--line)}

/* ---------- responsive ---------- */
@media(max-width:1200px){
  .sidenote{float:none;display:none;width:auto;margin:.6em 0;padding:10px 12px;border-left:2px solid var(--red);background:#f4f1ea}
  .sn-toggle:checked ~ .sidenote{display:block}
  .art-body{max-width:none}
}
@media(max-width:900px){
  .menu-btn{display:block;order:2}
  .top-links{gap:6px}.tbtn:not(.enroll){display:none}
  .sidebar{position:fixed;left:-300px;top:52px;transition:left .2s;z-index:55;box-shadow:0 0 40px rgba(0,0,0,.5)}
  body.sb-open .sidebar{left:0}
  .hero{grid-template-columns:1fr}.ascii{font-size:8.5px}
  .lec-grid{grid-template-columns:1fr}
  .hero-txt h1{font-size:30px}.art-title{font-size:30px}.art-body{font-size:18px}
}

/* ===== v2: top nav · logo hero · areas · book · projects · interactive ===== */
.brand-mark{width:26px;height:26px;object-fit:contain;border-radius:5px;flex:0 0 26px}
.brand{gap:10px}
.brand-txt{font-weight:400;color:var(--green-dim);letter-spacing:.01em}
.brand-txt b{color:var(--lime);font-weight:700}
.topnav{display:flex;gap:2px;margin-left:10px}
.tn{font-size:12.5px;color:var(--green-dim);padding:6px 12px;border-radius:6px}
.tn:hover{color:var(--green);background:var(--bg2)}
.tn.active{color:var(--lime-ink);background:var(--lime);font-weight:600}
.tbtn.icon{font-size:12px;letter-spacing:.04em}
.layout.nosb{display:block;max-width:1500px;margin:0 auto}

.hero2{max-width:840px;margin:0 auto;text-align:center;padding:40px 20px 30px}
.hero2-logo img{width:186px;height:186px;object-fit:contain;filter:drop-shadow(0 0 34px rgba(150,240,120,.28))}
.hero2 .eyebrow{margin:12px 0 0}
.hero2 h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:52px;line-height:1.05;color:var(--green);margin:6px 0 0;letter-spacing:-.01em}
.hero2 h1 .hl{border-bottom:3px solid var(--lime)}
.hero2 .sub{margin:18px auto 26px;max-width:66ch}
.hero2 .hero-cta{justify-content:center}

.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);max-width:1000px;margin:22px auto 0}
.area{background:var(--bg);padding:26px 26px 22px;display:block;transition:.15s}
.area:hover{background:var(--bg2)}
.area-num{font-size:11px;color:var(--green-dim);letter-spacing:.12em}
.area-title{font-family:var(--serif);font-style:italic;font-size:27px;color:var(--green);margin:4px 0 10px}
.area:hover .area-title{color:var(--lime)}
.area-blurb{font-size:13px;color:var(--green-dim);line-height:1.65;margin-bottom:14px}
.area-meta{font-size:11.5px;color:var(--lime);display:flex;justify-content:space-between;align-items:center;letter-spacing:.04em}
.area-go{font-size:15px}
.canvas-dark .home{max-width:none}
.home-foot{max-width:1000px;margin:36px auto 0}

.book-page{max-width:980px}
.chapters{margin-top:12px;border-top:1px solid var(--line)}
.chapter{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--line)}
.ch-num{font-size:12px;color:var(--green-dim);letter-spacing:.12em}
.ch-title{font-family:var(--serif);font-style:italic;font-size:23px;color:var(--green);display:block;margin:4px 0 6px}
.ch-title:hover{color:var(--lime)}
.ch-count{font-size:11.5px;color:var(--lime)}
.ch-blurb{font-size:13px;color:var(--green-dim);line-height:1.65;margin-bottom:14px;max-width:72ch}
.ch-arts{display:flex;flex-wrap:wrap;gap:7px}
.ch-art{font-size:12px;color:var(--green-dim);border:1px solid var(--line2);border-radius:5px;padding:5px 10px;display:flex;align-items:center;gap:7px}
.ch-art:hover{color:var(--green);border-color:var(--lime);background:var(--bg2)}
.ch-art .chip{margin-left:0}

.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:14px}
.proj{border:1px solid var(--line);background:var(--bg2);padding:22px 22px 18px;display:flex;flex-direction:column}
.proj-level{font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--chip-bd);color:var(--green-dim);padding:2px 9px;border-radius:20px}
.lvl-capstone,.lvl-expert{color:var(--lime);border-color:var(--lime)}
.proj h3{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--green);margin:12px 0 8px}
.proj p{font-size:13px;color:var(--green-dim);line-height:1.6;flex:1;margin-bottom:14px}
.proj-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.proj-links a{font-size:12px;color:var(--lime)}

.int-panel{border:1px solid var(--line);background:var(--bg2);padding:24px 26px;margin-top:22px}
.int-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.int-head .ws-h2{margin:0}
.int-p{font-size:13px;color:var(--green-dim);line-height:1.65;margin:8px 0 16px;max-width:80ch}
.int-links{display:flex;flex-wrap:wrap;gap:10px}
.quiz-score{font-family:var(--mono);font-size:13px;color:var(--lime);border:1px solid var(--lime);border-radius:20px;padding:3px 12px}
.quiz{display:flex;flex-direction:column;gap:14px}
.quiz-q{border:1px solid var(--line);background:var(--bg);padding:16px 18px;border-radius:8px}
.q-num{font-size:11px;color:var(--green-dim);letter-spacing:.12em;margin-bottom:6px}
.q-text{font-size:14.5px;color:var(--green);margin-bottom:12px;line-height:1.5}
.q-opts{display:flex;flex-direction:column;gap:8px}
.q-opt{text-align:left;font-family:var(--mono);font-size:13px;color:var(--green-dim);background:var(--bg2);
  border:1px solid var(--line2);border-radius:6px;padding:10px 14px;cursor:pointer;transition:.12s}
.q-opt:hover:not(:disabled){border-color:var(--lime);color:var(--green)}
.q-opt.correct{border-color:var(--lime);background:rgba(150,240,120,.13);color:var(--green)}
.q-opt.wrong{border-color:#c0563f;background:rgba(200,80,60,.13);color:#e79b8c}
.q-opt:disabled{cursor:default}
.q-exp{display:none;font-size:12.5px;color:var(--green-dim);line-height:1.6;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.quiz-q.answered .q-exp{display:block}

@media(max-width:900px){
  .topnav{display:none}
  .areas,.proj-grid{grid-template-columns:1fr}
  .chapter{grid-template-columns:1fr;gap:10px}
  .hero2 h1{font-size:34px}.hero2-logo img{width:140px;height:140px}
}

/* ===== mentor handbook: teaching callouts + badge ===== */
.mentor-badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);border:1px solid var(--chip-bd);border-radius:20px;padding:4px 12px;margin-bottom:14px}
.worklog.mentor .art-sec{color:#6a3fa0}
.cal{border:1px solid var(--rule);border-left:4px solid #b7b1a2;border-radius:8px;background:#faf8f3;padding:14px 18px 12px;margin:1.5em 0}
.cal-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#8a8474;margin-bottom:8px;display:flex;align-items:center;gap:8px;font-weight:600}
.cal-i{font-size:15px}
.cal-b{font-family:var(--serif);font-size:18px;line-height:1.62;color:var(--ink)}
.cal-b code{color:var(--red);font-family:var(--mono);font-size:.82em}
.cal-b strong{font-weight:600}
.cal-metaphor{border-left-color:#6a86c8;background:#f4f6fc}.cal-metaphor .cal-h{color:#4a63a0}
.cal-example{border-left-color:#c07a2a;background:#fbf5ec}.cal-example .cal-h{color:#a15f14}
.cal-production{border-left-color:#3f9a63;background:#f0f8f2}.cal-production .cal-h{color:#2c7a49}
.cal-teach{border-left-color:#8a5cc0;background:#f7f3fb}.cal-teach .cal-h{color:#6a3fa0}
.cal-say{border-left-color:#1d1c1a;background:#f1eee7}.cal-say .cal-b{font-style:italic;font-size:19px}
.cal-demo{border-left-color:#c0563f;background:#fbf1ee}.cal-demo .cal-h{color:#a03f28}
.cal-confusion{border-left-color:#c99a1e;background:#fbf7e8}.cal-confusion .cal-h{color:#8a6a12}
.cal-aha{border-left-color:#d4551f;background:#fdf2ec}.cal-aha .cal-h{color:#c4470f}
.you-can-teach{border:1px dashed var(--rule);border-radius:8px;background:#f6f4ef;padding:16px 20px;margin:2em 0 0}
.you-can-teach h4{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);color:#2c7a49;margin:0 0 8px}