:root {
  --ink: #1a1714;
  --paper: #f6f2ea;
  --pen: #c62828;
  --pen-green: #2e7d32;
  --line: 0.5;   /* reading line, as a fraction of the viewport */
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
/* clip, not hidden, and never on body: `overflow-x: hidden` computes
   `overflow-y` from visible to auto, which turns body into its own scroll
   container. The viewport then scrolls body's box while body scrolls its
   content, and you get a second scrollbar and a snapping scroll position. */
html { overflow-x: clip; }
/* The browser compensates for content growing above the reading position by
   adjusting scrollTop. This page grows content mid-viewport every frame, and
   progress is derived from position - so its correction feeds our input and
   the two fight. We place the text ourselves; opt out. */
html, body, main, p { overflow-anchor: none; }
body {
  margin: 0;
  /* containing block for #pen-layer, which covers header and main alike */
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font: 400 20px/1.75 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;    /* svh fallback: without it the title page collapses */
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  /*gap: 1.2em;*/
  max-width: 34em; margin: 0 auto; padding: 0 24px;
}
header * { text-align: center; }
h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.1;
  font-weight: 400; letter-spacing: -0.01em;
}
/* h1 is flex-column for stacking variants; an edited h1 is one inline flow */
h1[data-edit] { display: block; }
/* second byline, typed in under the first on the interactive page */
.edited-by { display: block; }
body header p { text-indent: 0; margin: 0; color: #554d45; }
.cue {
  margin-top: 2em; font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: #9c9086;
}

main {
  max-width: 34em;
  margin: 0 auto;
  position: relative;
}

main {
  h1 {
    margin: 3rem 0;
    &#appendix {
      span { display: block; font-size: 2rem; text-align: center; }
    }
  }
  h2 {
    line-height: 1.25;
  }
}

main#interactive, main#book {
  /* set like a book: paragraphs run flush, first line indented, vertical space
     only at a scene break */
  p { margin: 0; text-indent: 1.6em; }
  /* an indent marks a break from the paragraph above, and there isn't one at
     the start of the story or after a scene break */
  > p:first-of-type,
  .scene-break + p { text-indent: 0; }
}

hr {
  width: 400px;
  border: 1px solid #999;
  margin: 40px auto;
}

p.hanging {
  text-indent: 2.5rem hanging;
  overflow-wrap: break-word;
  a { word-break: break-all; }
}

a {
  text-decoration: none;
  color: royalblue;
}

.chronology {
  display: flex;
  margin-bottom: 10px;
  .date { width: 100px; flex-shrink: 0; font-weight: bold; }
  .desc { flex-shrink: 1; }
}

/* The SVG pen layer sits over the text and ignores pointer events. It clips:
   overflowing strokes would extend the page's scrollable area, and then
   shrink it again when the geometry is rebuilt. */
#pen-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Each added word is its own atomic box that grows from zero width, so the
   surrounding text is physically pushed aside. The space that follows a word
   lives inside its box (white-space: pre) - otherwise a collapsed addition
   still leaves a gap behind. clip-path rather than overflow:hidden: overflow
   moves an inline-block's baseline to its bottom edge and the word would sit
   off the line. */
.aw {
  display: inline-block;
  white-space: pre;
  /* an inline-block is a block container, so it inherits the paragraph's
     first-line indent and applies it to its own first line */
  text-indent: 0;
  width: calc(var(--w, 0px) * var(--p, 0));
  clip-path: inset(-0.35em 0 -0.35em 0);
  color: var(--pen-green);
  /* typescript against the serif body. Sized down so the taller monospace
     metrics can't push the line box open and reflow the paragraph. */
  font-family: "Trebuchet MS";
  font-size: 0.9em;
}
/* header edits are static: an addition claims its final footprint from the
   start and the clip alone reveals it, so the header never reflows */
[data-edit] .aw {
  width: var(--w, 0px);
  clip-path: inset(-0.35em calc((1 - var(--p, 0)) * 100%) -0.35em 0);
}
.measuring .aw { width: auto; }

.smallcaps { font-variant: small-caps; }
em { font-style: italic; }

/* a scene break in the original */
.scene-break { height: 1.6em; text-indent: 0; }

#error {
  max-width: 34em; margin: 4em auto; padding: 0 24px; color: var(--pen);
}
#error code {
  display: block; margin-top: .6em; padding: .6em .8em;
  background: rgba(0,0,0,.05); border-radius: 4px;
  font: 400 14px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink);
}

/* tuning panel, only built when the page is loaded with ?tune */
#panel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding: 8px 16px; background: var(--paper);
  border-bottom: 1px solid rgba(0,0,0,.14);
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .04em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  user-select: none; -webkit-user-select: none;
}
#panel label { display: flex; align-items: center; gap: 6px; }
#panel input[type=range] { width: 84px; }
#panel output { min-width: 30px; color: #8a7f70; text-align: right; }
/* the reading line, shown while tuning */
#guide {
  position: fixed; left: 0; right: 0;
  top: calc(var(--line) * 100vh);
  top: calc(var(--line) * 100svh);
  border-top: 1px dashed rgba(198,40,40,.5); z-index: 9; pointer-events: none;
}

#top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  /*background: rgba(246, 242, 234, 0.92);*/
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  /*font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace;*/
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

#top-nav .nav-slot {
  display: flex;
  align-items: center;
  min-width: 0;
}

#top-nav .nav-prev {
  justify-self: start;
}

#top-nav .nav-next {
  justify-self: end;
}

#top-nav a {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
}

#top-nav a:hover {
  background: rgba(0, 0, 0, 0.05);
}

#top-nav .nav-menu-btn {
  background: transparent;
  border: none;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
}

#top-nav .nav-menu-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

#top-nav .nav-menu {
  position: relative;
  list-style: none;
}

#top-nav .nav-menu summary::-webkit-details-marker {
  display: none;
}

#top-nav .nav-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-radius: 14px;
  padding: 0;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  min-width: 300px;
  max-width: 380px;
  overflow: hidden;
  z-index: 101;
}

#top-nav .nav-popover nav {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 8px;
}

#top-nav .nav-popover a {
  text-align: center;
  display: block;
  align-self: stretch;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  font: 400 16px/1.3 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

#top-nav .nav-popover a:hover {
  background: rgba(0, 0, 0, 0.05);
}


/* witness pdf buttons */
.witness-button {
  display: block;
  border: 1px solid #E7E5DD;
  background: #FFFDF5;
  border-radius: 4px;
  margin-top: 20px;
  padding: 18px 26px;
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  color: var(--ink);
  &:hover {
    border-color: #D6D3CC;
  }
}


/* collation demo */
.collation-demo {
  font-size: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1.18;
  span.a { background: #B2E8B5; }
  span.at { background: #B2E8B555; }
  span.r { background: #DF9394; }
  span.rt { background: #DF7C7E33; }
}


/* annotations: numbered ref in the text, pin in the margin, popover on click */
.ann-ref {
  cursor: pointer; color: royalblue; font-weight: 500; padding: 0 1px;
}
.ann-ref:hover { text-decoration: underline; }

.ann-pin {
  position: absolute; width: 15px; height: 15px;
  transform: translate(-50%, -50%);
  border: 1.5px solid royalblue; border-radius: 50%;
  background: var(--paper); cursor: pointer; z-index: 5;
}
.ann-pin::before { /* tail, pointing left at the line */
  content: ''; position: absolute; left: -3.5px; top: 50%;
  width: 5px; height: 5px; background: inherit;
  border-left: 1.5px solid royalblue; border-top: 1.5px solid royalblue;
  transform: translateY(-50%) rotate(-45deg);
}
.ann-pin::after { /* pin head */
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 4px; height: 4px; border-radius: 50%; background: royalblue;
}
@media (max-width: 840px) { .ann-pin { display: none; } }

.ann-pop {
  position: absolute; z-index: 60;
  max-width: 320px; padding: 14px 16px 12px;
  background: #fff; border: 1px solid rgba(0,0,0,.14); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  font-size: 16px; line-height: 1.5;
}
.ann-pop::before { /* tail pointing at the ref */
  content: ''; position: absolute; top: -6px; left: var(--tail-x, 24px);
  width: 10px; height: 10px; background: #fff;
  border-left: 1px solid rgba(0,0,0,.14); border-top: 1px solid rgba(0,0,0,.14);
  transform: translateX(-50%) rotate(45deg);
}
.ann-n {
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: royalblue;
}
.ann-x {
  position: absolute; top: 2px; right: 6px;
  border: 0; background: none; padding: 2px 6px;
  font-size: 15px; color: #8a7f70; cursor: pointer;
}
.ann-ctx { background: rgba(65,105,225,.16); border-radius: 2px; }
.ann-inner { margin-top: 10px; }