/* Adapted from sometimesright.com/static/site.css. Hanken Grotesk is SIL OFL. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --accent: #b3441c;
  --page: #ECECE8;
  --ink: #000;
  --muted: #666;
  --line: #ccc;
  --hover: rgba(255, 255, 255, 0.2);
  --border: #bbb;
  --faint: #888;
  --field: #FBFBF9;
  --field-off: #D9D9D5;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
}

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%;
}

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);
}

main {
  --head-pad: 1.5em;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px 24px;
  overflow-wrap: break-word;
}

/* Header: site name in spaced caps, accent triangle pinned top right. */
main header {
  padding: var(--head-pad) 0;
}

main h1 {
  margin: 0;
  line-height: 1.5;
  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;
}

.mark-stick {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 0;
}

.mark {
  position: absolute;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  top: calc(var(--head-pad) + .9375em - 10.8px);
  right: 12px;
  width: 18px;
  height: 15.6px;
  --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);
}

.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);
}

/* Month headings, in the site's small uppercase sans. */
h2.month {
  margin: 2.5em 0 1em;
  font-family: var(--sans);
  font-size: 0.857em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

section:first-of-type h2.month {
  margin-top: 0;
}

/* One entry: linked title, then "by Author at (favicon) Publication", then the date stamp. */
article {
  position: relative;
  margin: 0;
}

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

article p {
  margin: 0;
}

a.title {
  text-decoration-color: var(--accent);
}

/* Author and publication links: subtler than the title, a faint solid underline (adapted from
   sometimesright.com), turning accent-colored on hover. */
a.byline,
a.byline:visited {
  color: inherit;
  text-decoration-style: solid;
  text-decoration-color: var(--line);
}

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

/* Filter pages (author, outlet): one italic heading, as on sometimesright.com. */
main h2.archive-heading {
  font-size: 1.2em;
  font-style: italic;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 1.2em;
}

/* The favicon hangs in the left gutter, centered on the headline's first line (as on
   mostlybitcoin.com), so every headline starts flush with the column's left edge. */
img.favicon {
  position: absolute;
  left: -30px;
  top: calc(0.75em - 9px); /* half the 1.5 line-height, minus half the icon's 18px box */
  width: 16px;
  height: 16px;
  padding: 1px;
  background: #fff;
  border-radius: 4px;
}

/* Too narrow for a gutter: indent the entries instead, keeping the icon in its own column. */
@media (max-width: 780px) {
  article {
    padding-left: 28px;
  }

  img.favicon {
    left: 0;
  }
}

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

main footer p {
  margin: 0.5em 0;
}

@media (max-width: 600px) {
  body {
    font-size: 18px;
    line-height: 1.45;
  }
}

/* Month headings on lists link to that month's archive page: gray, turning the accent color on
   hover, never underlined. */
h2.month a,
h2.month a:visited {
  color: var(--muted);
  text-decoration: none;
}

h2.month a:hover {
  color: var(--accent);
  background: none;
  text-decoration: none;
}

/* ---------- Copied from sometimesright.com (Linker) site.css ---------- */

/* /archive: a month dropdown, then the topic and outlet lists below it. */
main h3.archive-subhead {
  margin: 2em 0 0.8em;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 0.857em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.archive-jump {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 0.857em;
}

.archive-jump label {
  display: block;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.archive-jump select {
  width: 100%;
  max-width: 100%;
  padding: 0.5em 0.7em;
  font: inherit;
  font-size: 1em;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.5em;
}

.archive-list li {
  margin: 0 0 .5em;
  break-inside: avoid;
}

.archive-list a,
.archive-list a:visited {
  text-decoration: none;
}

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

@media (max-width: 600px) {
  .archive-list {
    columns: 1;
  }
}

/* Outlets: run-in, bullet-separated rather than a two-column list (there can be many, and their
   names vary too much in length for even columns). */
.archive-inline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-inline li {
  display: inline;
}

/* A non-breaking space before the bullet (regular after) means a wrap can only fall after it, so
   a line never starts with a dangling bullet. */
.archive-inline li:not(:last-child)::after {
  content: "\00a0\00b7 ";
  color: var(--muted);
}

.archive-inline a,
.archive-inline a:visited {
  text-decoration: none;
}

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

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 {
  /* Fixed, not absolute: clicking the triangle (its label) focuses this checkbox, and the browser
     scrolls a focused element into view. Pinned to the viewport it's always in view, so opening
     the menu no longer jumps the page back to the top. */
  position: fixed;
  top: 0;
  left: 0;
  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;
}

/* Home page: link to the archive below the last month shown. */
p.older {
  margin: 2.5em 0 0;
  font-family: var(--sans);
  font-size: 0.857em;
  text-transform: uppercase;
  letter-spacing: .05em;
}

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

p.older a:hover {
  background: none;
  text-decoration: underline;
}

/* Menu: the "Updated <date>." line. */
.menu-about p.menu-updated {
  font-style: italic;
}

/* Newsletter signup (Buttondown), above the footer. Styled like the comment form. */
.signup {
  margin-top: 3em;
}

.signup label {
  display: block;
  margin-bottom: 0.5em;
  color: var(--muted);
}

.signup-row {
  display: flex;
  gap: 0.5em;
  max-width: 28em;
}

.signup input[type="email"],
.signup button {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.signup input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.4em 0.7em;
}

.signup button {
  padding: 0.4em 1em;
  font-size: 0.85em;
  cursor: pointer;
}

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