/* The Unexamined — course pages (/course, /course/welcome, /course/room). Same tokens as the main site. */
:root{--ink:#0a0a0a;--ink-2:#131211;--bone:#ece8e1;--dim:#8a867f;--signal:#ff4a1c;--line:rgba(236,232,225,.14);--line-2:rgba(236,232,225,.26);
  --sans:"Inter Tight",system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace;--pad:clamp(18px,3vw,44px);--col:min(1120px,100%)}
html[data-theme="light"]{--ink:#ebe6dc;--ink-2:#e2dcd0;--bone:#141210;--dim:#6a655d;--signal:#e03d12;--line:rgba(20,18,16,.14);--line-2:rgba(20,18,16,.28);color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--signal);color:var(--ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--pad);top:var(--pad);z-index:9;background:var(--bone);color:var(--ink);padding:8px 12px}

/* frame */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:var(--pad);border-bottom:1px solid var(--line)}
.home{text-decoration:none;font-weight:800;letter-spacing:-.02em;font-size:15px;display:flex;gap:10px;align-items:center}
.home i{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 12px var(--signal)}
.top .mono{color:var(--dim)}
main{flex:1}
.wrap{width:var(--col);margin:0 auto;padding:0 var(--pad)}
footer.foot{border-top:1px solid var(--line);padding:var(--pad);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;color:var(--dim)}
footer.foot a{text-decoration-color:var(--line-2)}

/* placeholder text Burke still has to fill in (find it by searching for "fill") */
.fill{background:color-mix(in srgb,var(--signal) 22%,transparent);color:var(--bone);border-radius:4px;padding:0 .3em;font-family:var(--mono);font-size:.82em;letter-spacing:0;white-space:nowrap}

/* type */
.kicker{color:var(--signal);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 12px var(--signal)}
h1.display{font-size:clamp(56px,11.5vw,184px);line-height:.84;letter-spacing:-.06em;font-weight:800;text-transform:uppercase}
h1.display .serif{text-transform:none;letter-spacing:-.02em;font-weight:400}
h2.sec{font-size:clamp(34px,4.6vw,68px);line-height:.95;letter-spacing:-.045em;font-weight:700}
h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em;font-weight:700;line-height:1.2}
.lede{font-size:clamp(20px,2.1vw,28px);line-height:1.35;letter-spacing:-.015em;max-width:30em}
.prose p,.prose li{font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:color-mix(in srgb,var(--bone) 78%,var(--ink))}
.prose p+p,.prose p+ol,.prose p+ul,.prose ol+p,.prose ul+p{margin-top:14px}
.prose ol,.prose ul{padding-left:1.3em;display:grid;gap:8px}
.prose li::marker{color:var(--signal);font-family:var(--mono);font-size:.85em}
.prose strong{color:var(--bone);font-weight:600}
.dim{color:var(--dim)}
.small{font-size:14px;color:var(--dim);line-height:1.55}

/* sections */
.sec-block{padding:clamp(64px,9vw,128px) 0;border-top:1px solid var(--line)}
.sec-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px)}
.sec-grid>.label{position:sticky;top:24px;align-self:start}
.sec-grid>.label .mono{color:var(--dim);display:block;margin-bottom:16px}
@media (max-width:860px){.sec-grid{grid-template-columns:1fr}.sec-grid>.label{position:static}}

/* buttons */
.btn{display:inline-flex;gap:12px;align-items:center;justify-content:center;padding:18px 28px;border-radius:99px;background:var(--bone);color:var(--ink);text-decoration:none;font-weight:700;font-size:16px;transition:background .25s,color .25s,opacity .25s;border:0;cursor:pointer}
.btn:hover,.btn:focus-visible{background:var(--signal);color:var(--ink)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line-2)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--signal);color:var(--signal);background:transparent}

/* notices */
.prose .note,.note{border-left:2px solid var(--line-2);padding:4px 0 4px 18px;color:var(--dim);font-size:15px;line-height:1.55}
.safety{border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);background:color-mix(in srgb,var(--signal) 7%,transparent);border-radius:14px;padding:16px 18px;font-size:15px;line-height:1.55}
.safety b{color:var(--signal);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:6px;font-weight:500}
.crisis{font-size:14px;color:var(--dim)}
.crisis a{color:var(--bone)}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.rise{animation:none}}