@import url("fonts.css");

:root {
  --ink: #e6e1d8;
  --ink-soft: #b3ab9f;
  --ink-faint: #857d72;
  --paper: #171614;
  --paper-raised: #1e1d1a;
  --rule: #33302b;
  --rule-strong: #4a453d;
  --accent: #c9b085;
  --accent-second: #c98e85;
  --accent-third: #8fb9a8;
  --accent-fourth: #a3a2c4;
  --accent-fifth: #85a8c9;
  --accent-sixth: #aeb985;
  --accent-seventh: #c48fb4;
  --accent-eighth: #b9a06a;
  --accent-ninth: #cf9f7a;
  --accent-tenth: #8fc4c4;
  --accent-eleventh: #9ec27f;
  --accent-twelfth: #b79ad6;
  --accent-thirteenth: #6fa8a0;
  --accent-fourteenth: #a8b6cf;
  --accent-fifteenth: #c9a3a0;
  --accent-sixteenth: #cbb37a;
  --accent-seventeenth: #7fa9bf;
  --accent-eighteenth: #969fd0;
  --accent-nineteenth: #6f93bf;
  --accent-twentieth: #a8927f;
  --accent-twenty-first: #9f8fa8;
  --accent-twenty-second: #bfae55;
  --accent-twenty-third: #86c46a;
  --mark: #3a3120;
  --call-rule: #7f8a94;

  --serif: "Source Serif 4", "Noto Sans JP", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Noto Sans JP", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Noto Sans JP", ui-monospace, monospace;

  --who-col: 5rem;
  --gap: 1.5rem;
  --measure: 42rem;
  --rhythm: 2.12rem;
  --step: clamp(1rem, 0.95rem + 0.32vw, 1.15rem);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: 3rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--step) / 1.6 var(--serif);
  font-variant-numeric: oldstyle-nums;
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: calc(var(--who-col) + var(--gap) + var(--measure) + 5rem);
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2rem) 3.5rem;
}

/* ---------- masthead ---------- */

.masthead {
  border-block-end: 1px solid var(--rule-strong);
  padding-block-end: 1.25rem;
  margin-block-end: 1.25rem;
}

.masthead h1 {
  font: 600 clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem) / 1.15 var(--serif);
  margin-block: 0 0.35rem;
  letter-spacing: -0.01em;
}

.masthead p {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.masthead .dateline {
  color: var(--ink-faint);
  margin-block-start: 0.2rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* ---------- contents ---------- */

.contents {
  margin-block-end: 3rem;
  padding: 1rem 1.25rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.contents h2 {
  margin-block: 0 0.6rem;
  font: 600 0.72rem/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

.contents ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.9;
}

.contents li {
  break-inside: avoid;
  counter-increment: toc;
}

.contents li::before {
  content: counter(toc, decimal-leading-zero) "  ";
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.78em;
}

.contents ol {
  counter-reset: toc;
}

@media (max-width: 34rem) {
.contents ol {
  columns: 1;
}
}

/* ---------- section separators ---------- */

.sep {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: var(--rhythm);
  font: 600 0.72rem/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

.sep .rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule-strong);
}

.sep .perma {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.90rem;
  color: var(--rule-strong);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.sep:hover .perma,
.sep .perma:focus-visible,
.sep:target .perma {
  opacity: 1;
  color: var(--accent);
}

section:target > .sep {
  color: var(--accent);
}

section:target > .sep .rule {
  background: var(--accent);
}

section:first-of-type .sep {
  margin-block-start: 0;
}

/* ---------- the exchange grid ---------- */

.exchange {
  display: grid;
  grid-template-columns: var(--who-col) minmax(0, 1fr);
  column-gap: var(--gap);
  row-gap: 1.35rem;
  align-items: baseline;
}

.turn {
  display: contents;
}

.who {
  grid-column: 1;
  margin: 0;
  font: 500 0.74rem/1.7 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-faint);
  text-align: right;
  text-wrap: balance;
}

.turn-sarena .who {
  color: var(--accent);
}

.turn-vlad .who {
  color: var(--accent-second);
}

.turn-marliene .who {
  color: var(--accent-third);
}

.turn-akima .who {
  color: var(--accent-fourth);
}

.said {
  grid-column: 2;
  max-width: var(--measure);
}

.said > p {
  margin-block: 0 0.7rem;
  text-wrap: pretty;
}

.said > :first-child,
.scene > :first-child,
.doc > :first-child,
.screen > :first-child,
.thread > :first-child {
  margin-block-start: 0;
}

.said > :last-child,
.scene > :last-child,
.doc > :last-child,
.screen > :last-child,
.thread > :last-child {
  margin-block-end: 0;
}

.said em {
  color: var(--ink-soft);
}

/* stage directions, one paragraph or several */

.scene {
  margin-block: var(--rhythm);
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--rule-strong);
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- documents read aloud ---------- */

.doc {
  margin-block: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--rule-strong);
  border-radius: 2px;
  font-size: 0.94em;
}

.doc p {
  margin-block: 0 0.65rem;
}

.doc ul {
  margin-block: 0 0.65rem;
  padding-inline-start: 1.1rem;
}

.doc li {
  margin-block-end: 0.5rem;
}

.doc .head {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block-end: 0.65rem;
  margin-block-end: 0.85rem;
  border-block-end: 1px solid var(--rule);
}

.doc h4 {
  margin-block: 1.1rem 0.2rem;
  font: 600 0.76rem/1.4 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.doc-translation {
  border-inline-start-style: dashed;
}

.doc .speaker {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.doc pre {
  margin-block: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow-x: auto;
  font: 0.82rem/1.7 var(--mono);
  color: var(--ink-soft);
}

/* ---------- tables inside documents ---------- */

.table-wrap {
  margin-block: 0.9rem;
  overflow-x: auto;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font: 0.8rem/1.6 var(--mono);
  color: var(--ink-soft);
}

.doc caption {
  caption-side: top;
  margin-block-end: 0.55rem;
  font: 500 0.72rem/1.5 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: start;
}

.doc th,
.doc td {
  padding: 0.42rem 0.7rem 0.42rem 0;
  border-block-end: 1px solid var(--rule);
  text-align: start;
  vertical-align: top;
}

.doc thead th {
  font: 600 0.72rem/1.5 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border-block-end: 1px solid var(--rule-strong);
  white-space: nowrap;
}

.doc tbody th {
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}

.doc tbody tr:last-child th,
.doc tbody tr:last-child td {
  border-block-end: none;
}

/* ---------- screens and interfaces ---------- */

.screen {
  margin-block: 1rem;
  padding: 1rem 1.15rem;
  background: #101110;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  font: 0.86rem/1.8 var(--mono);
  color: var(--ink-soft);
}

.screen p {
  margin-block: 0 0.6rem;
}

.screen .head {
  font: 600 0.76rem/1.55 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-fourth);
  padding-block-end: 0.6rem;
  margin-block-end: 0.85rem;
  border-block-end: 1px solid var(--rule);
}

.screen h4 {
  margin-block: 1.05rem 0.35rem;
  font: 600 0.74rem/1.45 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.screen .field {
  color: var(--ink-faint);
}

.screen .uuid {
  color: var(--ink);
  letter-spacing: 0.05em;
}

.screen .refused {
  color: var(--accent-second);
  font-weight: 600;
}

.screen .opts,
.doc .opts {
  margin-block: 0.45rem 0.85rem;
  padding: 0;
  list-style: none;
}

.screen .opts li,
.doc .opts li {
  margin-block: 0 0.34rem;
  padding: 0.3rem 0.6rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.opts:last-child {
  margin-bottom: 0;
}

.screen .opts.grid,
.doc .opts.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.34rem;
}

.screen .opts.grid li,
.screen .opts.row li,
.doc .opts.grid li,
.doc .opts.row li {
  margin: 0;
}

.screen .opts.row,
.doc .opts.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.screen .opts li.on,
.doc .opts li.on {
  border-color: var(--accent-fourth);
  color: var(--ink);
}

.screen .opts .lab,
.doc .opts .lab {
  color: var(--ink);
}

.screen .dur {
  color: var(--ink-faint);
}

.screen .note {
  margin-block-start: 0.9rem;
  padding-block-start: 0.7rem;
  border-block-start: 1px solid var(--rule);
  color: var(--ink-faint);
}

.screen[lang="ja"] {
  line-height: 2;
}

.screen-overlay {
  border-style: dashed;
}

.turn-gate .who {
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* ---------- speakers introduced after part 4 ---------- */

.turn-train .who,
.turn-bus .who,
.turn-driver .who {
  color: var(--accent-fifth);
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: 0.04em;
}

.turn-mother .who {
  color: var(--accent-sixth);
}

.turn-guide .who {
  color: var(--accent-seventh);
}

.part-7 .turn-gate .who {
  color: var(--accent-eighth);
}

/* ---------- speakers introduced in part 8 ---------- */

.turn-ilvena .who {
  color: var(--accent-ninth);
}

.turn-engineer .who {
  color: var(--accent-tenth);
}

.turn-survey .who {
  color: var(--accent-thirteenth);
}

.turn-crew .who {
  color: var(--accent-eleventh);
}

.turn-water .who {
  color: var(--accent-twelfth);
}

.turn-resident .who {
  color: var(--ink-soft);
}

/* ---------- speaker introduced in part 9 ---------- */

.turn-teller .who {
  color: var(--accent-fourteenth);
}

/* ---------- speaker introduced in part 10 ---------- */

.turn-costin .who {
  color: var(--accent-fifteenth);
}

/* ---------- speaker introduced in part 11.2 ---------- */

.turn-nozaki .who {
  color: var(--accent-sixteenth);
}

/* ---------- speaker introduced in part 13.2 ---------- */

.turn-satomi .who {
  color: var(--accent-seventeenth);
}

/* ---------- speaker introduced in part 15 ---------- */

.turn-linda .who {
  color: var(--accent-eighteenth);
}

/* the man from her section, part 18.2 */
.turn-colleague .who {
  color: var(--accent-nineteenth);
}

/* the man at the long-term care counter, part 19.2 */
.turn-clerk .who {
  color: var(--accent-twentieth);
}

/* the woman at the stand, part 21 */
.turn-katia .who {
  color: var(--accent-twenty-second);
}

/* her son, part 22 */
.turn-emil .who {
  color: var(--accent-twenty-third);
}

/* the foreign bulletin on the external channels, part 20 */
.turn-television .who {
  color: var(--accent-twenty-first);
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: 0.04em;
}

.turn-control .who,
.turn-megaphone .who {
  color: var(--accent-fifth);
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: 0.04em;
}

.gloss {
  color: var(--ink-faint);
}

/* a gloss that covers several paragraphs of speech, printed under them */

.gloss-block {
  margin-block: 0.55rem 0.55rem;
  color: var(--ink-faint);
}

.gloss-block:last-child {
  margin-block: 0.55rem 0rem;
}

.gloss-block p {
  margin-block: 0 0.45rem;
}

.gloss-block p:last-child {
  margin-block-end: 0;
}

.said .name {
  margin: 0.9rem 0;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--rule-strong);
  font-size: 2.1rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
}

/* paragraphs inside a stage direction */

.scene p {
  margin-block: 0 0.8rem;
}

/* ---------- telephone and video calls, introduced in part 2 ---------- */

.exchange.call {
  margin-block: 1.35rem;
  padding: 1.2rem 1.3rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--call-rule);
  border-radius: 2px;
}

.exchange.call + .exchange.call {
  margin-block-start: 1rem;
}

.exchange.call .said {
  max-width: none;
}

@media (max-width: 34rem) {
  .exchange.call {
    padding: 0.95rem 1rem;
  }
}

/* ---------- the messaging thread ---------- */

.thread {
  margin-block: 1rem;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--rule-strong);
  border-radius: 2px;
}

.thread .thread-head {
  font: 600 0.78rem/1.55 var(--sans);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-block: 0 0.75rem;
  padding-block-end: 0.65rem;
  border-block-end: 1px solid var(--rule);
}

/* the language toggles are ordinary checkboxes, checked in the markup,
   so every line is shown when no stylesheet and no script runs */
.thread .vis {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.thread-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-block-end: 1rem;
  font: 0.74rem/1.6 var(--sans);
}

.thread-controls .lab {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-inline-end: 0.25rem;
}

.thread-controls label {
  cursor: pointer;
  padding: 0.16rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

.thread-controls label::before {
  content: "\2715\00a0";
  font-family: var(--mono);
  font-size: 0.8em;
}

#t7-ja:checked ~ .thread-controls label[for="t7-ja"],
#t7-rj:checked ~ .thread-controls label[for="t7-rj"],
#t7-en:checked ~ .thread-controls label[for="t7-en"],
#t8-ja:checked ~ .thread-controls label[for="t8-ja"],
#t8-rj:checked ~ .thread-controls label[for="t8-rj"],
#t8-en:checked ~ .thread-controls label[for="t8-en"],
#t9a-ja:checked ~ .thread-controls label[for="t9a-ja"],
#t9a-rj:checked ~ .thread-controls label[for="t9a-rj"],
#t9a-en:checked ~ .thread-controls label[for="t9a-en"],
#t9b-ja:checked ~ .thread-controls label[for="t9b-ja"],
#t9b-rj:checked ~ .thread-controls label[for="t9b-rj"],
#t9b-en:checked ~ .thread-controls label[for="t9b-en"],
#t9c-ja:checked ~ .thread-controls label[for="t9c-ja"],
#t9c-rj:checked ~ .thread-controls label[for="t9c-rj"],
#t9c-en:checked ~ .thread-controls label[for="t9c-en"],
#t9d-ja:checked ~ .thread-controls label[for="t9d-ja"],
#t9d-rj:checked ~ .thread-controls label[for="t9d-rj"],
#t9d-en:checked ~ .thread-controls label[for="t9d-en"] {
  color: var(--ink);
  border-color: var(--accent-fourth);
}

#t7-ja:checked ~ .thread-controls label[for="t7-ja"]::before,
#t7-rj:checked ~ .thread-controls label[for="t7-rj"]::before,
#t7-en:checked ~ .thread-controls label[for="t7-en"]::before,
#t8-ja:checked ~ .thread-controls label[for="t8-ja"]::before,
#t8-rj:checked ~ .thread-controls label[for="t8-rj"]::before,
#t8-en:checked ~ .thread-controls label[for="t8-en"]::before,
#t9a-ja:checked ~ .thread-controls label[for="t9a-ja"]::before,
#t9a-rj:checked ~ .thread-controls label[for="t9a-rj"]::before,
#t9a-en:checked ~ .thread-controls label[for="t9a-en"]::before,
#t9b-ja:checked ~ .thread-controls label[for="t9b-ja"]::before,
#t9b-rj:checked ~ .thread-controls label[for="t9b-rj"]::before,
#t9b-en:checked ~ .thread-controls label[for="t9b-en"]::before,
#t9c-ja:checked ~ .thread-controls label[for="t9c-ja"]::before,
#t9c-rj:checked ~ .thread-controls label[for="t9c-rj"]::before,
#t9c-en:checked ~ .thread-controls label[for="t9c-en"]::before,
#t9d-ja:checked ~ .thread-controls label[for="t9d-ja"]::before,
#t9d-rj:checked ~ .thread-controls label[for="t9d-rj"]::before,
#t9d-en:checked ~ .thread-controls label[for="t9d-en"]::before {
  content: "\2713\00a0";
  color: var(--accent-fourth);
}

.thread .vis:focus-visible ~ .thread-controls label[for="t7-ja"],
.thread .vis:focus-visible ~ .thread-controls label[for="t7-rj"],
.thread .vis:focus-visible ~ .thread-controls label[for="t7-en"],
.thread .vis:focus-visible ~ .thread-controls label[for="t8-ja"],
.thread .vis:focus-visible ~ .thread-controls label[for="t8-rj"],
.thread .vis:focus-visible ~ .thread-controls label[for="t8-en"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9a-ja"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9a-rj"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9a-en"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9b-ja"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9b-rj"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9b-en"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9c-ja"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9c-rj"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9c-en"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9d-ja"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9d-rj"],
.thread .vis:focus-visible ~ .thread-controls label[for="t9d-en"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#t7-ja:not(:checked) ~ .msgs .ln-ja,
#t7-rj:not(:checked) ~ .msgs .ln-rj,
#t7-en:not(:checked) ~ .msgs .ln-en,
#t8-ja:not(:checked) ~ .msgs .ln-ja,
#t8-rj:not(:checked) ~ .msgs .ln-rj,
#t8-en:not(:checked) ~ .msgs .ln-en,
#t9a-ja:not(:checked) ~ .msgs .ln-ja,
#t9a-rj:not(:checked) ~ .msgs .ln-rj,
#t9a-en:not(:checked) ~ .msgs .ln-en,
#t9b-ja:not(:checked) ~ .msgs .ln-ja,
#t9b-rj:not(:checked) ~ .msgs .ln-rj,
#t9b-en:not(:checked) ~ .msgs .ln-en,
#t9c-ja:not(:checked) ~ .msgs .ln-ja,
#t9c-rj:not(:checked) ~ .msgs .ln-rj,
#t9c-en:not(:checked) ~ .msgs .ln-en,
#t9d-ja:not(:checked) ~ .msgs .ln-ja,
#t9d-rj:not(:checked) ~ .msgs .ln-rj,
#t9d-en:not(:checked) ~ .msgs .ln-en {
  display: none;
}

.msgs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.msgs .msg {
  max-width: 36rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  font-size: 0.94em;
  text-wrap: pretty;
}

.msgs .msg-in {
  align-self: flex-start;
  border-start-start-radius: 2px;
}

.msgs .msg-out {
  align-self: flex-end;
  border-start-end-radius: 2px;
  border-color: var(--rule-strong);
}

.msgs .meta {
  margin-block: 0 0.4rem;
  font: 500 0.68rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.msgs .msg-out .meta {
  text-align: end;
  color: var(--accent-fourth);
}

.msgs .ln {
  margin-block: 0 0.3rem;
}

.msgs .ln:last-child {
  margin-block-end: 0;
}

.msgs .ln-ja {
  line-height: 1.9;
}

.msgs .ln-rj {
  font-family: var(--mono);
  font-size: 0.84em;
  color: var(--ink-soft);
}

.msgs .ln-en {
  color: var(--ink-soft);
}

.msgs .attach {
  margin-block: 0 0.45rem;
  padding: 0.42rem 0.6rem;
  border: 1px dashed var(--rule-strong);
  border-radius: 6px;
  font: 500 0.7rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* part 17 introduced the photographs sent inside a thread */
.msgs .attach::before {
  content: "attachment\00a0";
  color: var(--ink-faint);
}

.thread-plain .thread-head {
  margin-block-end: 1rem;
}

.msgs .msg-doc {
  max-width: none;
  align-self: stretch;
}

.frame {
  margin-block-start: 0.7rem;
  padding: 0.9rem 1rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--rule-strong);
  border-radius: 2px;
  font-size: 0.96em;
}

.frame .frame-head {
  font: 500 0.68rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-faint);
  margin-block: 0 0.6rem;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--rule);
}

.frame h4 {
  font: 600 1rem/1.5 var(--sans);
  margin-block: 0 0.6rem;
}

.frame p {
  margin-block: 0 0.65rem;
}

.frame ul {
  margin-block: 0 0.65rem;
  padding-inline-start: 1.1rem;
}

.frame li {
  margin-block-end: 0.5rem;
}

.frame > :last-child {
  margin-block-end: 0;
}

.msgs .ln-url {
  font-family: var(--mono);
  font-size: 0.84em;
  word-break: break-all;
}

@media (max-width: 34rem) {
.msgs .msg {
  max-width: none;
}
}

/* ---------- pagination ---------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 3rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
  font: 0.82rem/1.7 var(--sans);
}

.pagination .part {
  margin: 0;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}

.pagination a {
  text-decoration: none;
  border-block-end: 1px solid var(--rule-strong);
  padding-block-end: 0.1rem;
}

.pagination a:hover {
  border-block-end-color: var(--accent);
}

/* ---------- parts ---------- */

.parts {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
}

.parts li {
  border-block-start: 1px solid var(--rule);
  padding-block: 1.15rem;
}

.parts li:last-child {
  border-block-end: 1px solid var(--rule);
}

.parts .no {
  display: block;
  font: 500 0.72rem/1.7 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.parts a {
  font: 600 1.12rem/1.4 var(--serif);
}

.parts p {
  margin-block: 0.3rem 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* grouped parts: one title over the halves that belong to it */

.parts .group {
  display: block;
  font: 600 1.12rem/1.4 var(--serif);
  color: var(--ink);
}

.parts .halves {
  margin-block: 0.5rem 0;
  padding: 0;
  list-style: none;
}

.parts .halves li {
  border-block: 0;
  padding-block: 0.16rem;
}

.parts .halves .no {
  display: inline;
  margin-inline-end: 0.55rem;
}

.parts .halves a {
  font: 500 0.98rem/1.5 var(--serif);
}

/* ---------- the letter, one sheet at a time, part 19 ---------- */

/* the sheet selector is three radio buttons with the first one checked in
   the markup, so all three sheets are shown when no stylesheet loads */

.letter {
  margin-block: 1rem;
  padding: 1.15rem 1.3rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--rule-strong);
  border-radius: 2px;
}

.letter .pg {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.letter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-block-end: 1.1rem;
  font: 0.74rem/1.6 var(--sans);
}

.letter-controls .lab {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-inline-end: 0.25rem;
}

.letter-controls label {
  cursor: pointer;
  padding: 0.16rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

#lt1:checked ~ .letter-controls label[for="lt1"],
#lt2:checked ~ .letter-controls label[for="lt2"],
#lt3:checked ~ .letter-controls label[for="lt3"] {
  color: var(--ink);
  border-color: var(--accent-fourth);
}

.letter .pg:focus-visible ~ .letter-controls label[for="lt1"],
.letter .pg:focus-visible ~ .letter-controls label[for="lt2"],
.letter .pg:focus-visible ~ .letter-controls label[for="lt3"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sheets .sheet {
  display: none;
}

#lt1:checked ~ .sheets .sheet-1,
#lt2:checked ~ .sheets .sheet-2,
#lt3:checked ~ .sheets .sheet-3 {
  display: block;
}

.sheet-head {
  margin-block: 0 0.9rem;
  font: 600 0.72rem/1.4 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.sheet p {
  margin-block: 0 0.75rem;
  line-height: 1.95;
  text-wrap: pretty;
}

.sheet p:last-child {
  margin-block-end: 0;
}

.small-line {
  font-size: 0.95rem;
  color: var(--ink-faint);
}

@media print {
  .letter-controls {
    display: none;
  }

  .sheets .sheet {
    display: block;
  }
}

/* ---------- a voice message with the transcript folded away, part 19.1 ---------- */

/* the toggle is an ordinary checkbox left unchecked in the markup, so the
   transcript is printed in full when no stylesheet loads */

.msg .tr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.voice {
  font: 0.78rem/1.6 var(--sans);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.tr-toggle {
  display: inline-block;
  margin-block-start: 0.45rem;
  cursor: pointer;
  padding: 0.14rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-faint);
  font: 0.72rem/1.6 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

.tr-toggle::before {
  content: "\2715\00a0";
  font-family: var(--mono);
  font-size: 0.8em;
}

.msg .tr:checked ~ .tr-toggle {
  color: var(--ink);
  border-color: var(--accent-fourth);
}

.msg .tr:checked ~ .tr-toggle::before {
  content: "\2713\00a0";
  color: var(--accent-fourth);
}

.msg .tr:focus-visible ~ .tr-toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.transcript {
  display: none;
  margin-block-start: 0.7rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 2px solid var(--rule);
}

.msg .tr:checked ~ .transcript {
  display: block;
}

.transcript p {
  margin-block: 0 0.6rem;
}

.transcript p:last-child {
  margin-block-end: 0;
}

@media print {
  .tr-toggle {
    display: none;
  }

  .transcript {
    display: block;
  }
}

/* ---------- footer ---------- */

.colophon {
  margin-block-start: 1.25rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
  font: 0.78rem/1.7 var(--sans);
  color: var(--ink-faint);
}

.colophon p {
  margin-block: 0 0.3rem;
}

a {
  color: var(--accent);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
}

.skip:focus {
  position: static;
  display: inline-block;
  margin-block-end: 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}

/* ---------- narrow screens: name above the reply ---------- */

@media (max-width: 52rem) {
  .exchange {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.2rem;
  }

  .who,
  .said,
  .scene {
    grid-column: 1;
  }

  .who {
    text-align: left;
    margin-block-start: 1rem;
  }

  .turn:first-child .who {
    margin-block-start: 0;
  }
}

/* ---------- print ---------- */

@media print {
  :root {
    --paper: #fff;
    --paper-raised: #fff;
    --ink: #000;
    --ink-soft: #333;
    --ink-faint: #555;
  }

  .contents,
  .sep .perma,
  .skip,
.thread-controls {
  display: none;
}

  .msgs .ln-ja,
  .msgs .ln-rj,
  .msgs .ln-en {
    display: block;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .turn,
  .doc,
  .msgs .msg {
    break-inside: avoid;
  }
}