/* Reset, the ruled paper, type, focus and the motion rules every page shares. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

/* The ruled page: faint blue lines every --line, and one margin line where the mascot sits. */
body {
  min-height: 100vh;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent calc(var(--margin-x) - 2px), var(--rule) calc(var(--margin-x) - 2px),
                    var(--rule) var(--margin-x), transparent var(--margin-x)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px),
                              var(--rule) calc(var(--line) - 1px), var(--rule) var(--line));
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--line);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .jb-hand {
  font-family: var(--font-hand);
  font-variation-settings: var(--infm-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { max-width: 62ch; text-wrap: pretty; }
small, .jb-note { font-size: var(--step--1); color: var(--graphite); }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink-deep); text-decoration-style: wavy; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.jb-wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-left: var(--margin-x); }
.jb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jb-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--highlight); color: var(--ink-deep);
  padding: 0.5rem 1rem; font-family: var(--font-hand); }
.jb-skip:focus { top: 1rem; }

/* Highlighters: a swipe behind ink, slightly tilted, never a text colour. Yellow by default; green behind ink,
   pink and orange only behind --ink-deep (ink there is AA, not AAA). */
.jb-mark { --hl: var(--highlight); background: linear-gradient(100deg, transparent 2%, var(--hl) 4%, var(--hl) 96%, transparent 98%);
  background-size: 100% 70%; background-position: 0 85%; background-repeat: no-repeat; padding-inline: 0.15em; }
.jb-mark--green { --hl: var(--hl-green); }
.jb-mark--pink { --hl: var(--hl-pink); color: var(--ink-deep); }
.jb-mark--orange { --hl: var(--hl-orange); color: var(--ink-deep); }

/* Lines that draw themselves: drawn by default; site.js (html.jb-js) resets and animates them. */
[data-draw] path { stroke: var(--ink); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jb-js [data-draw]:not(.is-drawn) path { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.jb-js [data-draw].is-drawn path { stroke-dasharray: var(--len, 1000); stroke-dashoffset: 0;
  transition: stroke-dashoffset 800ms var(--ease); }

/* The pencil cursor, only for a mouse or pen. */
@media (pointer: fine) {
  html { cursor: url("../assets/svg/pencil.svg") 3 29, auto; }
  a, button, summary, label, [role="button"] { cursor: url("../assets/svg/pencil-tilt.svg") 3 29, pointer; }
}

/* Page-flip between pages (cross-document View Transitions); browsers without it just navigate. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 450ms var(--ease) both jb-page-out; transform-origin: left center; }
::view-transition-new(root) { animation: 450ms var(--ease) both jb-page-in; transform-origin: left center; }
@keyframes jb-page-out { to { transform: perspective(1600px) rotateY(-80deg); opacity: 0.2; } }
@keyframes jb-page-in { from { transform: perspective(1600px) rotateY(25deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .jb-js [data-draw] path, .jb-js [data-draw]:not(.is-drawn) path, .jb-js [data-draw].is-drawn path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}