/* ARTIFACT — writing
 *
 * Not a blog. A blog sorts by recency, which makes the newest thing the most
 * important thing and makes a quiet year read as abandonment. This is an archive:
 * the order is authored, the dates are provenance, and nothing on the surface tells
 * you what is new.
 *
 * The list holds SENTENCES, not headlines. Each piece is reduced to the one line it
 * is actually about, and the title only exists once the piece is open — the same
 * contract the photographs have, where a frame carries no caption until you look
 * closer. It also means the page can be read straight down as a set of statements
 * by someone who never opens anything, which is most people.
 */

.reading {
  min-height: 100%;
  background: var(--ground);
}

.read {
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(48px, 12vh, 120px) var(--pad) 30vh;
}

/* -------------------------------------------------------------------- nav */

.read-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(56px, 14vh, 140px);
}

.read-count { font-variant-numeric: tabular-nums; }

.read-nav-right {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

/* ------------------------------------------------------------------ list */

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

.piece + .piece { margin-top: clamp(40px, 7vh, 76px); }

/* The whole line is the target. No "read more", no chevron, no button styling —
   the sentence is the interface. */
.piece-line {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: clamp(21px, 3.1vw, 33px);
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 420ms ease;
}

.piece-line:hover,
.piece-line:focus-visible { color: var(--ink); }

/* Open state: the sentence stops being a link and becomes the standfirst. */
.piece.is-open .piece-line {
  color: var(--ink);
  cursor: default;
}

/* ------------------------------------------------------- provenance + body */

/* Title and date live INSIDE. They are what the piece is filed as, not what it is
   announced as, so they sit small and mono under the line rather than above it. */
.piece-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.piece-body {
  /* Collapsed by height so the open is a develop, not a jump. Height is set in JS
     from the real scrollHeight; a fixed max-height guess either clips a long piece
     or makes a short one ease against nothing. */
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 640ms cubic-bezier(.22, .61, .36, 1), opacity 520ms ease;
}

.piece.is-open .piece-body { opacity: 1; }

.piece-body-inner {
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  margin-top: 22px;
}

.piece-body p,
.piece-body li {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-dim);
}

.piece-body p + p { margin-top: 1.15em; }

.piece-body ul {
  margin: 1.15em 0;
  padding-left: 1.1em;
}

.piece-body li + li { margin-top: .45em; }

.piece-body em { color: var(--ink); font-style: italic; }

/* The sign-off is his and it is load-bearing — it says the pieces were written with
   the tool they are about. Set apart rather than hidden. */
.piece-body p:last-child {
  margin-top: 2em;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.piece-close {
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 300ms ease;
}

.piece-close:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .piece-body { transition: none; }
  .piece-line { transition: none; }
}