:root{
  --slate:#50808E; --slate-deep:#39616D; --sage:#84B59F; --euca:#3E8E7E;
  --ink:#2E3A3F; --mist:#EEF4F3; --paper:#FBFDFC; --warm:#D97757; --gray:#5E6D73;
  --gold:#C9A227; --maxw:46rem;
}
html{font-size:17px}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65}
header.site{background:linear-gradient(115deg,#39616D 0%,#4E7D8B 55%,#69A297 100%);color:#fff;padding:.9rem 1.2rem}
header.site .inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.brand{font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem}
.brand a{color:#fff;text-decoration:none}
.brand .sub{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:.72rem;color:#AFC8C4;letter-spacing:.12em;text-transform:uppercase}
nav.main{margin-left:auto;display:flex;flex-wrap:wrap;gap:.25rem}
nav.main a{color:#EAF2F1;text-decoration:none;font-size:.85rem;padding:.35rem .6rem;border-radius:.45rem}
nav.main a:hover, nav.main a[aria-current="page"]{background:rgba(255,255,255,.14)}
main{max-width:var(--maxw);margin:0 auto;padding:2.2rem 1.2rem 4rem}
h1{font-family:'Fraunces',serif;font-size:2rem;line-height:1.2;color:var(--slate-deep);margin:.2rem 0 .4rem}
h2{font-family:'Fraunces',serif;font-size:1.35rem;color:var(--slate-deep);margin-top:2.2rem}
h3{font-size:1.05rem;color:var(--slate);margin-top:1.6rem}
.kicker{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--euca);font-weight:600}
.lede{font-size:1.08rem;color:var(--gray)}
a{color:var(--slate)}
a:hover{color:var(--slate-deep)}
table{border-collapse:collapse;width:100%;font-size:.92rem;margin:1rem 0}
th{background:var(--mist);text-align:left;padding:.5rem .6rem;color:var(--slate-deep)}
td{padding:.45rem .6rem;border-bottom:1px solid #E2ECEA;vertical-align:top}
.box{background:var(--mist);border:1px solid #D8E6E2;border-radius:.7rem;padding:1rem 1.2rem;margin:1.4rem 0}
.box.warm{background:#FDF6F1;border-color:#EAD3C4}
.box.safety{background:#FDF6F1;border-color:var(--warm)}
.box h3{margin-top:.2rem}
.bodhi{display:flex;gap:.7rem;background:#F3F7F0;border:1px solid #D9E6D4;border-radius:.7rem;padding: .9rem 1.1rem;margin:1.4rem 0;font-size:.95rem}
.bodhi .leaf{font-size:1.3rem;line-height:1}
.bodhi .who{font-weight:600;color:#4a6b3a}
details{background:var(--mist);border-radius:.6rem;padding:.7rem 1rem;margin:.6rem 0}
details summary{cursor:pointer;font-weight:600;color:var(--slate-deep)}
details[open]{padding-bottom:1rem}
.cite{font-size:.88rem;color:var(--gray);border-left:3px solid var(--sage);padding:.35rem .8rem;margin:.9rem 0;background:var(--mist);border-radius:0 .5rem .5rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.9rem;margin:1.2rem 0}
.card{border:1px solid #D8E6E2;border-radius:.7rem;padding:.9rem 1rem;background:#fff}
.card a{font-weight:600;text-decoration:none}
.card p{font-size:.88rem;color:var(--gray);margin:.35rem 0 0}
.tag{display:inline-block;font-size:.72rem;background:var(--mist);color:var(--slate-deep);border-radius:.4rem;padding:.1rem .5rem;margin-right:.3rem}
footer.site{border-top:1px solid #E2ECEA;color:var(--gray);font-size:.82rem;padding:1.4rem;text-align:center}
blockquote{font-family:'Fraunces',serif;font-style:italic;font-size:1.12rem;color:var(--slate-deep);border-left:3px solid var(--sage);margin:1.4rem 0;padding:.2rem 1.1rem}
.crumb{font-size:.82rem;color:var(--gray);margin-bottom:1rem}
.crumb a{color:var(--gray)}
/* enriched color layer (chosen 2026-07-14) */
h1{background:linear-gradient(90deg,var(--slate-deep),#3E8E7E);-webkit-background-clip:text;background-clip:text;color:transparent}
blockquote,.cite{border-left-color:var(--gold)}
.kicker{color:var(--warm)}
.grid .card:nth-of-type(3n+1){background:#F4FAF7;border-color:#CBE3DA}
.grid .card:nth-of-type(3n+2){background:#FBF6E9;border-color:#E9DCB4}
.grid .card:nth-of-type(3n){background:#FAF1EE;border-color:#EBD2C8}
th{background:#E4F0ED}
a{text-decoration-color:var(--sage);text-underline-offset:2px}
.box{border-left:4px solid var(--sage)}
.box.safety{border-left:4px solid var(--warm)}
/* Test-your-knowledge checkpoints */
.qz-box{background:#F4FAF7;border:1px solid #CBE3DA;border-left:4px solid var(--euca);border-radius:.7rem;padding:1rem 1.2rem;margin:1.8rem 0}
.qz-box .qz-title{font-family:'Fraunces',serif;font-weight:700;color:var(--slate-deep);font-size:1.05rem;margin:0 0 .2rem}
.qz-box .qz-sub{font-size:.82rem;color:var(--gray);margin:0 0 .8rem}
.qz-item{margin:1rem 0;padding-top:.8rem;border-top:1px dashed #CBE3DA}
.qz-q{font-weight:600;margin:0 0 .5rem}
.qz-opts{display:grid;gap:.4rem}
.qz-opt{text-align:left;background:#fff;border:1px solid #D8E6E2;border-radius:.5rem;padding:.5rem .8rem;cursor:pointer;font:inherit;font-size:.92rem;color:var(--ink)}
.qz-opt:hover:not(:disabled){border-color:var(--euca);background:#F0F7F4}
.qz-opt:disabled{cursor:default;opacity:.85}
.qz-opt.qz-right{border-color:#3E8E7E;background:#E4F2ED;font-weight:600;opacity:1}
.qz-opt.qz-wrong{border-color:#D97757;background:#FAEDE6}
.qz-fb{display:none;font-size:.88rem;margin-top:.55rem;padding:.55rem .8rem;border-radius:.5rem}
.qz-fb-right{background:#E4F2ED;color:#26443B}
.qz-fb-wrong{background:#FAEDE6;color:#5C3120}
.qz-score{font-size:.82rem;color:var(--gray);margin-top:.9rem;font-style:italic}
@media(max-width:640px){nav.main{margin-left:0}}


/* ============ BODHI — the floating guide (a potted plant) ============
   Shared look & behavior across all psy course sites; modeled on psy391. */
:root{--bodhi:#4a6b3a;--bodhi-ink:#2f4825;--bodhi-leaf:#6f8e5c;--bodhi-soft:#d8e2cc}
.bodhi-intro{display:flex;gap:1rem;align-items:flex-start;background:var(--card,#fff);border:1px solid var(--line,#e2ddd2);
  border-radius:14px;padding:1.1rem 1.2rem;margin:1.4rem 0;box-shadow:0 1px 3px rgba(0,0,0,.08);
  border-left:4px solid var(--bodhi-leaf)}
.bodhi-intro .avatar{flex:none;width:60px;height:60px}
.bodhi-intro .say .who{font-weight:800;color:var(--bodhi);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.bodhi-intro .say p{margin:.2rem 0 0}

#bodhi-fab{position:fixed;right:20px;bottom:20px;z-index:60;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
#bodhi-fab .bubble{max-width:270px;background:var(--card,#fff);border:1px solid var(--line,#e2ddd2);border-radius:16px 16px 4px 16px;
  padding:.8rem 1rem;box-shadow:0 10px 30px rgba(0,0,0,.16);font-size:.9rem;line-height:1.5;opacity:0;transform:translateY(8px) scale(.96);
  transition:all .22s ease;pointer-events:none}
#bodhi-fab.open .bubble{opacity:1;transform:none;pointer-events:auto}
#bodhi-fab .bubble .who{font-weight:800;color:var(--bodhi);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;display:block;margin-bottom:.2rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#bodhi-fab .bubble .more{margin-top:.6rem;display:flex;gap:.5rem}
#bodhi-fab .bubble .more button{border:1px solid var(--line,#e2ddd2);background:#fff;border-radius:999px;padding:.25rem .7rem;
  font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;color:var(--bodhi)}
#bodhi-fab .bubble .more button:hover{background:var(--bodhi-soft);border-color:var(--bodhi-leaf)}
#bodhi-btn{position:relative;pointer-events:auto;width:64px;height:64px;border-radius:50%;border:2px solid var(--bodhi-soft);cursor:pointer;
  background:#f6f2e9;box-shadow:0 10px 30px rgba(0,0,0,.16);display:grid;place-items:center;transition:transform .18s,box-shadow .18s}
#bodhi-btn:hover{transform:translateY(-3px)}
#bodhi-btn svg{width:50px;height:50px}
.bodhi-plant .foliage{transform-origin:50% 66px;animation:bodhi-sway 5.5s ease-in-out infinite}
@keyframes bodhi-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
#bodhi-fab .pulse{position:absolute;right:4px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--bodhi-leaf);
  border:2px solid #fff;box-shadow:0 0 0 0 color-mix(in srgb,var(--bodhi-leaf) 60%,transparent);animation:bodhi-pp 2.4s infinite}
@keyframes bodhi-pp{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bodhi-leaf) 55%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.bodhi-plant .foliage{animation:none}}
@media(max-width:520px){#bodhi-fab .bubble{max-width:210px}}