/* The Mechanical Turk Diaries.

   The layout is the blog's own, from the Observer theme by Zack Sultan: white page, one narrow column,
   centred titles, hairlines. The type is set after Robert Bringhurst's The Elements of Typographic Style:

   - a measure of about 66 characters, within the 45 to 75 he allows for a single column of text
   - a size and a leading chosen together, 1.4 here; every vertical space is a multiple of one line
   - sizes on a scale, here the perfect fifth (1, 1.5, 2.25), not picked one at a time
   - paragraphs after the first are indented by an em and not also separated by a space
   - old-style figures in running text, lining and tabular ones where numbers are to be compared
   - small capitals and letterspaced capitals for words that are set in capitals, and no letterspacing
     for lower case, ever
   - real ligatures and kerning, ragged right, no justification, no hyphenation on a screen this wide
   - hairlines thin and short, and used to divide, not to box
   - one family, in its roman, italic and small capitals, instead of several that disagree

   The face is EB Garamond (SIL Open Font License), self-hosted and subset with its small capitals and
   old-style figures kept: the copy Google serves has had those features removed. */

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/EBGaramond.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url("../fonts/EBGaramond-Italic.woff2") format("woff2"); }

:root {
  --ink: #1f1f1f;
  --dim: #707070;
  --hair: rgba(0, 0, 0, 0.14);
  --size: 1.1875rem;                       /* 19px: Garamond is small for its body */
  --lh: 1.4;
  --u: calc(var(--size) * var(--lh));      /* one line of text: the unit every vertical space is counted in */
  --fifth: 1.5;                            /* the perfect fifth */
  --measure: 27em;                         /* about 66 characters of this face at this size (measured: 67) */
}

::selection { background: #78c9a1; color: #1f1f1f; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: var(--size);
  line-height: var(--lh);
  font-weight: 440;                        /* a hair over regular: Garamond is light on a screen */
  color: var(--ink);
  background: #fff;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  hyphens: manual;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
p, ul, ol, h1, h2, h3 { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }

/* Links are underlined thinly, below the descenders, in the colour of the text. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.055em;
  text-decoration-color: rgba(0, 0, 0, 0.32);
  text-underline-offset: 0.17em;
  text-decoration-skip-ink: auto;
}
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid #78c9a1; outline-offset: 3px; border-radius: 2px; }

/* The words set in capitals are small capitals, and letterspaced: a tenth of an em or so. */
.sc { font-variant-caps: all-small-caps; font-variant-numeric: lining-nums; letter-spacing: 0.08em; }

#page { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---- the head of every page ------------------------------------------------ */
#header { margin: var(--u) 0 calc(var(--u) * 3); }
.links { text-align: center; padding-bottom: calc(var(--u) * 0.5); border-bottom: 1px solid var(--hair); }
.links ul { list-style: none; }
.links li { display: inline; margin: 0 0.9em; font-size: 0.95em; font-variant-caps: all-small-caps; letter-spacing: 0.1em; }
.links a { text-decoration: none; color: var(--dim); }
.links a:hover { color: var(--ink); }

.blog-title { text-align: center; margin-top: calc(var(--u) * 3); }
.blog-title h1 {
  font-size: calc(var(--size) * 2);
  line-height: calc(var(--u) * 1.5);
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.075em;
  font-weight: 420;
}
.blog-title a { text-decoration: none; }
.blog-description {
  max-width: 31em; margin: var(--u) auto 0;
  font-style: italic; color: var(--dim);
  font-size: 1.02em; line-height: var(--lh);
  text-wrap: balance;
}

/* ---- the stories ------------------------------------------------------------ */
#content { width: 100%; }
.narrow { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.post { margin-bottom: calc(var(--u) * 4); }
.post:not(:last-child)::after {           /* a short rule between stories, not a line across the page */
  content: ""; display: block; width: 2.5em; margin: calc(var(--u) * 4) auto 0; border-top: 1px solid var(--hair);
}
.title h1 {
  text-align: center;
  font-size: calc(var(--size) * var(--fifth));
  line-height: calc(var(--u) * 4 / 3);
  margin: 0 auto var(--u);
  font-weight: 400;
}
.caption p { margin: 0; text-wrap: pretty; hanging-punctuation: first; }
.caption p + p { text-indent: 1.2em; }     /* indent, and no space: one or the other, not both */

/* the line under a story: its date in small capitals, and its notes */
.metadata { margin-top: var(--u); font-size: 0.92em; color: var(--dim); display: flex; gap: 1.2em; }
.metadata a { text-decoration: none; font-variant-caps: all-small-caps; font-variant-numeric: lining-nums; letter-spacing: 0.08em; }
.metadata a:hover { color: var(--ink); }
.date, .notes-count { display: block; }

/* ---- paging and the archive ------------------------------------------------- */
.pagination { text-align: center; margin: 0 0 calc(var(--u) * 3); color: var(--dim); }
.pagination a { font-variant-caps: all-small-caps; letter-spacing: 0.1em; text-decoration: none; margin: 0 1em; color: var(--ink); }
.pagination a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pagination .page-of { font-style: italic; font-size: 0.95em; margin: 0 0.4em; }

.archive .title h1 { margin-bottom: calc(var(--u) * 0.25); }
.archive-count { text-align: center; color: var(--dim); font-style: italic; margin: 0 0 calc(var(--u) * 2); }
.archive h2 {
  font-size: 1em; font-weight: 440; font-variant-caps: all-small-caps; font-variant-numeric: lining-nums; letter-spacing: 0.12em;
  margin: calc(var(--u) * 2) 0 calc(var(--u) * 0.5); padding-top: calc(var(--u) * 0.5); border-top: 1px solid var(--hair);
}
.archive h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.archive ul { list-style: none; }
.archive li { display: flex; align-items: baseline; gap: 0.5em; line-height: calc(var(--u) * 1.1); }
.archive li a { text-decoration: none; flex: 0 1 auto; }
.archive li a:hover { text-decoration: underline; }
.archive li .lead { flex: 1 1 1.5em; min-width: 1em; border-bottom: 1px dotted rgba(0, 0, 0, 0.3); transform: translateY(-0.28em); }
.archive li .metadata-inline { flex: 0 0 auto; font-size: 0.9em; color: var(--dim); font-variant-caps: all-small-caps; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.07em; white-space: nowrap; }

/* ---- the foot ----------------------------------------------------------------- */
#footer { text-align: center; margin: calc(var(--u) * 2) 0 calc(var(--u) * 2); padding-top: var(--u); border-top: 1px solid var(--hair); }
#footer-links ul { list-style: none; }
#footer-links li { display: inline; margin: 0 0.9em; font-size: 0.95em; font-variant-caps: all-small-caps; letter-spacing: 0.1em; }
#footer a { text-decoration: none; color: var(--dim); }
#footer a:hover { color: var(--ink); }
#footer .colophon p { margin-top: calc(var(--u) * 0.75); font-size: 0.88em; font-style: italic; color: var(--dim); }

/* ---- smaller screens: the same rules, with the size brought down so the measure stays in range ---- */
@media screen and (max-width: 740px) {
  :root { --size: 1.0625rem; }
  #page { padding: 0 1.25rem; }
  .blog-title h1 { font-size: calc(var(--size) * 1.7); }
  .title h1 { font-size: calc(var(--size) * 1.35); }
  .caption p { hyphens: auto; hyphenate-limit-chars: 8 3 3; hyphenate-limit-lines: 2; }  /* only long words, never more than two lines running */
  .links li { margin: 0 0.6em; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { a { text-decoration: none; } .links, #footer { display: none; } body { font-size: 11pt; } }