:root {
  color-scheme: dark light;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  background: #101214;
  color: #e7e4dc;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3rem);
  font-size: 0.95rem;
  line-height: 1.55;
}

main { min-width: 0; }

.lintel {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lintel-line {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.lintel-line--who { margin-bottom: 1.75rem; }

/* The pledge. Day 25. This page has no colour in it and is not gaining any
   for this: a promise kept and a promise broken are told apart by what the
   sentence says, and a reader who cannot see colour must not be the last to
   know. The broken state is louder only in weight — it comes up to full
   opacity while every other lintel line sits at 0.7, and takes a rule above
   it, so it reads as an interruption rather than as more of the frontage. */
/* The pledge takes over the frontage's bottom margin when it is showing.
   Without this it inherits the 0.35rem the other lintel lines carry and sits
   flush against the scene — a sentence about where the tower is *going*,
   crowded up under a drawing of it standing still. Caught in the first live
   preview, not in the suite, which asks whether the words are there and has
   nothing to say about where they sit. */
.lintel-line--pledge { margin: 0 0 1.75rem; }

.lintel-line--broken {
  opacity: 1;
  font-weight: 600;
  padding-top: 0.6rem;
  border-top: 1px solid currentColor;
}

pre.scene {
  margin: 0 0 1.5rem;
  overflow-x: auto; /* wide scenes scroll rather than break the page */
  font: inherit;
  /* scale so a ~42-column scene fits the narrowest contract width
     (375px); grows back to full size on desktop */
  font-size: clamp(9px, 2.6vw, 1rem);
  line-height: 1; /* box-drawing glyphs connect vertically only at 1.0 */
}

nav,
footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

footer {
  justify-content: space-between;
  margin-top: 1.5rem;
  opacity: 0.7;
  font-size: 0.8rem;
}

a { color: inherit; }
a:hover,
a:focus-visible { text-decoration-thickness: 2px; }

@media (prefers-color-scheme: light) {
  :root {
    background: #f4f1e9;
    color: #202326;
  }
}

/* The front door's own name in its nav — a span and not a link, because you
   cannot walk to the page you are standing on. Dimmed so the row still reads
   as a row of ways out, with the name of where you are at the head of it. */
.nav-here {
  opacity: 0.55;
}