/* PinaxGray — the pinax turned around: ink becomes wall */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #dcd9d2;        /* gallery wall */
  --ink: #211d18;       /* walnut ink */
  --quiet: #857d70;
  --link: #a3442f;      /* carnelian, fired darker for the light wall */
  --missing: #a86048;
  --hair: #c5c0b4;
  --accent: #33518c;    /* lapis */
  --serif: 'EB Garamond', Georgia, serif;
  --mono: 'Space Mono', 'Courier New', monospace;
}

body {
  font: 18px/1.6 var(--serif);
  background:
    radial-gradient(120% 100% at 50% 0%, #e1ded7 0%, var(--bg) 55%, #d2cec5 100%)
    fixed var(--bg);
}

/* the chrome speaks Space Mono, quietly, spaced like museum labels */
nav, footer, .editbar, .quiet, .abc,
.calendar .month, #lightbox figcaption,
input, button, .pastbanner {
  font-family: var(--mono);
}
nav { font-size: .72rem; letter-spacing: .09em; text-transform: lowercase; border-bottom-color: #c9c4b8; }
nav .site { letter-spacing: .12em; }
footer { font-size: .68rem; letter-spacing: .06em; border-top-color: #c9c4b8; }

h1.pagetitle {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
  color: #17130f;
}
h1.pagetitle::after {
  content: "";
  display: block;
  width: 3.5rem;
  border-bottom: 2px solid #7a3b2e;   /* the potter's mark stays */
  margin-top: .45rem;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; }

a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
a:hover { color: #7a2f1e; }
a.wikilink { border-bottom-color: #c9b6a8; }
a.wikilink:hover { border-bottom-color: var(--link); }

::selection { background: #c9ad9c; color: #211d18; }

blockquote { border-left-color: #7a3b2e; color: #6d6459; }

pre, code { font-family: var(--mono); }
pre, pre.source { background: #e4e1da; border-color: #c9c4b8; }

img { border-radius: 1px; }
.wall img { box-shadow: 0 1px 5px rgba(60, 50, 40, .22); }

table.user td { border-color: #c9c4b8; }
.calendar .month td.today { outline-color: var(--accent); }

#lightbox figure img { box-shadow: 0 8px 44px rgba(50, 40, 30, .35); }