/* Quire: one long sheet of paper. Nothing on it but ink. */
@font-face { font-family: Excalifont; src: url(/quire/assets/fonts/Excalifont.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "Caveat Brush"; src: url(/quire/assets/fonts/CaveatBrush.woff2) format("woff2"); font-display: block; }
@font-face { font-family: Caveat; src: url(/quire/assets/fonts/Caveat.woff2) format("woff2"); font-weight: 400 700; font-display: block; }

:root { --paper: #f6f1e6; --pencil: #756d63; --ink: #241d18; }
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); overflow-x: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  background-color: var(--paper);
  /* the sheet: a fine tooth, faint clouding in the pulp, and Quire's dot grid */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .18 .5 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 .35 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(118, 102, 78, .26) 0 1.1px, transparent 1.6px);
  background-size: 220px 220px, 900px 900px, 28px 28px;
}
/* lamplight, very slightly warmer at the edges */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, transparent 60%, rgba(120, 86, 40, .07)); }

.top { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 30px 0; font: 600 23px/1 Caveat, cursive; color: var(--pencil); }
.top a { color: inherit; text-decoration: none; }
.top a:hover { color: var(--ink); }

#page { position: relative; width: min(1160px, calc(100vw - 32px)); margin: 0 auto; padding: 3vh 0 4vh; }
.leaf { display: block; width: 100%; height: auto; overflow: visible; margin: 0 0 9vh; }
.leaf.hero { margin-bottom: 2vh; }
.leaf:last-child { margin-bottom: 0; }
.leaf a { cursor: pointer; }
.leaf a.again text, .leaf a.sig text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.leaf a:hover text { fill: var(--ink); }

/* your ink, on top of everything, until the page drinks it */
#wet { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; overflow: visible; }
#pad { position: absolute; display: none; touch-action: none; z-index: 2; }

body:not(.ready) #page { opacity: 0; }
#page { transition: opacity .8s ease; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.noscript { max-width: 34rem; margin: 20vh auto; padding: 0 20px; font: 600 26px/1.3 Caveat, cursive; color: var(--pencil); }

@media (max-width: 640px) {
  .top { padding: 16px 18px 0; font-size: 21px; }
  #page { padding-top: 4vh; }
  .leaf { margin-bottom: 7vh; }
}