/* physics.cafecito-ai.com design tokens and reading layout.
   Colors are semantic (see CLAUDE.md): never decorative. */
:root{
  --paper:#E7ECF1;
  --paper-2:#F3F6F9;
  --rule:#C3D0DC;
  --rule-soft:#D8E1E9;
  --ink:#0F1720;
  --ink-2:#42525F;
  --slate:#2C3B49;
  --green:#7CBE1E;
  --vermilion:#DC3A18;
  --measure:66ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size:26px 26px;
  color:var(--ink);
  font-family:"Public Sans", system-ui, sans-serif;
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px;margin:0 auto;padding:0 22px}
article.lesson{max-width:var(--measure);margin:0 auto;padding:0 22px 96px}

h1,h2,h3{font-family:"Bodoni Moda", Georgia, serif;font-weight:400;margin:0 0 14px}
h1{font-size:clamp(38px,6.8vw,72px);line-height:1.04;letter-spacing:-0.01em}
h2{font-size:clamp(25px,3.4vw,36px);line-height:1.14;margin-top:52px}
h3{font-size:21px;line-height:1.25;margin-top:34px}
p{margin:0 0 16px}
.mono,.caption,.eyebrow,.meta{font-family:"IBM Plex Mono", ui-monospace, monospace}
.eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--vermilion);margin:0 0 16px}
.lede{font-size:20px;color:var(--ink-2)}
.meta{font-size:12.5px;color:var(--ink-2)}
strong{font-weight:600}
a{color:var(--ink);text-decoration-color:var(--vermilion);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--vermilion)}

/* progress bar */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--vermilion);z-index:10}

/* top nav */
nav.top{display:flex;justify-content:space-between;align-items:baseline;padding:26px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:56px}
nav.top .brand{font-family:"Bodoni Moda", Georgia, serif;font-size:19px;text-decoration:none}
body.zen nav.top{display:none}

/* figures */
figure{margin:34px 0;padding:0}
figure svg{display:block;width:100%;height:auto;background:var(--paper-2);border:1px solid var(--rule);border-radius:2px}
figcaption{font-family:"IBM Plex Mono", ui-monospace, monospace;font-size:12.5px;color:var(--ink-2);margin-top:10px;max-width:70ch}
figcaption .fignum{color:var(--vermilion)}

/* math blocks: KaTeX rendered at build time */
.math-display{overflow-x:auto;padding:8px 2px}

/* contents page */
ol.toc{list-style:none;margin:0;padding:0}
ol.toc li{border-top:1px solid var(--rule);padding:18px 0;display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:baseline}
ol.toc .num{font-family:"IBM Plex Mono", ui-monospace, monospace;font-size:13px;color:var(--vermilion)}
ol.toc .demon{font-size:14.5px;color:var(--ink-2);margin-top:4px}
ol.toc a{text-decoration:none;font-family:"Bodoni Moda", Georgia, serif;font-size:24px}
ol.toc li.done .num::after{content:" \2713";color:var(--green)}
ol.toc li.pending{opacity:.5}

/* next-module action */
.next{display:block;margin:72px auto 0;max-width:var(--measure);border:1px solid var(--rule);border-left:3px solid var(--vermilion);background:var(--paper-2);padding:20px 22px;text-decoration:none}
.next .meta{margin-bottom:6px}

@media (max-width:400px){ body{font-size:17.5px} }

/* problems */
.problem{border:1px solid var(--rule);border-left:3px solid var(--slate);background:var(--paper-2);padding:18px 20px;margin:22px 0}
.problem .pnum{font-family:"IBM Plex Mono", ui-monospace, monospace;font-size:13px;color:var(--vermilion);letter-spacing:.06em}
.problem details{margin-top:8px}
.problem summary{cursor:pointer;font-family:"IBM Plex Mono", ui-monospace, monospace;font-size:13px;color:var(--ink-2)}
.problem summary:hover{color:var(--vermilion)}
.solution{border-top:1px solid var(--rule);margin-top:12px;padding-top:12px}

/* simulation shell */
.sim{background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;padding:26px 22px;margin:30px 0}
.lamps{display:flex;gap:14px;justify-content:center;padding:10px 0 18px}
.lamp{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);cursor:pointer;touch-action:manipulation}
.lamp.on{background:var(--green);border-color:var(--ink)}
.sim-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding-bottom:8px}
.sim-controls button{font-family:"IBM Plex Mono", ui-monospace, monospace;font-size:13px;padding:9px 14px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:2px}
.sim-controls button:hover{border-color:var(--vermilion);color:var(--vermilion)}
.sim-read{font-size:13px;color:var(--ink-2);text-align:center;margin:10px 0 0}
.sim-msg{font-size:13px;color:var(--slate);text-align:center;min-height:1.4em;margin:6px 0 0}

/* glossary */
ul.glossary{list-style:none;margin:0;padding:0}
ul.glossary li{border-top:1px solid var(--rule);padding:10px 0}
ul.glossary a{font-weight:600;text-decoration:none;font-family:"IBM Plex Mono", ui-monospace, monospace;font-size:14px}