/* reads — the content surfaces: the front page, and a piece. */

/* ── Front page ───────────────────────────────────────────────────────────
   A front page has a hierarchy or it is a list. The lead gets the size, the recent pieces
   get their standfirsts, the archive gets one line each. Three weights, and a reader can
   see at a glance which is which. */

.lead { padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
.lead-title {
  font-size: 2.05rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.lead .dek {
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0.7rem 0 0;
  text-wrap: pretty;
}

/* Recent: title, standfirst, byline — a stack, separated by hairlines rather than boxed.
   Rules, not cards: a card says "widget", a rule says "column". */
.pieces { list-style: none; padding: 0; margin: 0; }
.pieces > li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.pieces > li:last-child { border-bottom: none; }
.piece-title {
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}
.pieces .dek {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0.35rem 0 0;
  text-wrap: pretty;
}

/* Archive: one line per piece, the title carrying its own weight and the dateline held to
   the right on a screen wide enough to hold it. */
.archive-list { list-style: none; padding: 0; margin: 0; }
.archive-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.15rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.archive-list > li:last-child { border-bottom: none; }
.archive-list .archive-title { font-weight: 600; flex: 1 1 16rem; }
.archive-list .meta { margin: 0; white-space: nowrap; }

.empty {
  color: var(--muted);
  font-style: italic;
  padding: 2rem 0;
}

/* /account — your own pieces, each with the two things you might want to do to it. */
.own-list { list-style: none; padding: 0; margin: 0; }
.own-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.own-list > li:last-child { border-bottom: none; }
.own-piece-head { flex: 1 1 18rem; min-width: 0; }
.own-piece-head .archive-title { font-weight: 600; display: block; }
.own-piece-head .meta { margin: 0.2rem 0 0; }
.own-piece-actions { flex: 0 0 auto; }
.own-piece-actions .cta { font-size: 0.68rem; padding: 0.3rem 0.7rem; }

/* A piece of yours that a moderator has not looked at yet — on /account, where you are
   looking at the list a byline change is about to rewrite. */
.pending-tag {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
}

/* ── The rail ─────────────────────────────────────────────────────────────
   On a phone it is three short sections at the foot of the page, after the archive, where
   an invitation belongs — you ask someone to contribute once they have seen what they
   would be contributing to. On desktop the same markup becomes the right-hand column. */
.rail { margin-top: 3rem; }
.rail-card {
  border-top: 2px solid var(--rule-ink);
  padding: 0.7rem 0 1.4rem;
}
.rail-card h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.rail-card p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.cta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
}
a.cta:hover, button.cta:hover { background: var(--accent-bg); text-decoration: none; }
.cta + .cta { margin-left: 0.5rem; }
.cta.solid {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
a.cta.solid:hover, button.cta.solid:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

/* ── A piece ──────────────────────────────────────────────────────────────
   The article page. The title is set here, once, in the page's own type — it used to be
   whatever <h1> the Markdown happened to carry, printed below a byline that announced a
   piece the reader could not yet see the name of. */
.piece-head {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.75rem;
}
.piece-head h1 {
  font-size: 2.15rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0.3rem 0 0;
  text-wrap: balance;
}
.standfirst {
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
  margin: 0.75rem 0 0;
  text-wrap: pretty;
}
.piece-head .byline { margin-top: 0.9rem; }

/* "Vouched for by Ada." Somebody who is not the author read this and staked their name on it,
   which is the whole reason it is published. It gets the accent, because it is the point. */
.vouched {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0.5rem 0 0;
}
.vouched strong { font-weight: 700; }

.content { font-size: 1.09rem; line-height: 1.72; }
.content > :first-child { margin-top: 0; }
.content p { margin: 0 0 1.15rem; }
.content h2 { font-size: 1.4rem; margin: 2.25rem 0 0.6rem; }
.content h3 { font-size: 1.15rem; margin: 1.75rem 0 0.4rem; }
.content img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; }
.content hr { border: none; border-top: 1px solid var(--rule); margin: 2rem 0; }
.content ul, .content ol { padding-left: 1.35rem; margin: 0 0 1.15rem; }
.content li { margin: 0.35rem 0; }
.content pre {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.8rem 1rem;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.5;
}
.content blockquote {
  border-left: 2px solid var(--accent);
  margin: 1.5rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  color: var(--muted);
  font-style: italic;
}
.content blockquote p:last-child { margin-bottom: 0; }
.content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.content th, .content td {
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.content th { font-family: var(--sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* The end mark, then the invitation. A piece should close, not just stop. */
.piece-foot {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--rule-ink);
}
.piece-foot p { font-size: 0.92rem; color: var(--muted); margin: 0 0 0.9rem; }
.endmark {
  display: block;
  margin: 2rem 0 0;
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1;
}

/* ── Desktop ────────────────────────────────────────────────────────────── */
@media (min-width: 64rem) {
  /* The front page: the feed beside the rail, one hairline between them. Symmetric insets
     put the rule in the middle of the gutter rather than against one column. */
  .home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .home-feed, .home-rail { min-width: 0; }
  .home-feed { padding-right: 3rem; }
  .home-rail {
    padding-left: 3rem;
    border-left: 1px solid var(--rule);
  }
  .home-rail .rail { margin-top: 0; }
  .home-rail .rail-card:first-child { border-top: none; padding-top: 0; }

  /* The lead earns its size once there is a column to hold it. */
  .lead-title { font-size: 2.6rem; }
  .lead .dek { font-size: 1.2rem; }
  .piece-head h1 { font-size: 2.6rem; }

  /* Two columns of headlines rather than one very long one. */
  .archive-cols { columns: 2; column-gap: 3rem; }
  .archive-cols > li { break-inside: avoid; }
}