@import url("fonts.css");

/* The complementary section is set light, on its own palette */

:root {
  --paper: #f3f1ec;
  --paper-raised: #eae7e0;
  --ink: #191817;
  --ink-soft: #4d4a44;
  --ink-faint: #837e75;
  --rule: #d7d2c8;
  --rule-strong: #b3ada0;
  --vlad: #9c3a2f;
  --mathilda: #2f5f7a;
  --mark: #e3ddcd;

  --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: 5.5rem;
  --gap: 1.75rem;
  --measure: 40rem;
  --step: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
}

*,
*::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.62 var(--serif);
  -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;
}

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

a:focus-visible {
  outline: 2px solid var(--vlad);
  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;
}

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

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

.masthead .tag {
  margin: 0 0 0.5rem;
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vlad);
}

.masthead h1 {
  font: 400 clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem) / 1.12 var(--serif);
  margin-block: 0 0.45rem;
}

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

.masthead .dateline {
  margin-block-start: 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

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

.contents {
  margin-block-end: 2.5rem;
  padding-block: 0.9rem;
  border-block: 1px solid var(--rule);
}

.contents h2 {
  margin-block: 0 0.55rem;
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

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

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

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

.contents a {
  color: var(--ink);
  text-decoration: none;
  border-block-end: 1px solid var(--rule-strong);
}

.contents a:hover {
  border-block-end-color: var(--vlad);
}

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

/* ---------- subchapter headings ---------- */

.sep {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-block: 1.5rem 1.5rem;
  font: 400 1.15rem/1.3 var(--serif);
  color: var(--ink);
}

.sep .num {
  flex: 0 0 auto;
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

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

.sep .perma {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.88rem;
  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 {
  opacity: 1;
  color: var(--vlad);
}

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

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

/* ---------- the exchange: name column, reply column ---------- */

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

.turn {
  display: contents;
}

.who {
  grid-column: 1;
  margin: 0;
  font: 600 0.7rem/1.9 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-faint);
}

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

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

.said {
  grid-column: 2;
}

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

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

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

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

/* ---------- stage directions standing on their own ---------- */

.scene {
  margin-block: 1.6rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper-raised);
  border-inline-start: 3px solid var(--rule-strong);
  color: var(--ink-soft);
  font-style: italic;
}

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

/* ---------- the parts list on the section index ---------- */

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

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

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

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

.parts a {
  font: 400 1.2rem/1.4 var(--serif);
  color: var(--ink);
  text-decoration: none;
  border-block-end: 1px solid var(--rule-strong);
}

.parts a:hover {
  border-block-end-color: var(--vlad);
}

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

.parts .pending {
  opacity: 0.72;
}

.parts .pending .title {
  font: 400 1.2rem/1.4 var(--serif);
  color: var(--ink-faint);
}

.parts .flag {
  display: inline-block;
  margin-block-start: 0.5rem;
  padding: 0.18rem 0.65rem;
  border: 1px dashed var(--rule-strong);
  font: 500 0.66rem/1.7 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- a note on the index ---------- */

.note {
  margin-block: 1.5rem 0;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--rule);
  font: 0.92rem/1.7 var(--serif);
  color: var(--ink-soft);
}

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

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

/* ---------- 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;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.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(--vlad);
}

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

/* ---------- footer: links only ---------- */

.links {
  margin-block-start: 1.25rem;
  padding-block-start: 1.1rem;
  border-block-start: 3px double var(--rule-strong);
  font: 0.78rem/1.9 var(--sans);
  color: var(--ink-faint);
}

.links p {
  margin: 0;
}

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

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

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

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

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

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

@media print {
  :root {
    --paper: #fff;
    --paper-raised: #fff;
  }

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

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

  .turn {
    break-inside: avoid;
  }
}