/* The furniture shared by every page that is drawn like the poster: the map's
   topic view, the 34 topic pages and the 145 subtopic pages.
   ---------------------------------------------------------------------------
   It lives in one file because those three have to look identical -- a topic
   opened from the map and the same topic after a refresh are the same design,
   and keeping two copies of these rules is how they drift. Twice now a rule
   that only map.css carried (.mline, then the aside and the passage) has left
   a real page unstyled while the overlay looked perfect.

   Loaded by map.html, topic.html and subtopic.html. The colours come from
   --cell/--ink/--fill/--stroke, set per page or per topic. */

/* `.poster` is the scope these rules hang off, and both the real pages and the
   topic view carry it -- the view injects those pages whole, so their own
   rules have to reach inside it. Only the page background is tied to the body
   class, because in the view that job belongs to the flood.

   A topic or subtopic page is drawn the way the topic view draws it: the
   cell's colour behind, the writing on a plate in the topic's own tint with
   the same heavy rule. Refreshing a topic used to land you on an off-white
   page that looked like a different site entirely. */
.page-poster {
  background: var(--cell, var(--paper));
  color: var(--ink, #12140f);
}
.poster .crumbs { color: inherit; opacity: .72; }
.poster .prose a { color: inherit; }
.poster .wl { border-bottom: 1px dotted currentColor; }
.poster .back a,
.poster .pager span { color: inherit; opacity: .7; }
/* Inside the writing panel now, so it takes the panel's ink rather than the
   page's, and its rule is a divider within the panel. */
.poster .prose > .pager {
  color: #12140f;
  border-top-color: color-mix(in srgb, #12140f 22%, transparent);
  margin-bottom: 0;
}
.poster .prose > .pager a { color: inherit; }

/* The panel the writing sits on. Every plate fill is pale, so black text works
   on all 34 whatever the cell behind is doing -- no ink flipping needed. */
.panel,
.poster .topic-main > .prose {
  background: var(--fill, #fff);
  border: var(--stroke, 8px) solid #000;
  color: #12140f;
  padding: 2rem 1.75rem 2.5rem;
}
.panel .prose { margin: 0; }
.panel-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 18rem);
  max-height: 12rem;
  margin: 0 auto 1.75rem;
}
.unwritten { opacity: .55; font-style: italic; }

.topic-cols {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--aside);
  gap: 2rem;
  align-items: start;
}
/* A subtopic has no rail of its own -- its siblings live on the topic page --
   but the column is still there, empty, so its writing is centred exactly as a
   topic's is. */
.topic-cols--subtopic > .topic-main { grid-column: 2; }

.strail {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  /* Held in place while the writing scrolls past. See topic-view.css. */
  position: sticky;
  top: 1.5rem;
  align-self: start;
  /* Both rails are given the taller one's height and spread their labels down
     it, so the two columns balance instead of each packing to the top and
     ending wherever it runs out. build.py works the height out, because the
     stylesheet's own caps are what decide it. */
}
/* A rail taller than the window cannot be pinned -- sticky would hold it at
   the top and the foot of it could never be scrolled to. build.py measures the
   rail and marks those, and they travel with the writing instead. */
.strail--tall { position: static; }

.stitem {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
  max-width: 100%;
}

.stimg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 8.5rem;
}

/* The label is drawn at its poster size and shrunk by a transform, so it is
   the same element the map draws and the topic view can fly one into the
   other. The box around it carries the drawn size, so the column still flows. */
.stlabel-box {
  position: relative;
  display: block;
  max-width: 100%;
}
.stlabel {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transform-origin: 0 0;
  transform: scale(var(--k, .4));
  transition: transform .14s ease;
}
/* The pop the map labels have, which is why these are live text and not part
   of the artwork. */
.stlabel:hover,
.stlabel:focus-visible {
  transform: scale(calc(var(--k, .4) * 1.12));
}
.stlabel:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

/* A drawing the whole topic shares gets more room than a per-label one, since
   it is carrying the topic on its own. */
.stitem--figure .stimg { max-height: 20rem; }

/* The subtopic page's heading is the poster's own label, at the same natural
   size as the rail's and scaled up rather than re-set, so it can be animated
   from one to the other. */
.stlabel-box--title { margin: 0 0 1.5rem; }
.stlabel--title {
  font-weight: 400;
  font-size: inherit;
}

/* And the topic page's heading is the map's own plate label, at the size the
   topic view brings it to rest at -- centred, as the overlay centres it, with
   the way back to its left. The spacer on the right is what keeps the title
   centred on the page rather than on the space the arrow left over. */
.poster .sheet-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
}
/* The arrow and the spacer are the same size, and the spacer is why: with
   only the arrow in a centred row, the row centres and the title is pushed
   right by half the arrow plus its gap -- 29px, and visibly out of line with
   the writing below it. An empty box of equal width on the other side puts
   the title back on the page's centre line. */
.backbtn,
.backbtn-spacer {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
}
.backbtn {
  display: grid;
  place-items: center;
  color: inherit;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
  transition: background .12s ease;
}
.backbtn:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.backbtn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}
.mlabel-box {
  position: relative;
  display: block;
  flex: none;
}
/* On the map a label lifts when you point at it, because there it is a control
   you are about to click. As a page heading it is not one, so the pop is
   dropped -- the .mlabel class comes with it, and this is the same element. */
.mlabel--title:hover,
.mlabel--title:focus-visible {
  transform: scale(var(--k, 1));
  filter: none;
  z-index: auto;
}
.mlabel--title {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-weight: 400;
  font-size: inherit;
  transform-origin: 0 0;
  transform: scale(var(--k, 1));
}

/* ---- the right-hand rail: video at the top, graph at the foot ---- */

/* The video, and the graph directly under it. Held in place, so both stay
   where they were put as the writing goes by. They were pushed to the top and
   bottom of the window before, which left a lot of nothing between them. */
.aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 1.5rem;
  align-self: start;
}

/* Drawn as plates rather than grey boxes, so an empty slot reads as
   finished-but-waiting instead of unstyled. */
.slot {
  background: var(--fill, #fff);
  border: var(--stroke, 8px) solid #000;
  color: #12140f;
  padding: .9rem 1rem 1.1rem;
}
.slot-title {
  margin: 0 0 .6rem;
  font-family: Danny, ui-sans-serif, sans-serif;
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1.1;
}
.slot-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 0 .6rem;
  opacity: .5;
}
.slot-body p {
  margin: 0;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.slot-body svg { width: 44px; height: 44px; }
.slot--video .slot-body { padding-bottom: 1.1rem; }
.slot--graph .slot-body { padding-bottom: 1.6rem; }

/* ---- Example Passage ---- */

.passage {
  margin: 2rem 0 0;
  background: var(--fill, #fff);
  border: var(--stroke, 8px) solid #000;
  color: #12140f;
}
.passage > summary {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.35rem;
  font-family: Danny, ui-sans-serif, sans-serif;
  font-size: 2rem;
  line-height: 1.1;
  cursor: pointer;
  /* The marker is drawn below, on the left, so the native one is dropped --
     ::-webkit-details-marker is still needed for Safari. */
  list-style: none;
}
.passage > summary::-webkit-details-marker { display: none; }
.passage > summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: .52em solid currentColor;
  border-top: .34em solid transparent;
  border-bottom: .34em solid transparent;
  transition: transform .16s ease;
}
.passage[open] > summary::before { transform: rotate(90deg); }
.passage > summary:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -3px;
}
.passage-body {
  padding: 0 1.25rem 1.25rem;
  opacity: .55;
  font-style: italic;
}
.passage-body p { margin: 0; }

/* Two rails and a column of prose need more width than the prose alone. */
.page-doc .sheet { max-width: var(--wide); }

@media (max-width: 66rem) {
  /* No room to flank anything: the rail and the aside become bands under the
     writing, and nothing is held in place. */
  .topic-cols,
  .topic-cols--subtopic { display: block; }
  .strail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.2rem 1.6rem;
    margin-top: 2rem;
  }
  .aside {
    position: static;
    height: auto;
    margin-top: 2rem;
  }
}

.plate--wide { flex-basis: 100%; font-size: clamp(2.2rem, 8vw, 3.6rem); }
.plate--bare {
  background: none;
  border: 0;
  padding: 0;
  text-transform: none;
}

.section-full {
  margin: -1.2rem 0 2.2rem;
  font-size: 1.05rem;
  color: #6b6355;
}

.topic-index { margin: 3rem 0 1rem; }
.topic-index h2 {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b6355;
  margin: 0 0 1.2rem;
}
.topic-group { margin-bottom: 1.6rem; }
.topic-group h3 {
  margin: 0 0 .5rem;
  font-size: 1rem;
}
.topic-group ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topic-group li a {
  display: block;
  padding: .32rem .7rem;
  font-size: .92rem;
  text-decoration: none;
  background: var(--fill, #fff);
  border: 2px solid #000;
}
.topic-group li a:hover { transform: translateY(-1px); }
.section-line { margin: 0; color: #6b6355; font-size: .95rem; }
.section-line span { color: #9c9384; }

.watch { margin: 2rem 0; font-size: 1rem; }
.watch a { color: #1c4fd8; }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 3rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #ddd6c8;
}
.pager a {
  flex: 1;
  text-decoration: none;
  font-weight: 600;
}
.pager-next { text-align: right; }
.pager span {
  display: block;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6b6355;
  font-weight: 400;
}

.back { margin-top: 2rem; }
.back a { color: #6b6355; }