/* scriptorium terminal: a monk's manuscript on a phosphor screen */
:root {
  --ink: #0f1328;      /* midnight, the screen */
  --vellum: #e6dfc8;   /* body text */
  --rubric: #e5483b;   /* rubrication red, used for capitals only */
  --gilt: #d9a441;     /* links */
  --faded: #8a879b;    /* metadata */
  --rule: #262b4a;
  --mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --black: "UnifrakturMaguntia", serif;
}

* { box-sizing: border-box; }
html {
  color: var(--vellum);
  /* faint scanlines */
  background: var(--ink) repeating-linear-gradient(transparent 0 2px, rgb(255 255 255 / .018) 2px 3px);
}
body {
  margin: 0 auto;
  max-width: 72ch;
  padding: 0 16px;
  font: 15px/1.7 var(--mono);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--rubric); color: var(--ink); }

a { color: var(--gilt); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--vellum); }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--ink); padding: 4px 8px; }

.bar {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; color: var(--faded); font-size: 13px;
}
.bar a { color: var(--faded); text-decoration: none; }
.bar a:hover { color: var(--vellum); }
footer.bar { border-top: 1px solid var(--rule); margin-top: 6rem; }

.cmd { color: var(--faded); margin: 0 0 1rem; }

/* the one loud thing: a blackletter masthead */
.mast { padding: 5rem 0 4rem; }
.glyph {
  font: 400 clamp(4.5rem, 19vw, 10rem)/.9 var(--black);
  margin: 0;
  letter-spacing: -.01em;
  color: var(--vellum);
}
.glyph::first-letter { color: var(--rubric); }
.cursor {
  display: inline-block; width: .38em; height: .72em; margin-left: .08em;
  background: var(--rubric); vertical-align: baseline;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.lede { margin: 1.5rem 0 0; color: var(--faded); max-width: 44ch; }

.log ol { list-style: none; margin: 0; padding: 0; }
.log li {
  display: grid; grid-template-columns: 11ch 1fr; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px dashed var(--rule);
}
.log time { color: var(--faded); }
.log a { text-decoration: none; color: var(--vellum); }
.log a:hover { color: var(--gilt); text-decoration: underline; }

/* posts */
.post { padding-top: 3rem; }
.post h1 { font: 400 clamp(2.4rem, 8vw, 3.6rem)/1.05 var(--black); margin: 0 0 .5rem; }
.post > time { color: var(--faded); font-size: 13px; }
.body { margin-top: 2.5rem; }
.body > p:first-child::first-letter {
  float: left; font: 4.2em/.8 var(--black); color: var(--rubric);
  margin: .08em .12em 0 0;
}
.body h2, .body h3 { font-family: var(--black); font-weight: 400; font-size: 1.9rem; line-height: 1.1; margin: 2.5rem 0 .5rem; }
.body blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 2px solid var(--rubric); color: var(--faded); }
.body img { max-width: 100%; height: auto; }
.body hr { border: 0; border-top: 1px dashed var(--rule); margin: 2.5rem 0; }
code { font-family: var(--mono); color: var(--gilt); }
pre { background: rgb(0 0 0 / .25); border: 1px solid var(--rule); padding: 1rem; overflow-x: auto; }
pre code { color: var(--vellum); }
.back { margin-top: 3rem; }

@media (max-width: 480px) {
  body { font-size: 14px; }
  .log li { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }