:root {
  --paper: #fff;
  --ink: #000;
  --font: "Inconsolata", ui-monospace, Menlo, Consolas, monospace;

}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
}

#viewport { position: fixed; inset: 0; overflow: hidden; }

#content {
  padding: 40px;
  font-size: 16px;
  line-height: 24px;
  text-align: justify;
}

/* script.js cuts the text into rows of exactly the same character count,
   so justifying a row only spreads a sliver of slack. That gives a solid block with no rivers. */
.row {
  height: 24px;
  overflow: hidden;
  text-align: justify;
  text-align-last: justify;
}

/* Blurred words. Two soft coloured shadows (a per-word hue and its neighbour)
   read as a small gradient. Cheap to paint: no filters, no compositing layers. */
.blur {
  color: transparent;
  text-shadow:
    -2px 0 6px hsl(var(--h) 95% 55%),
     2px 0 6px hsl(calc(var(--h) + 70) 95% 55%);
  user-select: none;
}

a, a:visited { color: var(--ink); text-decoration: underline; }
a:hover { opacity: .6; }

#aboutBtn, #closeColophon {
  position: fixed;
  top: 16px;
  right: 40px;
  z-index: 10;
  padding: 5px 14px;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
}
#aboutBtn:hover, #closeColophon:hover {background: var(--paper);outline: var(--ink) 1px solid; color: var(--ink) }
#aboutBtn:focus-visible, #closeColophon:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#closeColophon { display: none; z-index: 30; }
#colophon.open ~ #closeColophon { display: block; }

#colophon {
  position: fixed;
  top: 0; right: -400px;
  width: 400px; max-width: 100%;
  height: 100%;
  overflow-y: auto;
  z-index: 20;
  background: var(--paper);
  border-left: 1px solid var(--ink);
  transition: right .4s;
}
#colophon.open { right: 0; }

#colophonContent { padding: 40px; font-size: 15px; line-height: 1.6; text-align: left; }
#colophonContent h2 { margin: 0 0 32px; font-size: 18px; font-weight: 600; }
#colophonContent h3 { margin: 24px 0 6px; font-size: 14px; font-weight: 600; }
#colophonContent p { margin: 0 0 12px; }

/* Pill cursor: shown only while the colophon is open and the pointer is outside it */
#closeCursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
body.cursor-close #closeCursor { opacity: 1; }
body.cursor-close, body.cursor-close * { cursor: none; }

/* Gradient blob cursor, drawn on one canvas by script.js */
#blob {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
  transition: opacity .15s;
}
body.cursor-close #blob, body.cursor-out #blob { opacity: 0; }
@media (hover: hover) { * { cursor: none; } }
@media (hover: none) { #blob { display: none; } }

@media (hover: none) {
  #closeCursor { display: none; }
}

@media (max-width: 768px) {
  #content { padding: 24px; }
  #aboutBtn, #closeColophon { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #colophon { transition: none; }
}