/* Approved Paper and B/W lesson typography. Ink keeps its own hero, but its
   section headings and box titles are serif too, set the same as Paper's. */
html[data-theme="ink"] .flow>h2 {font-family:var(--font-body);font-size:1.7rem;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin-top:.65rem;margin-bottom:.3rem;}
html[data-theme="ink"] :is(.seeit,.tryit) h3 {font-family:var(--font-body);font-weight:600;font-size:1.375rem;line-height:1.35;letter-spacing:-.01em;}
@media(max-width:44rem) {
  html[data-theme="ink"] .flow>h2 {font-size:1.5rem;line-height:1.3;}
}
html:is([data-theme="paper"],[data-theme="bw"]) {
  --font-display:"Newsreader",Georgia,serif;
  --h1-weight:400; --h1-leading:1.12; --h1-tracking:-.025em;
  --display-weight:400; --display-leading:1.3; --display-tracking:-.015em;
  --col:36rem; --gutter:clamp(1rem,4vw,3rem);
}
html[data-theme="paper"] {--ice:#705711;--dim:#59534b;--dim-2:#625a50;}
html:is([data-theme="paper"],[data-theme="bw"]) body {
  font-weight:400;font-size:1.1875rem;line-height:1.65;font-optical-sizing:auto;
}
html:is([data-theme="paper"],[data-theme="bw"]) strong {font-weight:600;}
html:is([data-theme="paper"],[data-theme="bw"]) .hero {background:var(--void);border-bottom:1px solid var(--line);--strong:var(--text);}
html:is([data-theme="paper"],[data-theme="bw"]) .hero :is(canvas) {display:none;}
html:is([data-theme="paper"],[data-theme="bw"]) .hero::before,
html:is([data-theme="paper"],[data-theme="bw"]) .hero::after {display:none;}
html:is([data-theme="paper"],[data-theme="bw"]) .hero .inner {display:flex;flex-direction:column;padding-top:2.4rem;padding-bottom:2.8rem;}
html:is([data-theme="paper"],[data-theme="bw"]) .hero .slug {order:0;color:var(--dim);font-size:.75rem;margin:0 0 1rem;line-height:1.6;}
html:is([data-theme="paper"],[data-theme="bw"]) .hero h1 {order:1;color:var(--text);font-size:clamp(2.3rem,5vw,3.8rem);max-width:23ch;margin:0 0 1.3rem;}
html:is([data-theme="paper"],[data-theme="bw"]) .hero h1 em {color:var(--text);font-style:italic;}
html:is([data-theme="paper"],[data-theme="bw"]) .hero .lead {order:2;font-size:1.1875rem;line-height:1.65;max-width:var(--col);color:var(--text);}
html:is([data-theme="paper"],[data-theme="bw"]) .hero .cap {order:3;max-width:var(--col);color:var(--dim);line-height:1.6;font-size:.8125rem;margin-top:1.1rem;}
html:is([data-theme="paper"],[data-theme="bw"]) .hero .cap b {color:var(--text);}
html:is([data-theme="paper"],[data-theme="bw"]) .flow {padding-top:2rem;}
html:is([data-theme="paper"],[data-theme="bw"]) .flow>p {text-align:start;overflow-wrap:break-word;}
html:is([data-theme="paper"],[data-theme="bw"]) .flow>*+* {margin-top:1.05rem;}
html:is([data-theme="paper"],[data-theme="bw"]) .flow>.phase {margin-top:2.8rem;margin-bottom:.15rem;}
html:is([data-theme="paper"],[data-theme="bw"]) .flow>.phase:first-child {margin-top:0;}
html:is([data-theme="paper"],[data-theme="bw"]) .flow>h2 {font-family:var(--font-body);font-size:1.7rem;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin-top:.65rem;margin-bottom:.3rem;}
html:is([data-theme="paper"],[data-theme="bw"]) .statement {line-height:1.4;}
html:is([data-theme="paper"],[data-theme="bw"]) :is(.seeit,.tryit) {padding:1.5rem;background:var(--panel);border:1px solid var(--line);}
html:is([data-theme="paper"],[data-theme="bw"]) :is(.seeit,.tryit) h3 {font-family:var(--font-body);font-weight:600;font-size:1.375rem;line-height:1.35;letter-spacing:-.01em;}
html:is([data-theme="paper"],[data-theme="bw"]) .flow>p a {color:var(--text);text-decoration:underline;text-underline-offset:3px;}
html:is([data-theme="paper"],[data-theme="bw"]) .btrack em {padding:.05rem .3rem;background:var(--void);color:var(--text);border-radius:2px;}
html:is([data-theme="paper"],[data-theme="bw"]) :is(.seeit>.sub,.seeit>p,.hint) {font-size:1rem;line-height:1.6;}
html:is([data-theme="paper"],[data-theme="bw"]) .rail a {font-size:.8125rem;line-height:1.5;padding:.55rem .65rem;}
html:is([data-theme="paper"],[data-theme="bw"]) .rail summary {color:var(--text);line-height:1.5;}
html:is([data-theme="paper"],[data-theme="bw"]) .next .ttl {line-height:1.4;}
/* only the surface differs by theme now; size lives in components.css */
html:is([data-theme="paper"],[data-theme="bw"]) .tsw {margin-left:auto;background:var(--panel);border-color:var(--line);}
html:is([data-theme="paper"],[data-theme="bw"]) .tsw button[aria-pressed="true"] {background:var(--text);color:var(--void);}
html:is([data-theme="paper"],[data-theme="bw"]) :is(button,a,input,summary):focus-visible {outline:2px solid var(--text);outline-offset:4px;}
html:is([data-theme="paper"],[data-theme="bw"]) .gbook .ch-title {font-weight:600;}
html:is([data-theme="paper"],[data-theme="bw"]) .gbook .row a {font-weight:400;}
@media(min-width:64rem) {
  html:is([data-theme="paper"],[data-theme="bw"]) .hero .inner {padding-left:calc(var(--gutter) + var(--rail) + 3.5rem);}
}
@media(min-width:44rem) and (max-width:63.99rem) {
  html:is([data-theme="paper"],[data-theme="bw"]) :is(.shell,.hero .inner) {max-width:43rem;}
}
@media(max-width:44rem) {
  html:is([data-theme="paper"],[data-theme="bw"]) {--gutter:1rem;}
  html:is([data-theme="paper"],[data-theme="bw"]) body {font-size:1.125rem;line-height:1.65;}
  html:is([data-theme="paper"],[data-theme="bw"]) .topbar .in {gap:.5rem;flex-wrap:wrap;padding-top:.4rem;padding-bottom:.4rem;}
  html:is([data-theme="paper"],[data-theme="bw"]) .topbar :is(.nm,.id,.pc) {display:none;}
  html:is([data-theme="paper"],[data-theme="bw"]) .mark span {display:inline;font-size:.85rem;letter-spacing:.01em;}
  html:is([data-theme="paper"],[data-theme="bw"]) .hero .inner {padding-top:1.75rem;padding-bottom:1.8rem;}
  html:is([data-theme="paper"],[data-theme="bw"]) .hero h1 {font-size:2.3rem;max-width:18ch;}
  html:is([data-theme="paper"],[data-theme="bw"]) .hero .lead {font-size:1.125rem;}
  html:is([data-theme="paper"],[data-theme="bw"]) .hero .slug {font-size:.6875rem;}
  html:is([data-theme="paper"],[data-theme="bw"]) .crumbs {font-size:.6875rem;line-height:1.5;}
  html:is([data-theme="paper"],[data-theme="bw"]) .flow>h2 {font-size:1.5rem;line-height:1.3;}
  html:is([data-theme="paper"],[data-theme="bw"]) .flow>.phase {margin-top:2.2rem;}
  html:is([data-theme="paper"],[data-theme="bw"]) .flow>.phase:first-child {margin-top:0;}
  html:is([data-theme="paper"],[data-theme="bw"]) :is(.seeit,.tryit) {padding:1rem;}
  html:is([data-theme="paper"],[data-theme="bw"]) .gbook .row a {line-height:1.5;}
}
html[data-theme="bw"] .brow.mine {outline:2px solid #222;outline-offset:2px;}
html[data-theme="bw"] .brow.mine .btrack i {background:repeating-linear-gradient(135deg,#222 0 4px,#555 4px 7px);}
html[data-theme="bw"] :is(.gbook,.gcm-bar,.gcm-nav,.gcm-load,.seeit:not(:has(.pl-stick)),.freeze,.ai-msg) {filter:grayscale(1);}
html[data-theme="bw"] .gload {--paper:#fff;--paper2:#ddd;--board:#333;--board2:#111;--edge:#999;}
html[data-theme="bw"] .gload .pg {background:linear-gradient(90deg,#ddd,#fff);}
html[data-theme="bw"] .gload-fix {background:rgba(0,0,0,.44);}
html[data-theme="bw"] .gload-fix :is(.say,.slow) {color:#eee;}
html[data-theme="bw"] .gcm-back {background:rgba(0,0,0,.72);}
html[data-theme="bw"] .gstrip button {background:#333;color:#fff;border-color:#888;}
html[data-theme="bw"] .gstrip button.on {background:#fff;color:#111;border-color:#fff;}
html[data-theme="bw"] .gbook {--paper:#fff;--paper2:#f3f3f3;--paper-ink:#202020;--paper-dim:#555;--gold:#555;--gold-soft:#ddd;--cream:#fff;--cream-dim:#ddd;}