/* Navigation system: part dividers, journey map, timeline and speculation strip. Same five-column master (30.4 mm modules, 4.5 mm gutters, 170 × 255 mm live area). Colour roles: black = the present and evidence; red = the speculation only. */ .book-content { --sys-red: #e10600; --sys-ink: #171715; --sys-grey: #6b6b64; --sys-rule: #bcbcb5; --sys-dark: #0a0a0a; --sys-m1: 30.4mm; --sys-m2: 65.3mm; --sys-gap: 4.5mm; } /* Pages ------------------------------------------------------------------ */ .sys-page { page: system; break-before: page; break-inside: avoid; } .sys-left { break-before: left; } .sys-right { break-before: right; } .sys-opener-left, .sys-intro-left { page: stage; break-before: left; } .sys-opener-right, .sys-intro-right { page: stage; break-before: right; } @page system { margin: 20mm 18mm 22mm 22mm; } @page system:left { margin-left: 18mm; margin-right: 22mm; } @page system:right { margin-left: 22mm; margin-right: 18mm; } @page stage { margin: 0; background: #0a0a0a; @bottom-left { content: none; } @bottom-center { content: none; } @bottom-right { content: none; } @left-middle { content: none; } @right-middle { content: none; } @left-bottom { content: none; } @right-bottom { content: none; } } .book-root .pagedjs_stage_page, .book-root .pagedjs_stage_page .pagedjs_pagebox, .book-root .pagedjs_stage_page .pagedjs_area { background: #0a0a0a !important; } .book-root .book-content :is(.sys-page, .sys-opener-left, .sys-opener-right, .sys-intro-left, .sys-intro-right) :is(p, ul, dl, dd, dt) { margin: 0; text-indent: 0; } .book-root .book-content :is(.sys-page, .sys-opener-left, .sys-opener-right, .sys-intro-left, .sys-intro-right) :is(h2, h3) { font-style: normal; text-transform: none; letter-spacing: 0; margin: 0; padding: 0; border: 0; } .book-root .book-content :is(.sys-page, .sys-opener-left, .sys-opener-right) ol { list-style: none; margin: 0; padding: 0; } .book-root .book-content .sys-page { position: relative; height: 255mm; overflow: hidden; color: var(--sys-ink); font: 400 9pt/11.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-icon { width: 4.2mm; height: 4.2mm; flex: none; color: currentColor; vertical-align: -1mm; } /* Shared heading ----------------------------------------------------------- */ .book-root .book-content .sys-heading { height: 52mm; } .book-root .book-content .sys-kicker { display: flex; justify-content: space-between; gap: var(--sys-gap); margin: 0 0 5mm; color: var(--sys-red); font: 400 9pt/12pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-heading h2 { font: 400 27pt/30pt "Book Barlow", Arial, sans-serif; letter-spacing: -.015em; max-width: 150mm; color: var(--sys-ink); } .book-root .book-content .sys-lead { margin-top: 3mm; max-width: 135mm; font: 400 10.5pt/14pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-source { position: absolute; left: 0; right: 0; bottom: 0; color: var(--sys-grey); font: 400 8pt/10.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-tag { display: inline-block; margin: 0 1.5mm 0 0; padding: 0 1.2mm; border: .25mm solid currentColor; font: 600 6.5pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; vertical-align: .3mm; } .book-root .book-content .sys-tag-spec { color: var(--sys-red); } .book-root .book-content .sys-tag-rec { color: var(--sys-ink); } /* World opener: a statement over a black-background photograph, then staggered blocks and a split word. */ .book-root .book-content .sys-opener-left, .book-root .book-content .sys-opener-right { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; color: #fff; background: #0a0a0a; } /* The right page continues the left page's ground: one flat black across the gutter, no book-fold shading. */ .book-root .book-content .sys-opener-right { background: #0a0a0a; } .book-root .book-content :is(.sys-opener-left, .sys-opener-right) :is(p, h2, h3, article) { margin: 0; padding: 0; text-indent: 0; text-transform: none; letter-spacing: 0; font-style: normal; } .book-root .book-content .sys-opener-photo { position: absolute; left: 0; bottom: 0; width: 176mm; height: 235mm; object-fit: cover; object-position: 50% 60%; } .book-root .book-content .sys-opener-fade { position: absolute; left: 0; bottom: 0; width: 176mm; height: 235mm; background: linear-gradient(180deg, #0a0a0a 0%, rgba(10,10,10,0) 38%), linear-gradient(270deg, #0a0a0a 0%, rgba(10,10,10,0) 26%); } .book-root .book-content .sys-opener-statement { position: absolute; left: 22mm; top: 24mm; width: 150mm; color: #ebebe8; font: 400 27pt/34pt "Book Literata", Georgia, serif; letter-spacing: -.01em; } .book-root .book-content .sys-opener-credit { position: absolute; left: 22mm; bottom: 8mm; max-width: 110mm; color: #8a8a84; font: 400 6.3pt/8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-opener-vertical { position: absolute; left: 10mm; bottom: 12mm; transform: rotate(-90deg); transform-origin: left bottom; margin-left: 4mm !important; white-space: nowrap; } .book-root .book-content .sys-opener-side { color: #fff; font: 600 7pt/10pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-opener-side-right { position: absolute; right: 12mm; top: 18mm; writing-mode: vertical-rl; } .book-root .book-content .sys-opener-block { position: absolute; width: 58mm; } .book-root .book-content .sys-opener-block h3 { color: #fff; font: 600 11pt/14pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-opener-block i { display: block; width: 6mm; height: .5mm; margin: 1.6mm 0 3mm; background: var(--sys-red); } .book-root .book-content .sys-opener-block p { color: #d6d6d1; font: 400 8pt/11.2pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-opener-block-1 { left: 22mm; top: 30mm; } .book-root .book-content .sys-opener-block-2 { left: 100mm; top: 76mm; } .book-root .book-content .sys-opener-block-3 { left: 22mm; top: 128mm; } .book-root .book-content .sys-opener-block-4 { left: 100mm; top: 176mm; } .book-root .book-content .sys-opener-block-4 p { color: var(--sys-accent, #ec3a30); font: 400 11.5pt/15pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-opener-word { position: absolute; right: 18mm; bottom: 22mm; display: flex; flex-direction: column; align-items: flex-start; color: #e6e6e3; font: 600 52pt/.88 "Book Barlow", Arial, sans-serif; text-transform: uppercase; } .book-root .book-content .sys-opener-word > span { display: flex; align-items: center; white-space: nowrap; } .book-root .book-content .sys-opener-word .sys-bar-long { width: 22mm; margin-left: 5mm; } .book-root .book-content .sys-opener-word > span:last-child { margin-left: 10mm; } /* Mini journey: the six worlds, with the current part lit. */ .book-root .book-content .sys-mini { margin-top: auto; padding-top: 6mm; } .book-root .book-content .sys-mini ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 2mm; position: relative; } .book-root .book-content .sys-mini ol::before { content: ""; position: absolute; left: 0; right: 0; top: 1.2mm; border-top: .25mm solid #4a4a46; } .book-root .book-content .sys-mini li { position: relative; display: flex; flex-direction: column; gap: 1mm; color: #77776f; font: 400 8pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-mini-dot { width: 2.4mm; height: 2.4mm; border-radius: 50%; background: #4a4a46; } .book-root .book-content .sys-mini li.is-current { color: #fff; } .book-root .book-content .sys-mini li.is-current .sys-mini-dot { background: var(--sys-red); } .book-root .book-content .sys-mini-number { margin-top: 1mm; color: inherit; font-size: 7pt; } .book-root .book-content .sys-mini li.is-current .sys-mini-number { color: var(--sys-red); } /* Speculation strip: one module per step across the five-column master. */ .book-root .book-pilot .sys-strip { margin-top: 5mm; } .book-root .book-pilot .sys-strip-world { display: none; } .book-root .book-pilot .sys-strip ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--sys-gap); list-style: none; margin: 0; padding: 0; } .book-root .book-pilot .sys-strip li { padding-top: 2mm; border-top: .3mm solid var(--sys-ink); } .book-root .book-pilot .sys-step-label { display: flex; align-items: center; gap: 1.5mm; margin: 0 0 1.5mm; color: var(--sys-red); font: 600 7.5pt/10pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .book-root .book-pilot .sys-step-label .sys-icon { width: 4.2mm; height: 4.2mm; color: var(--sys-ink); } .book-root .book-pilot .sys-step-text { font: 400 8.5pt/11pt "Book Barlow", Arial, sans-serif; } .book-root .book-pilot .sys-strip-debate .sys-step-text { color: var(--sys-red); font: 400 9pt/11.5pt "Book Literata", Georgia, serif; } .book-root .book-pilot .essay-dark .sys-strip li { border-top-color: #fff; } .book-root .book-pilot .essay-dark .sys-step-label .sys-icon { color: #fff; } /* Journey map: six rows read across the gutter. ------------------------------- */ .book-root .book-content .sys-journey { display: grid; grid-template-rows: 52mm 13mm repeat(5, 36mm) 1fr; } .book-root .book-content .sys-journey-head, .book-root .book-content .sys-journey-row { display: grid; column-gap: var(--sys-gap); } .book-root .book-content .sys-journey-left :is(.sys-journey-head, .sys-journey-row) { grid-template-columns: var(--sys-m1) var(--sys-m2) var(--sys-m2); } .book-root .book-content .sys-journey-right :is(.sys-journey-head, .sys-journey-row) { grid-template-columns: var(--sys-m1) var(--sys-m2) var(--sys-m2); } .book-root .book-content .sys-journey-right .sys-journey-row > p:first-child { font-size: 8.5pt; line-height: 11pt; } .book-root .book-content .sys-journey-head { grid-row: 2; align-items: end; padding-bottom: 2mm; border-bottom: .3mm solid var(--sys-ink); } .book-root .book-content .sys-journey-head p { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.5mm; } .book-root .book-content .sys-journey-head b { color: var(--sys-red); font: 600 8pt/10pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .book-root .book-content .sys-journey-head span { flex-basis: 100%; color: var(--sys-grey); font-size: 8pt; line-height: 10pt; } .book-root .book-content .sys-journey-rows { display: contents; } .book-root .book-content .sys-journey-row { padding: 2.5mm 0; border-bottom: .2mm solid var(--sys-rule); font: 400 9pt/11.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-journey-world { position: relative; } .book-root .book-content .sys-journey-number { color: var(--sys-red); font-size: 8pt; } .book-root .book-content .sys-journey-world h3 { margin: .5mm 0 1.5mm; font: 400 12.5pt/14pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-journey-world .sys-icon { width: 7mm; height: 7mm; } .book-root .book-content .sys-journey-world small { display: block; margin-top: 1mm; color: var(--sys-grey); font-size: 7pt; line-height: 9pt; } .book-root .book-content .sys-journey-debate { color: var(--sys-red); font: 400 11pt/14pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-journey-turn { position: relative; padding-left: 3mm; border-left: .5mm solid var(--sys-red); font-size: 8.5pt; line-height: 11pt; } .book-root .book-content .sys-journey-turn span { position: absolute; right: 0; bottom: 0; color: var(--sys-red); font: 600 11pt/1 "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-journey-kept { margin-top: 1.5mm !important; padding-right: 8mm; font-weight: 400; } .book-root .book-content :is(.sys-journey-kept, .sys-inherit-head) b, .book-root .book-pilot .sys-step-kept b { display: inline-block; margin-right: 1.5mm; color: var(--sys-ink); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .book-root .book-content .sys-journey-perfect-world { background: #f4f3ef; } .book-root .book-content .sys-journey-question { max-width: 150mm; margin-top: 2mm !important; color: var(--sys-red); font: 400 20pt/26pt "Book Literata", Georgia, serif; } /* Timeline ------------------------------------------------------------------ */ .book-root .book-content .sys-gantt { display: grid; grid-template-rows: 52mm 1fr; } .book-root .book-content .sys-gantt-chart { position: relative; } .book-root .book-content .sys-gantt-scale { position: relative; height: 8mm; border-bottom: .3mm solid var(--sys-ink); color: var(--sys-grey); font: 400 8pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-gantt-left .sys-gantt-scale { margin-left: calc(var(--sys-m2) + var(--sys-gap)); } .book-root .book-content .sys-gantt-scale span { position: absolute; bottom: 1.5mm; transform: translateX(-1mm); white-space: nowrap; } .book-root .book-content .sys-gantt-rows { display: block; } .book-root .book-content .sys-gantt-row { display: grid; height: 17.5mm; border-bottom: .2mm solid var(--sys-rule); } .book-root .book-content .sys-gantt-left .sys-gantt-row { grid-template-columns: var(--sys-m2) 1fr; column-gap: var(--sys-gap); } .book-root .book-content .sys-gantt-row.sys-gantt-first { border-top: .3mm solid var(--sys-ink); } .book-root .book-content .sys-gantt-label { align-self: center; font: 400 9.5pt/12pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-gantt-part { display: block; color: var(--sys-red); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-gantt-track { position: relative; } .book-root .book-content .sys-gantt-tick { position: absolute; top: 0; bottom: 0; border-left: .15mm dotted #cfcfc8; } .book-root .book-content .sys-gantt-bar { position: absolute; top: 6.25mm; height: 5mm; padding: 0 1.5mm; box-sizing: border-box; background: var(--sys-ink); color: #fff; font: 400 7pt/5mm "Book Barlow", Arial, sans-serif; white-space: nowrap; overflow: hidden; } .book-root .book-content .sys-gantt-bar.is-approximate { background: repeating-linear-gradient(135deg, #fff 0 .7mm, #9a9a92 .7mm 1.1mm); border: .3mm solid var(--sys-ink); color: var(--sys-ink); } .book-root .book-content .sys-gantt-milestone { position: absolute; top: 6.75mm; width: 0; height: 4mm; } .book-root .book-content .sys-gantt-milestone::before { content: ""; position: absolute; left: -2mm; top: 0; width: 4mm; height: 4mm; background: var(--sys-red); transform: rotate(45deg) scale(.8); } .book-root .book-content .sys-gantt-milestone b { position: absolute; left: 2.5mm; top: -4.6mm; color: var(--sys-red); font: 600 7pt/8pt "Book Barlow", Arial, sans-serif; white-space: nowrap; } .book-root .book-content .sys-gantt-milestone.is-late b { left: auto; right: 2.5mm; } .book-root .book-content .sys-gantt-legend { display: flex; flex-direction: column; gap: 2.5mm; margin-top: 2mm; } .book-root .book-content .sys-gantt-legend p { display: flex; align-items: center; gap: 3mm; font: 400 9pt/11pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-gantt-legend .sys-gantt-bar { position: static; width: 12mm; } .book-root .book-content .sys-gantt-legend .sys-gantt-milestone { position: relative; top: 0; margin: 0 5mm 0 6mm; } /* Reader (non-paginated) view: let system spreads flow. */ .book-root .book-reading-layout :is(.sys-page, .sys-opener-left, .sys-opener-right, .sys-intro-left, .sys-intro-right) { height: auto; width: auto; overflow: visible; } /* World pages that carry a strip give its height back from their drawings. */ .book-root .book-pilot .essay-with-strip .world-proof { grid-template-rows: 1fr auto 34mm; gap: 3mm; } .book-root .book-pilot .essay-with-strip .world-proof-sources, .book-root .book-pilot .essay-with-strip .world-proof-sources figure { height: 34mm; } .book-root .book-pilot .essay-with-strip .world-proof .world-flow-vertical h3 { font-size: 15pt; } .book-root .book-pilot .essay-with-strip .world-contract { gap: 4mm; } .book-root .book-pilot .essay-with-strip .world-city-building { height: 16mm; margin-bottom: 3mm; } .book-root .book-pilot .essay-with-strip .world-city-people .world-person-drawing { transform: scale(.75); transform-origin: top center; height: 22mm; } .book-root .book-pilot .essay-with-strip .world-contract-choice h3 { font-size: 15pt; } .book-root .book-pilot .essay-with-strip .world-civic .world-roles { margin-bottom: 3mm; } /* Strip: what survived, under the turn. */ .book-root .book-pilot .sys-step-kept { margin-top: 1.5mm; font: 400 8pt/10.5pt "Book Barlow", Arial, sans-serif; } /* Inheritance: five worlds read across the gutter into five guide behaviours. */ .book-root .book-content .sys-inherit { display: grid; grid-template-rows: 52mm 13mm repeat(4, 40mm) 1fr; } .book-root .book-content .sys-inherit-head, .book-root .book-content .sys-inherit-row { display: grid; column-gap: var(--sys-gap); } .book-root .book-content .sys-inherit-left :is(.sys-inherit-head, .sys-inherit-row) { grid-template-columns: var(--sys-m1) var(--sys-m2) var(--sys-m2); } .book-root .book-content .sys-inherit-right :is(.sys-inherit-head, .sys-inherit-row) { grid-template-columns: calc(var(--sys-m2) + var(--sys-gap) + var(--sys-m1)) var(--sys-m2); } .book-root .book-content .sys-inherit-head { grid-row: 2; align-items: end; padding-bottom: 2mm; border-bottom: .3mm solid var(--sys-ink); } .book-root .book-content .sys-inherit-head p { display: flex; flex-wrap: wrap; } .book-root .book-content .sys-inherit-head b { color: var(--sys-red); font-size: 8pt; } .book-root .book-content .sys-inherit-head span { flex-basis: 100%; color: var(--sys-grey); font-size: 8pt; line-height: 10pt; } .book-root .book-content .sys-inherit-rows { display: contents; } .book-root .book-content .sys-inherit-row { position: relative; padding: 3mm 0; border-bottom: .2mm solid var(--sys-rule); } .book-root .book-content .sys-inherit-kept { font: 400 12pt/15pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-inherit-dropped { color: var(--sys-grey); font: 400 10pt/13pt "Book Barlow", Arial, sans-serif; text-decoration: line-through; text-decoration-color: #b0b0a8; text-decoration-thickness: .2mm; } .book-root .book-content .sys-inherit-left .sys-inherit-row::after { content: "→"; position: absolute; right: 0; top: 3mm; color: var(--sys-red); font: 600 12pt/1 "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-inherit-right .sys-inherit-row > div { position: relative; padding-left: 8mm; } .book-root .book-content .sys-inherit-arrow { position: absolute; left: 0; top: 0; color: var(--sys-red); font: 600 12pt/15pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-inherit-right h3 { color: var(--sys-red); font: 400 14pt/17pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-inherit-from { margin-top: 2mm !important; color: var(--sys-grey); font: 400 8pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-inherit-build { font: 400 9pt/12pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-page-ref { color: var(--sys-red); text-decoration: none; white-space: nowrap; } .book-root .book-content .sys-inherit-index { display: none; } .book-root .book-content .sys-inherit-statement { max-width: 150mm; margin-top: 2mm !important; color: var(--sys-ink); font: 400 20pt/26pt "Book Literata", Georgia, serif; } /* Contents reads as one facing spread: the word sits on the left page only; the right page carries a small vertical label. */ .book-root .book-content .book-contents-continued { padding-left: 12mm; padding-right: 12mm; } .book-root .book-content .book-contents .book-toc-part { margin-top: 3.2mm !important; } .book-root .book-content .book-contents ol > li:first-child { margin-top: 0 !important; } /* Two columns a page, so the whole list sits on one facing spread instead of running on for four or five pages. */ .book-root .book-content .book-contents ol { column-count: 2; column-gap: 7mm; font-size: 8.2pt; line-height: 10.4pt; } .book-root .book-content .book-contents li { break-inside: avoid; } .book-root .book-content .book-contents a { padding: .35mm 0; } .book-root .book-content .book-contents .book-toc-act { margin: 4mm 0 .8mm !important; break-after: avoid; } .book-root .book-content .book-contents .book-toc-part a > .book-toc-number { font-size: 8.4pt; } /* Intro spreads: a statement over an image, then a split word and a panel. ----------------------- */ .book-root .book-content :is(.sys-intro-left, .sys-intro-right) { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; color: #fff; background: #0a0a0a; } .book-root .book-content :is(.sys-intro-left, .sys-intro-right) :is(p, dd, dt) { margin: 0; text-indent: 0; } .book-root .book-content .sys-intro-bg { position: absolute; left: 0; top: 70mm; width: 100%; height: 227mm; object-fit: cover; object-position: 0% 50%; } .book-root .book-content .sys-intro-shade { position: absolute; left: 0; right: 0; top: 70mm; height: 227mm; background: linear-gradient(180deg, #0a0a0a 0%, rgba(10,10,10,.55) 14%, rgba(10,10,10,0) 38%, rgba(10,10,10,0) 80%, rgba(10,10,10,.55) 100%); } .book-root .book-content .sys-intro-label { position: absolute; left: 22mm; right: 18mm; top: 20mm; display: flex; justify-content: space-between; color: #fff; font: 400 9pt/12pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-intro-label span { color: #c8c8c3; } .book-root .book-content .sys-intro-statement { position: absolute; left: 22mm; top: 36mm; width: 128mm; color: #fff; font: 400 25pt/32pt "Book Literata", Georgia, serif; letter-spacing: -.01em; } .book-root .book-content .sys-intro-credit { position: absolute; left: 44mm; bottom: 12mm; max-width: 110mm; color: #d6d6d1; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-intro-side { position: absolute; left: 11mm; bottom: 18mm; transform: rotate(-90deg); transform-origin: left bottom; margin-left: 5mm !important; white-space: nowrap; color: #fff; font: 600 7.5pt/10pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-word { position: absolute; left: 22mm; top: 22mm; margin: 0; color: #fff; font: 600 66pt/.88 "Book Barlow", Arial, sans-serif; letter-spacing: -.01em; text-transform: uppercase; } .book-root .book-content .sys-word > span { display: flex; align-items: center; white-space: nowrap; } .book-root .book-content .sys-bar { display: inline-block; height: 3mm; background: var(--sys-red); } .book-root .book-content .sys-bar-long { width: 62mm; margin-left: 6mm; } .book-root .book-content .sys-bar-short { width: 14mm; margin-right: 5mm; } .book-root .book-content .sys-panel { position: absolute; left: 22mm; right: 0; top: 76mm; bottom: 24mm; display: flex; flex-direction: column; justify-content: space-between; padding: 11mm 18mm 10mm 12mm; box-sizing: border-box; background: #efeee9; color: var(--sys-ink); } .book-root .book-content .sys-panel p { color: inherit; } .book-root .book-content .sys-panel-kicker { color: var(--sys-grey) !important; font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-panel-lead { margin-top: 2mm; } .book-root .book-content .sys-panel-lead p { margin: 0; font: 400 14pt/19pt "Book Literata", Georgia, serif; } .book-root .book-content ul.sys-verbs { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--sys-gap); margin: 5mm 0 0; padding: 0; list-style: none; } .book-root .book-content .sys-verbs li { padding-top: 1.8mm; border-top: .3mm solid var(--sys-ink); font: 400 10.5pt/13pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-panel-shift { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sys-gap); row-gap: 3mm; align-items: start; } .book-root .book-content .sys-panel-original p:last-child { margin-top: 1.5mm; color: #3c3c38; font: 400 8.5pt/11.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-panel-became { align-self: end; color: var(--sys-red) !important; font: 400 11pt/14pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-trio { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--sys-gap); margin: 0; padding: 0; list-style: none; } .book-root .book-content .sys-trio li { padding-top: 1.8mm; border-top: .2mm solid var(--sys-rule); font: 400 11pt/14pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-trio b { color: var(--sys-red); font-weight: 600; } .book-root .book-content .sys-numbers { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--sys-gap); margin: 0; border-top: .3mm solid var(--sys-ink); padding-top: 3mm; } .book-root .book-content .sys-numbers dt { color: var(--sys-ink); font: 600 40pt/1 "Book Barlow", Arial, sans-serif; letter-spacing: -.03em; } .book-root .book-content .sys-numbers dt small { margin-left: 1.5mm; font: 400 11pt/1 "Book Barlow", Arial, sans-serif; letter-spacing: 0; } .book-root .book-content .sys-numbers dd { margin: 1.5mm 0 0; color: #3c3c38; font: 400 8.5pt/11pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-panel-who div p { margin-top: 1.5mm; color: #3c3c38; font: 400 8.5pt/11.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-panel-who a { color: inherit; text-decoration-color: var(--sys-red); } /* Prologue: where I have lived, then position, values and practice. -------------------------------- */ .book-root .book-content .sys-intro-left .sys-route { position: absolute; left: 24mm; top: 104mm; margin: 0; padding: 0; list-style: none; border-left: .3mm solid #6a6a65; } .book-root .book-content .sys-intro-left .sys-route li { position: relative; padding: 0 0 11mm 9mm; } .book-root .book-content .sys-intro-left .sys-route li:last-child { padding-bottom: 0; } .book-root .book-content .sys-route-dot { position: absolute; left: -1.7mm; top: 1.2mm; width: 3.2mm; height: 3.2mm; border-radius: 50%; background: #fff; } .book-root .book-content .sys-route li:first-child .sys-route-dot, .book-root .book-content .sys-route li:last-child .sys-route-dot { background: var(--sys-red); } .book-root .book-content .sys-route b { display: block; color: #fff; font: 600 12pt/15pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-route small { display: block; color: #b8b8b4; font: 400 8.5pt/11pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-intro-left .sys-route-quote { position: absolute; left: 22mm; bottom: 22mm; width: 140mm; color: #fff; font: 400 16pt/21pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-route-quote cite { display: block; margin-top: 2mm; color: #9a9a94; font: 400 7.5pt/10pt "Book Barlow", Arial, sans-serif; font-style: normal; } .book-root .book-content .sys-panel .sys-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sys-gap); align-items: start; } .book-root .book-content .sys-block-2 { margin-top: 9mm; } .book-root .book-content .sys-block-3 { margin-top: 18mm; } .book-root .book-content .sys-block-n { color: var(--sys-grey) !important; font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; } .book-root .book-content .sys-block h3 { margin: 1mm 0 0 !important; color: var(--sys-ink); font: 600 11.5pt/14pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-block h3::after { content: ""; display: block; width: 6mm; height: .5mm; margin: 1.5mm 0 2.5mm; background: var(--sys-red); } .book-root .book-content .sys-block div p { margin: 0; color: #2e2e2b; font: 400 8.5pt/11.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-shift .sys-share { margin: 2.5mm 0 0; padding: 0; list-style: none; } .book-root .book-content .sys-share li { display: grid; grid-template-columns: 62mm 1fr; column-gap: var(--sys-gap); align-items: center; padding: 1.4mm 0; border-top: .2mm solid var(--sys-rule); } .book-root .book-content .sys-share p b { display: block; font: 600 9pt/11pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-share p small { display: block; color: var(--sys-grey); font: 400 7.5pt/9.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-share-bar { display: flex; height: 6mm; } .book-root .book-content .sys-share-bar i, .book-root .book-content .sys-share-bar em { display: block; padding-left: 1.5mm; color: #fff; font: 400 6.5pt/6mm "Book Barlow", Arial, sans-serif; font-style: normal; overflow: hidden; } .book-root .book-content .sys-share-bar i { background: var(--sys-ink); } .book-root .book-content .sys-share-bar em { background: var(--sys-red); } .book-root .book-content .sys-shift-question { display: flex; align-items: baseline; gap: 5mm; margin-top: 3.5mm; } .book-root .book-content .sys-shift-question p { font: 400 12pt/15pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-shift-question p:last-child { color: var(--sys-red); } .book-root .book-content .sys-shift-question b { color: var(--sys-red); } .book-root .book-content .sys-panel .sys-panel-pointer { padding-top: 3mm; border-top: .3mm solid var(--sys-ink); color: #3c3c38; font: 400 8.5pt/11.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-panel-pointer a { color: var(--sys-red); text-decoration: none; white-space: nowrap; } /* Method: real boards on the left; the five steps, two diamonds and four tools on the right. --------- */ .book-root .book-content .sys-intro-left .sys-tiles { position: absolute; left: 22mm; top: 100mm; width: 166mm; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4mm 4.5mm; } .book-root .book-content .sys-tiles li { min-width: 0; } .book-root .book-content .sys-tiles img { display: block; width: 100%; height: 43mm; object-fit: cover; border: .2mm solid #3d3d3a; background: #151514; } .book-root .book-content .sys-tiles p { margin-top: 1.5mm; color: #fff; font: 600 8.5pt/11pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-tiles p b { margin-right: 2mm; color: var(--sys-red); font-weight: 600; } .book-root .book-content .sys-tiles small { display: block; color: #b8b8b4; font: 400 7.5pt/9.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-tiles-credit { left: 22mm; bottom: 12mm; } .book-root .book-content .sys-method-lead p { margin: 0; font: 400 13pt/17pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-method-lead .sys-panel-kicker { margin-bottom: 1.5mm; font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-panel .sys-loop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 3mm; margin: 0; padding: 0; list-style: none; } .book-root .book-content .sys-loop li { padding-top: 2mm; border-top: .3mm solid var(--sys-ink); } .book-root .book-content .sys-loop .sys-icon { display: block; width: 7mm; height: 7mm; margin-bottom: 1.5mm; color: var(--sys-ink); } .book-root .book-content .sys-loop b { display: block; color: var(--sys-red); font: 600 7.5pt/10pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .book-root .book-content .sys-loop small { display: block; margin-top: .5mm; font: 400 8pt/10.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-panel .sys-loop-return { position: relative; height: 8mm; margin: 2mm 12mm 0 12mm; border: .4mm solid var(--sys-red); border-top: 0; } .book-root .book-content .sys-loop-return::before { content: ""; position: absolute; left: -1.7mm; top: -1.2mm; border-left: 1.6mm solid transparent; border-right: 1.6mm solid transparent; border-bottom: 2.6mm solid var(--sys-red); } .book-root .book-content .sys-loop-return span { position: absolute; left: 50%; bottom: -2.4mm; transform: translateX(-50%); padding: 0 2.5mm; background: #efeee9; color: var(--sys-red); font: 400 9pt/11pt "Book Literata", Georgia, serif; white-space: nowrap; } .book-root .book-content .sys-diamonds svg { display: block; width: 100%; height: 25mm; margin-top: 1.5mm; overflow: visible; } .book-root .book-content .sys-diamonds polygon { fill: none; stroke: var(--sys-ink); stroke-width: .4; } .book-root .book-content .sys-diamonds .sys-dot { fill: var(--sys-red); } .book-root .book-content .sys-diamonds .sys-reopen { fill: none; stroke: var(--sys-red); stroke-width: .45; stroke-dasharray: 1.2 .9; } .book-root .book-content .sys-diamond-labels { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sys-gap); margin-top: 1.5mm; } .book-root .book-content .sys-diamond-labels p { color: #3c3c38; font: 400 8pt/10.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-diamond-labels b { display: block; color: var(--sys-ink); font: 600 8.5pt/11pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-diamond-text p { margin-top: 1.5mm; color: var(--sys-grey); font: 400 7.5pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-diamond-text a { color: inherit; text-decoration-color: var(--sys-red); } .book-root .book-content .sys-panel dl.sys-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sys-gap); margin: 0; } .book-root .book-content .sys-methods > div { padding-top: 2mm; border-top: .3mm solid var(--sys-ink); } .book-root .book-content .sys-methods dt { color: var(--sys-red); font: 600 7.5pt/10pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .book-root .book-content .sys-methods dd { margin: .8mm 0 0; font: 400 8pt/10.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-evidence-note p { margin: 0; } .book-root .book-content .sys-evidence-note p + p { margin-top: 1.5mm; } .book-root .book-content .sys-evidence-note a:not(.sys-page-ref) { color: inherit; text-decoration-color: var(--sys-red); } .book-root .book-content :is(.sys-intro-left, .sys-opener-left) .sys-tag-rec { color: #fff; } .book-root .book-content .sys-page-ref .book-toc-number { color: inherit; min-width: 0; } /* Signal spread: the evidence itself. ------------------------------------------------------------------ */ .book-root .book-content .sys-tag-ref { color: #c8c8c3; } .book-root .book-content .sys-signal-left .sys-signal-cols { position: absolute; left: 22mm; top: 98mm; width: 166mm; display: grid; grid-template-columns: var(--sys-m2) var(--sys-m2); column-gap: var(--sys-gap); } .book-root .book-content .sys-signal-cols p { margin: 0; color: #d6d6d1; font: 400 9.5pt/13.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-signal-cols a { color: inherit; text-decoration-color: var(--sys-red); } .book-root .book-content .sys-signal-lead p:last-child { margin: 1.5mm 0 0; font: 400 14pt/19pt "Book Literata", Georgia, serif; } /* Future spread: the imagined future as a path, then the artefact as real screens. -------------------- */ .book-root .book-content .sys-future-sub { position: absolute; left: 22mm; top: 82mm; width: 140mm; color: #c8c8c3; font: 400 12pt/16pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-intro-left .sys-route-future { top: 102mm; } .book-root .book-content .sys-intro-left .sys-route.sys-route-future li { padding-bottom: 7mm; } .book-root .book-content .sys-intro-left .sys-route.sys-route-future li:last-child { padding-bottom: 0; } .book-root .book-content .sys-route-future .sys-route-dot, .book-root .book-content .sys-route-future li:first-child .sys-route-dot, .book-root .book-content .sys-route-future li:last-child .sys-route-dot { background: var(--sys-red); } .book-root .book-content .sys-future-left .sys-future-story { position: absolute; left: 36mm; top: 192mm; width: 152mm; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sys-gap); } .book-root .book-content .sys-future-story p { margin: 0; color: #d6d6d1; font: 400 9pt/13pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-future-story p + p { margin-top: 2mm; } .book-root .book-content .sys-panel ol.sys-shots { display: flex; gap: 2mm; margin: 0; padding: 0; list-style: none; align-items: flex-start; } .book-root .book-content .sys-shots li { min-width: 0; } .book-root .book-content .sys-shots img { display: block; width: 100%; height: auto; border: .2mm solid var(--sys-rule); background: #0f0f0e; } .book-root .book-content .sys-shots small { display: block; margin-top: 1.2mm; color: #3c3c38; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-shots small b { margin-right: 1.2mm; color: var(--sys-red); font-weight: 600; } .book-root .book-content .sys-future-build p:not(.sys-panel-kicker) { margin: 1.5mm 0 0; color: #2e2e2b; font: 400 8.5pt/11.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-future-build .sys-tag { margin-left: 1mm; } .book-root .book-content .sys-future-close { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sys-gap); padding-top: 3mm; border-top: .3mm solid var(--sys-ink); } .book-root .book-content .sys-future-close p:not(.sys-panel-kicker) { margin: 1.2mm 0 0; color: #2e2e2b; font: 400 8pt/10.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-future-close p.sys-future-debate { color: var(--sys-red); font: 400 11pt/14pt "Book Literata", Georgia, serif; } /* Signal spread: a research report on one grid. Paper pages, black type, red for the finding. Content flows inside fixed margins (18mm outside, 24mm at the gutter) with 5.5mm between blocks, so nothing is placed by guesswork. */ .sys-sig-left, .sys-sig-right { page: stage; } .sys-sig-left { break-before: left; } .sys-sig-right { break-before: right; } .book-root .book-content :is(.sys-sig-left, .sys-sig-right) { position: relative; display: flex; flex-direction: column; gap: 5.5mm; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; background: #fff; color: #111; } .book-root .book-content .sys-sig-left { padding: 14mm 24mm 12mm 18mm; } .book-root .book-content .sys-sig-right { padding: 14mm 18mm 12mm 22mm; justify-content: space-between; } .book-root .book-content :is(.sys-sig-left, .sys-sig-right) :is(p, ul, ol, h2, h3, figure, blockquote, cite, dl, header) { margin: 0; padding: 0; text-indent: 0; font-style: normal; text-transform: none; letter-spacing: 0; } .book-root .book-content :is(.sys-sig-left, .sys-sig-right) :is(ul, ol) { list-style: none; } .book-root .book-content .sys-sig-nav { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 2.5mm; margin-bottom: 1.5mm; } .book-root .book-content .sys-sig-nav span { padding-bottom: 1.4mm; border-bottom: .2mm solid #cfcfc8; color: #9a9a94; font: 400 6.5pt/8pt "Book Barlow", Arial, sans-serif; white-space: nowrap; overflow: hidden; } .book-root .book-content .sys-sig-nav span.is-current { border-bottom: .5mm solid var(--sys-red); color: #111; font-weight: 600; } /* Left page: heading, a two-column opening, the lead chart, then image and question */ .book-root .book-content .sys-sig-head p { margin-bottom: 1.6mm; color: var(--sys-red); font: 600 6.6pt/8pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-sig-head h2 { color: #111; font: 600 16pt/19.5pt "Book Barlow", Arial, sans-serif; letter-spacing: -.005em; } .book-root .book-content .sys-sig-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 9mm; align-items: start; } .book-root .book-content .sys-sig-intro p { color: #2a2a27; font: 400 8.8pt/12.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-intro strong, .book-root .book-content .sys-sig-text strong { color: #111; font-weight: 600; } .book-root .book-content .sys-sig-pull { padding-left: 4.5mm; border-left: .3mm solid #111; } .book-root .book-content .sys-sig-pull p { color: #111; font: 400 14.5pt/18.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-pull cite { display: block; margin-top: 3.5mm; color: #77776f; font: 400 6.6pt/8.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-foot { flex: 1 1 0; min-height: 34mm; display: grid; grid-template-columns: 76mm 1fr; column-gap: 6mm; } .book-root .book-content .sys-sig-photo { display: flex; flex-direction: column; min-height: 0; } .book-root .book-content .sys-sig-photo img { display: block; flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 42%; } .book-root .book-content .sys-sig-photo figcaption { margin-top: 1.6mm; color: #77776f; font: 400 6pt/7.6pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-photo .sys-tag-spec { color: var(--sys-red); } .book-root .book-content .sys-sig-callout { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 0 6mm; border-left: .7mm solid var(--sys-red); color: #111; font: 600 17pt/21pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-callout small { display: block; margin-bottom: 2mm; color: #77776f; font: 400 6.4pt/8pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-sig-source { padding-top: 2mm; border-top: .2mm solid #cfcfc8; color: #77776f; font: 400 6pt/7.6pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-source p { margin: 0; } .book-root .book-content .sys-sig-source a, .book-root .book-content .sys-sig-text a, .book-root .book-content .sys-sig-intro a { color: inherit; text-decoration-color: var(--sys-red); } /* Right page: a numbered finding, two-column text, then three figures and related research */ .book-root .book-content .sys-sig-h2 { color: #111; font: 600 13pt/16pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-h2 small { margin-right: 2.4mm; color: var(--sys-red); font: 600 13pt/16pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-text { column-count: 2; column-gap: 9mm; } .book-root .book-content .sys-sig-text p { color: #2a2a27; font: 400 8.8pt/12.4pt "Book Barlow", Arial, sans-serif; orphans: 3; widows: 3; } .book-root .book-content .sys-sig-text p + p { margin-top: 2.6mm; } .book-root .book-content .sys-fig-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8mm; align-items: start; } .book-root .book-content .sys-fig { min-width: 0; } .book-root .book-content .sys-fig-cap { padding: 2mm 0; margin-bottom: 3.5mm !important; border-top: .3mm solid #111; border-bottom: .2mm solid #cfcfc8; color: #111; font: 400 7.8pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-fig-cap b { font-weight: 600; } /* Related research: three cards, each with what it found and where it stops */ .book-root .book-content .sys-related { border-top: .3mm solid #111; padding-top: 2.4mm; } .book-root .book-content .sys-related-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; margin-bottom: 3mm !important; } .book-root .book-content .sys-related-head b { font: 600 8pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-related-head span { color: #77776f; font: 400 6.2pt/8pt "Book Barlow", Arial, sans-serif; text-align: right; } .book-root .book-content ol.sys-related-list, .book-root .book-content .sys-related ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6mm; } .book-root .book-content .sys-related li { min-width: 0; padding-top: 2mm; border-top: .2mm solid #cfcfc8; } .book-root .book-content .sys-related-n { display: block; margin-bottom: 1mm; color: var(--sys-red); font: 600 8.5pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; } .book-root .book-content .sys-related-source p { color: #111; font: 600 7.6pt/9.6pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-related-found { margin-top: 1mm !important; color: #2a2a27; font: 400 7.4pt/9.7pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-related-limit { margin-top: 1.6mm !important; padding-top: 1.2mm; border-top: .15mm dotted #b8b8b0; color: #55554f; font: 400 6.7pt/8.6pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-related-limit small { display: block; margin-bottom: .4mm; color: #77776f; font: 600 5.4pt/7pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } /* Legends */ .book-root .book-content ul.sys-legend { display: flex; flex-wrap: wrap; gap: 1mm 5mm; margin-top: 2.6mm !important; color: #2a2a27; font: 400 6.8pt/8.6pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-legend li { display: flex; align-items: center; gap: 1.6mm; } .book-root .book-content .sys-legend i { display: block; width: 2.4mm; height: 2.4mm; background: #111; } .book-root .book-content .sys-legend li.is-red i { background: var(--sys-red); } .book-root .book-content .sys-legend li.is-grey i { background: #b8b8b0; } /* Line chart */ .book-root .book-content .sys-line svg { display: block; width: 100%; height: auto; overflow: visible; } .book-root .book-content .sys-line-grid { stroke: #d6d6d1; stroke-width: .15; } .book-root .book-content .sys-line-y { fill: #77776f; font: 400 2.5px "Book Barlow", Arial, sans-serif; text-anchor: end; } .book-root .book-content .sys-line-x { fill: #2a2a27; font: 400 2.7px "Book Barlow", Arial, sans-serif; text-anchor: middle; } .book-root .book-content .sys-line g.is-ink polyline, .book-root .book-content .sys-line g.is-red polyline, .book-root .book-content .sys-line g.is-grey polyline { fill: none; stroke-width: .5; stroke-linejoin: round; } .book-root .book-content .sys-line g.is-ink { color: #111; } .book-root .book-content .sys-line g.is-red { color: var(--sys-red); } .book-root .book-content .sys-line g.is-grey { color: #8a8a84; } .book-root .book-content .sys-line g[class^="is-"] polyline { stroke: currentColor; } .book-root .book-content .sys-line g[class^="is-"] circle { fill: currentColor; } .book-root .book-content .sys-line-label { fill: currentColor; font: 600 3px "Book Barlow", Arial, sans-serif; text-anchor: middle; } /* Circles with a stat grid */ .book-root .book-content .sys-bubbles { display: grid; grid-template-columns: 72mm minmax(0, 1fr); column-gap: 9mm; align-items: start; } .book-root .book-content .sys-bubbles-circles { display: flex; align-items: flex-end; height: 33mm; } .book-root .book-content .sys-bubbles-circles span { display: block; flex: none; border-radius: 50%; background: #111; } .book-root .book-content .sys-bubbles-circles .sys-bubble-1 { background: var(--sys-red); margin-left: -7mm; } .book-root .book-content .sys-bubbles-circles .sys-bubble-2 { background: #b8b8b0; margin-left: -6mm; } .book-root .book-content .sys-bubbles-labels { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 3mm; margin-top: 3mm; } .book-root .book-content .sys-bubbles-labels b { display: block; font: 600 12pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; } .book-root .book-content .sys-bubbles-labels p { margin-top: 1mm !important; font: 400 6.4pt/8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-bubbles-labels small { display: block; margin-top: .6mm; color: #77776f; font: 400 5.8pt/7.2pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-bubbles-stats { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 5mm; row-gap: 4.5mm; } .book-root .book-content .sys-bubbles-stats b { display: block; padding-bottom: 1.2mm; border-bottom: .4mm solid var(--sys-red); font: 600 14pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; letter-spacing: -.015em; text-transform: uppercase; } .book-root .book-content .sys-bubbles-stats p { margin-top: 1.2mm !important; color: #2a2a27; font: 400 6.4pt/8.2pt "Book Barlow", Arial, sans-serif; } /* Horizontal bars: label above, bar below, value at the bar's end */ .book-root .book-content .sys-hb > div { margin-bottom: 3.6mm; } .book-root .book-content .sys-hb small { display: block; margin-bottom: .8mm; font: 400 6.8pt/8.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-hb span { display: flex; align-items: center; height: 4.6mm; padding-right: 13mm; box-sizing: border-box; } .book-root .book-content .sys-hb i { display: block; flex: none; height: 100%; background: #111; } .book-root .book-content .sys-hb .is-top i { background: var(--sys-red); } .book-root .book-content .sys-hb b { margin-left: 2mm; white-space: nowrap; font: 600 7.6pt/1 "Book Barlow", Arial, sans-serif; } /* Stacked bars: label above, one 100% bar below */ .book-root .book-content .sys-stacked-row { margin-bottom: 3.6mm; } .book-root .book-content .sys-stacked-row p { margin-bottom: .8mm !important; font: 400 6.8pt/8.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-stacked-row > span { display: flex; height: 5.6mm; } .book-root .book-content .sys-stacked-row i { display: flex; align-items: center; justify-content: center; height: 100%; color: #fff; font: 600 6.8pt/1 "Book Barlow", Arial, sans-serif; font-style: normal; overflow: hidden; white-space: nowrap; } .book-root .book-content .sys-stacked-row i.is-ink { background: #111; } .book-root .book-content .sys-stacked-row i.is-red { background: var(--sys-red); } .book-root .book-content .sys-stacked-row i.is-grey { background: #b8b8b0; color: #111; } /* People pictogram */ .book-root .book-content .sys-people { margin: 0 0 3mm; } .book-root .book-content .sys-people > div { display: flex; gap: 1.6mm; } .book-root .book-content .sys-person { position: relative; display: block; width: 5mm; height: 10mm; } .book-root .book-content .sys-person svg { display: block; width: 5mm; height: 10mm; fill: #cfcfc8; } .book-root .book-content .sys-person-fill { position: absolute; left: 0; top: 0; height: 10mm; overflow: hidden; } .book-root .book-content .sys-person-fill svg { fill: var(--sys-red); } .book-root .book-content .sys-people p { margin-top: 1.2mm !important; color: #2a2a27; font: 400 7.4pt/9.2pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-people p b { margin-right: 2mm; color: var(--sys-red); font: 600 13pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; } .book-root .book-content .sys-people small { display: block; color: #77776f; font: 400 6pt/7.6pt "Book Barlow", Arial, sans-serif; } /* Figure 1 forms: each sized so the lead chart takes about a quarter of the page */ .book-root .book-content .sys-doubling { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 4mm; align-items: end; height: 44mm; margin-bottom: 13mm; border-bottom: .3mm solid #111; } .book-root .book-content .sys-doubling-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .book-root .book-content .sys-doubling-col b { margin-bottom: 1mm; font: 600 15pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; } .book-root .book-content .sys-doubling-col span { display: block; background: #111; } .book-root .book-content .sys-doubling-col:last-child span { background: var(--sys-red); } .book-root .book-content .sys-doubling-col:last-child b { color: var(--sys-red); } .book-root .book-content .sys-doubling-col strong, .book-root .book-content .sys-doubling-col small { position: absolute; left: 0; right: 0; } .book-root .book-content .sys-doubling-col strong { top: calc(100% + 1.5mm); font: 600 7.5pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-doubling-col small { top: calc(100% + 6mm); color: #77776f; font: 400 6.5pt/8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-funnel-row { margin-bottom: 3mm; } .book-root .book-content .sys-funnel-row small { display: block; margin-bottom: .8mm; font: 400 7.2pt/9pt "Book Barlow", Arial, sans-serif; text-align: center; } .book-root .book-content .sys-funnel-row span { display: flex; align-items: center; justify-content: center; height: 11mm; margin: 0 auto; background: #111; min-width: 16mm; } .book-root .book-content .sys-funnel-row.is-last span { background: var(--sys-red); } .book-root .book-content .sys-funnel-row b { color: #fff; font: 600 15pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; } .book-root .book-content .sys-diverging { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 6mm; height: 70mm; } .book-root .book-content .sys-diverging > i { position: absolute; left: 0; right: 0; top: 40mm; border-top: .3mm solid #111; } .book-root .book-content .sys-div-col { position: relative; height: 100%; } .book-root .book-content .sys-div-col span { position: absolute; left: 4mm; right: 4mm; bottom: 30mm; background: #111; } .book-root .book-content .sys-div-col.is-down span { top: 40mm; bottom: auto; background: var(--sys-red); } .book-root .book-content .sys-div-col b { position: absolute; left: 0; right: 0; text-align: center; font: 600 14pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; } .book-root .book-content .sys-div-col.is-down b { color: var(--sys-red); } .book-root .book-content .sys-div-col strong, .book-root .book-content .sys-div-col small { position: absolute; left: 0; right: 0; text-align: center; } .book-root .book-content .sys-div-col strong { top: 53mm; font: 600 7.4pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-div-col small { top: 60.5mm; color: #77776f; font: 400 6.6pt/8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content ol.sys-stack { margin: 0; } .book-root .book-content .sys-stack li { display: grid; grid-template-columns: 54mm 1fr; column-gap: 6mm; align-items: center; height: 16.5mm; border-bottom: .2mm solid #cfcfc8; } .book-root .book-content .sys-stack li:first-child b { color: var(--sys-red); } .book-root .book-content .sys-stack b { font: 600 30pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; letter-spacing: -.02em; text-transform: uppercase; } .book-root .book-content .sys-stack p { color: #2a2a27; font: 400 8pt/10.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-columns { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 8mm; align-items: end; height: 44mm; margin-bottom: 7mm; border-bottom: .3mm solid #111; position: relative; } .book-root .book-content .sys-columns-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .book-root .book-content .sys-columns-col b { margin-bottom: 1mm; font: 600 15pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; } .book-root .book-content .sys-columns-col span { display: block; background: #111; } .book-root .book-content .sys-columns-col.is-top span { background: var(--sys-red); } .book-root .book-content .sys-columns-col.is-top b { color: var(--sys-red); } .book-root .book-content .sys-columns-col strong { position: absolute; left: 0; right: 0; top: calc(100% + 1.5mm); font: 600 7.5pt/9pt "Book Barlow", Arial, sans-serif; } /* Personal-position spreads: world-opener geometry, with blocks flowing down two staggered columns. */ .book-root .book-content .sys-story-col { position: absolute; width: 68mm; top: 30mm; display: flex; flex-direction: column; gap: 12mm; } .book-root .book-content .sys-story-col-1 { left: 22mm; } .book-root .book-content .sys-story-col-2 { left: 102mm; top: 76mm; } .book-root .book-content .sys-story-block :is(p, i) { margin: 0; text-indent: 0; } .book-root .book-content .sys-story-block i { display: block; width: 6mm; height: .5mm; margin: 0 0 3mm; background: var(--sys-red); } .book-root .book-content .sys-story-block p { color: #bdbdb8; font: 400 9.5pt/13.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-story-block p + p { margin-top: 2.4mm; } .book-root .book-content .sys-story-block b { color: #fff; font-weight: 600; } .book-root .book-content .sys-story-block p.sys-story-red { color: var(--sys-accent, #ec3a30); font: 400 13pt/17pt "Book Literata", Georgia, serif; } .book-root .book-reading-layout .sys-story-col { position: static; width: auto; padding: 0 24px; margin-bottom: 24px; } .book-root .book-reading-layout .sys-story-right .sys-opener-word { position: static; padding: 24px; } /* Methodology: reasoning on the left; a ring of six stages around a faint outline brain on the right. */ .book-root .book-content .sys-method-block { position: absolute; left: 22mm; width: 124mm; } .book-root .book-content .sys-method-block-1 { top: 62mm; } .book-root .book-content .sys-method-block-2 { top: 176mm; } .book-root .book-content .sys-method-block i { display: block; width: 6mm; height: .5mm; margin: 0 0 3mm; background: var(--sys-red); } .book-root .book-content .sys-method-block h3 { margin: 0 0 3mm; color: #fff; font: 600 11pt/14pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-method-block p { margin: 0; text-indent: 0; color: #bdbdb8; font: 400 9.5pt/13.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-method-block p + p { margin-top: 2.6mm; } .book-root .book-content .sys-method-block-1 p:last-child { color: #fff; font-weight: 600; } .book-root .book-content .sys-method-block .sys-method-red { margin-top: 6mm; color: var(--sys-accent, #ec3a30); font: 400 13pt/17pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-ring { position: absolute; left: 0; top: 22mm; width: 210mm; aspect-ratio: 210 / 160; } .book-root .book-content .sys-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .book-root .book-content .sys-ring svg circle { fill: none; stroke: var(--sys-red); } .book-root .book-content .sys-ring-outer { stroke-width: .25; opacity: .4; } .book-root .book-content .sys-ring-inner { stroke-width: .25; stroke-dasharray: 1.2 1.6; opacity: .3; } .book-root .book-content .sys-ring-dots { stroke-width: .8; stroke-dasharray: .05 1.7; stroke-linecap: round; } .book-root .book-content .sys-ring-tick { stroke: var(--sys-red); stroke-width: .25; opacity: .55; } .book-root .book-content .sys-ring-brain { position: absolute; left: 50%; top: 50%; width: 35%; height: auto; transform: translate(-50%, -50%); opacity: .55; margin: 0; } .book-root .book-content .sys-ring-node { position: absolute; width: 6.2%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--sys-red); color: #fff; display: grid; place-items: center; } .book-root .book-content .sys-ring-node b { font: 600 9pt/1 "Book Barlow", Arial, sans-serif; letter-spacing: .02em; } .book-root .book-content .sys-ring-node span { position: absolute; white-space: nowrap; color: #fff; font: 600 9pt/1 "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-ring-top span { bottom: calc(100% + 3mm); left: 50%; transform: translateX(-50%); } .book-root .book-content .sys-ring-bottom span { top: calc(100% + 3mm); left: 50%; transform: translateX(-50%); } .book-root .book-content .sys-ring-right span { left: calc(100% + 3mm); } .book-root .book-content .sys-ring-left span { right: calc(100% + 3mm); } .book-root .book-content .sys-stage-list { position: absolute; left: 22mm; right: 18mm; top: 190mm; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8mm 10mm; } .book-root .book-content .sys-stage-list li { border-top: .25mm solid rgba(255,255,255,.18); padding-top: 2.4mm; } .book-root .book-content .sys-stage-list p { margin: 0; text-indent: 0; color: #bdbdb8; font: 400 8.2pt/11.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-stage-list p:first-child { margin-bottom: 1mm; color: #fff; font-weight: 600; font-size: 9pt; } .book-root .book-content .sys-stage-list b { margin-right: 2mm; color: var(--sys-accent, #ec3a30); } .book-root .book-content .sys-stage-list small { color: #8a8a84; font-size: inherit; font-weight: 400; } .book-root .book-reading-layout .sys-method-block, .book-root .book-reading-layout .sys-stage-list { position: static; width: auto; padding: 0 24px; margin-bottom: 24px; } .book-root .book-reading-layout .sys-ring { position: relative; top: auto; width: 100%; max-width: 560px; margin: 24px auto; } /* Signal spreads, one rhythm: 6 mm between blocks, the same 22 mm margin at the spine on both pages, one two-column grid (1fr 1fr, 10 mm) shared by text, figures and photograph, and no type under 7 pt. */ .book-root .book-content :is(.sys-sig-left, .sys-sig-right) { gap: 6mm; justify-content: flex-start; } .book-root .book-content .sys-sig-left { padding: 14mm 22mm 12mm 18mm; } .book-root .book-content .sys-sig-right { padding: 14mm 18mm 12mm 22mm; } .book-root .book-content .sys-sig-nav { margin-bottom: 3mm; } .book-root .book-content .sys-sig-nav span { font-size: 7pt; line-height: 9pt; } .book-root .book-content .sys-sig-head p { font-size: 7pt; line-height: 9pt; margin-bottom: 2mm; } .book-root .book-content :is(.sys-sig-head h2, .sys-sig-h2) { font: 600 17pt/21pt "Book Barlow", Arial, sans-serif; text-wrap: balance; } .book-root .book-content .sys-sig-h2 small { font: 600 17pt/21pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-row { column-gap: 10mm; } .book-root .book-content :is(.sys-sig-intro p, .sys-sig-text p) { font: 400 9pt/12.8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-pull { border-left-width: .4mm; } .book-root .book-content .sys-sig-pull p { font: 400 15pt/19.5pt "Book Barlow", Arial, sans-serif; text-wrap: pretty; } .book-root .book-content .sys-sig-pull cite { font-size: 7pt; line-height: 9pt; } .book-root .book-content .sys-sig-foot { grid-template-columns: 1fr 1fr; column-gap: 10mm; min-height: 60mm; } .book-root .book-content .sys-sig-photo figcaption { font-size: 7pt; line-height: 9pt; margin-top: 2mm; } .book-root .book-content .sys-sig-callout { justify-content: flex-start; font: 600 18pt/22pt "Book Barlow", Arial, sans-serif; text-wrap: balance; } .book-root .book-content .sys-sig-callout small { font-size: 7pt; line-height: 9pt; margin-bottom: 3mm; } .book-root .book-content .sys-sig-source { font-size: 7pt; line-height: 9pt; padding-top: 2.4mm; } .book-root .book-content .sys-sig-text { column-gap: 10mm; } .book-root .book-content .sys-fig-cap { font-size: 8.4pt; line-height: 10.5pt; margin-bottom: 3.5mm !important; } .book-root .book-content .sys-fig-pair { column-gap: 10mm; } .book-root .book-content .sys-bubbles { grid-template-columns: 1fr 1fr; column-gap: 10mm; } .book-root .book-content .sys-bubbles-labels p { font-size: 7.2pt; line-height: 9pt; } .book-root .book-content .sys-bubbles-labels small { font-size: 6.8pt; line-height: 8.4pt; } .book-root .book-content .sys-bubbles-stats p { font-size: 7.4pt; line-height: 9.4pt; } .book-root .book-content ul.sys-legend { font-size: 7.2pt; line-height: 9pt; } .book-root .book-content .sys-hb small { font-size: 7.4pt; line-height: 9pt; } .book-root .book-content .sys-stacked-row p { font-size: 7.6pt; line-height: 9.4pt; } .book-root .book-content .sys-stacked-row i { font-size: 7.2pt; } .book-root .book-content .sys-people small { font-size: 6.8pt; line-height: 8.4pt; } .book-root .book-content .sys-doubling-col small { font-size: 7pt; line-height: 8.6pt; } .book-root .book-content .sys-div-col small { font-size: 7pt; } .book-root .book-content .sys-related { margin-top: auto; } .book-root .book-content .sys-related-head b { font-size: 8.6pt; } .book-root .book-content .sys-related-head span { font-size: 7pt; line-height: 9pt; } .book-root .book-content .sys-related ol { column-gap: 10mm; } .book-root .book-content .sys-related-source p { font-size: 8pt; line-height: 10pt; } .book-root .book-content .sys-related-found { font-size: 7.7pt; line-height: 10pt; } .book-root .book-content .sys-related-limit { font-size: 7.2pt; line-height: 9.2pt; } .book-root .book-content .sys-related-limit small { font-size: 6.4pt; line-height: 8pt; } .book-root .book-content .sys-stack li { grid-template-columns: 1fr 1fr; column-gap: 10mm; } /* Margins the reset rule above was removing (it outranks single-class padding), then the evidence block that replaces the photograph. */ .book-root .book-content :is(.sys-sig-left, .sys-sig-right) .sys-sig-pull { padding-left: 5mm; } .book-root .book-content :is(.sys-sig-left, .sys-sig-right) .sys-sig-callout { padding-left: 6mm; } .book-root .book-content :is(.sys-sig-left, .sys-sig-right) .sys-fig-cap { padding: 2mm 0; } .book-root .book-content :is(.sys-sig-left, .sys-sig-right) .sys-related-limit { padding-top: 1.2mm; } .book-root .book-content .sys-sig-foot { flex: none; margin-top: auto; min-height: 0; align-items: start; } .book-root .book-content .sys-sig-more-head { padding-bottom: 2mm; margin-bottom: 3mm !important; border-bottom: .3mm solid #111; font: 600 8.6pt/10.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-more ol { display: flex; flex-direction: column; gap: 3.2mm; margin: 0; padding: 0; } .book-root .book-content .sys-sig-more li { display: grid; grid-template-columns: 8mm 1fr; align-items: start; } .book-root .book-content .sys-sig-more li > span { color: var(--sys-red); font: 600 8.5pt/12.2pt "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; } .book-root .book-content .sys-sig-more li b { display: block; margin-bottom: .6mm; color: #111; font: 600 9pt/12pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-more li p { margin: 0; text-indent: 0; color: #2a2a27; font: 400 9pt/12.6pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-more li a, .book-root .book-content .sys-sig-prose a { color: inherit; text-decoration-color: var(--sys-red); } .book-root .book-content .sys-sig-take { display: flex; flex-direction: column; gap: 4.5mm; } .book-root .book-content .sys-sig-take .sys-sig-callout { font: 600 16pt/20pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-sig-prose p { margin: 0; text-indent: 0; color: #2a2a27; font: 400 9pt/12.8pt "Book Barlow", Arial, sans-serif; } /* A world's opening page: title and subtitle stacked over the photograph; block headings on the right. */ .book-root .book-content .sys-opener-head { position: absolute; left: 22mm; top: 24mm; width: 150mm; } .book-root .book-content .sys-opener-head .sys-opener-statement { position: static; width: auto; } .book-root .book-content .sys-opener-head > p:first-child { margin: 0 0 3mm; color: var(--sys-red); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-opener-head .sys-opener-sub { margin: 4mm 0 0; color: #a5a5a0; font: 400 11pt/15pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-story-block h3 { margin: 0 0 2mm; color: #fff; font: 600 11pt/14pt "Book Barlow", Arial, sans-serif; } /* Interpretation spread: a light page with a large pale vertical title; facing it, a full-bleed photograph with white text. */ .sys-int-left { page: stage; break-before: left; } .sys-int-right { page: stage; break-before: right; } .book-root .book-content :is(.sys-int-left, .sys-int-right) { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; } .book-root .book-content .sys-int-left { background: #f1f1ee; color: #111; } .book-root .book-content .sys-int-right { background: #f1f1ee; color: #fff; } .book-root .book-content :is(.sys-int-left, .sys-int-right) :is(p, h2, h3, article) { margin: 0; padding: 0; border: 0; text-indent: 0; font-style: normal; text-transform: none; letter-spacing: 0; } .book-root .book-content .sys-int-vertical { position: absolute; left: 14mm; bottom: 16mm; transform: rotate(-90deg); transform-origin: left bottom; white-space: nowrap; color: #cfcfca; font: 400 38pt/1 "Book Literata", Georgia, serif; letter-spacing: -.01em; } .book-root .book-content .sys-int-text { position: absolute; left: 50mm; top: 78mm; width: 92mm; } .book-root .book-content .sys-int-kicker { margin-bottom: 3mm; color: var(--sys-red); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-int-sub { color: #111; font: 600 9.5pt/12.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-int-statement { margin: 4mm 0 6mm; color: #111; font: 400 16.5pt/22.5pt "Book Literata", Georgia, serif; letter-spacing: -.01em; text-wrap: pretty; } .book-root .book-content .sys-int-body p { color: #2a2a27; font: 400 8.8pt/12.6pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-int-body p + p { margin-top: 2.8mm; } /* One photograph 250 x 272 mm, set 10 mm from the top and 15 mm from the bottom, starting 40 mm before the spine and bleeding off the outer edge; each page draws its half. */ .book-root .book-content .sys-int-part { position: absolute; top: 10mm; height: 272mm; overflow: hidden; } .book-root .book-content .sys-int-part-left { left: 170mm; width: 40mm; } .book-root .book-content .sys-int-part-right { left: 0; width: 210mm; } .book-root .book-content .sys-int-part img { position: absolute; top: 0; width: 250mm; height: 272mm; max-width: none; margin: 0; object-fit: cover; object-position: 50% 70%; } .book-root .book-content .sys-int-part-left img { left: 0; } .book-root .book-content .sys-int-part-right img { left: -40mm; } .book-root .book-content .sys-int-block { position: absolute; } .book-root .book-content .sys-int-block h3 { margin-bottom: 2.6mm; color: #fff; font: 600 9pt/11pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-int-block p { color: #fff; font: 400 9.5pt/13.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-int-block p + p { margin-top: 2.6mm; } .book-root .book-content .sys-int-block p.sys-int-hmw { font: 600 10.5pt/14.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-int-block-1 { left: 40mm; top: 34mm; width: 62mm; } .book-root .book-content .sys-int-block-2 { left: 116mm; top: 28mm; width: 64mm; } .book-root .book-content .sys-int-block-3 { left: 40mm; top: 70mm; width: 70mm; } .book-root .book-content .sys-int-right .sys-opener-credit { left: 14mm; bottom: 5mm; color: #8a8a84; } .book-root .book-reading-layout :is(.sys-int-left, .sys-int-right) { height: auto; width: auto; overflow: visible; min-height: 0; } .book-root .book-reading-layout :is(.sys-int-vertical, .sys-int-text, .sys-int-block) { position: static; transform: none; width: auto; padding: 24px; } .book-root .book-reading-layout .sys-int-part { display: none; } .book-root .book-content :is(.sys-int-left, .sys-int-right) .sys-int-kicker { margin-bottom: 3mm; } .book-root .book-content :is(.sys-int-left, .sys-int-right) .sys-int-statement { margin: 4.5mm 0 7mm; } .book-root .book-content :is(.sys-int-left, .sys-int-right) .sys-int-block h3 { margin-bottom: 2.8mm; } .book-root .book-content .sys-int-body p { font-size: 9.3pt; line-height: 13.4pt; } /* Brainstorm bubble map: hubs and satellites drawn as dotted circles across a facing spread. */ .sys-bs-left { page: stage; break-before: left; } .sys-bs-right { page: stage; break-before: right; } .book-root .book-content :is(.sys-bs-left, .sys-bs-right) { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; background: #f1f1ee; color: #111; } .book-root .book-content .sys-bs-lines { position: absolute; inset: 0; width: 100%; height: 100%; } .book-root .book-content .sys-bs-lines line { stroke: var(--sys-red); stroke-width: .45; } .book-root .book-content :is(.sys-bs-hub, .sys-bs-sat) { position: absolute; display: grid; place-items: center; box-sizing: border-box; border: .4mm dotted var(--sys-red); border-radius: 50%; background: #f1f1ee; text-align: center; } .book-root .book-content .sys-bs-sat { padding: 2mm; } .book-root .book-content :is(.sys-bs-hub, .sys-bs-sat) span { display: block; } .book-root .book-content .sys-bs-sat span { font: 400 7.2pt/9pt "Book Barlow", Arial, sans-serif; color: #1a1a18; text-wrap: balance; } .book-root .book-content .sys-bs-hub { padding: 3mm; } .book-root .book-content .sys-bs-hub span { font: 400 13pt/15.5pt "Book Barlow", Arial, sans-serif; color: #111; text-wrap: balance; } .book-root .book-content .sys-bs-hub.is-small span { font-size: 10pt; line-height: 12pt; } .book-root .book-content .sys-bs-hub.is-chosen { border: 0; background: var(--sys-red); } .book-root .book-content .sys-bs-hub.is-chosen span { color: #fff; font-weight: 600; font-size: 14pt; line-height: 17pt; } .book-root .book-content .sys-bs-head { position: absolute; left: 14mm; top: 12mm; width: 100mm; } .book-root .book-content .sys-bs-head p:first-child { margin: 0 0 1.5mm; color: var(--sys-red); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-bs-head p:last-child { margin: 0; color: #55554f; font: 400 8.6pt/12pt "Book Barlow", Arial, sans-serif; text-indent: 0; } .book-root .book-content .sys-bs-key { position: absolute; left: 130mm; top: 238mm; width: 66mm; } .book-root .book-content .sys-bs-key p { margin: 0; text-indent: 0; } .book-root .book-content .sys-bs-key p:first-child { margin-bottom: 2mm; padding-top: 2mm; border-top: .3mm solid #111; font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-bs-key p:last-child { color: var(--sys-red); font: 400 12pt/16pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-bs-caption { position: absolute; left: 14mm; right: 14mm; top: 238mm; } .book-root .book-content .sys-bs-caption h2 { margin: 0 0 3mm; padding: 0 0 2mm; border: 0; border-bottom: .3mm solid var(--sys-red); color: var(--sys-red); font: 600 24pt/28pt "Book Barlow", Arial, sans-serif; letter-spacing: -.01em; text-transform: none; font-style: normal; } .book-root .book-content .sys-bs-caption p { margin: 0; max-width: 150mm; text-indent: 0; color: #2a2a27; font: 400 9.4pt/13.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-bs-caption .sys-bs-legend { display: flex; align-items: center; gap: 2mm; margin-top: 3mm; color: #77776f; font-size: 7.4pt; line-height: 9pt; } .book-root .book-content .sys-bs-legend i { display: inline-block; width: 3.4mm; height: 3.4mm; border-radius: 50%; background: var(--sys-red); } .book-root .book-reading-layout :is(.sys-bs-left, .sys-bs-right) { height: 297mm; max-width: 100%; overflow-x: auto; } /* Future world-building: an infographic spread. A zero-specificity reset keeps every rule below able to set its own spacing. */ .sys-wb-left { page: stage; break-before: left; } .sys-wb-right { page: stage; break-before: right; } .book-root .book-content :is(.sys-wb-left, .sys-wb-right) { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; background: #f1f1ee; color: #111; } .book-root .book-content :is(.sys-wb-left, .sys-wb-right) :where(p, h2, h3, ul, ol, li, article, header, small, div) { margin: 0; padding: 0; border: 0; text-indent: 0; font-style: normal; text-transform: none; letter-spacing: 0; list-style: none; } .book-root .book-content .sys-wb-vertical { position: absolute; left: 14mm; bottom: 14mm; transform: rotate(-90deg); transform-origin: left bottom; white-space: nowrap; color: #111; font: 400 40pt/1 "Book Literata", Georgia, serif; letter-spacing: -.015em; } .book-root .book-content .sys-wb-left::after { content: ""; position: absolute; left: 40mm; top: 12mm; bottom: 12mm; border-left: .25mm solid #bdbdb8; } .book-root .book-content .sys-wb-main { position: absolute; top: 14mm; bottom: 12mm; display: flex; flex-direction: column; gap: 6mm; } .book-root .book-content .sys-wb-left .sys-wb-main { left: 46mm; right: 14mm; } .book-root .book-content .sys-wb-right .sys-wb-main { left: 14mm; right: 20mm; } .book-root .book-content .sys-wb-side { position: absolute; right: 8mm; top: 14mm; writing-mode: vertical-rl; color: #9a9a94; font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-wb-head > p:first-child { color: var(--sys-red); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-wb-head h3 { margin: 2mm 0; color: #111; font: 400 18pt/24pt "Book Literata", Georgia, serif; letter-spacing: -.01em; text-wrap: balance; } .book-root .book-content .sys-wb-head > p:last-child { color: #55554f; font: 400 9pt/12.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-mod { flex: none; } .book-root .book-content .sys-wb-label { display: flex; align-items: baseline; gap: 2.4mm; padding-top: 2mm; border-top: .3mm solid #111; color: #55554f; font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-wb-label b { color: var(--sys-red); font: 600 24pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; letter-spacing: -.02em; } .book-root .book-content .sys-wb-mod h3 { margin: 1.6mm 0 2mm; color: #111; font: 600 14pt/17pt "Book Barlow", Arial, sans-serif; text-wrap: balance; } .book-root .book-content .sys-wb-body { color: #2a2a27; font: 400 8.8pt/12.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8mm; align-items: start; } .book-root .book-content .sys-wb-spec { margin-top: 3mm; padding-left: 4mm; border-left: .7mm solid var(--sys-red); color: #111; font: 600 11pt/14pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-spec small { display: block; margin-bottom: 1mm; color: #77776f; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-wb-shift > div > p { color: #2a2a27; font: 600 8.4pt/10.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-track { display: block; position: relative; height: 5mm; margin: 1mm 0 3.2mm; } .book-root .book-content .sys-wb-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: .3mm solid #bdbdb8; } .book-root .book-content .sys-wb-span { position: absolute; top: 50%; height: 1mm; transform: translateY(-50%); background: var(--sys-red); opacity: .45; } .book-root .book-content .sys-wb-dot { position: absolute; top: 50%; width: 3.8mm; height: 3.8mm; transform: translate(-50%, -50%); border-radius: 50%; box-sizing: border-box; } .book-root .book-content .sys-wb-dot.is-today, .book-root .book-content .sys-wb-legend i.is-today { border: .5mm solid #111; background: #f1f1ee; } .book-root .book-content .sys-wb-dot.is-future, .book-root .book-content .sys-wb-legend i.is-future { background: var(--sys-red); } .book-root .book-content .sys-wb-legend { color: #55554f; font: 600 7.4pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-legend i { display: inline-block; width: 2.8mm; height: 2.8mm; margin: 0 1mm 0 0; border-radius: 50%; box-sizing: border-box; vertical-align: -.4mm; } .book-root .book-content .sys-wb-legend i + i, .book-root .book-content .sys-wb-legend i.is-future { margin-left: 3mm; } .book-root .book-content .sys-wb-legend em { display: block; margin-top: 1mm; color: #77776f; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; font-style: normal; } .book-root .book-content .sys-wb-flow { position: relative; display: flex; justify-content: space-between; margin: 4.5mm 0 4mm; } .book-root .book-content .sys-wb-flow::before { content: ""; position: absolute; left: 12mm; right: 12mm; top: 4mm; border-top: .45mm dotted var(--sys-red); } .book-root .book-content .sys-wb-flow li { position: relative; display: flex; flex-direction: column; align-items: center; width: 25mm; text-align: center; } .book-root .book-content .sys-wb-flow li span { display: grid; place-items: center; width: 8mm; height: 8mm; box-sizing: border-box; border: .45mm solid #111; border-radius: 50%; background: #f1f1ee; font: 600 9pt/1 "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-flow li.is-last span { border-color: var(--sys-red); background: var(--sys-red); color: #fff; } .book-root .book-content .sys-wb-flow li b { margin-top: 1.8mm; font: 600 8pt/9.8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content :is(.sys-wb-asks, .sys-wb-says) { display: grid; gap: 4mm 3mm; } .book-root .book-content .sys-wb-asks { grid-template-columns: repeat(4, 1fr); } .book-root .book-content .sys-wb-says { grid-template-columns: repeat(3, 1fr); margin-bottom: 1mm; } .book-root .book-content .sys-wb-bubble { position: relative; padding: 2.6mm 3mm 3mm; border-radius: 1.6mm; background: #1b1b1b; color: #fff; } .book-root .book-content .sys-wb-bubble::after { content: ""; position: absolute; left: 4mm; bottom: -2.2mm; border-style: solid; border-width: 2.4mm 2.2mm 0 0; border-color: #1b1b1b transparent transparent transparent; } .book-root .book-content .sys-wb-bubble span { display: block; height: 4.2mm; color: var(--sys-red); font: 400 20pt/1 "Book Literata", Georgia, serif; } .book-root .book-content .sys-wb-bubble p { color: #fff; font: 400 8.2pt/10.8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; margin: 3.4mm 0; } .book-root .book-content .sys-wb-cards > div { padding: 2.6mm 3mm 3.2mm; border-top: .8mm solid var(--sys-red); background: #e7e7e3; } .book-root .book-content .sys-wb-cards b { display: block; margin-bottom: 1.6mm; font: 600 14pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; letter-spacing: -.01em; text-transform: uppercase; } .book-root .book-content .sys-wb-cards p { color: #2a2a27; font: 400 8.6pt/11.8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-pull { margin-top: 3mm; padding-left: 4.5mm; border-left: .7mm solid var(--sys-red); color: var(--sys-red); font: 400 13pt/17pt "Book Literata", Georgia, serif; text-wrap: balance; } .book-root .book-content .sys-wb-split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8mm; } .book-root .book-content .sys-wb-split > div > p { margin-bottom: 1.4mm; font: 600 9.6pt/12pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-split .is-harm > p { color: var(--sys-red); } .book-root .book-content .sys-wb-split li { padding: 1.5mm 0; border-top: .2mm solid #cfcfc8; color: #2a2a27; font: 400 8.8pt/11.6pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-consider { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6mm; margin-top: 3mm; } .book-root .book-content .sys-wb-consider small { margin-right: 1.4mm; color: #77776f; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-wb-consider span { padding: .6mm 2.6mm; border: .3mm solid #111; border-radius: 4mm; font: 600 8pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-assume { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; } .book-root .book-content .sys-wb-assume > div { padding: 3mm; background: #1b1b1b; } .book-root .book-content .sys-wb-assume b { display: block; margin-bottom: 1.4mm; color: var(--sys-red); font: 600 20pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; } .book-root .book-content .sys-wb-assume p { color: #fff; font: 400 8.8pt/12pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-wb-stamp { margin-top: 3mm; padding: 2mm 3mm; border: .3mm dashed #77776f; color: #55554f; font: 400 7.8pt/10.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-reading-layout :is(.sys-wb-left, .sys-wb-right) { height: auto; width: auto; overflow: visible; padding: 24px; } .book-root .book-reading-layout .sys-wb-main { position: static; } .book-root .book-reading-layout .sys-wb-vertical { position: static; transform: none; margin-bottom: 18px; } /* Fill both pages: modules share the page height, and the right page (three modules) sets its type and cards larger. */ .book-root .book-content .sys-wb-main { justify-content: space-between; } .book-root .book-content .sys-wb-right .sys-wb-label { font-size: 7.6pt; line-height: 10pt; padding-top: 2.4mm; } .book-root .book-content .sys-wb-right .sys-wb-label b { font-size: 34pt; } .book-root .book-content .sys-wb-right .sys-wb-mod h3 { margin: 2.4mm 0 3mm; font-size: 19pt; line-height: 22.5pt; } .book-root .book-content .sys-wb-right .sys-wb-body { font-size: 10.4pt; line-height: 14.4pt; } .book-root .book-content .sys-wb-right .sys-wb-says { gap: 5mm 4mm; margin: 4mm 0 2mm; } .book-root .book-content .sys-wb-right .sys-wb-bubble { padding: 3.4mm 3.6mm 3.8mm; } .book-root .book-content .sys-wb-right .sys-wb-bubble span { height: 5.4mm; font-size: 26pt; } .book-root .book-content .sys-wb-right .sys-wb-bubble p { font-size: 10.2pt; line-height: 13.4pt; } .book-root .book-content .sys-wb-right .sys-wb-pull { margin-top: 5mm; font-size: 17pt; line-height: 22pt; } .book-root .book-content .sys-wb-right .sys-wb-split { margin-top: 1mm; column-gap: 10mm; } .book-root .book-content .sys-wb-right .sys-wb-split > div > p { margin-bottom: 2mm; font-size: 12pt; line-height: 15pt; } .book-root .book-content .sys-wb-right .sys-wb-split li { padding: 2.2mm 0; font-size: 10.6pt; line-height: 13.6pt; } .book-root .book-content .sys-wb-right .sys-wb-consider { margin-top: 4.5mm; gap: 2mm; } .book-root .book-content .sys-wb-right .sys-wb-consider span { padding: 1mm 3.4mm; font-size: 9.4pt; line-height: 12pt; } .book-root .book-content .sys-wb-right .sys-wb-assume { gap: 5mm; margin-top: 3mm; } .book-root .book-content .sys-wb-right .sys-wb-assume > div { padding: 4mm 3.8mm 4.4mm; } .book-root .book-content .sys-wb-right .sys-wb-assume b { margin-bottom: 2.4mm; font-size: 30pt; } .book-root .book-content .sys-wb-right .sys-wb-assume p { font-size: 10.4pt; line-height: 14pt; } .book-root .book-content .sys-wb-right .sys-wb-stamp { margin-top: 4.5mm; padding: 2.6mm 3.6mm; font-size: 8.8pt; line-height: 12pt; } /* Future board: a title and a collage of captioned scenes, dark like the world openers. */ .sys-fb-left { page: stage; break-before: left; } .sys-fb-right { page: stage; break-before: right; } .book-root .book-content :is(.sys-fb-left, .sys-fb-right) { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; background: #0a0a0a; color: #fff; } .book-root .book-content :is(.sys-fb-left, .sys-fb-right) :where(p, h2, h3, ol, li, figure, figcaption, div) { margin: 0; padding: 0; border: 0; text-indent: 0; font-style: normal; text-transform: none; letter-spacing: 0; list-style: none; } .book-root .book-content .sys-fb-head { position: absolute; left: 14mm; top: 14mm; width: 182mm; height: 78mm; } .book-root .book-content .sys-fb-kicker { color: var(--sys-red); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-fb-head h2 { margin: 2mm 0 4mm; color: #ebebe8; font: 400 30pt/34pt "Book Literata", Georgia, serif; letter-spacing: -.015em; } .book-root .book-content .sys-fb-text { max-width: 128mm; margin-bottom: 2.2mm; color: #bdbdb8; font: 400 9.4pt/13.4pt "Book Barlow", Arial, sans-serif; text-wrap: pretty; } .book-root .book-content .sys-fb-text:first-of-type { color: #fff; font-weight: 600; } .book-root .book-content .sys-fb-shot { position: absolute; display: flex; flex-direction: column; } .book-root .book-content .sys-fb-shot img { display: block; width: 100%; object-fit: cover; margin: 0; background: #1c1c1c; outline: .25mm solid #2a2a2a; outline-offset: -.25mm; } .book-root .book-content .sys-fb-shot figcaption { margin-top: 2mm; color: #a5a5a0; font: 400 7.2pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-fb-shot figcaption b { margin-right: 2mm; color: var(--sys-accent, #ec3a30); font: 600 7.6pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .06em; } .book-root .book-content .sys-fb-elements { position: absolute; left: 14mm; top: 126mm; width: 182mm; } .book-root .book-content .sys-fb-eh { padding-bottom: 2.4mm; border-bottom: .3mm solid var(--sys-accent, #ec3a30); color: #fff; font: 600 9pt/11pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-fb-elements ol { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 5mm; margin-top: 4mm; } .book-root .book-content .sys-fb-elements li b { display: block; margin-bottom: 1.4mm; color: var(--sys-accent, #ec3a30); font: 600 24pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; } .book-root .book-content .sys-fb-elements h3 { margin-bottom: 1.6mm; color: #fff; font: 600 9.2pt/11.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-fb-elements li p { color: #bdbdb8; font: 400 8pt/10.8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-fb-credit { position: absolute; left: 14mm; right: 14mm; bottom: 8mm; color: #8a8a84; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-reading-layout :is(.sys-fb-left, .sys-fb-right) { height: auto; width: auto; overflow: visible; padding: 24px; } .book-root .book-reading-layout :is(.sys-fb-head, .sys-fb-shot, .sys-fb-elements, .sys-fb-credit) { position: static; width: auto; height: auto; margin-bottom: 18px; } .book-root .book-reading-layout .sys-fb-shot img { height: auto !important; } /* 2031 poster spread: the world's rules as large numerals on a light page; a hero image, year and title word on a dark one. */ .sys-fp-left { page: stage; break-before: left; } .sys-fp-right { page: stage; break-before: right; } .book-root .book-content :is(.sys-fp-left, .sys-fp-right) { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; } .book-root .book-content .sys-fp-left { background: #f1f1ee; color: #111; } .book-root .book-content .sys-fp-right { background: #0a0a0a; color: #fff; } .book-root .book-content :is(.sys-fp-left, .sys-fp-right) :where(p, h2, h3, ol, li, article, small, div) { margin: 0; padding: 0; border: 0; text-indent: 0; font-style: normal; text-transform: none; letter-spacing: 0; list-style: none; } .book-root .book-content .sys-fp-vertical { position: absolute; left: 14mm; bottom: 14mm; transform: rotate(-90deg); transform-origin: left bottom; white-space: nowrap; color: #111; font: 400 40pt/1 "Book Literata", Georgia, serif; letter-spacing: -.015em; } .book-root .book-content .sys-fp-left::after { content: ""; position: absolute; left: 40mm; top: 12mm; bottom: 12mm; border-left: .25mm solid #bdbdb8; } .book-root .book-content .sys-fp-main { position: absolute; left: 46mm; right: 14mm; top: 14mm; bottom: 12mm; display: flex; flex-direction: column; justify-content: space-between; } .book-root .book-content .sys-fp-tag { color: var(--sys-red); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-fp-rule { display: grid; grid-template-columns: 34mm 1fr; column-gap: 4mm; padding-top: 3mm; border-top: .3mm solid #111; } .book-root .book-content .sys-fp-rule > b { color: var(--sys-red); font: 600 58pt/.82 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; letter-spacing: -.03em; } .book-root .book-content .sys-fp-rule h3 { margin-bottom: 2mm; color: #111; font: 600 17pt/19pt "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; letter-spacing: -.01em; text-transform: uppercase; } .book-root .book-content .sys-fp-rule-text { color: #2a2a27; font: 400 10.4pt/14.4pt "Book Barlow", Arial, sans-serif; text-wrap: pretty; } .book-root .book-content .sys-fp-signal { margin-top: 3.4mm; padding-top: 2mm; border-top: .2mm solid #cfcfc8; } .book-root .book-content .sys-fp-signal small { display: block; margin-bottom: 1mm; color: var(--sys-red); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-fp-signal p { color: #44443f; font: 400 8.6pt/11.8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-fp-signal a { color: inherit; text-decoration-color: var(--sys-red); } .book-root .book-content .sys-fp-note { color: #77776f; font: 400 7.2pt/9.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-fp-hero { position: absolute; left: 0; top: 0; width: 210mm; height: 110mm; overflow: hidden; } .book-root .book-content .sys-fp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; margin: 0; } .book-root .book-content .sys-fp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,.1) 55%, rgba(10,10,10,.88) 100%); } .book-root .book-content .sys-fp-tag-hero { position: absolute; z-index: 1; left: 14mm; top: 14mm; padding: 1mm 2.6mm; background: rgba(10,10,10,.72); color: #fff; } .book-root .book-content .sys-fp-year { position: absolute; z-index: 1; left: 12mm; bottom: 4mm; color: var(--sys-red); font: 600 108pt/.8 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; letter-spacing: -.04em; } .book-root .book-content .sys-fp-word { position: absolute; z-index: 1; left: 104mm; bottom: 7mm; display: flex; flex-direction: column; color: #fff; font: 600 36pt/.92 "Book Barlow", Arial, sans-serif; letter-spacing: -.01em; text-transform: uppercase; } .book-root .book-content .sys-fp-banner { position: absolute; left: 0; right: 0; top: 110mm; height: 11mm; padding: 0 14mm; display: flex; align-items: center; background: var(--sys-red); color: #fff; font: 600 11pt/1 "Book Barlow", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; } .book-root .book-content .sys-fp-sub { position: absolute; left: 14mm; right: 14mm; top: 127mm; color: #ebebe8; font: 400 13pt/17pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-fp-label { margin-bottom: 3mm; color: #a5a5a0; font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-fp-label.is-red { color: var(--sys-red); } .book-root .book-content .sys-fp-chain { position: absolute; left: 14mm; right: 14mm; top: 150mm; padding-top: 3mm; border-top: .3mm solid #3a3a38; } .book-root .book-content .sys-fp-chain ol { display: flex; align-items: baseline; justify-content: space-between; } .book-root .book-content .sys-fp-chain li { color: #fff; font: 600 22pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; letter-spacing: -.01em; text-transform: uppercase; } .book-root .book-content .sys-fp-chain li + li::before { content: "→"; margin-right: 5mm; color: var(--sys-red); font-style: normal; } .book-root .book-content .sys-fp-chain li.is-last { color: var(--sys-red); } .book-root .book-content .sys-fp-tension { position: absolute; left: 14mm; right: 14mm; top: 180mm; } .book-root .book-content .sys-fp-tension-text { max-width: 160mm; color: #fff; font: 400 19pt/24.5pt "Book Literata", Georgia, serif; letter-spacing: -.01em; text-wrap: balance; } .book-root .book-content .sys-fp-writing { position: absolute; left: 14mm; right: 14mm; top: 214mm; padding-top: 3mm; border-top: .3mm solid #3a3a38; } .book-root .book-content .sys-fp-writing h3 { margin-bottom: 3mm; color: #fff; font: 600 11pt/13pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-fp-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8mm; } .book-root .book-content .sys-fp-cols p { color: #bdbdb8; font: 400 9.2pt/12.8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-fp-cols p + p { margin-top: 2.4mm; } .book-root .book-content .sys-fp-pull { margin-top: 4mm; padding-left: 4.5mm; border-left: .7mm solid var(--sys-red); color: #fff; font: 600 11pt/14.6pt "Book Barlow", Arial, sans-serif; text-wrap: pretty; } .book-root .book-content .sys-fp-right .sys-fp-credit { left: 14mm; bottom: 4mm; max-width: 182mm; color: #77776f; } .book-root .book-reading-layout :is(.sys-fp-left, .sys-fp-right) { height: auto; width: auto; overflow: visible; padding: 24px; } .book-root .book-reading-layout :where(.sys-fp-main, .sys-fp-hero, .sys-fp-banner, .sys-fp-sub, .sys-fp-chain, .sys-fp-tension, .sys-fp-writing, .sys-fp-year, .sys-fp-word, .sys-fp-vertical) { position: static; transform: none; } /* Five columns, five letters: a dark spread in the manner of a survey report's "About" page. */ .sys-fx-left { page: stage; break-before: left; } .sys-fx-right { page: stage; break-before: right; } .book-root .book-content :is(.sys-fx-left, .sys-fx-right) { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; background: #0a0a0a; color: #fff; } .book-root .book-content :is(.sys-fx-left, .sys-fx-right) :where(p, h2, div, small, svg) { margin: 0; padding: 0; border: 0; text-indent: 0; font-style: normal; text-transform: none; letter-spacing: 0; } .book-root .book-content .sys-fx-vertical { position: absolute; left: 14mm; bottom: 14mm; transform: rotate(-90deg); transform-origin: left bottom; white-space: nowrap; color: #fff; font: 400 46pt/1 "Book Literata", Georgia, serif; letter-spacing: -.015em; } .book-root .book-content .sys-fx-left::before { content: ""; position: absolute; left: 40mm; top: 12mm; bottom: 12mm; border-left: .25mm solid #3a3a38; } .book-root .book-content .sys-fx-foot { position: absolute; left: 6mm; bottom: 14mm; transform: rotate(-90deg); transform-origin: left bottom; white-space: nowrap; color: #8a8a84; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .06em; } .book-root .book-content .sys-fx-cols { position: absolute; top: 12mm; bottom: 12mm; display: grid; } .book-root .book-content .sys-fx-cols-2 { left: 40mm; right: 0; grid-template-columns: 1fr 1fr; } .book-root .book-content .sys-fx-cols-3 { left: 0; right: 14mm; grid-template-columns: repeat(3, 1fr); } .book-root .book-content .sys-fx-col { display: flex; flex-direction: column; padding: 0 5mm; border-left: .25mm solid #3a3a38; min-width: 0; } .book-root .book-content .sys-fx-cols-3 .sys-fx-col:first-child { border-left: 0; } .book-root .book-content .sys-fx-question { margin-bottom: 3mm; color: #a5a5a0; font: 400 7.4pt/9.6pt "Book Literata", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; } .book-root .book-content .sys-fx-rule { color: #fff; font: 600 10pt/13.4pt "Book Barlow", Arial, sans-serif; text-wrap: pretty; } .book-root .book-content .sys-fx-signal { margin-top: 3mm; padding-top: 2mm; border-top: .2mm solid #3a3a38; } .book-root .book-content .sys-fx-signal small { display: block; margin-bottom: 1mm; color: var(--sys-accent, #ec3a30); font: 600 6.8pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-fx-signal p { color: #bdbdb8; font: 400 8.2pt/11pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-fx-signal a { color: inherit; text-decoration-color: var(--sys-accent, #ec3a30); } .book-root .book-content .sys-fx-body { color: #d6d6d1; font: 400 9.8pt/13.8pt "Book Barlow", Arial, sans-serif; text-wrap: pretty; } .book-root .book-content .sys-fx-side { position: absolute; right: 5mm; top: 14mm; writing-mode: vertical-rl; color: #8a8a84; font: 400 8pt/10pt "Book Literata", Georgia, serif; letter-spacing: .04em; } .book-root .book-content .sys-fx-note { position: absolute; left: 5mm; right: 20mm; bottom: 5mm; color: #77776f; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-reading-layout :is(.sys-fx-left, .sys-fx-right) { height: auto; width: auto; overflow: visible; padding: 24px; } .book-root .book-reading-layout .sys-fx-cols { position: static; display: block; } .book-root .book-reading-layout :is(.sys-fx-vertical, .sys-fx-foot, .sys-fx-side, .sys-fx-note) { position: static; transform: none; writing-mode: horizontal-tb; } /* Columns with illustrations: heading, picture, question, rule and explanation, then the signal pinned to the foot. */ .book-root .book-content .sys-fx-head { display: flex; align-items: baseline; gap: 2.4mm; padding-bottom: 2.4mm; border-bottom: .3mm solid var(--sys-accent, #ec3a30); color: #fff; font: 600 11pt/13pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-fx-head b { color: var(--sys-accent, #ec3a30); font: 600 28pt/1 "Book Barlow Italic", "Book Barlow", Arial, sans-serif; font-style: italic; letter-spacing: -.02em; } .book-root .book-content .sys-fx-image { display: block; flex: none; width: 100%; height: 70mm; margin: 2mm 0 3mm; object-fit: contain; object-position: 50% 50%; } .book-root .book-content .sys-fx-question { margin-bottom: 2mm; } .book-root .book-content .sys-fx-rule { margin-bottom: 3mm; font-size: 10.6pt; line-height: 14pt; } .book-root .book-content .sys-fx-signal { margin-top: auto; } .book-root .book-content .sys-fx-signal p { font-size: 8.4pt; line-height: 11.4pt; } .book-root .book-content .sys-fx-head { font-size: 12pt; line-height: 14pt; padding-bottom: 3mm; } .book-root .book-content .sys-fx-head b { font-size: 32pt; } .book-root .book-content .sys-fx-image { height: 66mm; margin: 4mm 0 5mm; } .book-root .book-content .sys-fx-question { margin-bottom: 2.6mm; font-size: 8.4pt; line-height: 11pt; } .book-root .book-content .sys-fx-rule { margin-bottom: 4mm; font-size: 12.6pt; line-height: 16.6pt; } .book-root .book-content .sys-fx-body { font-size: 10.8pt; line-height: 15.2pt; } .book-root .book-content .sys-fx-signal { padding-top: 2.6mm; } .book-root .book-content .sys-fx-signal small { font-size: 7.2pt; line-height: 9.4pt; margin-bottom: 1.4mm; } .book-root .book-content .sys-fx-signal p { font-size: 9.2pt; line-height: 12.6pt; } .book-root .book-content .sys-fx-col { justify-content: space-between; } .book-root .book-content .sys-fx-image { width: calc(100% + 8mm); height: 88mm; margin: 0 -4mm; transform: scale(1.2); transform-origin: 50% 50%; } .book-root .book-content .sys-fx-signal { margin-top: 0; } .book-root .book-content .sys-fx-text { height: 82mm; } .book-root .book-content .sys-fx-signal { height: 30mm; } /* Concept cards: dark poster-style cards stepping up the spread. */ .sys-cc-left { page: stage; break-before: left; } .sys-cc-right { page: stage; break-before: right; } .book-root .book-content :is(.sys-cc-left, .sys-cc-right) { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; background: #050505; color: #fff; } .book-root .book-content :is(.sys-cc-left, .sys-cc-right) :where(p, h2, h3, article, div) { margin: 0; padding: 0; border: 0; text-indent: 0; font-style: normal; text-transform: none; letter-spacing: 0; } .book-root .book-content .sys-cc-head { position: absolute; left: 22mm; top: 16mm; width: 160mm; } .book-root .book-content .sys-cc-kicker { color: var(--sys-red); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-cc-head h2 { margin: 2mm 0 5mm; color: #ebebe8; font: 400 30pt/34pt "Book Literata", Georgia, serif; letter-spacing: -.015em; } .book-root .book-content .sys-cc-text { max-width: 132mm; margin-bottom: 3mm; color: #bdbdb8; font: 400 11pt/15.4pt "Book Barlow", Arial, sans-serif; text-wrap: pretty; } .book-root .book-content .sys-cc-text:first-of-type { color: #fff; font-weight: 600; } .book-root .book-content .sys-cc-card { position: absolute; width: 88mm; height: 140mm; box-sizing: border-box; padding: 5mm; background: #101010; outline: .25mm solid #222; outline-offset: -.25mm; } .book-root .book-content .sys-cc-card img { display: block; width: 100%; height: 80mm; object-fit: cover; margin: 0; } .book-root .book-content .sys-cc-card h3 { margin-top: 5mm; color: #fff; font: 600 16pt/19pt "Book Barlow", Arial, sans-serif; letter-spacing: -.005em; } .book-root .book-content .sys-cc-card p { margin-top: 2.4mm; width: 64mm; color: #a5a5a0; font: 400 9.2pt/12.8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-cc-mark { position: absolute; right: 5mm; bottom: 5mm; display: grid; place-items: center; width: 10mm; height: 10mm; box-sizing: border-box; border: .4mm solid #8a8a84; border-radius: 50%; color: #d6d6d1; font: 600 8pt/1 "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-cc-card.is-chosen { outline-color: var(--sys-accent, #ec3a30); } .book-root .book-content .sys-cc-card.is-chosen .sys-cc-mark { border-color: var(--sys-red); background: var(--sys-red); color: #fff; font-size: 10pt; } .book-root .book-content .sys-cc-flag { position: absolute; right: 18mm; bottom: 8.4mm; color: var(--sys-accent, #ec3a30); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-cc-aside { position: absolute; left: 14mm; top: 16mm; } .book-root .book-content .sys-cc-next { position: absolute; left: 106mm; top: 206mm; width: 88mm; padding-left: 4.5mm; border-left: .7mm solid var(--sys-red); color: #fff; font: 400 11.5pt/16pt "Book Literata", Georgia, serif; text-wrap: pretty; } .book-root .book-content .sys-cc-credit { position: absolute; left: 14mm; right: 14mm; bottom: 8mm; color: #77776f; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-reading-layout :is(.sys-cc-left, .sys-cc-right) { height: auto; width: auto; overflow: visible; padding: 24px; } .book-root .book-reading-layout :is(.sys-cc-head, .sys-cc-card, .sys-cc-aside, .sys-cc-next, .sys-cc-credit) { position: static; width: auto; height: auto; margin-bottom: 18px; } /* Four cards with more to say: form, a one-line summary, how it works and the tension it raises. */ .book-root .book-content .sys-cc-card { width: 88mm; height: 160mm; padding: 5mm; } .book-root .book-content .sys-cc-pic { position: relative; } .book-root .book-content .sys-cc-pic img { display: block; width: 100%; height: 58mm; object-fit: cover; margin: 0; } .book-root .book-content .sys-cc-card .sys-cc-mark { right: 3mm; top: 3mm; bottom: auto; background: rgba(5,5,5,.7); } .book-root .book-content .sys-cc-card.is-chosen .sys-cc-mark { background: var(--sys-red); } .book-root .book-content .sys-cc-card .sys-cc-flag { left: 3mm; top: 3mm; right: auto; bottom: auto; padding: 1mm 2.4mm; background: var(--sys-red); color: #fff; } .book-root .book-content .sys-cc-form { margin-top: 4mm; color: var(--sys-accent, #ec3a30); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-cc-card h3 { margin-top: 1.4mm; font-size: 16pt; line-height: 19pt; } .book-root .book-content .sys-cc-card p.sys-cc-line { width: auto; margin-top: 1.6mm; color: #d6d6d1; font: 400 9.2pt/12.6pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-cc-card dl { margin: 3.4mm 0 0; padding: 0; border-top: .2mm solid #2a2a2a; } .book-root .book-content .sys-cc-card dl > div { padding-top: 2mm; } .book-root .book-content .sys-cc-card dt { color: #77776f; font: 600 6.8pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .book-root .book-content .sys-cc-card dd { margin: .6mm 0 0; padding: 0; color: #a5a5a0; font: 400 8.4pt/11.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-cc-next { left: 108mm; top: 196mm; } .book-root .book-content .sys-cc-card { height: 142mm; } .book-root .book-content .sys-cc-pic img { height: 60mm; } .book-root .book-content .sys-cc-card p.sys-cc-line { font-size: 10pt; line-height: 13.8pt; } .book-root .book-content .sys-cc-card dt { font-size: 7pt; } .book-root .book-content .sys-cc-card dd { font-size: 9pt; line-height: 12.4pt; } .book-root .book-content .sys-cc-next { top: 180mm; } .book-root .book-content .sys-cc-card { height: 132mm; } .book-root .book-content .sys-cc-next { top: 182mm; } /* Iteration spreads: one step of development as a visual journal page, with the real prototypes on a board. */ /* Journal pages: a free 420 x 297 mm canvas on pure white, drawn once per page of the spread. */ @font-face { font-family: "Journal Inter"; src: url("/publications/fonts/journal-inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: block; } @font-face { font-family: "Journal Mono"; src: url("/publications/fonts/journal-jetbrains-mono-latin-wght.woff2") format("woff2"); font-weight: 100 800; font-display: block; } @font-face { font-family: "Journal Nunito"; src: url("/publications/fonts/journal-nunito-sans-regular.woff2") format("woff2"); font-weight: 400; font-display: block; } @font-face { font-family: "Journal Nunito"; src: url("/publications/fonts/journal-nunito-sans-bold.woff2") format("woff2"); font-weight: 700; font-display: block; } @font-face { font-family: "Journal Archivo"; src: url("/publications/fonts/journal-archivo-latin-wdth-wght.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: block; } @font-face { font-family: "Journal Public Sans"; src: url("/publications/fonts/journal-public-sans-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: block; } .sys-jr-left { page: stage; break-before: left; } .sys-jr-right { page: stage; break-before: right; } .book-root .book-content :is(.sys-jr-left, .sys-jr-right) { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; box-sizing: border-box; background: #050505; color: #f5f5f5; } .book-root .book-content .jr-canvas { position: absolute; top: 0; width: 420mm; height: 297mm; } .book-root .book-content .jr-canvas :where(p, h3, h4, div, figure, figcaption, ol, ul, li, small) { margin: 0; padding: 0; border: 0; text-indent: 0; font-style: normal; text-transform: none; letter-spacing: 0; list-style: none; } .book-root .book-content .jr-title { position: absolute; padding-bottom: 2mm; border-bottom: .3mm solid #E5FE40; color: #E5FE40; font: 600 32pt/34pt "Book Barlow", Arial, sans-serif; letter-spacing: -.005em; } .book-root .book-content .jr-text { position: absolute; color: #c9c9c4; } .book-root .book-content .jr-text p { margin-bottom: 2.8mm; font: 400 10pt/14pt "Book Barlow", Arial, sans-serif; text-wrap: pretty; break-inside: avoid-column; } .book-root .book-content .jr-text-s p { font-size: 8.6pt; line-height: 12pt; } .book-root .book-content .jr-text-l p { font-size: 11.4pt; line-height: 16pt; } .book-root .book-content .jr-text b { font-weight: 600; color: #f5f5f5; } .book-root .book-content .jr-img { position: absolute; overflow: hidden; } .book-root .book-content .jr-img img { display: block; width: 100%; height: 100%; margin: 0; } .book-root .book-content .jr-img.has-line img { outline: .25mm solid #2a2a2a; outline-offset: -.25mm; } .book-root .book-content .jr-img figcaption { position: absolute; left: 0; right: 0; bottom: -6mm; color: #8a8a84; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .jr-frame { position: absolute; box-sizing: border-box; border: .3mm dotted rgba(229, 254, 64, .45); } .book-root .book-content .jr-line { position: absolute; border-top: .3mm solid #E5FE40; } .book-root .book-content .jr-node { position: absolute; } .book-root .book-content .jr-tag { position: absolute; color: #8a8a84; font: 400 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .book-root .book-content .jr-folio { position: absolute; left: 14mm; bottom: 8mm; color: #E5FE40; font: 600 9pt/1 "Book Barlow", Arial, sans-serif; letter-spacing: .06em; } .book-root .book-reading-layout .sys-jr-left { height: 297mm; width: 420mm; max-width: 100%; overflow-x: auto; overflow-y: hidden; } .book-root .book-reading-layout .sys-jr-right { display: none; } .book-root .book-content .jr-folio-r { left: auto; right: 14mm; } /* Civic Score journal: set in the Civic identity (hazy grey ground, ink type, light purple only for data and accents). */ .book-root .book-content :is(.sys-jr-left, .sys-jr-right).jr-world-civic { background: #DCDDDE; color: #25282C; } .book-root .book-content .jr-world-civic .jr-title { color: #25282C; border-bottom-color: #8C72E8; font-weight: 500; } .book-root .book-content .jr-world-civic .jr-text { color: #4A4D52; } .book-root .book-content .jr-world-civic .jr-text b { color: #25282C; } .book-root .book-content .jr-world-civic .jr-img.has-line img { outline-color: rgba(37, 40, 44, .1); } .book-root .book-content .jr-world-civic .jr-img figcaption { color: #6C6F74; } .book-root .book-content .jr-world-civic .jr-frame { border-color: rgba(140, 114, 232, .55); } .book-root .book-content .jr-world-civic .jr-line { border-top-color: #8C72E8; } .book-root .book-content .jr-world-civic .jr-tag { color: #6C6F74; } .book-root .book-content .jr-world-civic .jr-folio { color: #8C72E8; } /* AI Senior journal: set like the Week 10 desktop senior rather than the report. JetBrains Mono for titles, labels and numbers as on an instrument panel, Inter for prose, hairline #222 rules, hazard yellow for the one marker, and the voice orb's yellow as the glow behind the parts. */ .book-root .book-content :is(.sys-jr-left, .sys-jr-right).jr-world-ai-senior { --jr-sans: "Journal Inter"; --jr-glow: 229 254 64; --jr-tile-top: #121308; --jr-tile-bottom: #0a0a07; background: #050505; } .book-root .book-content .jr-world-ai-senior .jr-title { padding: 0 0 2.4mm; border-bottom: .3mm solid #222; color: #F5F5F5; font: 600 24pt/30pt "Journal Mono", monospace; letter-spacing: -.035em; } .book-root .book-content .jr-world-ai-senior .jr-title::before { content: ""; display: inline-block; width: 2.6mm; height: 2.6mm; margin: 0 3mm .9mm 0; background: #E5FE40; vertical-align: middle; } .book-root .book-content .jr-world-ai-senior .jr-text { color: #9CA3AF; } .book-root .book-content .jr-world-ai-senior .jr-text p { font: 400 9.4pt/13.6pt "Journal Inter", Arial, sans-serif; letter-spacing: -.005em; } .book-root .book-content .jr-world-ai-senior .jr-text-s p { font-size: 8pt; line-height: 11.6pt; } .book-root .book-content .jr-world-ai-senior .jr-text-l p { font-size: 10.6pt; line-height: 15pt; } .book-root .book-content .jr-world-ai-senior .jr-text b { color: #F5F5F5; font-weight: 600; } .book-root .book-content .jr-world-ai-senior .jr-img.has-line img { outline-color: #222; } .book-root .book-content .jr-world-ai-senior .jr-img figcaption { color: #6B7280; font: 500 6.2pt/8pt "Journal Mono", monospace; letter-spacing: .06em; text-transform: uppercase; } .book-root .book-content .jr-world-ai-senior .jr-frame { border: .3mm dashed rgba(229, 254, 64, .45); } .book-root .book-content .jr-world-ai-senior .jr-line { border-top-color: #222; } .book-root .book-content .jr-world-ai-senior .jr-tag { color: #6B7280; font: 500 6.2pt/8pt "Journal Mono", monospace; letter-spacing: .1em; } .book-root .book-content .jr-world-ai-senior .jr-folio { color: #E5FE40; font: 600 7.4pt/1 "Journal Mono", monospace; letter-spacing: .12em; text-transform: uppercase; } /* Civic Score intro pages, set in the Civic identity rather than the report's black and red: hazy grey ground, ink type, soft geometric headlines, and light purple wherever the report uses red. */ .book-root .book-content [data-book-section*="civic"] { --sys-red: #8C72E8; background: #DCDDDE; color: #25282C; } /* opener: the hazy portrait fades into the ground */ .book-root .book-content [data-book-section*="civic"] .sys-opener-fade { background: linear-gradient(180deg, #DCDDDE 0%, rgba(220,221,222,0) 38%), linear-gradient(270deg, #DCDDDE 0%, rgba(220,221,222,0) 26%); } .book-root .book-content [data-book-section*="civic"] :is(.sys-opener-statement, .sys-opener-side, .sys-opener-block h3) { color: #25282C; } .book-root .book-content [data-book-section*="civic"] .sys-opener-statement { font: 400 27pt/33pt "Book Barlow", Arial, sans-serif; letter-spacing: -.015em; } .book-root .book-content [data-book-section*="civic"] .sys-opener-head .sys-opener-sub { color: #6C6F74; } .book-root .book-content [data-book-section*="civic"] .sys-opener-block p { color: #4A4D52; } .book-root .book-content [data-book-section*="civic"] .sys-opener-block-4 p { color: #8C72E8; font: 500 12pt/15.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content [data-book-section*="civic"] .sys-opener-word { color: #25282C; font-weight: 500; } .book-root .book-content [data-book-section*="civic"] .sys-opener-credit { color: #6C6F74; } /* signal */ .book-root .book-content [data-book-section*="civic"] .sys-sig-nav span.is-current { color: #25282C; } /* interpretation */ .book-root .book-content [data-book-section*="civic"] .sys-int-vertical { color: #C4C5C8; font-family: "Book Barlow", Arial, sans-serif; font-weight: 300; } .book-root .book-content [data-book-section*="civic"] .sys-int-statement { font: 400 16pt/21.5pt "Book Barlow", Arial, sans-serif; color: #25282C; } .book-root .book-content [data-book-section*="civic"] .sys-int-body p { color: #4A4D52; } /* brainstorm */ .book-root .book-content [data-book-section*="civic"] :is(.sys-bs-hub, .sys-bs-sat) { background: #DCDDDE; border-color: #8C72E8; } .book-root .book-content [data-book-section*="civic"] .sys-bs-hub.is-chosen { background: #8C72E8; } .book-root .book-content [data-book-section*="civic"] .sys-bs-head p:last-child, .book-root .book-content [data-book-section*="civic"] .sys-bs-caption p { color: #4A4D52; } .book-root .book-content [data-book-section*="civic"] .sys-bs-caption h2 { color: #25282C; border-bottom-color: #8C72E8; font-weight: 500; } .book-root .book-content [data-book-section*="civic"] .sys-bs-key p:last-child { color: #8C72E8; font: 500 12pt/16pt "Book Barlow", Arial, sans-serif; } /* future board */ .book-root .book-content [data-book-section*="civic"] .sys-fb-head h2, .book-root .book-content [data-book-section*="civic"] .sys-cc-head h2 { color: #25282C; font: 400 30pt/34pt "Book Barlow", Arial, sans-serif; letter-spacing: -.02em; } .book-root .book-content [data-book-section*="civic"] .sys-fb-text, .book-root .book-content [data-book-section*="civic"] .sys-cc-text { color: #4A4D52; } .book-root .book-content [data-book-section*="civic"] .sys-fb-text:first-of-type, .book-root .book-content [data-book-section*="civic"] .sys-cc-text:first-of-type { color: #25282C; } .book-root .book-content [data-book-section*="civic"] .sys-fb-shot img { background: #CFD0D2; outline-color: rgba(37,40,44,.1); } .book-root .book-content [data-book-section*="civic"] .sys-fb-shot figcaption { color: #6C6F74; } .book-root .book-content [data-book-section*="civic"] .sys-fb-shot figcaption b, .book-root .book-content [data-book-section*="civic"] .sys-fb-elements li b { color: #8C72E8; } .book-root .book-content [data-book-section*="civic"] .sys-fb-eh { color: #25282C; border-bottom-color: #8C72E8; } .book-root .book-content [data-book-section*="civic"] .sys-fb-elements h3 { color: #25282C; } .book-root .book-content [data-book-section*="civic"] .sys-fb-elements li p { color: #4A4D52; } .book-root .book-content [data-book-section*="civic"] :is(.sys-fb-credit, .sys-cc-credit, .sys-fx-note, .sys-fx-foot, .sys-fx-side) { color: #6C6F74; } /* future proof */ .book-root .book-content [data-book-section*="civic"] .sys-fx-vertical { color: #25282C; font-family: "Book Barlow", Arial, sans-serif; font-weight: 300; } .book-root .book-content [data-book-section*="civic"] .sys-fx-left::before, .book-root .book-content [data-book-section*="civic"] .sys-fx-col { border-left-color: rgba(37,40,44,.16); } .book-root .book-content [data-book-section*="civic"] .sys-fx-question { color: #6C6F74; font-family: "Book Barlow", Arial, sans-serif; } .book-root .book-content [data-book-section*="civic"] .sys-fx-rule { color: #25282C; } .book-root .book-content [data-book-section*="civic"] .sys-fx-body { color: #4A4D52; } .book-root .book-content [data-book-section*="civic"] .sys-fx-signal { border-top-color: rgba(37,40,44,.16); } .book-root .book-content [data-book-section*="civic"] .sys-fx-signal small, .book-root .book-content [data-book-section*="civic"] .sys-fx-head b { color: #8C72E8; } .book-root .book-content [data-book-section*="civic"] .sys-fx-signal p { color: #4A4D52; } .book-root .book-content [data-book-section*="civic"] .sys-fx-signal a { text-decoration-color: #8C72E8; } .book-root .book-content [data-book-section*="civic"] .sys-fx-head { color: #25282C; border-bottom-color: #8C72E8; } /* concept cards */ .book-root .book-content [data-book-section*="civic"] .sys-cc-card { background: #F3F3F4; outline-color: rgba(37,40,44,.12); } .book-root .book-content [data-book-section*="civic"] .sys-cc-card.is-chosen { outline-color: #8C72E8; } .book-root .book-content [data-book-section*="civic"] .sys-cc-card h3 { color: #25282C; } .book-root .book-content [data-book-section*="civic"] .sys-cc-card p, .book-root .book-content [data-book-section*="civic"] .sys-cc-card dd { color: #4A4D52; } .book-root .book-content [data-book-section*="civic"] .sys-cc-card p.sys-cc-line { color: #25282C; } .book-root .book-content [data-book-section*="civic"] .sys-cc-card dl { border-top-color: rgba(37,40,44,.12); } .book-root .book-content [data-book-section*="civic"] .sys-cc-card dt { color: #6C6F74; } .book-root .book-content [data-book-section*="civic"] :is(.sys-cc-form, .sys-cc-flag) { color: #8C72E8; } .book-root .book-content [data-book-section*="civic"] .sys-cc-card .sys-cc-flag { color: #fff; } .book-root .book-content [data-book-section*="civic"] .sys-cc-mark { border-color: #9EA1A5; color: #25282C; } .book-root .book-content [data-book-section*="civic"] .sys-cc-card .sys-cc-mark { background: rgba(255,255,255,.75); } .book-root .book-content [data-book-section*="civic"] .sys-cc-card.is-chosen .sys-cc-mark { color: #fff; } .book-root .book-content [data-book-section*="civic"] .sys-cc-next { color: #25282C; font: 500 11.5pt/16pt "Book Barlow", Arial, sans-serif; } .book-root .book-content [data-book-section*="civic"] .sys-story-block p { color: #4A4D52; } .book-root .book-content [data-book-section*="civic"] .sys-story-block :is(b, h3) { color: #25282C; } .book-root .book-content [data-book-section*="civic"] .sys-story-block p.sys-story-red { color: #8C72E8; font: 500 13pt/17pt "Book Barlow", Arial, sans-serif; } /* the 3D icons are drawn on white: multiply them into the hazy ground so they sit on the page, not in boxes */ .book-root .book-content [data-book-section*="civic"] .sys-fx-image { mix-blend-mode: multiply; } .book-root .book-content .jr-world-civic .jr-img img[src*="/proof/"] { mix-blend-mode: multiply; } /* The spine: one idea, eight questions (left); the HMW at each stage (right). */ .book-root .book-content .sys-spine-left .sys-heading { height: auto; } .book-root .book-content .sys-spine-idea { margin-top: 4mm !important; max-width: 160mm; color: var(--sys-red); font: 400 15pt/20pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-spine-lead { margin: 5mm 0 4mm !important; max-width: 140mm; color: var(--sys-grey); font: 400 9pt/12pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-spine-rows { border-top: .3mm solid var(--sys-ink); } .book-root .book-content .sys-spine-row { display: grid; grid-template-columns: 8mm 40mm 1fr 30mm; column-gap: var(--sys-gap); align-items: baseline; padding: 3.1mm 0; border-bottom: .2mm solid var(--sys-rule); } .book-root .book-content .sys-spine-index { color: var(--sys-red); font: 400 8pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-spine-world { font: 400 10pt/12pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-spine-world small { display: block; margin-top: .8mm; color: var(--sys-grey); font-size: 7.5pt; line-height: 9pt; } .book-root .book-content .sys-spine-question { font: 400 11.5pt/14.5pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-spine-scale { color: var(--sys-grey); font: 400 8.5pt/11pt "Book Barlow", Arial, sans-serif; text-align: right; } .book-root .book-content .sys-spine-scale b { display: block; margin-top: .8mm; color: var(--sys-red); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; } .book-root .book-content .sys-spine-heading { height: 16mm; } .book-root .book-content .sys-spine-hmws { border-top: .3mm solid var(--sys-ink); } .book-root .book-content .sys-spine-hmws li { padding: 3mm 0 3.2mm; border-bottom: .2mm solid var(--sys-rule); } .book-root .book-content .sys-spine-label { margin-bottom: 1.2mm !important; color: var(--sys-red); font: 600 7.2pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .book-root .book-content .sys-spine-hmw { font: 400 10pt/13pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-spine-changed { margin-top: 1.4mm !important; color: var(--sys-grey); font: 400 8.5pt/11pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-spine-changed b { margin-right: 1.8mm; color: var(--sys-ink); font: 600 7pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .book-root .book-content .sys-spine-foot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 8mm; padding-top: 3mm; border-top: .3mm solid var(--sys-ink); font: 400 9pt/12.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-spine-foot span { margin-left: 2mm; color: var(--sys-red); font-size: 8pt; } /* How people met each world: seven exhibit formats read across the spread. */ .book-root .book-content .sys-exhibit { display: grid; grid-template-rows: 52mm 13mm repeat(7, 25.5mm) 1fr; } .book-root .book-content .sys-exhibit-head { grid-row: 2; display: grid; column-gap: var(--sys-gap); align-items: end; padding-bottom: 2mm; border-bottom: .3mm solid var(--sys-ink); } .book-root .book-content .sys-exhibit-head p { display: flex; flex-wrap: wrap; } .book-root .book-content .sys-exhibit-head b { color: var(--sys-red); font: 600 8pt/10pt "Book Barlow", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .book-root .book-content .sys-exhibit-head span { flex-basis: 100%; color: var(--sys-grey); font-size: 8pt; line-height: 10pt; } .book-root .book-content .sys-exhibit-rows { display: contents; } .book-root .book-content .sys-exhibit-row { display: grid; column-gap: var(--sys-gap); padding: 2.5mm 0; border-bottom: .2mm solid var(--sys-rule); font: 400 9pt/11.8pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-exhibit-left .sys-exhibit-head { grid-template-columns: var(--sys-m1) 1fr; } .book-root .book-content .sys-exhibit-left .sys-exhibit-row { grid-template-columns: var(--sys-m1) 1fr; } .book-root .book-content .sys-exhibit-right .sys-exhibit-head { grid-template-columns: 1fr var(--sys-m2); } .book-root .book-content .sys-exhibit-right .sys-exhibit-row { grid-template-columns: 1fr var(--sys-m2); } .book-root .book-content .sys-exhibit-row h3 { font-size: 11pt; line-height: 13pt; } .book-root .book-content .sys-exhibit-next { color: var(--sys-red); font: 400 10.5pt/13.5pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-exhibit-statement { max-width: 150mm; margin-top: 2mm !important; color: var(--sys-ink); font: 400 20pt/26pt "Book Literata", Georgia, serif; } /* The turn that ends every world: tested and heard (left); changed, still open, why I moved on, the next question (right). */ .book-root .book-content .sys-turn-heading { height: auto; margin-bottom: 7mm; } .book-root .book-content .sys-turn-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 9mm; } .book-root .book-content .sys-turn-label { margin: 5mm 0 2mm !important; color: var(--sys-red); font: 600 7.5pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-turn-grid .sys-turn-label:first-child { margin-top: 0 !important; } .book-root .book-content .sys-turn-body { font: 400 9.5pt/13pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-turn-list li { padding: 1.4mm 0; border-bottom: .2mm solid var(--sys-rule); font: 400 9pt/11.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-turn-heard li { margin-bottom: 2.6mm; color: var(--sys-red); font: 400 12pt/15.5pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-turn-note { margin-top: 2mm !important; color: var(--sys-grey); font: 400 7.5pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-turn-figure { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; } .book-root .book-content .sys-turn-figure img { display: block; width: 100%; height: 104mm; object-fit: cover; } .book-root .book-content .sys-turn-figure figcaption { margin-top: 2mm; color: var(--sys-grey); font: 400 7.5pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-turn-figure .sys-tag { margin-right: 2mm; } .book-root .book-content .sys-turn-changed li { display: grid; grid-template-columns: 9mm 1fr; padding: 2mm 0; border-top: .2mm solid var(--sys-rule); font: 400 10.5pt/13.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-turn-changed li span { color: var(--sys-red); font-size: 8pt; } .book-root .book-content .sys-turn-open { color: var(--sys-grey); } .book-root .book-content .sys-turn-moved { padding-left: 5mm; border-left: .6mm solid var(--sys-red); font: 400 16pt/22pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-turn-next { position: absolute; left: 0; right: 0; bottom: 0; padding: 7mm 8mm 8mm; background: var(--sys-dark); color: #fff; } .book-root .book-content .sys-turn-next-label { display: flex; justify-content: space-between; margin-bottom: 3mm !important; color: var(--sys-red); font: 600 7.5pt/9pt "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-turn-next-label span { color: #fff; letter-spacing: .04em; text-transform: none; font-weight: 400; } .book-root .book-content .sys-turn-next-q { color: #fff; font: 400 18pt/24pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-turn-next-start { margin-top: 4mm !important; padding-top: 3.4mm; border-top: .3mm solid rgba(255,255,255,.18); color: #d6d6d1; font: 400 9.2pt/13pt "Book Barlow", Arial, sans-serif; } /* Civic's turn spread, set in the Civic identity so it reads on from the journal: full-bleed hazy grey, violet for the report's red, the soft sans in place of the serif, and an ink panel for the next question. */ .sys-turn-left.sys-turn-world-civic { page: stage; break-before: left; } .sys-turn-right.sys-turn-world-civic { page: stage; break-before: right; } .book-root .book-content .sys-page.sys-turn-world-civic { width: 210mm; height: 297mm; box-sizing: border-box; padding: 22mm 22mm 24mm 22mm; background: #DCDDDE; color: #25282C; --sys-red: #8C72E8; --sys-ink: #25282C; --sys-grey: #6C6F74; --sys-rule: rgba(37, 40, 44, .16); --sys-dark: #25282C; } .book-root .book-content .sys-turn-world-civic .sys-kicker { color: #6C6F74; font: 600 7pt/1 "Book Barlow", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .book-root .book-content .sys-turn-world-civic .sys-heading h2 { max-width: none; padding-bottom: 2mm; border-bottom: .3mm solid #8C72E8; color: #25282C; font: 500 30pt/33pt "Book Barlow", Arial, sans-serif; letter-spacing: -.005em; } .book-root .book-content .sys-turn-world-civic .sys-turn-label { color: #8C72E8; } .book-root .book-content .sys-turn-world-civic .sys-turn-body { color: #4A4D52; } .book-root .book-content .sys-turn-world-civic .sys-turn-heard li { color: #8C72E8; font: 500 13pt/17pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-turn-world-civic .sys-turn-figure { left: 22mm; right: 22mm; bottom: 24mm; } .book-root .book-content .sys-turn-world-civic .sys-turn-figure img { border-radius: 3mm; } .book-root .book-content .sys-turn-world-civic .sys-turn-changed li { color: #25282C; } .book-root .book-content .sys-turn-world-civic .sys-turn-moved { border-left-color: #8C72E8; color: #25282C; font: 500 16pt/21pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-turn-world-civic .sys-turn-next { left: 22mm; right: 22mm; bottom: 24mm; border-radius: 3mm; background: #25282C; } .book-root .book-content .sys-turn-world-civic .sys-turn-next-label { color: #B9A6F2; } .book-root .book-content .sys-turn-world-civic .sys-turn-next-q { font: 400 17pt/22pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-turn-world-civic::after { position: absolute; bottom: 8mm; color: #8C72E8; font: 600 9pt/1 "Book Barlow", Arial, sans-serif; letter-spacing: .06em; content: "Civic Score · The turn"; } .book-root .book-content .sys-turn-left.sys-turn-world-civic::after { left: 14mm; } .book-root .book-content .sys-turn-right.sys-turn-world-civic::after { right: 14mm; } /* Part divider: the dark title page on the left, the worlds it holds on the right ------------------------------------ */ .book-root .book-content .book-part { break-before: left; } .book-root .book-content .sys-part-heading { height: auto; margin-bottom: 10mm; } .book-root .book-content .sys-part-heading h2 { font: 300 30pt/34pt "Book Barlow", Arial, sans-serif; letter-spacing: -.01em; } .book-root .book-content .sys-part-rows { display: grid; gap: 9mm; } .book-root .book-content .sys-part-row { display: grid; grid-template-columns: 62mm 1fr; column-gap: 7mm; padding-top: 5mm; border-top: .25mm solid var(--sys-ink); } .book-root .book-content .sys-part-row img { display: block; width: 62mm; height: 44mm; object-fit: cover; } .book-root .book-content .sys-part-meta { display: flex; justify-content: space-between; color: var(--sys-red); font: 400 8pt/10pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-part-meta span { color: var(--sys-grey); } .book-root .book-content .sys-part-row h3 { margin: 2mm 0 3mm !important; font: 400 20pt/23pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-part-whatif { font: 400 11pt/15pt "Book Literata", Georgia, serif; } .book-root .book-content .sys-part-artefact { margin-top: 3mm !important; color: var(--sys-grey); font: 400 8.5pt/11.5pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .sys-part-artefact .sys-page-ref { color: var(--sys-red); text-decoration: none; white-space: nowrap; } /* Perfect World journal: set in the posters' identity. Black ground, warm off-white type, heavy italic capitals for titles, mono labels, and one thin signal-red line as the guide's only mark. */ .book-root .book-content :is(.sys-jr-left, .sys-jr-right).jr-world-perfect-world { background: #0A0A0A; color: #EDE8DF; } .book-root .book-content .jr-world-perfect-world .jr-title { padding-bottom: 2.4mm; border-bottom: .3mm solid #E10600; color: #EDE8DF; font: 600 25pt/27pt "Book Barlow Italic", Arial, sans-serif; letter-spacing: -.01em; text-transform: uppercase; } .book-root .book-content .jr-world-perfect-world .jr-text { color: #B9B3A8; } .book-root .book-content .jr-world-perfect-world .jr-text p { font: 400 9.4pt/13.4pt "Book Barlow", Arial, sans-serif; } .book-root .book-content .jr-world-perfect-world .jr-text-s p { font-size: 8pt; line-height: 11.4pt; } .book-root .book-content .jr-world-perfect-world .jr-text b { color: #EDE8DF; } .book-root .book-content .jr-world-perfect-world .jr-img { border-radius: .8mm; } .book-root .book-content .jr-world-perfect-world .jr-img.has-line img { outline-color: #2C2A27; } .book-root .book-content .jr-world-perfect-world .jr-img figcaption { color: #857E73; } .book-root .book-content .jr-world-perfect-world .jr-frame { border: .3mm dashed rgba(225, 6, 0, .5); } .book-root .book-content .jr-world-perfect-world .jr-line { border-top-color: #E10600; } .book-root .book-content .jr-world-perfect-world .jr-tag { color: #857E73; font: 500 5.8pt/8pt "Journal Mono", monospace; letter-spacing: .1em; } .book-root .book-content .jr-world-perfect-world .jr-folio { color: #E10600; font: 600 8pt/1 "Book Barlow Italic", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } /* Perfect World's world-building boards: a pale drawing ground with grey linework, signal red and planting green. */ .book-root .book-content :is(.sys-jr-left, .sys-jr-right).jr-world-perfect-world.jr-light { background: #EEEDEA; color: #2B2B2B; } .book-root .book-content .jr-world-perfect-world.jr-light .jr-title { color: #2B2B2B; border-bottom-color: #D6544B; font: 700 24pt/26pt "Book Barlow", Arial, sans-serif; text-transform: none; letter-spacing: -.01em; } .book-root .book-content .jr-world-perfect-world.jr-light .jr-text { color: #55524E; } .book-root .book-content .jr-world-perfect-world.jr-light .jr-text b { color: #2B2B2B; } .book-root .book-content .jr-world-perfect-world.jr-light .jr-text-l p { color: #3A3835; } .book-root .book-content .jr-world-perfect-world.jr-light .jr-tag { color: #8C8882; } .book-root .book-content .jr-world-perfect-world.jr-light .jr-img.has-line img { outline-color: rgba(43, 43, 43, .12); } .book-root .book-content .jr-world-perfect-world.jr-light .jr-folio { color: #D6544B; } .book-root .book-content .jr-world-perfect-world .jr-text-l p { font-size: 11.4pt; line-height: 16pt; color: #EDE8DF; } /* Perfect World's future-proof icons are rendered on pure black; lighten drops that square into the page. */ /* Perfect World’s columns are photographs, so they fill their frame rather than float as glass on black. */ .book-root .book-content [data-book-section*="futureproof-perfect-world"] .sys-fx-image { mix-blend-mode: normal; object-fit: cover; transform: none; width: 100%; margin-left: 0; margin-right: 0; } /* Tickers takes its accent from the brand illustrations (clock, clipboard, calendar) instead of the book's red or the app's hazard yellow. The paper pages use a deeper green so small type keeps its contrast. */ .book-root .book-content [data-book-section*="tickers"] { --sys-red: #0AB969; --sys-accent: #0AB969; } /* The chapter opener keeps the book red. */ .book-root .book-content [data-book-section^="world-tickers"] { --sys-red: #e10600; --sys-accent: #ec3a30; } .book-root .book-content [data-book-section^="signal-tickers"], .book-root .book-content [data-book-section^="interpretation-tickers"], .book-root .book-content [data-book-section^="brainstorm-tickers"] { --sys-red: #078A4C; --sys-accent: #078A4C; } .book-root .book-content .jr-world-tickers { --jr-accent: #0AB969; } .book-root .book-content .jr-world-tickers .jr-title { color: #0AB969; border-bottom-color: #0AB969; } .book-root .book-content .jr-world-tickers .jr-frame { border-color: rgba(10, 185, 105, .55); } .book-root .book-content .jr-world-tickers .jr-line { border-top-color: #0AB969; } .book-root .book-content .jr-world-tickers .jr-folio { color: #0AB969; } /* The Tickers future-proof icons sit on near-black squares; lighten drops the squares so the column rules run through. */ .book-root .book-content [data-book-section*="futureproof-tickers"] .sys-fx-image { mix-blend-mode: lighten; }