/* Palette and type: brand/README.md. Ink ground, as the Substack publication
   is, so the two read as one. On ink the palette has one text colour, paper:
   hierarchy comes from size, case and weight, never from grey, which fails on
   ink and is kept to rules and borders. Reversed amber is the accent, for
   rules, tags, focus and the filled button (ink on amber), never for running
   text. Archivo at 400 and 500 only. */
@font-face {
  font-family: Archivo;
  src: url("/fonts/Archivo.ttf") format("truetype");
  font-weight: 400 500;
  font-display: swap;
}
:root {
  --ink: #141413;
  --paper: #FAF9F5;
  --amber: #EF9F27;      /* amber reversed: the accent on ink */
  --rule: #6B6A64;       /* grey, rules and borders only on ink */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 1.0625rem/1.6 Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
strong, b, h1, h2, h3 { font-weight: 500; }
a { color: var(--paper); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
p { overflow-wrap: break-word; }

/* Masthead: mark, centred wordmark, Subscribe; the section row beneath. */
header.site { border-bottom: 1px solid var(--rule); }
.masthead {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 0.75rem; max-width: 64rem; margin: 0 auto; padding: 1rem;
}
.mark { display: flex; }
.mark img { display: block; }
.wordmark { font-size: clamp(1.375rem, 4.5vw, 2.25rem); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: var(--paper); }
.masthead .button { justify-self: end; }
header.site nav {
  display: flex; justify-content: center; gap: 1.75rem;
  border-top: 1px solid var(--rule); padding: 0 1rem; font-size: 0.9375rem;
}
header.site nav a { text-decoration: none; padding: 0.7rem 0 0.6rem; border-bottom: 2px solid transparent; }
header.site nav a[aria-current] { border-bottom-color: var(--paper); font-weight: 500; }

/* Ink on amber: the reversed tag, and the only compliant way to fill amber. */
.button {
  display: inline-block; background: var(--amber); color: var(--ink);
  font-weight: 500; font-size: 0.9375rem; line-height: 1.2;
  padding: 0.6rem 1rem; border-radius: 4px; text-decoration: none; white-space: nowrap;
}
.button:hover { color: var(--ink); background: var(--paper); }

main, footer.site { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
main { padding-top: 1rem; }
footer.site { margin-top: 3.5rem; padding-top: 1.25rem; padding-bottom: 2.5rem; border-top: 1px solid var(--rule); font-size: 0.875rem; }

h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em; margin: 2rem 0 1rem; }
h2 {
  font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 3rem 0 0; padding-top: 0.6rem; border-top: 4px solid var(--amber);
}
h3 { font-size: 1.25rem; line-height: 1.3; margin: 0; }
.hero { padding-bottom: 0.5rem; }
.hero p { font-size: 1.125rem; }

/* Small caps lines: the tier above a listing, the date under a card. Paper,
   stepped down in size, because on ink there is no grey to step down to. */
.tier, .dateline { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
.subtitle { font-size: 1.1875rem; }
.meta { font-size: 0.9375rem; }

.card { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--paper); text-decoration: underline; }
.card .meta { margin: 0.4rem 0 0; }
.card .teaser {
  margin: 0.6rem 0 0; font-size: 1rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.card .dateline { margin-top: 0.75rem; }

.status { font-size: 0.9375rem; }
.tag {
  display: inline-block; background: var(--amber); color: var(--ink); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; padding: 0.1rem 0.45rem;
  margin-right: 0.4rem; border-radius: 2px; vertical-align: 0.1em;
}
.status .tag { margin-right: 0.5rem; }
article.listing .tier { margin-top: 2rem; }
article.listing h1 { margin-top: 0.5rem; }
.apply, .gone { font-weight: 500; overflow-wrap: anywhere; }
.note { font-size: 0.9375rem; }
.from { font-size: 0.9375rem; margin-top: 2rem; }
/* Substack's signup form (About only): fluid up to the 480px it is drawn for,
   centred in the column (Substack centres the form inside its frame), with
   Substack's white border and background dropped. */
.signup { margin: 1.5rem 0; }
.signup iframe { display: block; width: 100%; max-width: 480px; height: 320px; margin: 0 auto; border: 0; background: transparent; }
blockquote { margin: 1.25rem 0; padding-left: 1rem; border-left: 4px solid var(--amber); }

ul.issues { list-style: none; padding: 0; margin: 1.5rem 0 0; }
ul.issues li { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
ul.issues a { font-weight: 500; font-size: 1.125rem; line-height: 1.35; text-decoration: none; }
ul.issues a:hover { color: var(--paper); text-decoration: underline; }
ul.issues .dateline { display: block; margin-top: 0.4rem; }

@media (max-width: 30rem) {
  .masthead { grid-template-columns: auto 1fr auto; padding: 0.75rem 1rem; }
  .wordmark { justify-self: center; }
  .masthead .button { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
}
main > .dateline:first-child { margin-top: 2rem; }