/* The on-site reader for the Designing Intelligence compendium (designing-intelligence/*.html,
   built by tools/place-compendium.py). The book keeps its own reading design (book.css: Newsreader
   and Instrument Sans, text column + margin column); this file sits it inside the site: page
   background, light/dark mode, the contents page, the contents menu beside every chapter, and
   the view-only behaviour. */

/* ---------- The book inside the site ---------- */
.reader .di-book { background: transparent; --di-measure: 37rem; --di-margin-col: 15rem; --di-gutter: 2.5rem; }
html[data-theme="dark"] .di-book {
  --di-paper: #160634; --di-ink: #ece9f1; --di-plum: #e3dcf5; --di-violet: #b9a0ff; --di-lavender: #5b4b9e;
  --di-wash: rgba(255,255,255,.06); --di-mid: #cfc8e6; --di-muted: #a99ccf; --di-hair: #3b2a73; --di-hair-soft: #2a1560;
}
html[data-theme="light"] .di-book { --di-violet: #6a48d7; --di-plum: #241b47; --di-ink: #2a2350; --di-wash: #f1ecfb; }
.reader .di-book .di-chapter { margin: 0; padding: 2.5rem 0 4rem; }
.reader .di-book [id] { scroll-margin-top: 96px; }
/* The site styles ".label" for its own chapter pages; inside the book the book's labels win. */
.di-book .label, .di-book .eyebrow { font-family: var(--di-sans) !important; font-size: .75rem !important; letter-spacing: .14em !important;
  font-weight: 700 !important; color: var(--di-violet) !important; white-space: normal; }
.di-book .abstract .label, .di-book .conversation .label { font-size: .7rem !important; }
/* On narrow screens the large chapter numeral sits beside the labels, not over them. */
@media (max-width: 52rem) { .di-book .chapter-head .eyebrow { padding-right: 4.5rem; } }

/* ---------- Chapter pages: the contents menu on the left, the book using the rest ---------- */
.rd-layout { max-width: 1340px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 64px);
  display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(36px, 4.5vw, 72px); align-items: start; }
.rd-main { min-width: 0; }
.rd-end { max-width: calc(37rem + 2.5rem + 15rem); }

.rd-menu { position: sticky; top: 73px; align-self: start; max-height: calc(100vh - 73px); overflow-y: auto;
  padding-block: 40px 28px; scrollbar-width: thin; }
.rd-menu-toggle { display: none; }
.rd-menu-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 14px; color: inherit; }
.rd-menu-title span { font-family: 'Newsreader', var(--serif); font-size: 21px; line-height: 1.15; color: var(--ink); transition: color .3s ease; }
.rd-menu-title i { font-style: normal; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: var(--muted); white-space: nowrap; }
.rd-menu-title:hover span, .rd-menu-title:focus-visible span { color: var(--accent); }

/* ---------- The contents as six sections that open and close ---------- */
.rd-acc { border-top: 1px solid var(--line); }
.rd-acc:last-child { border-bottom: 1px solid var(--line); }
.rd-acc h3 { margin: 0; }
.rd-acc button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  padding: 13px 26px 13px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; }
.rd-acc .nm { font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.rd-acc .ti { grid-column: 1; font-family: var(--serif); font-size: 17px; line-height: 1.25; color: var(--ink); transition: color .3s ease; }
.rd-acc .ct { grid-column: 2; grid-row: 1; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.rd-acc button::after { content: ""; position: absolute; right: 4px; top: 17px; width: 7px; height: 7px;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg);
  transition: transform .45s cubic-bezier(.22,1,.36,1); }
.rd-acc.open button::after { transform: translateY(3px) rotate(-135deg); }
.rd-acc button:hover .ti, .rd-acc button:focus-visible .ti { color: var(--accent); }
.rd-acc button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rd-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1); }
.rd-acc.open .rd-acc-body { grid-template-rows: 1fr; }
.rd-acc-body ol { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden;
  visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .5s; }
.rd-acc.open .rd-acc-body ol { visibility: visible; opacity: 1; transition: opacity .45s ease .1s, visibility 0s; }
.rd-acc-body li:last-child { padding-bottom: 12px; }
.rd-acc-body a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 6px; padding: 7px 8px 7px 0; color: inherit; border-radius: 8px; }
.rd-acc-body .no { font-family: 'Newsreader', var(--serif); font-size: 15px; line-height: 1.3; color: var(--accent); }
.rd-acc-body .tx { display: flex; flex-direction: column; }
.rd-acc-body .t { font-size: 13.5px; line-height: 1.4; color: var(--text); font-weight: 400; transition: color .3s ease; }
.rd-acc-body .s { display: none; }
.rd-acc-body a:hover .t, .rd-acc-body a:focus-visible .t { color: var(--accent); }
.rd-acc-body a[aria-current] { background: color-mix(in srgb, var(--accent) 9%, transparent); padding-left: 8px; margin-left: -8px; }
.rd-acc-body a[aria-current] .t { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .rd-acc-body, .rd-acc-body ol, .rd-acc button::after { transition: none; } }

/* Below this width the menu becomes a bar under the nav that opens downwards. */
@media (max-width: 1100px) {
  .rd-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rd-menu { top: min(73px, 5.07vw); z-index: 8; max-height: none; overflow: visible; padding: 0; margin-inline: calc(-1 * clamp(20px, 5vw, 64px)); }
  .rd-menu-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%;
    padding: 12px clamp(20px, 5vw, 64px); border: 0; border-bottom: 1px solid var(--line); background: var(--nav-bg);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .rd-menu-toggle .lab { font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; color: var(--accent); }
  .rd-menu-toggle .lab::after { content: " ▾"; }
  .rd-menu-toggle[aria-expanded="true"] .lab::after { content: " ▴"; }
  .rd-menu-toggle .now { font-family: var(--serif); font-size: 17px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rd-menu-toggle .n { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
  .rd-menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-template-rows: 0fr;
    background: var(--bg); box-shadow: 0 24px 40px -24px rgba(40, 22, 100, .45);
    transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1); }
  .rd-menu.open .rd-menu-panel { grid-template-rows: 1fr; border-bottom: 1px solid var(--line); }
  .rd-menu-inner { min-height: 0; overflow: hidden; visibility: hidden; padding-inline: clamp(20px, 5vw, 64px); }
  .rd-menu.open .rd-menu-inner { visibility: visible; overflow-y: auto; max-height: 70vh; padding-block: 16px 20px; }
  .rd-menu-title i { display: none; }
}

/* ---------- Read-only notice ---------- */
.rd-notice { margin-block: 8px 40px; padding: 18px 22px; border: 1px solid var(--line); border-left: 2px solid var(--accent-2);
  background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 0 12px 12px 0;
  font-size: 14px; line-height: 1.6; color: var(--text); font-weight: 300; }
.rd-notice b { font-weight: 600; color: var(--ink); }
.rd-notice a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent-2) 60%, transparent); }
.rd-notice a:hover, .rd-notice a:focus-visible { color: var(--accent-2); }
.rd-notice .c { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---------- Contents page ---------- */
.rd-top { padding-top: clamp(40px, 6vw, 72px); }
.rd-top .ini-side { top: 113px; }
.rd-mast { padding-bottom: clamp(30px, 4vw, 44px); margin-bottom: clamp(30px, 4vw, 44px); border-bottom: 2px solid transparent;
  border-image: var(--grad) 1; }
.rd-mast .ini-cta { margin-top: 28px; }
.rd-mast .eyebrow { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 600; font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.rd-mast .eyebrow a { color: var(--accent); }
.rd-mast h1 { font-family: 'Newsreader', var(--serif); font-weight: 500; font-size: clamp(44px, 6.2vw, 80px); line-height: 1;
  letter-spacing: -.015em; color: var(--ink); font-variation-settings: 'opsz' 72; }
.rd-mast .tag { margin-top: 20px; font-family: 'Newsreader', var(--serif); font-style: italic; font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.3; color: var(--accent); max-width: 34ch; }
.rd-mast .by { margin-top: 16px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.rd-mast .by span { display: inline-block; min-width: 108px; color: var(--muted); font-weight: 500; font-size: 10.5px; letter-spacing: 2px; }
.rd-mast .by + .by { margin-top: 6px; }
.rd-prop { font-family: var(--serif); font-style: italic; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.42; color: var(--ink); margin-bottom: 22px; }
.rd-jump { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.rd-jump::after { content: " ↓"; }
.rd-jump:hover, .rd-jump:focus-visible { color: var(--accent-2); }
.rd-cover .rd-notice { max-width: 760px; margin-bottom: clamp(64px, 9vw, 110px); }

.rd-contents { padding-block: clamp(44px, 6vw, 72px) clamp(36px, 5vw, 56px); scroll-margin-top: 73px; }
.rd-contents h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 3.2vw, 40px); color: var(--ink); letter-spacing: -.01em; margin-bottom: 26px; }
/* the same six sections, set larger: name and title on the left, chapters opening on the right */
.rd-contents .rd-acc { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0 48px; }
.rd-contents .rd-acc button { padding-block: 20px; }
.rd-contents .rd-acc button::after { top: 25px; }
.rd-contents .rd-acc .nm { font-size: 11px; letter-spacing: 2.4px; }
.rd-contents .rd-acc .ti { font-size: 22px; }
.rd-contents .rd-acc-body a { grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; padding: 13px 0; border-radius: 0; }
.rd-contents .rd-acc-body li + li { border-top: 1px solid var(--line); }
.rd-contents .rd-acc-body li:first-child a { padding-top: 20px; }
.rd-contents .rd-acc-body li:last-child { padding-bottom: 14px; }
.rd-contents .rd-acc-body .no { font-size: 26px; line-height: 1.05; font-weight: 300; }
.rd-contents .rd-acc-body .t { font-family: var(--serif); font-size: 23px; line-height: 1.2; color: var(--ink); }
.rd-contents .rd-acc-body .s { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--muted); font-weight: 300; }
@media (max-width: 760px) { .rd-contents .rd-acc { grid-template-columns: 1fr; } }

/* ---------- View-only ----------
   Deterrents, not locks: the text is still on the page for screen readers and search engines,
   and anyone determined can retype or screenshot it. Selecting, copying, dragging and the
   context menu are switched off in reader.js; printing shows only the notice below. */
[data-protect], [data-protect] * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[data-protect] img { -webkit-user-drag: none; pointer-events: none; }
@media print {
  .reader > * { display: none !important; }
  .reader::after { content: "Designing Intelligence is published to be read on screen at this address and is not available to print. For a copy or more information, please contact the author.";
    display: block; padding: 3cm 2cm; font: 14pt/1.5 Georgia, serif; color: #000; }
}

/* ---------- Reading time: how long a chapter takes, how long each section takes, how far along ---------- */
.di-book .rd-time { margin: 1.1rem 0 0; font-family: var(--di-sans); font-size: .8rem; line-height: 1.5; color: var(--di-muted); }
.di-book .rd-time b { font-weight: 700; color: var(--di-violet); letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.di-book .in-this li a { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.di-book .in-this .m { flex: none; font-size: .72rem; letter-spacing: .06em; color: var(--di-muted); white-space: nowrap; }
.rd-acc-body a { grid-template-columns: 20px minmax(0, 1fr) auto; }
.rd-acc-body .m { font-size: 10.5px; letter-spacing: .6px; color: var(--muted); font-weight: 500; white-space: nowrap; padding-left: 8px; align-self: baseline; }
.rd-contents .rd-acc-body a { grid-template-columns: 34px minmax(0, 1fr) auto; }
.rd-contents .rd-acc-body .m { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; padding-top: 6px; }
.rd-acc .ct { white-space: nowrap; letter-spacing: .6px; }
.rd-total { margin: -12px 0 26px; font-size: 15px; line-height: 1.6; color: var(--text); font-weight: 300; max-width: 62ch; }
.rd-left { margin: -6px 0 14px; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.rd-left b { color: var(--accent); font-weight: 700; }
.rd-progress { position: fixed; left: 0; right: 0; top: min(73px, 5.07vw); height: 2px; z-index: 11; pointer-events: none; }
.rd-progress i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 0 2px 2px 0; }

/* Chapters not yet released: listed in the contents, not linked. */
.rd-acc-body li.soon .row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0 6px; padding: 7px 8px 7px 0; }
.rd-contents .rd-acc-body li.soon .row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0 10px; padding: 13px 0; }
.rd-contents .rd-acc-body li.soon:first-child .row { padding-top: 20px; }
.rd-acc-body li.soon .t { color: var(--muted); }
.rd-acc-body li.soon .no { opacity: .6; }
.rd-acc-body li.soon .m { font-style: italic; text-transform: none; letter-spacing: .2px; font-weight: 400; }

/* Before the first article is released: a short line in place of "Start reading". */
.rd-soon { position: relative; margin-top: 44px; padding: 20px 26px 20px 50px; max-width: 42ch;
  border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent); border-left: 3px solid var(--accent-2); border-radius: 0 16px 16px 0;
  background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent));
  box-shadow: 0 18px 40px -26px rgba(40, 22, 100, .55);
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(21px, 2vw, 25px); line-height: 1.4; color: var(--ink); }
/* a quiet pulse, the same signal used for live work on Horizons */
.rd-soon::before, .rd-soon::after { content: ""; position: absolute; left: 22px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: var(--accent-2); }
.rd-soon::after { animation: rdPulse 2.4s ease-out infinite; }
@keyframes rdPulse { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rd-soon::after { animation: none; opacity: 0; } }
.rd-copy { padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 110px); font-size: 12px; color: var(--muted); }