/*
 * Newsbox. One hand-written stylesheet: the design is six colours, ten
 * spacing steps, no radius and no shadow, which maps to custom properties
 * far better than to utility classes.
 *
 * Breakpoints are 720px and 1024px. Below 720px is the mobile treatment.
 */

:root {
  --ink: #1a1a1a;
  --paper: #fafaf7;
  --mute: #6b6b66;
  --rule: #e5e3dc;
  --burgundy: #7a2e2e;
  --alt-background: #f3f1ea;

  --serif: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif;
  --mono: ui-monospace, Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --gutter: 24px;
  --measure: 660px;
}

@media (min-width: 720px) {
  :root {
    --gutter: 56px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

a {
  color: var(--burgundy);
  transition: opacity 120ms ease;
}

a:hover {
  opacity: 0.7;
}

/* Header ------------------------------------------------------------------ */

.header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px var(--gutter) 18px;
  border-bottom: 1px solid var(--rule);
}

.header__wordmark {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}

.header__address {
  font-size: 12px;
  color: var(--mute);
}

@media (min-width: 720px) {
  .header {
    padding: 28px var(--gutter);
  }

  .header__wordmark {
    font-size: 22px;
  }

  .header__address {
    font-size: 13px;
  }
}

/* Filter bar -------------------------------------------------------------- */

.filters {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px var(--gutter);
  font-size: 13px;
}

.filters__link {
  color: var(--mute);
  text-decoration: none;
}

.filters__link:hover {
  color: var(--ink);
  opacity: 1;
}

.filters__link--active {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

@media (min-width: 720px) {
  .filters {
    gap: 20px;
    padding: 18px var(--gutter);
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
  }
}

/* Feed -------------------------------------------------------------------- */

.feed {
  padding: 8px var(--gutter) 0;
}

.feed__group {
  padding-top: 28px;
}

.feed__group-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 6px;
}

.feed__group-label {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
}

.feed__group-sublabel {
  font-size: 12px;
  color: var(--mute);
}

.feed__end {
  border-top: 1px solid var(--rule);
  margin-top: 28px;
  padding: 22px 0 var(--space-8);
  font-size: 13px;
  color: var(--mute);
}

.feed__empty {
  padding: var(--space-8) 0;
  font-size: 14px;
  color: var(--mute);
}

@media (min-width: 720px) {
  .feed {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding: 56px var(--gutter) var(--space-8);
  }

  .feed__group {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 48px;
    align-items: start;
    padding-top: 0;
  }

  .feed__group-header {
    display: block;
    text-align: right;
    padding-top: 24px;
  }

  .feed__group-label {
    font-size: 20px;
  }

  .feed__group-sublabel {
    display: block;
    margin-top: 4px;
    font-size: 13px;
  }

  .feed__end {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 48px;
    border-top: 0;
    margin-top: 0;
    padding: 0;
  }

  .feed__end-text {
    grid-column: 2;
    border-top: 1px solid var(--rule);
    padding-top: 22px;
  }
}

/* Feed row ---------------------------------------------------------------- */

/* One three-column grid at both widths. The design describes the mobile row
   as a flex meta line with the timestamp pushed right; a grid column lands in
   the same place and keeps the timestamp a direct child, which the desktop
   layout needs. */
.row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  column-gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}

.row:hover {
  opacity: 1;
}

.row--read {
  opacity: 0.72;
}

.row__marker {
  display: block;
  padding-top: 10px;
}

.row__marker-dot {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--burgundy);
}

.row__body {
  display: block;
  min-width: 0;
}

.row__sender {
  display: block;
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.01em;
}

.row__timestamp {
  font-size: 12px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.row__domain {
  display: none;
}

.row__subject {
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}

.row__snippet {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute);
  text-wrap: pretty;
}

@media (min-width: 720px) {
  .row {
    grid-template-columns: 14px 1fr 78px;
    column-gap: 16px;
    padding: 22px 14px;
    margin: 0 -14px;
  }

  .row:hover {
    background: var(--alt-background);
  }

  .row__marker {
    padding-top: 12px;
  }

  .row__sender {
    font-size: 13px;
  }

  .row__domain {
    display: inline;
  }

  .row__timestamp {
    text-align: right;
    padding-top: 2px;
    font-size: 13px;
  }

  .row__subject {
    margin-top: 5px;
    font-size: 21px;
  }

  .row__snippet {
    margin-top: 7px;
    max-width: 600px;
    font-size: 14px;
    line-height: 1.55;
  }
}

/* Reader top bar ---------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px var(--gutter) 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}

.topbar__back {
  color: var(--burgundy);
  text-decoration: none;
}

.topbar__actions {
  display: flex;
  align-items: baseline;
  gap: var(--gutter);
}

.topbar__action {
  color: var(--mute);
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.topbar__action:hover {
  color: var(--ink);
  opacity: 1;
}

.topbar__form {
  display: inline;
}

@media (min-width: 720px) {
  .topbar {
    padding: 24px var(--gutter);
    font-size: 14px;
  }
}

/* Article ----------------------------------------------------------------- */

.article {
  padding: 32px var(--gutter) 0;
}

.article__sender {
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--mute);
}

.article__sender-name {
  color: var(--ink);
  font-weight: 500;
}

.article__title {
  margin: 0;
  font-size: 29px;
  font-weight: 400;
  line-height: 1.18;
}

.article__received {
  margin-top: 12px;
  font-size: 12px;
  color: var(--mute);
}

.article__rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 28px 0;
}

@media (min-width: 1024px) {
  .article {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 72px 0 80px;
  }

  .article__sender {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .article__title {
    font-size: 40px;
    line-height: 1.15;
  }

  .article__received {
    margin-top: 16px;
    font-size: 13px;
  }

  .article__rule {
    margin: 40px 0;
  }
}

/* Sanitized newsletter body ----------------------------------------------- */

.body p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

.body h1,
.body h2,
.body h3,
.body h4 {
  font-family: var(--serif);
}

.body h2 {
  margin: 32px 0 10px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.body h3 {
  margin: 36px 0 10px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
}

.body ul,
.body ol {
  list-style: none;
  padding-left: var(--space-5);
  margin: 0 0 var(--space-5);
}

.body li {
  position: relative;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.7;
}

.body ul li::before {
  content: "—";
  position: absolute;
  left: calc(var(--space-5) * -1);
  color: var(--mute);
}

.body ol {
  counter-reset: item;
}

.body ol li {
  counter-increment: item;
}

.body ol li::before {
  content: counter(item) ".";
  position: absolute;
  left: calc(var(--space-5) * -1);
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.body code {
  font-family: var(--mono);
  font-size: 15px;
}

.body pre {
  overflow-x: auto;
}

.body blockquote {
  margin: 36px 0;
  padding-left: var(--space-5);
  font-style: italic;
  font-size: 19px;
}

.body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}

.body img {
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 28px 0;
}

/* Newsletter tables are layout, not data. Unwrapped in CSS rather than by a
   scrubber, so the markup stays reversible if a real data table turns up. */
.body table,
.body thead,
.body tbody,
.body tr,
.body th,
.body td {
  display: block;
  width: auto !important;
  max-width: 100%;
}

.body th,
.body td {
  text-align: left;
}

/* No blanket `.body * { font-family: inherit }` here. The allowlist in
   Newsletter::Body drops every style and class attribute, so the sender has
   no way to set a typeface, colour or background — and a blanket !important
   would override this file's own heading and code rules. */

.body a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

@media (min-width: 1024px) {
  .body p {
    margin-bottom: var(--space-5);
    font-size: 17px;
  }

  .body h2 {
    margin: 44px 0 var(--space-3);
    font-size: 26px;
  }

  .body li {
    font-size: 17px;
  }

  .body img {
    margin: 36px 0;
  }
}

/* Previous / next --------------------------------------------------------- */

.neighbours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  border-top: 1px solid var(--rule);
  margin-top: var(--space-8);
  padding: 28px 0 var(--space-8);
}

.neighbours__label {
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--mute);
}

.neighbours__title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  text-wrap: pretty;
}

.neighbours__cell--older {
  text-align: right;
}

/* View original ----------------------------------------------------------- */

.original {
  padding: 40px var(--gutter) 72px;
}

.original__caption {
  max-width: var(--measure);
  margin: 0 auto var(--space-5);
  font-size: 13px;
  color: var(--mute);
}

.original__frame {
  display: block;
  width: 100%;
  max-width: var(--measure);
  height: 85vh;
  margin: 0 auto;
  border: 1px solid var(--rule);
  background: #ffffff;
}

/* Sign in ----------------------------------------------------------------- */

.signin {
  max-width: 320px;
  margin: var(--space-9) auto;
  padding: 0 var(--gutter);
}

.signin__field {
  display: block;
  margin-bottom: var(--space-4);
}

.signin__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 13px;
  color: var(--mute);
}

.signin__input {
  width: 100%;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}

.signin__input:focus {
  outline: 0;
  border-bottom-color: var(--burgundy);
}

.signin__submit {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--burgundy);
  cursor: pointer;
}

.signin__alert {
  margin-bottom: var(--space-5);
  font-size: 13px;
  color: var(--burgundy);
}

.signin__forgot {
  margin-top: var(--space-6);
  font-size: 13px;
}

.signin__title {
  margin: 0 0 var(--space-5);
  font-size: 22px;
  font-weight: 400;
}