/* Series and reading pleasure: progress rail, chips, pull quotes, plates, next cards, finale.
   Loaded by every sub-page after site.css. Grayscale only; every fill uses var(--ink). */

/* part numeral in the header, printed in dots */
.page-head.part::after {
  content: attr(data-n);
  position: absolute; right: 2rem; bottom: -2.2rem;
  font: italic 400 clamp(9rem, 26vw, 22rem)/1 var(--serif);
  color: var(--gray-4);
  pointer-events: none; z-index: 0;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .page-head.part::after {
    color: transparent;
    background: radial-gradient(var(--ink) 1.3px, transparent 1.6px) 0 0 / 6px 6px;
    -webkit-background-clip: text; background-clip: text;
    opacity: 0.5;
  }
  h1 em.tone {
    color: transparent;
    background: radial-gradient(var(--ink) 0.9px, transparent 1.1px) 0 0 / 3px 3px;
    -webkit-background-clip: text; background-clip: text;
  }
}
.page-head canvas.head-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, black 100%); mask-image: linear-gradient(100deg, transparent 30%, black 100%); }
.page-head.has-canvas::before { display: none; }

/* progress rail: eight dots, filled as parts are read */
.rail { display: flex; list-style: none; max-width: 22rem; margin: 1.6rem 0 0; padding: 0; }
.rail li { flex: 1; position: relative; height: 14px; }
.rail li:last-child { flex: 0 0 14px; }
.rail li::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px dotted var(--gray-3); }
.rail a { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--gray-2); background: var(--paper); transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), background 0.4s; }
.rail a:hover { transform: scale(1.35); }
.rail .done a { background: var(--ink); border-color: var(--ink); }
.rail .here a { transform: scale(1.5); border-color: var(--ink);
  background: radial-gradient(var(--ink) 1px, transparent 1.3px) 0 0 / 4px 4px;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink); }
.rail .here.done a { background: var(--ink); }
.rail .just a { animation: pop 0.5s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0% { transform: scale(1.5); } 50% { transform: scale(2.1); } 100% { transform: scale(1.5); } }

/* format chips under the lede */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 1.4rem; font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-2); }
.chips a { color: var(--gray-1); text-decoration: none; border-bottom: 1px dotted var(--gray-3); padding-bottom: 2px; transition: color 0.25s, border-color 0.25s; }
.chips a:hover { color: var(--ink); border-color: var(--ink); }

/* field notes as pull quotes */
.pull { margin: 3.4rem 0 3.4rem -3rem; padding-left: 2.4rem; max-width: 36ch; position: relative; }
.pull::before { content: ""; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem; width: 10px;
  background: radial-gradient(var(--ink) 1.2px, transparent 1.5px) 0 0 / 5px 5px; }
.pull .k { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray-2); display: block; margin-bottom: 0.7rem; }
.pull p { font: italic 400 clamp(1.45rem, 2.8vw, 2.05rem)/1.25 var(--serif); color: var(--ink); max-width: none; margin: 0; }
@media (max-width: 900px) { .pull { margin-left: 0; } }

/* section dividers: a halftone band before every h2 after the first */
.prose > h2:not(:first-child)::before { content: ""; display: block; height: 24px; margin: 0 0 2rem;
  background: radial-gradient(var(--ink) 1.5px, transparent 1.8px) 0 0 / 9px 9px; opacity: 0.3;
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%, transparent); mask: linear-gradient(90deg, transparent, #000 60%, transparent); }

/* figures numbered per part, and the still as a matted end plate */
main.prose { counter-reset: fig; }
main.prose[style*="--p"] .media-slot.filled:not(.plate) figcaption::before {
  counter-increment: fig; content: "Fig. " var(--p) "." counter(fig) "  ";
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-2); }
.media-slot.plate { background: var(--paper-deep); padding: clamp(1rem, 4vw, 2.6rem); margin: 4rem 0 3rem;
  border: 1px solid var(--gray-3); outline: 1px dotted var(--gray-3); outline-offset: 6px; }
.media-slot.plate img { border: 0; box-shadow: 0 1px 0 var(--gray-3), 0 18px 40px -28px rgba(0,0,0,.45); }
.media-slot.plate figcaption { text-align: center; margin: 1.2rem auto 0; font-family: var(--mono); font-size: 0.7rem;
  line-height: 1.8; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray-2); max-width: none; }
.media-slot.plate figcaption a { color: var(--gray-1); text-decoration: none; border-bottom: 1px dotted var(--gray-3); }
.media-slot.plate figcaption a:hover { color: var(--ink); }

/* closing line and the completion caption */
.where { font: italic 400 1.15rem/1.5 var(--serif); color: var(--gray-1); max-width: 60ch; margin: 2.6rem 0 0; }
.read-note { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-2);
  margin-top: 1rem; min-height: 1.2em; opacity: 0; transition: opacity 0.6s; }
.read-note.in { opacity: 1; }

/* next-part card in the pager */
.pager { align-items: center; }
.pager .next-card { display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: center;
  border: 1px dotted var(--gray-3); padding: 0.7rem; max-width: 30rem; width: 100%; text-transform: none; letter-spacing: 0;
  position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.4s cubic-bezier(.16,1,.3,1); }
.pager .next-card img { width: 96px; height: 96px; display: block; border: 1px dotted var(--gray-3); background: var(--paper-deep); transition: transform 0.4s cubic-bezier(.16,1,.3,1); }
.pager .next-card .k { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-2); display: block; margin-bottom: 0.3rem; }
.pager .next-card b { font: 400 1.2rem/1.25 var(--serif); color: var(--ink); display: block; }
.pager .next-card:hover { border-color: var(--ink); transform: translateX(4px); }
.pager .next-card:hover img { transform: scale(1.05); }
@media (max-width: 720px) { .pager .next-card { max-width: none; } }

/* contents strip on the series index */
.contents { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.6rem 1.4rem; list-style: none; margin: 0 0 3rem; padding: 0; }
.contents li { max-width: none; margin: 0; }
.contents a { text-decoration: none; color: var(--ink); display: block; position: relative; }
.contents img { width: 100%; aspect-ratio: 1; display: block; border: 1px dotted var(--gray-3); background: var(--paper-deep);
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s; }
.contents a:hover img { transform: translateY(-4px); box-shadow: 0 14px 28px -18px rgba(0,0,0,.5); }
.contents .n { font: italic 400 1.9rem/1 var(--serif); color: var(--gray-3); display: block; margin: 0.7rem 0 0.2rem; transition: color 0.3s; }
.contents a:hover .n, .contents li.done .n { color: var(--ink); }
.contents li.done .n::after { content: " ·"; }
.contents b { font: 400 1.05rem/1.3 var(--serif); display: block; }
.contents small { display: block; color: var(--gray-1); font-size: 0.84rem; line-height: 1.45; margin-top: 0.3rem; }
.continue { display: inline-block; margin-top: 1.4rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; border: 1px dotted var(--gray-2); padding: 0.5rem 0.9rem; transition: border-color 0.3s; }
.continue:hover { border-color: var(--ink); }
.continue:empty { display: none; }

/* finale on part 8 */
.finale { position: relative; background: var(--ink); color: var(--paper); margin: 4rem 0 3rem; padding: 3.5rem clamp(1.4rem, 5vw, 4rem); overflow: hidden; }
.finale::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--paper) 1px, transparent 1.3px); background-size: 14px 14px; opacity: 0.12;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, black 100%); mask-image: linear-gradient(100deg, transparent 30%, black 100%); }
.finale > * { position: relative; }
.finale .fin { font: italic 400 clamp(4rem, 12vw, 8rem)/1 var(--serif); margin: 0 0 1rem; color: var(--paper); }
.finale p { color: var(--gray-4); max-width: 46ch; font-size: 1.1rem; }
.finale img { display: block; width: 100%; max-width: 720px; margin: 2rem 0 1.6rem; border: 1px dotted var(--gray-2); background: var(--paper); }
.finale .rail { max-width: 18rem; }
.finale .rail li::before { border-color: var(--gray-2); }
.finale .rail a { background: var(--ink); border-color: var(--gray-3); }
.finale .rail .done a { background: var(--paper); border-color: var(--paper); }
.finale .again { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); text-decoration: none; border-bottom: 1px dotted var(--gray-2); }
.finale .again:hover { border-color: var(--paper); }
.finale .reward { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px dotted var(--gray-2); }
.finale .reward:empty { display: none; }
.finale .reward a { color: var(--paper); }
:root[data-theme="dark"] .finale { background: var(--paper-deep); }

/* cards on the builds hub: a dot spotlight that follows the cursor */
.build-grid a.build { position: relative; }
.build-grid a.build::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(var(--ink) 1px, transparent 1.3px) 0 0 / 7px 7px;
  -webkit-mask: radial-gradient(160px at var(--mx, 50%) var(--my, 50%), #000, transparent 70%);
  mask: radial-gradient(160px at var(--mx, 50%) var(--my, 50%), #000, transparent 70%); transition: opacity 0.3s; }
.build-grid a.build:hover::after { opacity: 0.14; }
.build-grid a.build:hover .num { color: var(--ink); }
.build-grid .num { transition: color 0.3s; }
.build-grid a.build:active { transform: translateY(1px); }

/* buttons inside prose are not links to underline */
.prose a.btn { text-decoration: none; }