/* exhale.ink production stylesheet */
:root {
  --bg: #faf9f7;
  --ink: #1a1a18;
  --muted: #6b6a66;
  --rule: #dedcd6;
  --link: #3a5f8a;
  --accent: #b3552e;
  --chosen: #2c6fb8;      /* a chosen response's title in a list: link blue, clearer */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Charter, Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
/* v3: underline = clickable, everywhere in content. Faint at rest so lists
   stay quiet; full on hover. Chrome is exempted below. */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
}
a:hover { text-decoration-color: currentColor; }

.page {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 1rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* Header */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
}
.wordmark .mark {
  width: 15px;
  height: 15px;
  display: block;
}
.wordmark:hover { text-decoration: none; }
header nav {
  display: flex;
  gap: 1.25rem;
}
header nav a {
  color: var(--muted);
  padding: 0.75rem 0;   /* 44px tap target */
  text-decoration: none;
}
/* The page you are on, and nothing else. This was `a:first-child`, from
   when "write" led the row; once "read" led it, every page on the site
   looked like /read — including the pitch, which is not in the nav. */
header nav a[aria-current="page"] { color: var(--ink); }

/* Footer */
footer {
  padding: 1rem 0 1.5rem;
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  font-size: 13px;
  color: var(--muted);
}
footer a { color: var(--muted); }

/* Type scale: 13px small, 16px UI, 17px essay body, titles 1 size up bold */
h1 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.essay-title { font-size: 26px; letter-spacing: -0.01em; text-wrap: balance; }

/* Essay body */
.essay {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  margin-top: 2.5rem;
}
.essay p { margin: 0 0 1.1em; text-wrap: pretty; }
.essay-date {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 1.75rem;
}

/* Forms */
form { margin: 0; }
label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 0.375rem;
}
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.75rem;
  margin: 0 0 1rem;
}
textarea {
  min-height: 16rem;
  resize: vertical;
  line-height: 1.5;
}
textarea.plain-box { min-height: 7rem; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
}
::placeholder { color: var(--muted); opacity: 1; }

button, .button {
  display: inline-block;
  font-family: inherit;
  font-size: 16px;
  min-height: 44px;
  padding: 0.625rem 1.5rem;
  border: 1px solid #a5a29a;   /* v3: secondary buttons step back; the page's one primary action leads */
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  cursor: pointer;
}
button.primary, .button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
a.button { line-height: 1.4; text-decoration: none; }
a.button:hover { text-decoration: none; }
/* Under the compose box. Muted, one line, no emphasis anywhere in it: the
   sentence gives permission, and a bolded word would turn it into a rule. */
.values-line {
  font-size: 13px;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

.form-hint {
  font-size: 13px;
  color: var(--muted);
  margin: -0.5rem 0 1rem;
}

.report-line {
  margin-top: 2.5rem;
  font-size: 13px;
}
.report-line a { color: var(--muted); }

/* Session actions on the account page: log out · delete account. */
.account-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  font-size: 13px;
  color: var(--muted);
}
.account-actions a { color: var(--muted); }
.account-actions button.linky { padding: 0; }

/* Post-publish confirmation */
.confirm { margin-top: 2.5rem; }
.confirm p { margin: 0 0 1rem; }
.url-block {
  font-family: var(--mono);
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 0.875rem;
  margin: 0.375rem 0 1.5rem;
  word-break: break-all;
}
.url-block.author-link {
  border: 2px solid var(--accent);
  background: #fdf5f0;          /* v3: a faint wash behind the one link that matters most */
  font-size: 15px;
}
.url-label {
  font-size: 13px;
  color: var(--muted);
}
.warning {
  font-weight: 700;
  margin: 0 0 0.25rem;
}
.copy-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 2rem;
}
.email-opt {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.email-opt p { margin: 0 0 1rem; }

/* Author view */
.author-head { margin-top: 2.5rem; }
.deadline { margin: 0 0 1.25rem; }
.author-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.quiet-line {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 0.25rem;
}

/* App additions (not in the design mockup) */
.in-response-to, .on-piece {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.error {
  font-size: 13px;
  color: var(--accent);
  margin: 0 0 1rem;
}

/* User page & account */
.user-page { margin-top: 2.5rem; }
.essay-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.essay-list li { margin: 0 0 0.625rem; }
.essay-list-date {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin-right: 0.5rem;
}
.essay-list-response {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-left: 0.25rem;
}
.byline { color: var(--muted); }
.essay-list-byline {
  font-size: 13px;
  color: var(--muted);
  margin-left: 0.5rem;
}

/* Search results: sections in the same quiet register
   as the rest of the lists — a heading, plain rows, a "more" link. */
.results { margin-top: 2rem; }
.results h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
/* A line about the person whose page this is: their bio on /u/ and in
   search, and on /account the bio and the X handle together. **No left
   indent**: it sat 4px in from the lines above and below it, which on
   /account put "Add a line about yourself" out of line with the X line
   under it, and on /u/ put the bio out of line with the handle. */
.bio-line {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 0.25rem;
}


/* Claim page */
.claim-path {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.claim-path h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 0.125rem;
}

button.linky {
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  min-height: 0;
  padding: 0.75rem 0;   /* 44px tap target, as on the header links */
  cursor: pointer;
  /* v3: same underline contract as links — a control must look actionable */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
}
button.linky:hover { text-decoration-color: currentColor; }

/* ── The feed (SPEC §4) ──────────────────────────────────────────────────
   Dense and quiet. This screen is where the site's character is decided and
   it must not look like a social feed: no cards, no separators, no avatars,
   no counts but the one §7 requires. Density comes from what is absent. */
.views {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 2rem;
}
/* The view you are on is not a link, which is the whole of how you know. */
.views .here { color: var(--ink); }
.feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feed li { margin-bottom: 1.5rem; }
.feed-title {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.35;
}
.feed-response {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 0.125rem;
}
.feed-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0.25rem 0 0;
}
.feed-meta a { color: var(--muted); }
/* The foot of a list: the next page, and the way out of this ordering.
   Muted — where you go after reading, not a control on the reading. */
.more { margin-top: 2.5rem; font-size: 13px; color: var(--muted); }
.feed-empty { color: var(--muted); }

/* The site-wide comment stream (SPEC §4). Flat and quiet; the meta line
   above each one carries everything but the words. */
.stream {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stream li { margin-bottom: 2rem; }
.stream-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 0.375rem;
}
.stream-meta a { color: var(--muted); }
.stream-body p { margin: 0 0 0.75rem; }
/* A response is a piece, so its title carries the weight its body would on
   any other row — the body is not here, and should not be. */
.stream-title {
  font-family: var(--serif);
  font-size: 17px;
  margin: 0;
}
.stream-body p:last-child { margin-bottom: 0; }

/* ── The comment wall (SPEC §7) ──────────────────────────────────────────
   Visibly a different region from the piece, separated by rule and space
   (design brief, screen 2). One level of nesting, indent shallow. No
   avatars, no separators, no boxes — density comes from what is absent, and
   the wall has to stay readable when several comments run to 4000
   characters, which is what collapse carries. */
.wall {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.wall > h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.comment-form { margin-bottom: 2.5rem; }
.comment-form .form-hint { margin: 0 0 0.5rem; }
.comment-box {
  display: block;
  width: 100%;
  min-height: 7rem;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 0.75rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  resize: vertical;
}
.comment-box:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Near the cap only. At rest this is hidden and takes no space. */
.counter {
  font-size: 13px;
  color: var(--muted);
  margin: 0.5rem 0;
}
.counter.over { color: var(--accent); }

.comments, .comment-replies {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment { margin-bottom: 1.5rem; }
/* The context line on a permalink: the same [+] the wall shows, as a link
   into the wall rather than a toggle. */
.comment.collapsed a.collapse { font-family: var(--mono); text-decoration: none; color: var(--muted); }
/* The comment you arrived at by fragment — from /hear, or after posting.
   The site's existing faint wash, and it marks nothing else: on a permalink
   the target is first after the context line and the structure says so
   (design brief, screen 3). */
.comment:target {
  background: #fdf5f0;
  box-shadow: 0 0 0 0.5rem #fdf5f0;
  border-radius: 1px;
}
/* Shallow, and railed. The rail was taken out once for repeating what the
   indent said; it does not repeat it. With one level of nesting the indent
   never grows, so on a long wall the rail is the only thing that says a
   reply group still belongs to the root above it once that root has
   scrolled off (design brief, screen 3). */
.comment-replies {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--rule);
}
/* One rail for the whole chain, beside it, and none nested inside it. Every
   comment in a chain answers the one above, so indenting them all would
   convey nothing: the ancestors run flush and only the comment the chain
   ends at is set in (SPEC §7). */
.chain {
  padding-left: 1.25rem;
  border-left: 1px solid var(--rule);
}
.chain .comment-replies { border-left: none; }
/* The comment the chain leads to, one indent deeper than its ancestors. */
.chain .comment.here {
  border-left: 2px solid var(--accent);
  padding-left: 0.75rem;
  margin-left: -0.85rem;
}
.comment-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 0.375rem;
}
.comment-meta a { color: var(--muted); }
.comment-author { color: var(--ink) !important; }
.comment-body p { margin: 0 0 0.75rem; }
.comment-body p:last-child { margin-bottom: 0; }
/* Before the claim (SPEC §7). The control takes the weight of the top · new ·
   past line: this is a way of reading the page, and it should read like the
   other ones rather than like an action performed on the comments. */
/* The one control that marks the claim, and nothing drawn: small, muted,
   the weight of a footnote (SPEC §7). */
.claim-fold { margin: 0 0 1rem; font-size: 13px; }
.claim-fold button.linky { padding: 0; color: var(--muted); }
/* What a piece's author said about a response (SPEC §9). Metadata, at the
   weight of the date beside it: a fact about how the response was received,
   not a badge on it and not a score. */
.reaction { color: var(--muted); }
.reaction-line { margin-top: -0.25rem; }
/* Whose words the brackets are, once over the list (SPEC §9). */
.reaction-note { margin: 0.75rem 0 -0.75rem; }
/* The four labels, on the author's own list. Quiet and adjacent, the way
   every other row of controls on this site is; the one in force carries
   the ink. */
/* The author's controls, one line per response and beneath it (§7, §9):
   quiet, adjacent, middot-separated, with the separator belonging to the
   item after it so a line break cannot strand one.

   **The label in force is not a link**, which is how the site already
   says "this is the one" in the row of views on /admin. It carries its
   brackets, so the author sees the words a reader will see, and it keeps
   the line's colour: not being a link is the whole mark, and a darker
   word beside three links only made the line noisier. A colour shift on
   its own was tried first and was invisible at this weight. */
.reaction-controls {
  font-size: 13px;
  margin: 0.25rem 0 0;
  color: var(--muted);
}
/* On a response's page (SPEC §9): a second row under the vote's, with a
   gap that makes it a row of its own, and one line beneath saying what
   the word does. */
.piece-controls .reaction-controls { margin-top: 0.75rem; }
/* The line under a control saying what it does: the vote's, choose's,
   the reaction words'. Muted, 13px, tight beneath its row. */
.control-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0.25rem 0 0;
}
.reaction-controls > form.inline,
.reaction-controls > .chosen { display: inline-block; }
/* The word in force: in brackets, not a link, and a shade darker than the
   line — between the line's muted and the page's ink — so it reads as
   set without becoming a second colour (SPEC §9). */
.reaction-controls > .chosen { color: color-mix(in srgb, var(--muted) 40%, var(--ink)); }
.reaction-controls > :not(:first-child)::before {
  content: " · ";
  white-space: pre;
  display: inline-block;
  text-decoration: none;
  color: var(--muted);
}

/* On a reply that answered a named piece from inside the unnamed half of the
   wall. Metadata, at the weight of the age beside it: uppercase made it a
   badge, and it is a fact about position, not about the person. */
.after-claim { color: var(--muted); }

/* One line beneath the body, middot-separated: quiet and adjacent, never
   prominent, and never a stack (design brief, screen 3). */
.comment-actions {
  font-size: 13px;
  margin: 0.375rem 0 0;
  color: var(--muted);
}
.comment-actions a { color: var(--muted); }
/* The separator belongs to the item after it, so a line break can never
   strand one at the end of a line (design brief, screen 3). #}
   Inline-block keeps each middot glued to its own control. */
.comment-actions > a, .comment-actions > form.inline { display: inline-block; }
.comment-actions > :not(:first-child)::before {
  content: " · ";
  white-space: pre;
  /* The separator is not part of the control: it takes no underline. */
  display: inline-block;
  text-decoration: none;
  color: var(--muted);
}
.deleted { font-style: italic; }

/* The author view's secondary controls (SPEC §3): edit and delete, in the
   comment wall's register rather than as boxes. The claim is the one
   primary action on that page and the only thing that should look like
   one; these are quiet and adjacent, and the separator belongs to the
   item after it so a line break can never strand a middot. */
.author-actions {
  font-size: 13px;
  margin: 0 0 1.25rem;
  color: var(--muted);
}
.author-actions a { color: var(--muted); display: inline-block; }
.author-actions > :not(:first-child)::before {
  content: " · ";
  white-space: pre;
  display: inline-block;
  text-decoration: none;
  color: var(--muted);
}
/* Your own controls, inline in the meta line and no louder than the age
   beside them (design brief, screen 3). */
form.inline { display: inline; }
form.inline button.linky, .comment-edit {
  font-size: 13px;
  color: var(--muted);
  padding: 0;
  min-height: 0;
}
button.collapse {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  min-height: 0;
  padding: 0 0.25rem 0 0;
  cursor: pointer;
}
button.collapse:hover { color: var(--ink); background: none; }
.collapsed-count { margin-left: 0.375rem; }

/* The quoted parent above a reply box (SPEC §7). Its job is to say what you
   are answering; it is not the comment itself, so it is set back. */
.quoted {
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
}
/* On /hear the quote is context and the reply beneath it is the news, so it
   is set at the weight of the meta line rather than of a comment. On the
   reply page the quote is the only other thing on the screen and keeps its
   full size (SPEC §10). */
.stream .quoted p { font-size: 13px; }
/* And it sits tight above the reply it belongs to. At the reply page's
   1.5rem the gap inside a row was nearly the 2rem between rows, and a quote
   read as the tail of the item above it rather than the head of its own. */
.stream .quoted { margin-bottom: 0.5rem; }
.quoted p { margin: 0 0 0.5rem; }
.quoted p:last-child { margin-bottom: 0; }

/* The operator's tables. Dense and unstyled on purpose: this is a page for
   reading numbers off, not a dashboard, and nothing on it is a control. */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 2.5rem;
}
.admin-table th {
  text-align: left;
  font-weight: 400;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.admin-table th, .admin-table td {
  padding: 0.25rem 0.75rem 0.25rem 0;
  vertical-align: top;
}

/* The way out of your own conversations and into everyone's (SPEC §10).
   Muted and last: an offer at the end of the page, not a control on it. */
.said-line { margin-top: 3rem; }

/* The comment a reply is answering, where the indent cannot say (SPEC §7).
   Muted, above the body, the weight of a timestamp rather than a heading. */
.replying-to {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 0.25rem;
}

/* The comment count on a piece, beside its date. Metadata, not a control:
   the same weight as everything else on that line, and the link colour is
   the only thing that says it goes somewhere. */
a.comment-count { color: inherit; }
a.comment-count:hover { color: var(--accent); }

/* The vote control (SPEC §5). Sits under the piece, before the wall. The
   design brief gives it the accent because it must be unmistakable; it is
   small and unfilled because it must not be loud. No number appears in it in
   any state — there is nothing here for a count to sit next to. */
/* One line, flush with the body's left edge — not centred, not floating.
   A bare mark read as a scroll-to-top before it read as a vote, so it
   carries its word, in the weight of every other secondary control here. */
.vote { margin: 1.5rem 0 0; }
.cast {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  padding: 0.25rem 0;
  color: var(--muted);
  background: none;
  border: none;
  min-height: 0;
  cursor: pointer;
  /* The same underline contract as every control on the site: a bare
     word read as a label. The arrow it carried went with the underline —
     "▲ upvote" was an idiom, and the underline says the same thing to
     everyone, idiom or not. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
}
a.cast:hover, button.cast:hover { color: var(--accent); background: none; }
/* Voted: the same line in the accent. A statement once the undo window has
   closed, and still the control while it is open. */
.cast.voted { color: var(--accent); cursor: default; }
button.cast.voted { cursor: pointer; }

/* A piece's responses, under the two controls and above the wall (SPEC §9).
   Titles only, so it reads as a list of doors rather than as more page to
   get through. */
.responses-on-piece {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.responses-on-piece h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* The private "responses received" list on an author's own view (§9) */
.responses {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.responses h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.response-row {
  margin-top: 1rem;
  font-size: 15px;
}
.response-controls { margin-left: 0.25rem; }
.response-controls form { display: inline; }
.response-controls form + form { margin-left: 1rem; }
/* The public way to respond, under the vote control and in its register
   (SPEC §9): the two things a reader can do when the body ends sit
   together, a line apart. It was at reading size at the foot of the page,
   which was compensation for being the most-missed control on it — a fix
   aimed at the position, not at the size. Next to the vote the
   compensation would make the costlier act the louder one, so the sentence
   takes the vote's weight and the link keeps its colour. */
/* Under the body (SPEC §9): the vote, and beneath it the way to respond.
   Two rows, not one — a vote is one click and a response is a piece, and
   a middot between them said they were peers. Both 13px, lowercase like
   every control on the site. The vote is muted because it acts here; the
   link is link-coloured because it takes you elsewhere, the rule the
   title and the "in response to" line already follow. */
.piece-controls { margin: 1.5rem 0 0; }
/* The vote and, for the parent's author, choose: each a row in the
   vote's register with one line beneath saying what it does (SPEC §5,
   §9). A row of the same gap separates the groups. */
.piece-controls .vote { display: block; margin: 0; }
.piece-controls .vote:not(:first-child) { margin-top: 0.75rem; }
.cast:hover { text-decoration-color: currentColor; }
.response-line {
  display: block;
  margin: 0;
  font-size: 13px;
}
/* The way out of the page comes last, with room before it: the acts on
   this piece — vote, choose, the author's word — sit together above. */
.piece-controls .response-line:not(:first-child) { margin-top: 1.25rem; }
/* "continues in <title>": the words muted, the title in link colour, and
   the way to respond tight beneath it — two doors, one place. */
.continues-line { color: var(--muted); }
.continues-line + .response-line { margin-top: 0.25rem; }
/* The chosen response's title in a list (SPEC §9): not a bracketed word,
   since choosing is not a reaction, and not the accent, which shouted in
   a list — a second, clearer blue beside the ordinary link blue: a hint. */
.chosen-title { color: var(--chosen); }
/* The reply walk (SPEC §9). As quiet as the reply line above it: a walk is
   a way out of a page, not an invitation to keep clicking, and it must never
   read like the "next" control of a feed. */
.responses-more { margin: 0.5rem 0 0; }
a.linky {
  font-size: 13px;
  color: var(--muted);
}

/* Static pages: about, privacy, terms */
.static-page {
  margin-top: 2.5rem;
  max-width: 34rem;
}
.static-page h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 2.25rem 0 0.5rem;
}
.static-page p { margin: 0 0 1rem; }
.static-page .quiet { color: var(--muted); }
pre.sql {
  font-family: var(--mono);
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 0.875rem;
  margin: 0 0 1rem;
  overflow-x: auto;
}

/* Report queue */
.admin { margin-top: 2.5rem; }
.report {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-top: 1.5rem;
}
.report-head {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.report-reason { margin: 0 0 0.5rem; white-space: pre-wrap; }
.report-contact {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.report-actions { display: flex; gap: 0.75rem; }

/* One line about the author, on their page and beside a People result. */
p.bio-line {
  font-size: 13px;
  color: var(--muted);
  margin: 0.25rem 0 0;
}
.bio-form { margin-top: 1.5rem; }
.bio-form input[type="text"] { margin-bottom: 0.25rem; }
.bio-form .linky { margin-left: 0.75rem; }
/* The bio at rest, on the account page: a line of text with a quiet way in,
   not a control (SPEC §11). Matches p.bio-line on the public page. */
.user-page .bio-line { margin-top: 1.5rem; }
/* The gap belongs to the *edit* link, which follows the bio text. In the
   empty state the link is the whole line, and the same margin put "Add a
   line about yourself" 8px right of everything under it. */
.user-page .bio-line .bio-edit { margin-left: 0.5rem; }

/* The two lines about you on /account — the bio and the X handle — as one
   block under the public-page line, on one left edge, rather than two
   strays after it. The bio's own top margin belongs to /u/, where it
   follows the username and there is nothing else to line up with. */
.user-page .account-lines { margin: 1rem 0 1.5rem; }
.user-page .account-lines > * { margin: 0 0 0.25rem; }
.user-page .account-lines .bio-line,
.user-page .account-lines .bio-form { margin-top: 0; }

/* Claim and edit dates, in the same register as every other date. */
/* Claim and edit dates. Inside the article this is a span under the byline,
   within the date paragraph; on an author view it is a paragraph of its own.
   Both want the same small gap above and nothing below — a negative margin
   here drags the line onto whatever precedes it. */
.piece-dates {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 0.25rem 0 0;
}

/* Per-piece actions on the account list. */
.piece-actions {
  display: block;
  font-size: 13px;
  margin-left: 0.25rem;
}
.piece-actions a { color: var(--muted); }

/* ═══ Pitch page (/) ═══ */
/* The home page argues before it asks for anything, so it gets the one place
   on the site where type is allowed to be large. Everything here is the serif
   the essay body already uses — the pitch reads as writing, not as marketing. */
.hero {
  font-family: var(--serif);
  font-size: clamp(38px, 9.5vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 4.5rem 0 2rem;
  text-wrap: balance;
}
.pitch-prose {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}
.pitch-prose p { margin: 0 0 1.1em; text-wrap: pretty; }
.pitch-prose .lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
}
.holds-apart {
  font-family: var(--serif);
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  margin: 2.75rem 0 0;
}
/* The line under the big one: close enough to read as its second half. */
.holds-apart + .pitch-prose { margin-top: 0.875rem; }
.pitch-section { margin: 4.5rem 0 0; }
.pitch-section h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.steps {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  padding: 1.375rem 0;
  border-top: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before {
  content: counter(step);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--muted);
}
/* Outlined numerals where the browser can draw them: the count is a marker,
   not a thing to read, so it sits behind the sentence beside it. */
@supports (-webkit-text-stroke: 1px black) {
  .steps li::before, .notes-back li::before { color: var(--rule); -webkit-text-stroke: 0.5px var(--muted); }
}
/* Directly under a section label, the pull is the section: no gap above. */
.pitch-section h2 + .pull { margin-top: 0; }
.pull {
  font-family: var(--serif);
  font-size: clamp(22px, 4.5vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.75rem 0 1rem;
}
.steps li p {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}
.notes-back { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.notes-back li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  padding: 1.375rem 0;
  border-top: 1px solid var(--rule);
}
.notes-back li::before {
  content: "\201C";
  font-family: var(--serif);
  font-size: 38px;
  line-height: 0.9;
  color: var(--muted);
}
.notes-back blockquote,
.notes-back .note-source { grid-column: 2; }
.notes-back li:last-child { border-bottom: 1px solid var(--rule); }
.notes-back blockquote {
  margin: 0 0 0.375rem;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}
.notes-back .note-source {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
/* The page's one call to action, and the only accent on it. */
.cta { margin: 5.5rem 0 1.5rem; }
.cta .cta-mark { width: 40px; height: 40px; display: block; margin: 0 0 1.75rem; }
.cta .cta-lead {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 0.375rem;
}
.cta a {
  font-family: var(--serif);
  font-size: clamp(34px, 8vw, 44px);
  font-weight: 700;
  color: var(--accent);
  display: inline-block;
  padding: 0.25rem 0 0.625rem;
  line-height: 1.1;
}
.cta a:hover { text-decoration: underline; color: var(--accent); }

/* ═══ Write page (/write) ═══ */
/* The compose box is the page. Both fields drop their boxes: a piece being
   written should look like the piece, not like a form to fill in. */
.write-note {
  font-size: 13px;
  color: var(--muted);
  margin: 2.5rem 0 0;
}
.write-note.below { margin: 2.25rem 0 0; }
.write-form { margin-top: 1.5rem; }
.write-form .title-input {
  font-family: var(--serif);
  font-size: 26px;              /* v3: matches .essay-title — writing looks like the piece */
  letter-spacing: -0.01em;
  font-weight: 700;
  line-height: 1.3;
  width: 100%;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.375rem 0 0.625rem;
  margin: 0 0 1.75rem;
}
.write-form .title-input:focus { outline: none; border-bottom-color: var(--ink); }
.write-form .body-input {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  width: 100%;
  color: var(--ink);
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  padding: 0.75rem;
  margin: 0 -0.75rem;              /* focus surface extends past the measure; text stays on it */
  margin-left: calc(-0.75rem - 2px);
  width: calc(100% + 1.5rem + 2px);
  min-height: 18rem;
  resize: vertical;
  field-sizing: content;           /* grows with the text where supported */
}
.write-form .body-input:focus { outline: none; }
.write-actions { margin-top: 1.5rem; }

/* ── Proposed additions to static/style.css (design revision) ── */
/* One register for every section boundary: the mono label the pitch page
   already uses. A reader learns it once and can skim any page by it. */
.results h2,
.responses h2, .claim-path h2, .list-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
h2.list-label { margin: 2.5rem 0 0.75rem; }
.results { margin-top: 2.5rem; }
.essay-list li { margin: 0 0 0.875rem; }
/* Buttons answer the cursor; keyboards get the same courtesy. */
button:hover, .button:hover { border-color: var(--ink); }
button.primary:hover, .button.primary:hover { background: #9c4a27; border-color: #9c4a27; color: #fff; }
button.linky:hover { background: none; color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #f0ddd0; }
header nav a:hover { color: var(--ink); }
/* Search is one row. */
.search-form { display: flex; gap: 0.75rem; align-items: flex-start; }
.search-form input { flex: 1; margin: 0; }

/* ── Review pass, September 2026 ─────────────────────────────────────────── */
/* Lists that open a page start where the essay does; nothing sits on the
   header rule. */
.feed, .stream, main > .on-piece, main > .feed-empty { margin-top: 2.5rem; }
/* A relative age is metadata, not a label: the same sans as every other meta
   line, and it follows the title rather than leading it. */
.essay-list-date { font-family: var(--sans); margin-right: 0; }
/* Both counts under a title read as facts; neither takes the link colour. */
a.response-count, a.comment-count { color: inherit; }
a.response-count:hover, a.comment-count:hover { color: var(--accent); }
/* Disabled is visibly disabled — the claim button inside the floor most of
   all, since that is the one control the site deliberately shows you cannot
   use yet (SPEC §3). */
button:disabled, .button:disabled,
button.primary:disabled, button:disabled:hover, button.primary:disabled:hover {
  background: transparent;
  color: var(--muted);
  border-color: var(--rule);
  cursor: not-allowed;
}
button.linky:disabled, button.linky:disabled:hover {
  color: var(--muted);
  text-decoration: none;
  cursor: not-allowed;
}
.claim-from button.linky { padding: 0; }
/* One box, one focus treatment, everywhere text is typed. */
.comment-box { background: #fff; }
.comment-box:focus { outline: none; border-color: var(--ink); }
/* Cancel beside Save and Reply, on the same line with room between them. */
.comment-form > button + a.linky, .bio-form > button + a.linky { margin-left: 0.75rem; }
/* Three sizes: 13, 16, 17. Nothing at 15. */
.response-row { font-size: 16px; }

/* The classifier's state on /admin (SPEC §14): one sentence, muted, with its
   control inline so "is on" and "turn it off" read as one thought. */
/* One line per switch, with its control on the same line. A div rather
   than a p: a <form> cannot live inside a paragraph, and the browser closes
   the paragraph at it and strands the control on its own line (SPEC §7
   records the same bug on the comment controls). */
.classifier-state { font-size: 13px; color: var(--muted); margin: 0 0 0.5rem; }

/* ── The simulation tab (/admin/sim, SIMULATION.md §7) ──────────────────────
   Operator-only, and busy by nature: many parameters, a live status, charts
   and a report. It borrows the site's palette and restraint — muted help
   text, discreet buttons, one accent for the single primary action — and
   groups the controls so the interface explains itself. */
.sim-lede, .admin-lede { max-width: 44rem; color: var(--ink); margin: 0 0 1.75rem; line-height: 1.55; }

.sim-panel {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.sim-h {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.sim-note, .admin-note { font-size: 13px; color: var(--muted); margin: 0 0 1rem; max-width: 46rem; line-height: 1.5; }
.sim-note b, .admin-note b { color: var(--ink); font-weight: 600; }
/* A section intro sits right under an h2.list-label, tighter than a lede. */
.admin-note.under-label { margin: -0.35rem 0 0.9rem; }

/* Status: a compact grid of label-over-value cells. */
.sim-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem 1.25rem;
}
.sim-status-grid .wide { grid-column: 1 / -1; }
.sim-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.sim-v { font-size: 15px; color: var(--ink); }
.sim-sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.sim-updated { font-size: 12px; color: var(--muted); margin: 0.75rem 0 0; }
.sim-error { font-size: 12px; color: var(--accent); white-space: pre-wrap; background: #fbf3f0; padding: 0.5rem; margin: 0.75rem 0 0; overflow-x: auto; }

/* Charts: restrained inline-SVG line plots. */
.sim-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; }
.sim-chart { margin: 0; }
.sim-chart figcaption { font-size: 12px; color: var(--ink); margin-bottom: 0.375rem; }
.sim-chart svg { width: 100%; height: 120px; display: block; background: #fbfaf8; border: 1px solid var(--rule); }
.sim-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 12px; color: var(--muted); margin-top: 0.375rem; }
.sim-legend b { color: var(--ink); font-weight: 600; }
.sim-swatch { display: inline-block; width: 0.7rem; height: 0.15rem; vertical-align: middle; margin-right: 0.3rem; }

/* Controls: the one primary action leads; the rest are quiet link-buttons. */
.sim-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.sim-buttons button.primary { min-height: 36px; padding: 0.4rem 1rem; font-size: 14px; }
.sim-buttons button.linky { font-size: 13px; min-height: auto; }
.sim-buttons .sim-danger { color: var(--accent); }

/* Parameters: a responsive grid of small, labelled fields with help beneath. */
.sim-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem 1.5rem; }
.sim-field label { font-size: 13px; color: var(--ink); margin-bottom: 0.25rem; }
.sim-field .sim-input, .sim-field select {
  width: 100%;
  max-width: 11rem;
  font-size: 14px;
  padding: 0.35rem 0.5rem;
  margin: 0;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  border-radius: 0;
}
.sim-field .sim-input:focus, .sim-field select:focus { outline: none; border-color: var(--ink); }
.sim-help { font-size: 12px; color: var(--muted); margin: 0.3rem 0 0; line-height: 1.45; }
.sim-help code { font-size: 11px; color: #9a988f; }

/* The report: monospace, but small and set off in its own tinted box. */
.sim-report {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  background: #f6f4ef;
  border: 1px solid var(--rule);
  padding: 1rem;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Simple bar charts for /admin/analytics (SPEC §14, §17) ─────────────────
   Categorical counts read better as bars than as a column of numbers. Plain
   CSS widths, no library, one calm fill per chart. The number stays beside
   each bar so nothing is lost to the picture. */
.bars { margin: 0 0 2.25rem; max-width: 40rem; }
.bar-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  font-size: 13px;
}
.bar-label { color: var(--muted); }
.bar-track { background: #efece6; height: 0.85rem; }
.bar-fill { height: 100%; background: var(--accent); }
.bars.cool .bar-fill { background: var(--link); }
.bar-val { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-val .sim-sub { margin-left: 0.4rem; }

/* A response is a piece, so its title is set as one (SPEC §9): the serif
   weight its body would have on any other row, the same rule /hear's
   .stream-title follows. The list is titles only — the excerpt that briefly
   sat under each one is gone (SPEC §17). */
/* The title only: a direct child of the row. The byline sits inside the
   date span and stays mono, because it is metadata wherever it appears. */
.responses-on-piece .essay-list > li > a {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
}
/* Points (SPEC §6): the one number about a piece. Before the title on a
   row, first on the metadata line on the piece, muted in both. */
.feed-points { color: var(--muted); }

/* A list of addresses (SPEC §14), and pasted page source (SPEC §13): both
   are machine text, set in the machine's face and kept short — neither is
   something anyone reads back. */
.bulk-invite { margin: 0.75rem 0 2rem; }
.bulk-invite input[type="file"] { display: block; margin: 0 0 0.75rem; font-size: 13px; }
.bulk-invite textarea,
.x-paste textarea {
  min-height: 7rem;
  font-family: var(--mono);
  font-size: 12px;
}

/* The invite tree on /admin/invites (SPEC §14): nested lists, one rail. */
.tree { list-style: none; margin: 0.5rem 0 0; padding: 0 0 0 1rem; border-left: 1px solid var(--rule); }
.tree li { margin: 0 0 0.375rem; }
.invite-list li { font-size: 13px; color: var(--muted); }
.invite-form { margin: 0.5rem 0 0.25rem; }

/* The link a piece answers (SPEC §8). **Closed until it is wanted**: a
   field standing open over the title would make the compose page a form,
   and most pieces answer nothing. The summary is a muted line and nothing
   more — no marker, no box — and the field under it is a rule and
   whitespace like the title beside it (design brief, screen 4). */
.link-open { margin: 0 0 1.5rem; }
.link-open summary {
  list-style: none;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}
.link-open summary::marker { content: ""; }
.link-open summary::-webkit-details-marker { display: none; }
.link-open summary:hover { text-decoration-color: currentColor; }
.write-form .link-input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.5rem 0;
  margin: 0.625rem 0 0;
}
.write-form .link-input:focus { outline: none; border-bottom-color: var(--ink); }
.link-open .form-hint { margin: 0.375rem 0 0; }
.in-response-to .host { color: var(--muted); }