/* ── Blue Papers: the AppDeen lab's research (/archive/papers/bp-00N) ──
   One technical-lab family, each paper its own world. Every paper is a drawing
   sheet: a hairline frame with registration marks, the shared title block (paper
   number, revision, date, authors, status), numbered sections, numbered figures,
   references and "Cite this". DM Sans for headings, labels and the title block;
   Newsreader for the body at reading size. The page around the sheet follows the
   site's theme; the sheet carries its own field:
     BP-001  the blueprint: brand blue #2254F2 field, white line-work (both themes)
     BP-002  the drafting table: graph paper, ink line-work, blue accents
             (warm off-white in the paper edition, drafting film in the evening one)
     BP-003  the instrument: calm measuring scales along the margins
   Each paper opens with its drawing (inline SVG from archive/papers/art, drawn by
   art/draw.py; motion and line weights in art.css) and keeps two or three small
   marginal doodles beside its sections, in the right margin on wide screens and
   under the section's text below that.
   Brand blue is never text on a dark field. Only the drawings move (they draw
   themselves once, then one part works; static under reduced motion); nothing
   is sticky, nothing scrolls sideways; a paper is read in plain vertical flow.
   Every rule is scoped under .bp so styles.css stays as it is. */

.bp-body{ background:#0E0F11; }
html[data-theme="light"] .bp-body{ background:#E9E6DE; }
.bp{
  --bp-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --bp-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --bp-gut:clamp(16px, 4vw, 48px);
  --page-ink:#E8E4DA; --page-soft:#A9A397;
  display:block; position:relative; z-index:2; min-height:100vh; color:var(--page-ink);
  padding:clamp(92px, 12vh, 120px) 0 clamp(56px, 10vh, 96px); -webkit-font-smoothing:antialiased; }
html[data-theme="light"] .bp{ --page-ink:#1B1A17; --page-soft:#58534A; }
.bp *{ box-sizing:border-box; margin:0; padding:0; }
.bp h1, .bp h2, .bp h3, .bp p, .bp li, .bp td, .bp th, .bp figcaption, .bp dt, .bp dd{ font-family:inherit; letter-spacing:normal; text-transform:none; }
html[data-theme] .bp h1, html[data-theme] .bp h2, html[data-theme] .bp h3{ color:inherit; }   /* over styles.css heading colours */
.bp a{ color:inherit; }
.bp :focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:2px; }
.bp .bp-wrap{ max-width:1120px; margin:0 auto; padding:0 var(--bp-gut); }
.bp .bp-crumb{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 16px; margin-bottom:14px;
  font:500 14px/1.4 var(--bp-sans); color:var(--page-soft); }
.bp .bp-crumb a{ display:inline-flex; align-items:center; min-height:44px; color:var(--page-ink); text-decoration:underline; text-decoration-color:#2254F2; text-underline-offset:4px; text-decoration-thickness:1.5px; }

/* ── the sheet and its world ────────────────────────────────────────── */
.bp .bp-sheet{ position:relative; padding:clamp(10px, 1.4vw, 16px); background:var(--f-bg); color:var(--f-ink);
  border:1px solid var(--f-line); }
.bp .bp-field{ position:absolute; inset:0; pointer-events:none; background-image:var(--f-grid); background-size:var(--f-size); background-position:-1px -1px; }
.bp .bp-reg{ position:absolute; inset:clamp(10px, 1.4vw, 16px); pointer-events:none; }
.bp .bp-reg i{ position:absolute; width:22px; height:22px; border-color:var(--f-line-strong); border-style:solid; border-width:0; }
.bp .bp-reg i:nth-child(1){ left:-1px; top:-1px; border-left-width:1px; border-top-width:1px; }
.bp .bp-reg i:nth-child(2){ right:-1px; top:-1px; border-right-width:1px; border-top-width:1px; }
.bp .bp-reg i:nth-child(3){ left:-1px; bottom:-1px; border-left-width:1px; border-bottom-width:1px; }
.bp .bp-reg i:nth-child(4){ right:-1px; bottom:-1px; border-right-width:1px; border-bottom-width:1px; }
.bp .bp-in{ position:relative; border:1px solid var(--f-line); padding:clamp(24px, 4.5vw, 64px) clamp(18px, 5vw, 72px) clamp(28px, 4vw, 56px); }

/* BP-001: the blueprint */
.bp[data-paper="001"]{
  --f-bg:#2254F2; --f-ink:#FFFFFF; --f-soft:rgba(255,255,255,.86); --f-line:rgba(255,255,255,.55); --f-line-strong:#FFFFFF; --f-hair:rgba(255,255,255,.3);
  --f-accent:#FFFFFF; --f-mark:rgba(255,255,255,.14);
  --f-grid:linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  --f-size:32px 32px; }
/* BP-002: the drafting table, graph paper */
.bp[data-paper="002"]{
  --f-bg:#F6F2E7; --f-ink:#1E1C18; --f-soft:#57524A; --f-line:rgba(30,28,24,.42); --f-line-strong:#1E1C18; --f-hair:rgba(30,28,24,.18);
  --f-accent:#2254F2; --f-mark:rgba(34,84,242,.08);
  --f-grid:linear-gradient(rgba(34,84,242,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(34,84,242,.16) 1px, transparent 1px),
           linear-gradient(rgba(34,84,242,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,84,242,.07) 1px, transparent 1px);
  --f-size:40px 40px, 40px 40px, 8px 8px, 8px 8px; }
html:not([data-theme="light"]) .bp[data-paper="002"]{
  --f-bg:#17160F; --f-ink:#ECE6D8; --f-soft:#BDB5A5; --f-line:rgba(236,230,216,.38); --f-line-strong:#ECE6D8; --f-hair:rgba(236,230,216,.16);
  --f-accent:#ECE6D8; --f-mark:rgba(236,230,216,.07);
  --f-grid:linear-gradient(rgba(236,230,216,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(236,230,216,.075) 1px, transparent 1px),
           linear-gradient(rgba(236,230,216,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(236,230,216,.03) 1px, transparent 1px); }
/* BP-003: the instrument, measuring scales along the margins */
.bp[data-paper="003"]{
  --f-bg:#EDF0EC; --f-ink:#1A1D1B; --f-soft:#525853; --f-line:rgba(26,29,27,.4); --f-line-strong:#1A1D1B; --f-hair:rgba(26,29,27,.16);
  --f-accent:#2254F2; --f-mark:rgba(34,84,242,.08); --f-tick:rgba(26,29,27,.5); --f-tick-major:#2254F2;
  --f-grid:none; --f-size:auto; }
html:not([data-theme="light"]) .bp[data-paper="003"]{
  --f-bg:#101412; --f-ink:#E3E8E3; --f-soft:#A9B0AA; --f-line:rgba(227,232,227,.34); --f-line-strong:#E3E8E3; --f-hair:rgba(227,232,227,.14);
  --f-accent:#E3E8E3; --f-mark:rgba(227,232,227,.07); --f-tick:rgba(227,232,227,.4); --f-tick-major:#2254F2; }
.bp[data-paper="003"] .bp-field{ inset:clamp(10px, 1.4vw, 16px); }
.bp[data-paper="003"] .bp-field::before, .bp[data-paper="003"] .bp-field::after{ content:""; position:absolute; }
.bp[data-paper="003"] .bp-field::before{ left:0; right:0; top:0; height:14px;
  background:repeating-linear-gradient(90deg, var(--f-tick-major) 0 1px, transparent 1px 80px),
             repeating-linear-gradient(90deg, var(--f-tick) 0 1px, transparent 1px 8px);
  background-size:100% 14px, 100% 7px; background-repeat:no-repeat; }
.bp[data-paper="003"] .bp-field::after{ top:0; bottom:0; left:0; width:14px;
  background:repeating-linear-gradient(180deg, var(--f-tick-major) 0 1px, transparent 1px 80px),
             repeating-linear-gradient(180deg, var(--f-tick) 0 1px, transparent 1px 8px);
  background-size:14px 100%, 7px 100%; background-repeat:no-repeat; }

/* ── head: title and the title block ────────────────────────────────── */
.bp .bp-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,330px); gap:24px 48px; align-items:start;
  padding-bottom:28px; border-bottom:1px solid var(--f-line); }
.bp .bp-series{ font:600 14px/1.4 var(--bp-sans); color:var(--f-soft); }
.bp .bp-title{ margin-top:10px; font:600 clamp(32px, 1.3rem + 2.6vw, 54px)/1.06 var(--bp-sans); letter-spacing:-.022em; text-wrap:balance; max-width:20ch; }
.bp .bp-sub{ margin-top:14px; font:400 clamp(19px, 1.05rem + .3vw, 22px)/1.45 var(--bp-serif); font-style:italic; color:var(--f-soft); max-width:38ch; }
.bp .bp-tb{ width:100%; border-collapse:collapse; font:400 14px/1.35 var(--bp-sans); font-variant-numeric:tabular-nums lining-nums; border:1px solid var(--f-line-strong); }
.bp .bp-tb th, .bp .bp-tb td{ border:1px solid var(--f-line); padding:7px 10px; text-align:left; vertical-align:top; }
.bp .bp-tb th{ font-weight:400; color:var(--f-soft); width:6.2em; }
.bp .bp-tb td{ font-weight:600; }
.bp .bp-tb .bp-big td{ font-size:20px; letter-spacing:-.01em; }

/* ── body ───────────────────────────────────────────────────────────── */
.bp .bp-body-in{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:start; }
.bp .bp-sec{ width:100%; max-width:40rem; padding-top:36px; }
.bp .bp-sec.bp-wide{ max-width:none; }
.bp .bp-sec > h2{ display:flex; gap:14px; align-items:baseline; font:600 clamp(22px, 1.1rem + .6vw, 27px)/1.2 var(--bp-sans); letter-spacing:-.012em; padding-bottom:10px; border-bottom:1px solid var(--f-hair); }
.bp .bp-sec > h2 .bp-n{ font-variant-numeric:tabular-nums; min-width:1.4em; color:var(--f-soft); font-weight:500; }
.bp .bp-sec h3{ margin-top:22px; font:600 18px/1.3 var(--bp-sans); }
.bp .bp-prose{ font-family:var(--bp-serif); font-size:clamp(19px, 1.05rem + .2vw, 20px); line-height:1.6; }
.bp .bp-prose p, .bp .bp-prose ul, .bp .bp-prose ol, .bp .bp-prose .bp-eq{ margin-top:14px; }
.bp .bp-prose ul, .bp .bp-prose ol{ padding-left:1.25em; }
.bp .bp-prose li + li{ margin-top:6px; }
.bp .bp-prose a, .bp .bp-refs a, .bp .bp-dl a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; }
.bp[data-paper="002"] .bp-prose a, .bp[data-paper="003"] .bp-prose a{ text-decoration-color:var(--f-accent); }
.bp .bp-prose code{ font:500 .86em/1 var(--bp-sans); font-variant-numeric:tabular-nums; padding:1px 5px; background:var(--f-mark); border-radius:3px; }
.bp .bp-abstract{ margin-top:28px; max-width:44rem; padding:18px 20px; border:1px solid var(--f-line); background:var(--f-mark); }
.bp .bp-abstract h2{ font:600 15px/1.3 var(--bp-sans); }
.bp .bp-abstract p{ margin-top:8px; font:400 clamp(19px, 1.05rem + .25vw, 21px)/1.55 var(--bp-serif); }
.bp .bp-eq{ display:block; padding:16px 18px; border:1px solid var(--f-line); font:500 clamp(17px, 1rem + .4vw, 21px)/1.5 var(--bp-sans); text-align:center; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.bp .bp-note{ margin-top:14px; padding-left:14px; border-left:2px solid var(--f-line-strong); font:400 16px/1.5 var(--bp-sans); color:var(--f-soft); }

/* tables */
.bp .bp-table{ width:100%; margin-top:16px; border-collapse:collapse; font:400 15px/1.4 var(--bp-sans); font-variant-numeric:tabular-nums lining-nums; }
.bp .bp-table caption{ caption-side:top; text-align:left; padding-bottom:8px; font:600 14px/1.4 var(--bp-sans); }
.bp .bp-table th, .bp .bp-table td{ text-align:left; padding:8px 10px 8px 0; border-bottom:1px solid var(--f-hair); vertical-align:top; }
.bp .bp-table thead th{ font-weight:600; border-bottom:1px solid var(--f-line); }
.bp .bp-table .r{ text-align:right; padding-right:0; padding-left:8px; white-space:nowrap; }
.bp .bp-table .muted{ color:var(--f-soft); }

/* figures */
.bp .bp-fig{ margin-top:24px; width:100%; max-width:52rem; }
.bp .bp-fig figcaption{ margin-top:10px; font:400 15px/1.5 var(--bp-sans); color:var(--f-soft); max-width:44rem; }
.bp .bp-fig figcaption b{ color:var(--f-ink); font-weight:600; }
.bp .bp-plot{ position:relative; overflow-x:clip; border:1px solid var(--f-line); padding:18px 16px 42px 48px; }
.bp .bp-plot-area{ position:relative; height:clamp(200px, 30vw, 300px); }
.bp .bp-plot svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.bp .bp-plot .g-grid{ stroke:var(--f-hair); stroke-width:1; vector-effect:non-scaling-stroke; }
.bp .bp-plot .g-base{ stroke:var(--f-line-strong); stroke-width:1; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
.bp .bp-plot .g-line{ fill:none; stroke:var(--f-accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.bp .bp-plot .p{ position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--f-accent); box-shadow:0 0 0 2px var(--f-bg); }
.bp .bp-plot .p::after{ content:""; position:absolute; inset:-12px; }
.bp .bp-plot .p:hover + .tip, .bp .bp-plot .p:focus + .tip{ opacity:1; }
.bp .bp-plot .tip.l{ transform:translate(-12px, calc(-100% - 12px)); } .bp .bp-plot .tip.r{ transform:translate(calc(-100% + 12px), calc(-100% - 12px)); }
.bp .bp-plot .tip{ position:absolute; transform:translate(-50%, calc(-100% - 12px)); padding:4px 8px; background:var(--f-ink); color:var(--f-bg);
  font:500 13px/1.3 var(--bp-sans); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; z-index:2; }
.bp .bp-plot .yl, .bp .bp-plot .xl, .bp .bp-plot .vl{ position:absolute; font:400 13px/1 var(--bp-sans); color:var(--f-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bp .bp-plot .yl{ left:-40px; width:32px; text-align:right; transform:translateY(-50%); }
.bp .bp-plot .xl{ top:calc(100% + 12px); transform:translateX(-50%); }
.bp .bp-plot .xl.first{ transform:none; } .bp .bp-plot .xl.last{ transform:translateX(-100%); }
.bp .bp-plot .vl{ font-weight:600; color:var(--f-ink); transform:translate(-50%, -150%); }
.bp .bp-plot .lv{ position:absolute; right:0; font:400 italic 14px/1 var(--bp-serif); color:var(--f-soft); transform:translateY(-130%); }
/* diverging bars: contributions */
.bp .bp-bars{ border:1px solid var(--f-line); padding:14px 16px; }
.bp .bp-bar{ display:grid; grid-template-columns:7.5em minmax(0,1fr) 4.2em; gap:10px; align-items:center; min-height:34px; font:400 15px/1.3 var(--bp-sans); font-variant-numeric:tabular-nums; }
.bp .bp-bar .t{ position:relative; height:14px; }
.bp .bp-bar .t::before{ content:""; position:absolute; left:50%; top:-10px; bottom:-10px; width:1px; background:var(--f-line-strong); }
.bp .bp-bar .b{ position:absolute; top:0; height:14px; background:var(--f-accent); border-radius:0 3px 3px 0; }
.bp .bp-bar .b.neg{ border-radius:3px 0 0 3px; background:transparent; border:1.5px solid var(--f-accent); }
.bp .bp-bar .v{ text-align:right; font-weight:600; }
.bp .bp-bar.na .t::after{ content:"not measured"; position:absolute; left:calc(50% + 8px); top:-2px; font:italic 400 14px/1 var(--bp-serif); color:var(--f-soft); }
.bp .bp-bar.sum{ border-top:1px solid var(--f-line); margin-top:6px; padding-top:6px; font-weight:600; }
/* a flow diagram drawn as boxes and arrows */
.bp .bp-flow{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; border:1px solid var(--f-line); padding:16px; }
.bp .bp-flow > div{ position:relative; border:1px solid var(--f-line-strong); padding:12px 12px 14px; background:var(--f-bg); }
.bp .bp-flow > div + div::before{ content:""; position:absolute; left:-15px; top:50%; width:14px; border-top:1px solid var(--f-line-strong); }
.bp .bp-flow > div + div::after{ content:""; position:absolute; left:-6px; top:calc(50% - 4px); border-left:6px solid var(--f-line-strong); border-top:4px solid transparent; border-bottom:4px solid transparent; }
.bp .bp-flow b{ display:block; font:600 15px/1.3 var(--bp-sans); }
.bp .bp-flow span{ display:block; margin-top:6px; font:400 14px/1.45 var(--bp-sans); color:var(--f-soft); }
.bp .bp-flow .bp-k{ font-variant-numeric:tabular-nums; color:var(--f-soft); font-weight:500; }

/* references, cite, data */
.bp .bp-refs{ list-style:none; counter-reset:ref; font:400 16px/1.5 var(--bp-sans); }
.bp .bp-refs li{ counter-increment:ref; position:relative; padding:9px 0 9px 2.4em; border-bottom:1px solid var(--f-hair); }
.bp .bp-refs li::before{ content:"[" counter(ref) "]"; position:absolute; left:0; font-variant-numeric:tabular-nums; color:var(--f-soft); }
.bp .bp-cite{ margin-top:14px; padding:14px 16px; border:1px solid var(--f-line); font:400 16px/1.55 var(--bp-sans); user-select:all; -webkit-user-select:all; overflow-wrap:anywhere; }
.bp .bp-btn{ display:inline-flex; align-items:center; min-height:44px; margin-top:10px; padding:0 16px; border:1px solid var(--f-line-strong); background:transparent; color:var(--f-ink);
  font:600 15px/1 var(--bp-sans); cursor:pointer; text-decoration:none; }
.bp .bp-dl{ display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:12px; font:500 15px/1.4 var(--bp-sans); }
.bp .bp-dl a{ display:inline-flex; align-items:center; min-height:44px; }
.bp .bp-foot{ margin-top:44px; padding-top:16px; border-top:1px solid var(--f-line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; font:400 14px/1.4 var(--bp-sans); color:var(--f-soft); }
.bp .bp-foot a{ display:inline-flex; align-items:center; min-height:44px; color:var(--f-ink); }
.bp .bp-status{ display:inline-block; padding:1px 8px; border:1px solid var(--f-line-strong); font-weight:600; }

@media (prefers-reduced-motion: reduce){ .bp *{ transition:none !important; } }

@media (max-width:860px){
  .bp .bp-head{ grid-template-columns:1fr; }
  .bp .bp-flow{ grid-template-columns:1fr; gap:18px; }
  .bp .bp-flow > div + div::before{ left:50%; top:-18px; width:0; height:17px; border-top:0; border-left:1px solid var(--f-line-strong); }
  .bp .bp-flow > div + div::after{ left:calc(50% - 4px); top:-7px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid var(--f-line-strong); border-bottom:0; }
}
@media (max-width:560px){
  .bp .bp-plot{ padding:14px 10px 38px 40px; }
  .bp .bp-plot .yl{ left:-34px; width:28px; font-size:12px; }
  .bp .bp-plot .xl{ font-size:12px; }
  .bp .bp-plot .xl.mid{ display:none; }
  .bp .bp-bar{ grid-template-columns:6.2em minmax(0,1fr) 3.6em; font-size:14px; }
  .bp .bp-table{ font-size:14px; }
  .bp .bp-table .hide-s{ display:none; }
}
.bp .bp-sec.bp-wide > .bp-prose{ max-width:40rem; }

/* ── the drawings on the sheet ──────────────────────────────────────── */
.bp[data-paper="001"] .art{ color:#FFFFFF; --art-acc:#F3E6C4; }          /* white line-work, one cream accent on the blue */
.bp[data-paper="002"] .art, .bp[data-paper="003"] .art{ color:var(--f-ink); --art-acc:#2254F2; }   /* blue only as a mark, never text */
.bp .bp-hero{ margin:0 calc(-1 * clamp(18px, 5vw, 72px)); padding:clamp(16px, 2.4vw, 28px) clamp(6px, 1.4vw, 18px) 0; border-bottom:1px solid var(--f-line); }
.bp .bp-hero figcaption{ max-width:52rem; padding:14px calc(clamp(18px, 5vw, 72px) - clamp(6px, 1.4vw, 18px)) 20px; font:400 15px/1.5 var(--bp-sans); color:var(--f-soft); }
.bp .bp-hero figcaption b{ color:var(--f-ink); font-weight:600; }
.bp .bp-sec{ position:relative; }
.bp .bp-doodle{ display:block; width:min(100%, 240px); margin-top:24px; }
@media (min-width:1180px){
  .bp .bp-doodle{ position:absolute; top:64px; left:calc(100% + 28px); width:208px; margin:0; }
}