/* MUTE — a redacted case file. Paper, ink, one stamp red. No rounded cards. */
:root {
  --paper: #f1ede4;
  --paper-2: #e8e2d6;
  --ink: #121110;
  --soft: #5d574d;
  --rule: #121110;
  --hair: #c9c1b1;
  --red: #b4201f;
  --bar: #121110;
  --on-bar: #f1ede4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e0d0c;
    --paper-2: #181614;
    --ink: #ebe6db;
    --soft: #9a9285;
    --rule: #ebe6db;
    --hair: #34302a;
    --red: #e0453f;
    --bar: #ebe6db;
    --on-bar: #0e0d0c;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 19px; line-height: 1.65;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.w { max-width: 660px; margin: 0 auto; padding: 0 20px; }
.mono { font-family: "Cousine", ui-monospace, monospace; font-size: 13px; }
.muted { color: var(--soft); }
.en { direction: ltr; unicode-bidi: isolate; }
/* the censor bar: text you are not allowed to read */
.x { background: var(--bar); color: transparent; user-select: none; border-radius: 1px; padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* masthead */
.top { border-bottom: 3px solid var(--rule); }
.top .w { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.logo { text-decoration: none; background: var(--bar); color: var(--on-bar); font-family: "Karantina", Impact, sans-serif; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: 6px; padding: 5px 12px 3px 6px; direction: ltr; }
.top nav { display: flex; gap: 18px; align-items: baseline; font-family: "Cousine", monospace; font-size: 14px; }
.top nav a { text-decoration: none; border-bottom: 1px solid transparent; }
.top nav a:hover { border-bottom-color: var(--ink); }
.top nav a.cta { color: var(--red); font-weight: 700; border-bottom: 2px solid var(--red); }

/* front page */
.front { padding: 40px 0 22px; border-bottom: 1px solid var(--rule); }
.front h1 { font-family: "Karantina", Impact, sans-serif; font-weight: 700; font-size: clamp(62px, 19vw, 118px); line-height: .88; margin: 0 0 18px; letter-spacing: .5px; }
.front h1 em { font-style: normal; color: var(--red); }
.sheet { font-family: "Cousine", monospace; font-size: 14px; line-height: 2; margin: 0; }
.sheet b { font-weight: 700; }
.filters { display: flex; gap: 0; overflow-x: auto; margin: 0 -20px; padding: 0 20px; border-bottom: 1px solid var(--rule); scrollbar-width: none; font-family: "Cousine", monospace; font-size: 14px; }
.filters::-webkit-scrollbar { display: none; }
.filters a { flex: none; text-decoration: none; padding: 11px 13px; color: var(--soft); }
.filters a.on { background: var(--bar); color: var(--on-bar); }

.file { display: block; text-decoration: none; padding: 26px 0 24px; border-bottom: 1px solid var(--rule); position: relative; }
.file .no { font-family: "Cousine", monospace; font-size: 13px; color: var(--soft); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.stamp { display: inline-block; font-family: "Cousine", monospace; font-weight: 700; font-size: 13px; color: var(--red); border: 2px solid var(--red); padding: 1px 8px 0; transform: rotate(-2.5deg); }
.file h2 { font-size: clamp(27px, 7.4vw, 36px); line-height: 1.12; margin: 0 0 10px; font-weight: 800; }
.file p { margin: 0; color: var(--soft); font-size: 18px; line-height: 1.55; }
.file .go { display: inline-block; margin-top: 14px; font-family: "Cousine", monospace; font-size: 14px; font-weight: 700; border-bottom: 2px solid var(--ink); }
.file:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pager { display: flex; justify-content: space-between; gap: 10px; padding: 20px 0 10px; font-family: "Cousine", monospace; font-size: 14px; }
.empty { padding: 60px 0; text-align: center; }

/* a story */
.cover { padding: 30px 0 18px; border-bottom: 3px double var(--rule); }
.cover .no { font-family: "Cousine", monospace; font-size: 13px; color: var(--soft); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cover h1 { font-size: clamp(34px, 9.6vw, 50px); line-height: 1.08; margin: 16px 0 12px; font-weight: 800; }
.cover h2 { font-size: 21px; font-weight: 500; margin: 0 0 12px; }
.cover .by { font-family: "Cousine", monospace; font-size: 14px; margin: 0; }
.prose { font-size: 21.5px; line-height: 1.82; padding: 26px 0 4px; overflow-wrap: break-word; }
.prose p { margin: 0 0 1.1em; }
.endmark { font-family: "Cousine", monospace; font-size: 13px; color: var(--soft); text-align: center; margin: 8px 0 0; }
.after { padding: 26px 0 46px; display: grid; gap: 0; }
.next { display: block; text-decoration: none; background: var(--bar); color: var(--on-bar); padding: 20px 20px 18px; margin: 0 -20px; }
.next small { display: block; font-family: "Cousine", monospace; font-size: 13px; opacity: .75; margin-bottom: 4px; }
.next strong { display: block; font-size: 27px; line-height: 1.15; font-weight: 800; }
.next:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.alt { display: block; text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 20px; font-weight: 700; }
.alt small { display: block; font-family: "Cousine", monospace; font-size: 13px; font-weight: 400; color: var(--soft); }
.pair { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); font-family: "Cousine", monospace; font-size: 15px; font-weight: 700; }
.pair a { text-decoration: none; padding: 16px 0; text-align: center; }
.pair a + a { border-right: 1px solid var(--rule); }
.soon { font-family: "Cousine", monospace; font-size: 14px; text-align: center; margin: 0 0 22px; color: var(--red); }
.toc-h { font-family: "Cousine", monospace; font-size: 13px; color: var(--soft); margin: 26px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 1px solid var(--hair); }
.toc a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; text-decoration: none; }
.toc a.on { font-weight: 800; }
.toc a.on::before { content: "◂ "; color: var(--red); }
.toc span:last-child { font-family: "Cousine", monospace; font-size: 13px; color: var(--soft); }

/* forms: a form you fill in, not an app */
.page { padding: 30px 0 54px; }
.page h1 { font-family: "Karantina", Impact, sans-serif; font-weight: 700; font-size: clamp(48px, 14vw, 76px); line-height: .92; margin: 0 0 14px; }
.page h2 { font-size: 23px; font-weight: 800; margin: 34px 0 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
label { display: block; font-family: "Cousine", monospace; font-size: 14px; font-weight: 700; margin: 24px 0 6px; }
label small { font-weight: 400; color: var(--soft); }
input[type=text], input[type=password], select, textarea {
  width: 100%; font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 20px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--rule); border-radius: 0; padding: 8px 0;
}
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: 6px 55%, 12px 55%; background-size: 6px 6px; background-repeat: no-repeat; }
textarea { min-height: 52vh; border: 1px solid var(--rule); padding: 14px; line-height: 1.75; resize: vertical; background: repeating-linear-gradient(transparent, transparent calc(1.75em - 1px), var(--hair) calc(1.75em - 1px), var(--hair) 1.75em); background-attachment: local; background-position: 0 14px; }
.choice { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); }
.choice label { margin: 0; padding: 12px 14px; font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 18px; font-weight: 700; cursor: pointer; }
.choice label + label { border-right: 1px solid var(--rule); }
.choice label:has(input:checked) { background: var(--bar); color: var(--on-bar); }
.choice label:has(input:checked) small { color: var(--on-bar); opacity: .75; }
.choice small { display: block; font-family: "Cousine", monospace; font-size: 12px; font-weight: 400; }
.choice input { accent-color: var(--red); }
.check { display: flex; gap: 10px; align-items: flex-start; font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 18px; font-weight: 400; }
.check input { margin-top: 7px; width: 18px; height: 18px; flex: none; accent-color: var(--red); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn { display: inline-block; border: 0; border-radius: 0; cursor: pointer; text-decoration: none; text-align: center; font-family: "Cousine", monospace; font-size: 16px; font-weight: 700; padding: 15px 22px; background: var(--bar); color: var(--on-bar); }
.btn.block { display: block; width: 100%; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--rule); }
.btn.danger { background: transparent; color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.btn.small { padding: 9px 14px; font-size: 14px; }
.box { border: 1px solid var(--rule); padding: 16px 18px; margin: 18px 0; background: var(--paper-2); }
.box > strong:first-child { font-family: "Cousine", monospace; font-size: 14px; }
.box ol, .box ul { margin: 8px 0 0; padding-right: 22px; }
.box li { margin: 5px 0; }
.err { color: var(--red); font-family: "Cousine", monospace; font-size: 14px; margin: 6px 0 0; }
.flash { border: 2px solid var(--ink); padding: 12px 16px; margin: 18px 0 0; font-family: "Cousine", monospace; font-size: 14px; }
.code { direction: ltr; text-align: center; font-family: "Cousine", monospace; font-size: clamp(20px, 6.2vw, 30px); font-weight: 700; padding: 22px 8px; border: 3px double var(--red); color: var(--red); user-select: all; margin: 18px 0; }
.status { display: inline-block; font-family: "Cousine", monospace; font-size: 12px; font-weight: 700; padding: 1px 8px 0; border: 2px solid var(--soft); color: var(--soft); }
.status.published { color: var(--ink); border-color: var(--ink); }
.status.rejected, .status.pending { color: var(--red); border-color: var(--red); }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.list li { border-bottom: 1px solid var(--hair); padding: 13px 0; display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.list li .muted { font-family: "Cousine", monospace; font-size: 13px; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); margin: 18px 0; }
.stats3 div { padding: 14px 8px; text-align: center; }
.stats3 div + div { border-right: 1px solid var(--rule); }
.stats3 b { display: block; font-family: "Karantina", Impact, sans-serif; font-size: 44px; line-height: 1; }
.stats3 span { font-family: "Cousine", monospace; font-size: 12px; color: var(--soft); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

footer.site { border-top: 3px solid var(--rule); padding: 18px 0 44px; font-family: "Cousine", monospace; font-size: 13px; }
footer.site .w { display: flex; gap: 18px; flex-wrap: wrap; }
footer.site a { text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site .fine { flex-basis: 100%; color: var(--soft); }

/* the one line that makes you tap */
.hook { margin: 0; padding: 0 14px 0 0; border-right: 4px solid var(--red); font-size: 21px; line-height: 1.45; font-style: normal; color: var(--ink); }
.feltn { font-family: "Cousine", monospace; font-size: 13px; color: var(--soft); margin-right: 14px; }
/* anonymous "this moved me" */
.felt { text-align: center; padding: 22px 0 0; scroll-margin-top: 40vh; }
.felt button { font-family: "Cousine", monospace; font-size: 16px; font-weight: 700; background: transparent; color: var(--red); border: 2px solid var(--red); border-radius: 0; padding: 12px 20px; cursor: pointer; transform: rotate(-1.5deg); }
.felt button:hover, .felt button:active { background: var(--red); color: var(--paper); }
.felt button span { font-weight: 400; }
.felt small { display: block; margin-top: 10px; font-family: "Cousine", monospace; font-size: 12px; color: var(--soft); }
.felt-done { font-family: "Cousine", monospace; font-size: 15px; font-weight: 700; color: var(--red); margin: 0; }

.resume { display: block; text-decoration: none; margin: 0 -20px; padding: 14px 20px 12px; background: var(--red); color: #fff; }
.resume small { display: block; font-family: "Cousine", monospace; font-size: 12px; opacity: .85; }
.resume strong { font-size: 20px; line-height: 1.2; }
.sorts { display: flex; gap: 18px; padding: 14px 0 0; font-family: "Cousine", monospace; font-size: 13px; }
.sorts a { text-decoration: none; color: var(--soft); padding-bottom: 2px; }
.sorts a.on { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--red); }

.errpage { padding-top: 46px; }
.errpage h1 { color: var(--red); }
.share { display: block; text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--rule); font-family: "Cousine", monospace; font-size: 15px; font-weight: 700; text-align: center; }
.share:hover { background: var(--bar); color: var(--on-bar); }

/* ---- wide screens: use the width ---- */
.w { max-width: 1180px; }
.read { max-width: 780px; margin: 0 auto; }
.page { max-width: 760px; margin: 0 auto; }
@media (min-width: 860px) {
  .w { padding: 0 40px; }
  .top .w { padding-top: 16px; padding-bottom: 16px; }
  .logo { font-size: 44px; }
  .top nav { font-size: 16px; gap: 28px; }
  .front { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; padding: 64px 0 34px; }
  .front { padding: 44px 0 30px; }
  .front h1 { font-size: clamp(88px, 9.6vw, 136px); margin: 0; white-space: nowrap; }
  .front h1 br:first-of-type { display: none; }
  .sheet { font-size: 17px; padding-bottom: 14px; white-space: nowrap; }
  .filters { margin: 0; padding: 0; font-size: 16px; }
  .filters a { padding: 13px 20px; }
  .sorts { font-size: 15px; padding-top: 18px; }
  .feed { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .feed .file { padding: 34px 0 30px; }
  .feed .file:first-child { grid-column: 1 / -1; }
  .feed .file:first-child h2 { font-size: 60px; line-height: 1.04; max-width: 28ch; }
  .feed .file:first-child .hook { font-size: 27px; max-width: 46ch; }
  .file h2 { font-size: 38px; }
  .hook { font-size: 22px; }
  .resume { margin: 0; padding: 16px 24px 14px; }
  .cover { padding: 56px 0 24px; }
  .cover h1 { font-size: 66px; }
  .prose { font-size: 23px; padding-top: 34px; }
  .next { margin: 0; padding: 26px 28px 24px; }
  .next strong { font-size: 34px; }
  .page h1 { font-size: 104px; }
  footer.site .w { gap: 28px; }
}
@media (min-width: 1240px) {
  .feed { grid-template-columns: 1fr 1fr 1fr; }
}

.rowlinks { display: flex; gap: 14px; flex-wrap: wrap; font-family: "Cousine", monospace; font-size: 13px; }
.list li > div:first-child { min-width: 0; }

.skip { position: absolute; right: 8px; top: -60px; background: var(--bar); color: var(--on-bar); padding: 10px 14px; font-family: "Cousine", monospace; font-size: 14px; z-index: 20; }
.skip:focus { top: 8px; }
.sheet .why { color: var(--red); font-weight: 700; margin-right: 6px; }
.manifesto p { font-size: 21px; line-height: 1.75; }
.manifesto .big { font-size: clamp(27px, 7vw, 38px); line-height: 1.25; font-weight: 800; margin: 30px 0 18px; }
.manifesto h1 { color: var(--ink); }

.journal li { font-size: 16px; padding: 9px 0; }
.journal .kv { font-family: "Cousine", monospace; font-size: 12px; color: var(--soft); margin-right: 8px; direction: ltr; unicode-bidi: isolate; }
.journal .lv-warning strong { color: var(--red); }
.journal .lv-error { border-right: 4px solid var(--red); padding-right: 10px; }
.journal .lv-error strong { color: var(--red); }

.goal-bar { height: 22px; border: 2px solid var(--rule); background: var(--paper-2); }
.goal-bar i { display: block; height: 100%; background: var(--red); min-width: 2px; }
.goal p { margin: 8px 0 0; font-family: "Cousine", monospace; font-size: 15px; }
.days { width: 100%; border-collapse: collapse; font-family: "Cousine", monospace; font-size: 13px; margin: 14px 0 6px; }
.days th { text-align: right; font-weight: 400; color: var(--soft); padding: 6px 4px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.days td { padding: 6px 4px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.days .spark { width: 30%; }
.days .spark i { display: block; height: 10px; background: var(--ink); min-width: 1px; }
@media (max-width: 560px) { .days th:nth-child(n+7), .days td:nth-child(n+7) { display: none; } .days .spark { width: 18%; } }

.flags { border: 2px solid var(--red); }
.flags > strong:first-child { color: var(--red); }
.flags mark { background: var(--red); color: #fff; padding: 0 6px; font-family: "Cousine", monospace; font-size: 14px; direction: ltr; unicode-bidi: isolate; display: inline-block; margin: 2px 0 2px 4px; }
.clean { border-style: dashed; }

/* confessions: the whole thing, right there */
.choice.three { grid-template-columns: 1fr 1fr 1fr; }
.prompt { font-size: clamp(24px, 6.4vw, 32px); line-height: 1.25; font-weight: 800; margin: 18px 0 22px; padding: 0 16px 0 0; border-right: 6px solid var(--red); }
.prompt .mono { font-weight: 400; }
.file.confession blockquote { margin: 0; font-size: clamp(22px, 5.6vw, 27px); line-height: 1.5; font-weight: 500; }
.file.confession blockquote p { margin: 0 0 .6em; color: var(--ink); font-size: inherit; line-height: inherit; }
.file.confession blockquote p:last-child { margin-bottom: 0; }
.file.confession .feltn { display: inline-block; margin: 12px 0 0; }
.prose.is-confession { font-size: clamp(25px, 6.6vw, 34px); line-height: 1.5; font-weight: 500; padding-top: 30px; }
.you { display: block; text-decoration: none; padding: 18px 0 16px; border-bottom: 1px solid var(--rule); border-top: 1px solid var(--rule); margin-top: 22px; }
.you small { display: block; font-family: "Cousine", monospace; font-size: 13px; color: var(--red); font-weight: 700; }
.you strong { font-size: 23px; line-height: 1.2; }
.you:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.sorts { flex-wrap: wrap; row-gap: 8px; }
.sorts .sep { color: var(--hair); }
@media (max-width: 560px) { .choice.three { grid-template-columns: 1fr; } .choice.three label + label { border-right: 0; border-top: 1px solid var(--rule); } }
@media (min-width: 860px) { .feed .file.confession:first-child blockquote { font-size: 38px; max-width: 34ch; } }

/* write: the page is the box you type in */
.page textarea { min-height: 34vh; margin-top: 14px; }
.hint { margin: 8px 0 0; line-height: 1.7; }
details.more { margin-top: 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0; }
details.more summary { font-family: "Cousine", monospace; font-size: 14px; font-weight: 700; }
details.more summary small { font-weight: 400; color: var(--soft); }
details.more summary::before { content: "+ "; color: var(--red); }
details.more[open] summary::before { content: "− "; }
/* front page: say it right here */
.quick { padding: 22px 0 24px; border-bottom: 3px double var(--rule); }
.quick > label:first-of-type { font-family: "Frank Ruhl Libre", Georgia, serif; font-size: clamp(24px, 6.4vw, 34px); line-height: 1.2; font-weight: 800; margin: 0 0 12px; }
.quick textarea { min-height: 132px; }
.quick-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-top: 12px; }
.quick .check { margin-top: 14px; font-size: 16px; }
@media (min-width: 860px) { .quick { max-width: 780px; } }

/* category pages */
.front.cat { display: block; padding: 30px 0 26px; }
.front.cat h1 { font-size: clamp(54px, 15vw, 132px); white-space: normal; margin: 6px 0 14px; }
.front.cat .mono a { text-decoration: none; border-bottom: 1px solid var(--soft); }
.cat-intro { font-size: clamp(20px, 5vw, 26px); line-height: 1.5; max-width: 34em; margin: 0 0 20px; }

/* support + reporting */
.support { border: 2px solid var(--rule); padding: 14px 16px; margin: 18px 0 0; font-size: 18px; line-height: 1.5; }
.support strong { display: block; }
.support .en, .lines .en { font-family: "Cousine", monospace; font-weight: 700; }
.reportlink { text-align: center; font-family: "Cousine", monospace; font-size: 12px; margin: 22px 0 0; }
.reportlink a { color: var(--soft); }
.reasons { border: 1px solid var(--rule); }
.reasons label { margin: 0; padding: 12px 14px; font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 18px; font-weight: 500; cursor: pointer; display: block; }
.reasons label + label { border-top: 1px solid var(--hair); }
.reasons label:has(input:checked) { background: var(--bar); color: var(--on-bar); }
.reasons input { accent-color: var(--red); margin-left: 8px; }
.page textarea.small { min-height: 120px; }
.lines li { align-items: center; }
h2.err { font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 23px; }
.reports li { border-right: 4px solid var(--red); padding-right: 12px; align-items: flex-start; }
.reports .err { margin: 2px 0; }

/* ---- wide desktop: the file cover beside the story ---- */
.dossier { display: none; }
@media (min-width: 1100px) {
  .desk { display: grid; grid-template-columns: 230px minmax(0, 780px); column-gap: 72px; justify-content: center; align-items: start; }
  .desk .read { margin: 0; }
  .dossier { display: block; position: sticky; top: 28px; margin-top: 56px; border: 2px solid var(--rule); padding: 18px 18px 16px; font-family: "Cousine", monospace; font-size: 13px; background: var(--paper-2); }
  .dossier p { margin: 0 0 14px; }
  .dossier .d-no { font-size: 13px; color: var(--soft); line-height: 1.1; }
  .dossier .d-no b { font-family: "Karantina", Impact, sans-serif; font-size: 84px; line-height: .9; color: var(--ink); font-weight: 700; }
  .dossier dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; border-top: 1px solid var(--rule); }
  .dossier dt, .dossier dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--hair); }
  .dossier dt { color: var(--soft); padding-left: 14px; }
  .dossier dd { font-weight: 700; }
  .dossier dd a { text-decoration: none; border-bottom: 1px solid var(--ink); }
  .dossier .d-toc { list-style: none; margin: 14px 0 0; padding: 0; }
  .dossier .d-toc a { display: block; padding: 5px 0; text-decoration: none; color: var(--soft); }
  .dossier .d-toc a.on { color: var(--ink); font-weight: 700; }
  .dossier .d-toc a.on::before { content: "◂ "; color: var(--red); }
  .dossier .d-foot { margin: 16px 0 0; color: var(--soft); font-size: 12px; line-height: 1.6; }
  .cover .no { display: none; }           /* the cover panel carries it on wide screens */
}
/* ---- wide desktop: the feed packs like newspaper columns ---- */
@media (min-width: 860px) {
  .feed { display: block; columns: 2; column-gap: 64px; }
  .feed .file { break-inside: avoid; }
  .feed .file:first-child { column-span: all; }
}
@media (min-width: 1240px) { .feed { columns: 3; } }

.searchbox { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; max-width: 780px; }
.searchbox input { font-size: 24px; }

/* the registry */
.ledger { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.ledger th { font-family: "Cousine", monospace; font-size: 12px; font-weight: 400; color: var(--soft); text-align: right; padding: 10px 8px 8px 8px; border-bottom: 3px double var(--rule); white-space: nowrap; }
.ledger td { padding: 13px 8px; border-bottom: 1px solid var(--hair); vertical-align: baseline; font-family: "Cousine", monospace; font-size: 13px; }
.ledger td.n { font-weight: 700; white-space: nowrap; }
.ledger td.t { font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 19px; font-weight: 700; line-height: 1.3; width: 60%; }
.ledger a { text-decoration: none; }
.ledger td.t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ledger tbody tr:hover { background: var(--paper-2); }
@media (max-width: 620px) { .ledger th:nth-child(4), .ledger td:nth-child(4) { display: none; } .ledger td.t { font-size: 17px; width: auto; } }

/* sharing kit (editor) */
.kit-item { border-top: 1px solid var(--rule); margin-top: 30px; }
.kit-imgs { display: grid; grid-template-columns: 1.78fr 1fr; gap: 14px; align-items: start; }
.kit-imgs a { text-decoration: none; display: block; border: 1px solid var(--rule); }
.kit-imgs img { display: block; width: 100%; height: auto; }
.kit-imgs span { display: block; background: var(--bar); color: var(--on-bar); font-family: "Cousine", monospace; font-size: 13px; font-weight: 700; text-align: center; padding: 8px; }
.kit textarea { font-family: "Cousine", monospace; font-size: 15px; line-height: 1.6; background: var(--paper-2); min-height: 0; }

/* how it works: three lines, like a form's instructions */
.how { list-style: none; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; counter-reset: how; font-size: 17px; }
.how li { counter-increment: how; padding-right: 34px; position: relative; }
.how li::before { content: counter(how, decimal-leading-zero); position: absolute; right: 0; top: 3px; font-family: "Cousine", monospace; font-size: 13px; color: var(--red); font-weight: 700; }
@media (min-width: 860px) { .how { grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: none; } }

/* end of a story: two big actions, then one quiet row */
.more3 { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); font-family: "Cousine", monospace; font-size: 13px; font-weight: 700; }
.more3 a { text-decoration: none; padding: 15px 6px; text-align: center; line-height: 1.35; }
.more3 a + a { border-right: 1px solid var(--rule); }
.more3 a:hover { background: var(--bar); color: var(--on-bar); }

/* nothing here yet — and that is said out loud */
.empty.first { text-align: right; padding: 46px 0 54px; border-bottom: 1px solid var(--rule); }
.empty.first h2 { font-family: "Karantina", Impact, sans-serif; font-weight: 700; font-size: clamp(48px, 13vw, 96px); line-height: .92; margin: 6px 0 16px; }
.empty.first p { font-size: 20px; max-width: 30em; margin: 0 0 18px; }

/* ---- small movements. None of them need JavaScript, all of them stop for reduced motion ---- */
/* reading progress: a red line that grows as the story is read */
.progress { position: fixed; top: 0; right: 0; left: 0; height: 4px; background: var(--red); transform-origin: right center; transform: scaleX(0); z-index: 30; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: mute-read linear both; animation-timeline: scroll(root block); }
}
@keyframes mute-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* the censor bars on the front page are drawn across, like a marker */
.front .x, .cover .x { animation: mute-strike .55s cubic-bezier(.2,.7,.2,1) both; transform-origin: right center; }
.front .sheet .x:nth-of-type(2) { animation-delay: .18s; }
@keyframes mute-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* the stamp comes down when a reader marks a story */
.felt-done { display: inline-block; border: 2px solid var(--red); padding: 10px 18px; transform: rotate(-2deg); animation: mute-stamp .38s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes mute-stamp { from { transform: rotate(-10deg) scale(1.9); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
.stamp { transition: transform .15s; }
.file:hover .stamp { transform: rotate(2deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
  .front .x, .cover .x, .felt-done { animation: none; }
  .stamp { transition: none; }
}
@media print {
  .top, footer.site, .after, .felt, .progress, .dossier, .skip, .reportlink { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { font-size: 13pt; line-height: 1.6; }
  .x { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.pick { margin: 0; display: inline-flex; }
.pick input { width: 20px; height: 20px; accent-color: var(--red); }
.list li.junk { opacity: .7; }
.list li.junk strong { text-decoration: line-through; text-decoration-color: var(--red); }

.guide h2 { font-size: 25px; }
.guide .box li { margin: 9px 0; line-height: 1.6; }
.guide .mono a { text-decoration: none; border-bottom: 1px solid var(--soft); }

/* questions and answers */
.faq { border-top: 3px double var(--rule); margin: 22px 0; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; gap: 14px; padding: 16px 0; font-size: 21px; font-weight: 800; line-height: 1.3; }
.faq summary::after { content: "+"; font-family: "Cousine", monospace; color: var(--red); font-size: 22px; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; font-size: 19px; line-height: 1.7; }

/* footer: three short ledger columns instead of a pile of links */
footer.site .w { display: block; }
.fcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; }
.fcols h2 { font-family: "Cousine", monospace; font-size: 12px; font-weight: 400; color: var(--soft); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.fcols a { display: block; padding: 4px 0; }
footer.site .fine { margin: 20px 0 0; color: var(--soft); }
@media (max-width: 420px) { .fcols { grid-template-columns: 1fr 1fr; } }

/* confessions landing: the explanation sits under the box, in two columns on wide screens */
.explain { padding: 8px 0 22px; border-bottom: 1px solid var(--rule); max-width: 780px; }
.explain h2 { font-size: 22px; font-weight: 800; margin: 22px 0 6px; }
.explain p { margin: 0; font-size: 18px; line-height: 1.7; }