/* A visual reading room, using the site's self-hosted type and established palette. */
#page-spinoza101 { --sp-paper:#f0e7d1; --sp-muted:#cbbfa3; --sp-gold:#dfbd75; --sp-line:#716044; --sp-surface:#19160f; --sp-dark:#100e09; --sp-teal:#a4cbb9; --sp-clay:#e7b59a; color:var(--sp-paper); font-family:var(--serif-body); -webkit-font-smoothing:antialiased; }
#page-spinoza101 *, #sp-reset-dialog * { box-sizing:border-box; }
#page-spinoza101 :is(p,li,dd) { font-size:1.13rem; line-height:1.78; text-wrap:pretty; }
#page-spinoza101 p { margin:0 0 1.25rem; }
#page-spinoza101 :is(h1,h2,h3) { color:var(--sp-paper); text-wrap:balance; font-weight:400; line-height:1.16; }
#page-spinoza101 h2 { font-size:clamp(1.8rem,3.3vw,2.6rem); margin:0 0 1.25rem; }
#page-spinoza101 h3 { font-size:1.45rem; margin:0 0 .85rem; }
#page-spinoza101 a { color:var(--sp-paper); text-underline-offset:.25em; }
#page-spinoza101 a:hover { color:var(--sp-gold); }
#page-spinoza101 .sp-kicker { font-size:.78rem; color:var(--sp-gold); letter-spacing:.12em; line-height:1.6; text-transform:uppercase; }
#page-spinoza101 .sp-small { font-size:.92rem; color:var(--sp-muted); line-height:1.65; }
#page-spinoza101 :is(a,button,input,textarea,summary):focus-visible { outline:2px solid var(--sp-gold); outline-offset:4px; }
#page-spinoza101 [id] { scroll-margin-top:1.5rem; }
.sp-js { display:none; }
.sp-ready .sp-js { display:block; }
.sp-ready .sp-nojs { display:none; }
.sp-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sp-skip { position:fixed; top:-100px; left:1rem; z-index:150; background:var(--sp-dark); padding:1rem; }
.sp-skip:focus { top:80px; }
.sp-hero { max-width:1240px; margin:auto; display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:2.5rem; padding:4rem 2.5rem 3.5rem; }
#page-spinoza101 .sp-hero h1 { font-size:clamp(3.9rem,7.6vw,7rem); letter-spacing:-.055em; margin:.6rem 0 1.5rem; }
.sp-hero h1 span { font-size:.32em; color:var(--sp-gold); letter-spacing:.02em; display:inline-block; vertical-align:top; margin-top:.4em; border-top:1px solid var(--sp-line); padding-top:.2em; }
#page-spinoza101 .sp-hero-question { font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.25; }
.sp-hero-question em { color:var(--sp-gold); }
#page-spinoza101 .sp-hero-description { max-width:440px; color:var(--sp-muted); font-size:1.08rem; }
.sp-frontispiece { position:relative; padding:2rem 0; border-block:1px solid var(--sp-line); }
#page-spinoza101 .sp-frontispiece p { text-align:center; font-size:1.2rem; line-height:1.5; margin:1rem 0; }
.sp-frontispiece em { color:var(--sp-muted); }
.sp-hero-path { display:flex; justify-content:center; gap:1.25rem; flex-wrap:wrap; }
.sp-hero-path a { font-size:.92rem; padding:.5rem 0; min-height:44px; }
.sp-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin:1.5rem 0; }
#page-spinoza101 .sp-button { display:inline-flex; justify-content:center; align-items:center; gap:.75rem; padding:.85rem 1.25rem; min-height:48px; border:1px solid var(--sp-line); background:var(--sp-dark); color:var(--sp-paper); font:1rem/1.35 var(--serif-body); text-decoration:none; cursor:pointer; transition:background-color 140ms, border-color 140ms, transform 100ms; }
#page-spinoza101 .sp-button:hover { border-color:var(--sp-gold); background:var(--sp-surface); }
#page-spinoza101 .sp-button.sp-primary { background:var(--sp-gold); color:var(--sp-dark); border-color:var(--sp-gold); }
#page-spinoza101 .sp-button.sp-primary:hover { background:var(--sp-paper); border-color:var(--sp-paper); }
#page-spinoza101 button:active { transform:scale(.96); }
#page-spinoza101 button:disabled { cursor:default; opacity:.6; }
#page-spinoza101 svg { width:100%; height:auto; display:block; fill:none; stroke:var(--sp-gold); stroke-width:1.5; }
#page-spinoza101 svg text { stroke:none; fill:var(--sp-paper); font-family:var(--serif-body); }
#page-spinoza101 svg .sp-label { font-size:16px; letter-spacing:.08em; }
#page-spinoza101 svg .sp-small { font-size:17px; fill:var(--sp-muted); }
#page-spinoza101 svg .sp-center { font-size:25px; }
#page-spinoza101 svg .sp-orbit { stroke:var(--sp-line); }
#page-spinoza101 svg .sp-tick { stroke:var(--sp-line); stroke-width:1; }
#page-spinoza101 svg .sp-fine { stroke:var(--sp-line); stroke-dasharray:3 5; stroke-width:1; }
#page-spinoza101 svg .sp-dot, #page-spinoza101 svg .sp-speck { fill:var(--sp-gold); stroke:none; }
#page-spinoza101 svg .sp-core { fill:var(--sp-surface); stroke:var(--sp-gold); }
#page-spinoza101 svg .sp-mode { fill:var(--sp-surface); stroke:var(--sp-teal); }
#page-spinoza101 svg .sp-active { fill:var(--sp-surface); stroke:var(--sp-teal); stroke-width:2.5; }
#page-spinoza101 svg .sp-muted { stroke:var(--sp-line); }
.sp-promise { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:1160px; margin:0 auto 5rem; padding:1.5rem 0; border-block:1px solid var(--sp-line); }
.sp-promise>div { padding-left:2.5rem; position:relative; }
.sp-promise>div>span { position:absolute; left:0; top:.25rem; font-size:.8rem; color:var(--sp-gold); }
#page-spinoza101 .sp-promise h2 { font-size:1.4rem; margin:0 0 .4rem; }
#page-spinoza101 .sp-promise p { font-size:1rem; color:var(--sp-muted); margin:0; }
.sp-journey { max-width:1160px; margin:0 auto 5rem; display:grid; grid-template-columns:.8fr 1.2fr; gap:5rem; }
.sp-journey>div { padding-top:1rem; }
.sp-journey-stop { display:grid; grid-template-columns:3rem 1fr auto; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--sp-line); text-decoration:none; }
.sp-chapter-number { width:2.6rem; height:2.6rem; border:1px solid var(--sp-line); border-radius:50%; display:grid; place-items:center; font-size:.9rem; color:var(--sp-gold); }
.sp-journey-stop:hover .sp-chapter-number { border-color:var(--sp-gold); background:var(--sp-surface); }
.sp-journey-stop strong { display:block; font-size:1.2rem; font-weight:400; }
.sp-journey-stop small { display:block; color:var(--sp-muted); font-size:.9rem; line-height:1.5; margin-top:.25rem; }
.sp-chapter-count { color:var(--sp-muted); font-size:.85rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sp-classroom { display:grid; grid-template-columns:260px minmax(0,1fr); gap:3.5rem; max-width:1240px; margin:0 auto; padding:0 2.5rem 4rem; align-items:start; }
.sp-sidebar { position:sticky; top:calc(var(--header-height) + 1.5rem); max-height:calc(100vh - var(--header-height) - 3rem); overflow:auto; padding:0 .75rem 1rem 0; scrollbar-color:var(--sp-line) var(--sp-dark); }
#page-spinoza101 .sp-sidebar h2 { font-size:1.55rem; }
.sp-sidebar label { font-size:1rem; }
.sp-sidebar progress { display:block; width:100%; height:6px; border:0; background:var(--sp-surface); accent-color:var(--sp-gold); margin:1rem 0; }
.sp-sidebar progress::-webkit-progress-bar { background:var(--sp-surface); }
.sp-sidebar progress::-webkit-progress-value { background:var(--sp-gold); }
#page-spinoza101 .sp-sidebar p { font-size:.85rem; color:var(--sp-muted); line-height:1.55; margin:0 0 .5rem; }
.sp-sidebar-tools { display:flex; gap:.75rem; flex-wrap:wrap; }
.sp-sidebar-tools button { border:0; background:none; color:var(--sp-paper); font: .9rem var(--serif-body); text-decoration:underline; text-underline-offset:.2em; padding:.5rem 0; min-height:44px; cursor:pointer; }
#page-spinoza101 summary { min-height:44px; cursor:pointer; line-height:1.5; padding:.75rem 0; }
.sp-sidebar details { border-top:1px solid var(--sp-line); }
.sp-sidebar summary { color:var(--sp-gold); font-size:.96rem; }
.sp-sidebar ol { list-style:none; padding:0; margin:0 0 .75rem; }
.sp-sidebar a[data-lesson-link] { display:grid; grid-template-columns:1.5rem 1fr .9rem; gap:.4rem; text-decoration:none; padding:.65rem .4rem; border-left:2px solid transparent; font-size:.95rem; line-height:1.4; }
.sp-sidebar a[data-lesson-link]>span:first-child { color:var(--sp-muted); font-size:.8rem; font-variant-numeric:tabular-nums; }
.sp-sidebar a[aria-current="step"] { border-left-color:var(--sp-gold); background:var(--sp-surface); }
.sp-sidebar>.sp-js { padding-bottom:1rem; }
.sp-sidebar>a { display:block; padding:.65rem 0; font-size:1rem; }
.sp-mark { color:var(--sp-teal); }
.sp-chapter { min-width:0; }
.sp-chapter-heading { margin-bottom:1.75rem; }
#page-spinoza101 .sp-chapter-heading h2 { font-size:1.7rem; margin:.5rem 0; }
#page-spinoza101 .sp-chapter-heading p:not(.sp-kicker) { color:var(--sp-muted); font-size:1rem; }
.sp-lab { margin:0 0 2rem; background:var(--sp-surface); border:1px solid var(--sp-line); }
.sp-lab>figcaption { padding:1rem 1.5rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; border-bottom:1px solid var(--sp-line); font-size:.9rem; color:var(--sp-muted); }
.sp-ready .sp-lab-controls { display:flex; gap:.4rem; flex-wrap:wrap; padding:1rem 1.5rem 0; }
.sp-lab-controls button { flex:1; min-height:44px; border:1px solid var(--sp-line); background:var(--sp-dark); color:var(--sp-muted); padding:.6rem; font:1rem var(--serif-body); cursor:pointer; }
.sp-lab-controls button[aria-pressed="true"] { color:var(--sp-dark); background:var(--sp-gold); border-color:var(--sp-gold); }
.sp-lab-frame>svg { max-height:340px; }
.sp-lab-caption { padding:0 1.5rem 1.25rem; }
#page-spinoza101 .sp-lab-caption h3 { font-size:1.3rem; }
#page-spinoza101 .sp-lab-caption p { font-size:1rem; margin:0; }
#page-spinoza101 .sp-analogy { margin:0; padding:1rem 1.5rem; font-size:.88rem; line-height:1.65; color:var(--sp-muted); border-top:1px solid var(--sp-line); }
.sp-scenario { padding:1.5rem; margin:2rem 0 3rem; border:1px solid var(--sp-line); background:var(--sp-dark); }
.sp-scenario-options button { display:block; width:100%; text-align:left; padding:1rem; margin:.65rem 0; border:1px solid var(--sp-line); background:var(--sp-surface); color:var(--sp-paper); cursor:pointer; font:1.05rem/1.6 var(--serif-body); }
.sp-scenario-options button[aria-pressed="true"] { border-color:var(--sp-teal); box-shadow:inset 3px 0 var(--sp-teal); }
#page-spinoza101 .sp-scenario-responses p { font-size:1rem; margin:1.25rem 0 0; }
.sp-scenario-responses strong { display:block; color:var(--sp-teal); margin-bottom:.35rem; }
.sp-lesson { padding:2.5rem 0 0; border-top:1px solid var(--sp-line); margin:2rem 0 4rem; }
.sp-lesson header { text-align:left; }
#page-spinoza101 .sp-hook { color:var(--sp-gold); font-size:1.4rem; font-style:italic; line-height:1.5; }
#page-spinoza101 .sp-lesson-status { color:var(--sp-teal); font-size:.92rem; margin:1rem 0; }
.sp-prose { margin:1.75rem 0; }
.sp-argument { padding:1.5rem; margin:2rem 0; background:var(--sp-surface); border-left:2px solid var(--sp-gold); }
.sp-argument ol { list-style:none; padding:0; margin:1rem 0; }
.sp-argument li { display:grid; grid-template-columns:2rem 1fr; gap:.75rem; }
.sp-argument li>span { color:var(--sp-gold); font-size:.85rem; padding-top:.2rem; }
#page-spinoza101 .sp-argument li>p { font-size:1.08rem; }
#page-spinoza101 .sp-argument>.sp-small { margin:0; }
.sp-example, .sp-debate, .sp-reflect { margin:2rem 0; }
.sp-debate { border-block:1px solid var(--sp-line); padding:1.5rem 0; }
.sp-debate h3 { color:var(--sp-teal) !important; }
#page-spinoza101 textarea { width:100%; display:block; min-width:0; padding:1rem; margin:.75rem 0; border:1px solid var(--sp-line); border-radius:0; background:var(--sp-surface); color:var(--sp-paper); font:1.05rem/1.65 var(--serif-body); resize:vertical; }
#page-spinoza101 textarea::placeholder { color:var(--sp-muted); opacity:1; }
#page-spinoza101 .sp-note-status { font-size:.85rem; color:var(--sp-muted); }
.sp-practice { border-top:1px solid var(--sp-line); padding-top:2rem; }
.sp-question { border:0; padding:0 0 1.5rem; margin:1.5rem 0; min-width:0; }
.sp-question legend { width:100%; padding:0 0 .6rem; font-size:1.15rem; line-height:1.55; }
.sp-option { display:flex; align-items:flex-start; gap:.75rem; margin:.6rem 0; padding:.9rem 1rem; border:1px solid var(--sp-line); background:var(--sp-surface); font-size:1.05rem; line-height:1.6; cursor:pointer; }
.sp-option input { accent-color:var(--sp-gold); margin-top:.4rem; flex:none; width:1rem; height:1rem; }
.sp-option:has(input:checked) { border-color:var(--sp-gold); background:#292216; }
.sp-option:has(input:focus-visible) { outline:2px solid var(--sp-gold); outline-offset:3px; }
.sp-answer { border-left:2px solid var(--sp-clay); margin-top:1rem; padding:.25rem 0 .25rem 1rem; }
.sp-answer[data-correct="true"] { border-left-color:var(--sp-teal); }
#page-spinoza101 .sp-verdict { color:var(--sp-clay); font-size:1rem; margin:0 0 .25rem; }
#page-spinoza101 [data-correct="true"] .sp-verdict { color:var(--sp-teal); }
#page-spinoza101 .sp-explanation { font-size:1rem; margin:0; }
#page-spinoza101 .sp-source { display:grid; gap:.4rem; font-size:.92rem; color:var(--sp-muted); overflow-wrap:anywhere; }
.sp-lesson-nav { display:flex; justify-content:space-between; gap:.75rem; flex-wrap:wrap; padding-top:1.5rem; }
.sp-supplement { max-width:860px; margin:auto; padding:3rem 2.5rem; border-top:1px solid var(--sp-line); }
.sp-supplement details { padding:.5rem 0; border-bottom:1px solid var(--sp-line); }
.sp-supplement :is(ol,ul) { padding-left:1.5rem; }
.sp-supplement li { margin-bottom:.75rem; }
.sp-supplement dl { display:grid; grid-template-columns:160px 1fr; gap:1rem 1.5rem; }
.sp-supplement dt { color:var(--sp-gold); line-height:1.6; }
.sp-supplement dd { margin:0; }
.sp-notice { max-width:800px; padding:1.5rem; margin:1rem auto !important; border:1px solid var(--sp-line); }
#sp-reset-dialog { position:fixed; inset:0; width:min(90vw,560px); max-height:85vh; overflow:auto; margin:auto; padding:2rem; border:1px solid var(--sp-line); color:var(--sp-paper); background:var(--sp-surface); }
#sp-reset-dialog::backdrop { background:rgb(0 0 0 / .8); }
@media (max-width:1200px) { .sp-promise,.sp-journey { margin-left:2.5rem; margin-right:2.5rem; } .sp-classroom { grid-template-columns:225px minmax(0,1fr); gap:2.5rem; } .sp-journey { gap:2.5rem; } }
@media (max-width:850px) { .sp-hero { grid-template-columns:1fr; padding:2.5rem 1.5rem; gap:2rem; } .sp-frontispiece { max-width:570px; width:100%; margin:auto; } .sp-hero-copy { max-width:570px; width:100%; margin:auto; } .sp-promise { margin:0 1.5rem 3rem; gap:1.5rem; } .sp-journey { grid-template-columns:1fr; margin:0 1.5rem 3rem; gap:1.5rem; } .sp-classroom { display:block; padding:0 1.5rem 2rem; } .sp-sidebar { position:static; max-height:none; margin-bottom:2rem; padding:0; } .sp-ready .sp-sidebar nav { max-height:260px; overflow:auto; margin-bottom:1rem; } .sp-sidebar>a { display:inline-block; margin-right:1rem; } .sp-supplement { padding:2.5rem 1.5rem; } }
@media (max-width:540px) { .sp-promise { display:block; } .sp-promise>div { margin:1rem 0; } .sp-frontispiece { padding:1rem 0; } .sp-journey-stop { grid-template-columns:2.5rem 1fr; gap:.75rem; } .sp-chapter-count { grid-column:2; } .sp-lab>figcaption { padding:1rem; } .sp-ready .sp-lab-controls { padding:1rem 1rem 0; } .sp-lab-controls button { font-size:.9rem; } .sp-lab-caption { padding:0 1rem 1rem; } #page-spinoza101 .sp-analogy { padding:1rem; } .sp-scenario,.sp-argument { padding:1.25rem; } .sp-supplement dl { display:block; } .sp-supplement dd { margin:.35rem 0 1.25rem; } .sp-hero-path { gap:.75rem; } }
@media (prefers-reduced-motion:reduce) { #page-spinoza101 *, #page-spinoza101 *::before, #page-spinoza101 *::after { animation:none !important; transition:none !important; } #page-spinoza101 button:active { transform:none; } }
@media print { .topnav,footer,.sp-sidebar,.sp-js,.sp-skip,.sp-lesson-nav,#sp-reset-dialog { display:none !important; } .sp-ready .sp-nojs,.sp-lesson[hidden],.sp-chapter[hidden],.sp-lab-frame[hidden] { display:block !important; } .sp-classroom { display:block; } #page-spinoza101 { --sp-paper:#111; --sp-muted:#333; --sp-gold:#444; --sp-surface:#fff; --sp-dark:#fff; } .sp-lesson { break-before:page; } }