/* Self-hosted; SIL OFL license in fonts/LICENSE.md. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk-Regular.woff2") format("woff2");
  font-display: swap;
}

/* Public site: a single 700px column, site name on top. */
:root {
  --accent: #b3441c; /* the triangle and links' underline in posts and comments */
  --page: #ECECE8;
  --card: #F6F6F3; /* a panel lighter than the page, for non-link posts */
  --ink: #000;
  --muted: #666; /* link underlines, the meta line */
  --line: #ccc; /* blockquote bar */
  --hover: rgba(255, 255, 255, 0.2);
  --border: #bbb; /* rules between comments, comment form fields */
  --faint: #888; /* comment dates, the signed-out comment form */
  --field: #FBFBF9; /* comment form fields */
  --field-off: #D9D9D5; /* the signed-out comment form's grayed-out fields */
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", serif;
  font-size: 21px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%; /* keep iOS from inflating text in landscape */
}

a,
a:visited {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 0.2em;
}

a:hover {
  background: var(--hover);
  text-decoration-color: var(--accent);
}

/* Links in a post (the linked title included) and in comments are underlined in the accent color. */
article a,
.comments a,
.comment a {
  text-decoration-color: var(--accent);
}

/* Placeholder links (an author or outlet name, not yet wired to anything) get a faint dotted
   underline instead, to read as not-quite-clickable. */
a.placeholder,
p.meta a.placeholder {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--line);
}

/* Date stamp placed after the last word of a post: small accent-colored lettering led by a pipe
   (| SEP 24), of which only the date is the link to the post's permalink. The pipe is dropped
   when the stamp gets a paragraph of its own. */
span.dated {
  margin-left: 0.2em;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 0.857em; /* 18px at the 21px body size */
  white-space: nowrap;
  color: var(--accent);
}

span.dated::before {
  content: "| ";
}

p.stamp span.dated {
  margin-left: 0;
}

p.stamp span.dated::before {
  content: none;
}

a.permalink,
a.permalink:visited {
  color: inherit;
  text-decoration: none;
}

a.permalink:hover {
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1.7px;
  text-underline-offset: 2px;
}

/* One centered column; 700px is the text width. */
main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px 24px;
  overflow-wrap: break-word; /* a long URL can't force horizontal scroll */
}

article + article {
  margin-top: 3em;
}

/* On a single post page: the date and category below the post, in place of the permalink badge. */
p.meta {
  margin: 1em 0 0;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 0.857em;
  text-transform: uppercase;
  color: var(--muted);
}

p.meta a,
p.meta a:visited {
  color: var(--accent);
  background: none;
  text-decoration: none;
}

p.meta a:hover {
  color: var(--muted);
  background: none;
  text-decoration: none;
}

/* Non-link posts show no headline, just the body on a panel lighter than the page. */
article.note {
  padding: 1.5em;
  background: var(--card);
  border-radius: 6px;
}

/* Extra air around a panel in the list, but not on its own post page. */
body:not(.single) article.note {
  margin: 5em 0;
}

/* The panel's padding sets the top and bottom spacing, so the first and last blocks add none. */
article.note > :first-child {
  margin-top: 0;
}

article.note > :last-child {
  margin-bottom: 0;
}

/* Site name on the left. The triangle (below) is pinned to the right and stays put on scroll. */
main {
  --head-pad: 1.5em; /* the header's vertical padding; also places the triangle outside it */
}

main header {
  padding: var(--head-pad) 0;
}

main footer {
  margin-top: 3em;
  padding-top: 1.75em;
}

main footer p {
  margin: 0.5em 0;
}

/* A single post page has no list below it, so the footer sits closer. */
body.single main footer {
  margin-top: 1.5em;
}

main footer > :first-child {
  margin-top: 0;
}

main footer > :last-child {
  margin-bottom: 0;
}

main h1 {
  margin: 0;
  line-height: 1.5; /* fixed, so the triangle can be centered on the 1.25em title's line */
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
}

main h1 a,
main h1 a:visited {
  font-size: 1.25em;
  letter-spacing: .1em;
  text-decoration: none;
}

main h1 a:hover {
  background: none;
}

/* An equilateral triangle in the accent color, right of the site name, that sticks to the top of the
   window. A sticky element only stays within its parent, so it sits in a zero-height sticky strip that
   is a child of <main> (the whole page) and is placed, unstuck, beside the site name. */
.mark-stick {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 0;
}

.mark {
  position: absolute;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* header padding + half the title's 1.875em line, minus half the triangle's 15.6px height, minus a
     3px nudge up to sit level with the capitals */
  top: calc(var(--head-pad) + .9375em - 10.8px);
  right: 12px;
  width: 18px;
  height: 15.6px; /* 18px x sqrt(3)/2 */
  --border-w: 8px;
  /* a transparent 12px border makes a roomier tap target; the negative margin keeps the triangle put */
  border: 12px solid transparent;
  margin: -12px;
}

.mark::before,
.mark::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mark::after {
  inset: 0;
  background: var(--accent);
}

/* A border in the page color, so the triangle is cut out of whatever scrolls beneath it. clip-path
   can't take a border, so this is a larger triangle behind the accent one. Growing an equilateral
   triangle's inradius by w adds 2*sqrt(3)*w to its side: sqrt(3)*w each side and 3*w in height (2*w
   above the centroid, w below). */
.mark::before {
  left: calc(var(--border-w) * -1.732);
  top: calc(var(--border-w) * -2);
  width: calc(18px + var(--border-w) * 3.464);
  height: calc(15.6px + var(--border-w) * 3);
  background: var(--page);
}

main h1 span {
  font-weight: normal;
}

main h2 {
  font-size: 1em;
  font-weight: normal;
}

main h2.archive-heading {
  font-size: 1.2em;
  font-style: italic;
  font-weight: normal;
  margin-bottom: 1.2em;
  margin-top: 0;
}

blockquote {
  margin: 1em 12px 1em 2px;
  padding-left: 15px;
  border-left: 2px solid var(--line);
}

main img,
main pre {
  max-width: 100%;
}

main pre {
  overflow-x: auto;
}

/* Comments: the thread and form below a single post, and the lists on /comments and /users/<id>. */
section.comments {
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: 1px solid var(--border);
}

/* A bottom rule under every comment, the last included, so it also separates the thread from the
   sign-in line and form below it. */
.comment {
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid var(--border);
}

.comment-byline {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin: 0 0 0.6em;
}

/* The avatar and name are one link, so it needs the byline's flex gap too. */
.comment-byline a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.comment-avatar {
  border-radius: 50%;
  flex: none;
}

/* On /comments and a commenter's page: the post a comment is on. */
.comment-reply-to {
  margin: 0 0 0.6em;
  font-style: italic;
  color: var(--muted);
}

.comment-text {
  margin: 0;
  white-space: pre-wrap;
}

.comment-date {
  margin: 0.8em 0 0;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 0.762em; /* 16px at the 21px body size */
  line-height: 1.2;
  color: var(--faint);
}

.comment-signin,
.comment-signed-in,
.comments-closed {
  margin: 0;
  color: var(--muted);
}

.comment-inline-form {
  display: inline;
}

.comment-link-btn {
  padding: 0;
  font: inherit;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
}

.comment-error {
  margin: 0.5em 0 0;
  color: var(--accent);
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: 0.8em;
}

.comment-form textarea,
.comment-form button {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.comment-form textarea {
  padding: 0.6em 0.8em;
  resize: vertical;
}

.comment-form button {
  align-self: flex-start;
  padding: 0.4em 1em;
  font-size: 0.85em;
  cursor: pointer;
}

.comment-form button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Signed out: a grayed-out copy of the form, a hint that signing in turns it on. */
.comment-form-disabled textarea,
.comment-form-disabled button,
.comment-form-disabled button:hover {
  color: var(--faint);
  background: var(--field-off);
  border-color: var(--border);
  cursor: not-allowed;
}

.commenter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}

/* Phones: smaller type and tighter spacing. */
@media (max-width: 600px) {
  body {
    font-size: 18px;
    line-height: 1.45;
  }

  article + article {
    margin-top: 2.25em;
  }

  article.note {
    padding: 1em 16px;
  }

  blockquote {
    margin-right: 0;
    padding-left: 12px;
  }
}

/* Menu overlay, CSS only: the triangle is a <label> for a hidden checkbox, and :checked fades in a
   page-colored box over the visible screen. The box is fixed inside the sticky strip, so it never
   moves; the triangle comes later in the strip, so it stays on top. The header inside repeats the
   real one, at the position it has when the page is unscrolled (same column, same padding). */
.menu-toggle {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0; /* hidden but still focusable from the keyboard */
}

.menu-toggle:focus-visible ~ main .mark {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.menu {
  position: fixed;
  inset: 0;
  background: var(--page);
  opacity: 0;
  visibility: hidden; /* out of reach of clicks, tabbing and screen readers while closed */
  overflow-y: auto; /* the columns can outgrow a short screen */
  overscroll-behavior: contain;
  transition: opacity .25s ease, visibility 0s .25s;
}

.menu-col {
  display: flex;
  flex-direction: column;
  min-height: 100%; /* so the columns below can run the rule to the bottom of the screen */
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Two columns split by a 1px black rule; on a phone the second stacks under the first and the rule
   turns horizontal. */
.menu-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1; /* fill what the header leaves, so the rule reaches the bottom even with little content */
  padding-bottom: 24px; /* the rule stops short of the screen's edge */
}

.menu-cats {
  padding-right: 1.5em;
}

.menu-about {
  padding-left: 1.5em;
  border-left: 1px solid #000;
}

.menu-about p {
  margin: 0 0 1em;
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-cats .menu-list {
  font-size: 1.2em; /* the categories are a size up from the links on the right */
}

.menu-list li {
  margin: 0 0 .5em;
}

/* Underlined only on hover. */
.menu-list a,
.menu-list a:visited {
  text-decoration: none;
}

.menu-list a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

@media (max-width: 600px) {
  .menu-cols {
    grid-template-columns: 1fr;
    flex: none; /* stacked, the rule is horizontal and should sit between the two, not at the bottom */
  }

  /* the blurb goes first, then the rule, then the categories */
  .menu-about {
    order: -1;
    padding-left: 0;
    padding-bottom: 1em;
    border-left: 0;
  }

  .menu-cats {
    padding-right: 0;
    padding-top: 1em;
    border-top: 1px solid #000;
  }
}

/* While the overlay is up the triangle becomes a black X: its two pseudo-elements turn into two
   crossed bars centered a little below the triangle's box, level with the site name's capitals. */
.menu-toggle:checked ~ main .mark::before,
.menu-toggle:checked ~ main .mark::after {
  inset: auto;
  left: 8px;
  top: -.2px;
  width: 2px;
  height: 20px;
  background: #000;
  clip-path: none;
}

.menu-toggle:checked ~ main .mark::before {
  transform: rotate(45deg);
}

.menu-toggle:checked ~ main .mark::after {
  transform: rotate(-45deg);
}

.menu-toggle:checked ~ main .menu {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}