/* ==========================================================================
   BLUEPRINT — one page. Loaded on a/blueprint.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   One drawing sheet on a cyanotype ground: white line, grid references,
   a ruled title block, lettered views. Hierarchy is line width in one
   4:2:1 series (outline wide, hidden detail dashed, dimension and witness
   lines narrow), the system of the drawing a blueprint reproduces. The shell (rail, top bar, community drawer) is
   never restyled: every rule here is scoped to .bp-hero or .bp-rec, and
   the page ground alone is set on `.bp-page main`.

   Two roots, one sheet: the hero has no bottom edge, the record no top
   edge, on the same margins, so the join reads as one sheet continued.
   ========================================================================== */
@font-face {
  font-family: "PlexSansX";
  src: url("fonts/plex-sans.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "PlexMonoX";
  src: url("fonts/plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PlexMonoX";
  src: url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

.bp-page {
  --bp-b1: #16355F;      /* cyanotype ground — Prussian, not navy-corporate */
  --bp-b2: #1B3D6D;      /* sheet fill, one step lighter */
  --bp-w: #EAF1FB;       /* white line */
  --bp-wd: rgba(234, 241, 251, 0.62); /* the artifact's .55, lifted so 12px labels clear 4.5:1 */
  --bp-wf: rgba(234, 241, 251, 0.14);
  --bp-sans: "PlexSansX", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --bp-mono: "PlexMonoX", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --bp-gutter: clamp(12px, 3vw, 32px);
  background: var(--paper);
}
/* The page ground: the blue of a contact print. Design Completion
   (2026-09-29): the research finds the print extremely matte, its paper
   texture visible, the blue in continuous tone and sometimes mottled, and
   no marks on it but the sheet's own; so the graph ruling is gone and the
   ground carries a fine paper grain and a slow mottle instead. */
.bp-page main {
  background-color: var(--bp-b1);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .95 0 0 0 0 .98 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .12 0 0 0 0 .25 0 0 0 .35 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 220px 220px, 800px 800px;
}

.bp-hero, .bp-rec { font: 400 16px/1.6 var(--bp-sans); color: var(--bp-w); font-synthesis: weight style; }
.bp-hero a, .bp-rec a { color: var(--bp-w); text-decoration: underline dashed; text-underline-offset: 3px; }
.bp-hero a:hover, .bp-rec a:hover { text-decoration: underline solid 2px; }
.bp-hero :focus-visible, .bp-rec :focus-visible { outline: 2px solid var(--bp-w); outline-offset: 3px; }
.bp-rec p { margin: 0 0 14px; }
.bp-rec p:last-child { margin-bottom: 0; }
.bp-first { margin-top: 0 !important; }
.bp-cap { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; }
.bp-cap--s { font-size: 14px; }
.bp-mono { font-family: var(--bp-mono); }
.bp-quiet { color: var(--bp-wd); }
.bp-sm { font-size: 12px; }

/* ---- the sheet: two roots, one border ---- */
.bp-hero, .bp-rec .bp-body { position: relative; border: 4px solid var(--bp-w); background: rgba(27, 61, 109, 0.6); }
.bp-hero { margin: calc(var(--bp-gutter) + 16px) var(--bp-gutter) 0; border-bottom: 0; padding: 28px 28px 0; }
.bp-rec { margin: 0 var(--bp-gutter); }
.bp-rec .bp-body { border-top: 0; padding: 0 28px 28px; }
.bp-hero::before, .bp-rec .bp-body::before { content: ""; position: absolute; border: 1px solid var(--bp-wd); pointer-events: none; }
.bp-hero::before { inset: 6px 6px 0; border-bottom: 0; }
.bp-rec .bp-body::before { inset: 0 6px 6px; border-top: 0; }

/* grid references — the hero sheet's own apparatus */
.bp-gref { position: absolute; display: flex; justify-content: space-around; font: 500 12px/1 var(--bp-mono); color: var(--bp-wd); }
.bp-gref--t { top: -2px; left: 28px; right: 28px; transform: translateY(-100%); padding-bottom: 4px; }
.bp-gref--l { left: -2px; top: 28px; bottom: 0; flex-direction: column; transform: translateX(-100%); padding-right: 6px; }

/* ---- hero: the drawing beside the title block ---- */
.bp-top, .bp-tbx { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: end; }
.bp-top > * { min-width: 0; }
/* The artifact's 8vw title ran the full page; here the sheet shares the
   viewport with the rail, so the title is scaled to its own column and is
   never broken mid-word. */
.bp-h1 { margin: 0 0 6px; font-weight: 300; font-size: clamp(36px, 5.6vw, 96px); line-height: 0.95; letter-spacing: 0.14em; text-transform: uppercase; overflow-wrap: normal; hyphens: none; }
.bp-sub { margin: 0 0 20px; max-width: 40ch; color: var(--bp-wd); }
.bp-draw svg { width: 100%; height: auto; display: block; }
.bp-draw__t { font-family: var(--bp-mono); }

/* the title block: opened in the hero, closed in the record */
.bp-tb, .bp-tbc { border: 3px solid var(--bp-w); font-size: 13px; margin: 0; }
.bp-tb dd, .bp-tbc dd { margin: 0; }
.bp-tb { border-bottom: 0; }
.bp-tbc { border-top: 0; grid-column: 2; }
.bp-r { display: grid; grid-template-columns: 120px 1fr; border-top: 1px solid var(--bp-w); }
.bp-tb .bp-r:first-child { border-top: 0; }
.bp-r > * { padding: 6px 10px; min-width: 0; overflow-wrap: break-word; }
.bp-r > :first-child { border-right: 1px solid var(--bp-w); color: var(--bp-wd); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
.bp-big { display: block; font: 500 clamp(22px, 2.3vw, 34px)/1 var(--bp-mono); letter-spacing: 0.06em; }
.bp-tbf { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--bp-w); }
.bp-tbf > * { padding: 6px 10px; border-left: 1px solid var(--bp-w); }
.bp-tbf > :first-child { border-left: 0; }
.bp-tbf small { display: block; color: var(--bp-wd); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }

/* ---- views: a circled letter, a ruled heading, a scale tag ---- */
.bp-view { margin-top: 48px; position: relative; min-width: 0; }
.bp-vhd { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.bp-bub { flex: 0 0 auto; width: 54px; height: 54px; border: 2px solid var(--bp-w); border-radius: 50%; display: grid; place-items: center; font: 500 20px var(--bp-mono); }
.bp-vhd h2 { margin: 0; font-weight: 500; font-size: clamp(20px, 2.6vw, 28px); text-transform: uppercase; letter-spacing: 0.16em; color: var(--bp-w); }
.bp-vhd h2::after { content: ""; display: block; height: 2px; background: var(--bp-w); margin-top: 4px; width: 100%; }
.bp-scale { font: 400 12px var(--bp-mono); color: var(--bp-wd); margin-left: auto; white-space: nowrap; }
.bp-frame { border: 3px solid var(--bp-w); padding: 22px; }
.bp-frame--dash { border: 1.5px dashed var(--bp-w); }
.bp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bp-cols > :only-child { grid-column: 1 / -1; }
.bp-lede { margin: 0 0 10px; }

/* what carries the look */
.bp-tw { overflow-x: auto; }
.bp-ct { width: 100%; border-collapse: collapse; }
.bp-ct th, .bp-ct td { border: 1px solid var(--bp-wd); padding: 8px 10px; text-align: left; vertical-align: top; }
.bp-ct th { width: 32%; font-weight: 500; }
.bp-rec .bp-ct th a { text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none; }
.bp-rec .bp-ct th a:hover { text-decoration: underline solid 2px; }
.bp-ct small { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-wd); }
.bp-ct td.bp-none { color: var(--bp-wd); font-style: italic; }
.bp-ct p { margin: 0 0 8px; }
.bp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-rec .bp-tags a { border: 1px solid var(--bp-w); padding: 2px 8px; text-decoration: none; font: 400 12px/1.6 var(--bp-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.bp-rec .bp-tags a:hover { background: var(--bp-w); color: var(--bp-b1); }
.bp-spec { display: block; margin-bottom: 4px; font-weight: 300; font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; }
.bp-swatch { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.bp-swatch span { width: 110px; height: 60px; border: 2px solid var(--bp-w); display: flex; align-items: flex-end; padding: 4px 6px; font: 400 12px var(--bp-mono); }

/* what it argues */
.bp-argue .bp-lead { font-size: clamp(20px, 2.6vw, 28px); font-weight: 300; line-height: 1.35; margin: 0 0 14px; }
.bp-refuse { margin-top: 18px; border: 3px solid var(--bp-w); padding: 14px 18px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.bp-refuse .bp-cap { font-size: 13px; border-right: 1px solid var(--bp-w); padding-right: 14px; }

/* how you recognise it: the diagnostic sentence, on a leader line */
.bp-dx { position: relative; margin: 20px 0; padding: 14px 18px; border: 1px solid var(--bp-w); }
.bp-dx::before { content: ""; position: absolute; left: -60px; top: 50%; width: 60px; border-top: 1px solid var(--bp-w); }
.bp-dx::after { content: ""; position: absolute; left: -64px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--bp-w); }

/* rules as the sheet's notes */
.bp-notes { list-style: none; counter-reset: bp-n; margin: 0; padding: 0; }
.bp-notes li { counter-increment: bp-n; display: grid; grid-template-columns: 44px minmax(0, 150px) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--bp-wd); }
.bp-notes li::before { content: counter(bp-n) "."; font: 500 16px var(--bp-mono); }
.bp-notes li > div { min-width: 0; }
.bp-ar { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 13px; }
.bp-k { display: block; font: 400 12px var(--bp-mono); color: var(--bp-wd); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.bp-notes p { margin: 0; }
.bp-src { display: block; margin-top: 4px; font: 400 12px var(--bp-mono); color: var(--bp-wd); }
.bp-weights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 12px 0 4px; }
.bp-weights div { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bp-wd); }
.bp-weights i { display: block; height: 0; margin-bottom: 6px; }
.bp-w1 { border-top: 4px solid var(--bp-w); }
.bp-w2 { border-top: 2px dashed var(--bp-w); }
.bp-w3 { border-top: 1px solid var(--bp-w); }

/* what stands behind it: the research table */
.bp-rt { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 14px; }
.bp-rt th, .bp-rt td { border: 1px solid var(--bp-wd); padding: 7px 9px; text-align: left; }
.bp-rt thead th { border-bottom: 3px solid var(--bp-w); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
.bp-rt td.bp-y { font-weight: 600; }
.bp-rt td.bp-n { color: var(--bp-wd); }

/* use it */
.bp-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bp-rec .bp-use a { display: block; border: 3px solid var(--bp-w); padding: 18px; text-decoration: none; color: var(--bp-w); }
.bp-rec .bp-use a b { display: block; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; margin-bottom: 4px; }
.bp-rec .bp-use a:hover { background: var(--bp-w); color: var(--bp-b1); }
.bp-mach { font-size: 13px; margin: 14px 0 0; }

/* the foot of the sheet */
.bp-foot { margin: 0 0 40px; padding-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font: 400 13px var(--bp-mono); color: var(--bp-wd); }
.bp-rec .bp-foot a { color: var(--bp-w); }

@media (max-width: 820px) {
  .bp-top, .bp-tbx, .bp-cols, .bp-use { grid-template-columns: 1fr; }
  .bp-tbc { grid-column: 1; }
  .bp-notes li { grid-template-columns: 36px 1fr; }
  .bp-notes li > div { grid-column: 2; }
  .bp-hero { padding: 18px 18px 0; margin-top: var(--bp-gutter); }
  .bp-rec .bp-body { padding: 0 18px 18px; }
  .bp-gref { display: none; }
  .bp-dx::before, .bp-dx::after { display: none; }
  .bp-weights { grid-template-columns: 1fr; }
  /* narrow sheet: a narrower label column, the scale tag under the heading,
     the refusal's label above its text */
  .bp-r { grid-template-columns: 96px 1fr; }
  .bp-vhd { flex-wrap: wrap; row-gap: 6px; }
  .bp-vhd h2 { flex: 1 1 0; font-size: 18px; letter-spacing: 0.12em; }
  .bp-scale { flex-basis: 100%; margin-left: 68px; }
  .bp-refuse { grid-template-columns: 1fr; gap: 8px; }
  .bp-refuse .bp-cap { border-right: 0; border-bottom: 1px solid var(--bp-w); padding: 0 0 8px; }
  .bp-spec { font-size: 16px; letter-spacing: 0.1em; }
  .bp-ct th { width: 38%; }
}
/* Nothing on this sheet moves: motion is researched absence, so there is no
   reduced-motion override to declare. */

/* Centring marks (Design Completion, 2026-09-29): the functional sheet mark
   the research finds beside the frame, at the middle of each side. */
.bp-cm { position: absolute; background: var(--bp-w); pointer-events: none; }
.bp-cm--t { left: calc(50% - 2px); top: -18px; width: 4px; height: 26px; }
.bp-cm--b { left: calc(50% - 2px); bottom: -18px; width: 4px; height: 26px; }
.bp-cm--l { top: 50%; left: -18px; height: 4px; width: 26px; }
.bp-cm--r { top: 50%; right: -18px; height: 4px; width: 26px; }
@media (max-width: 600px) { .bp-cm--l, .bp-cm--r { display: none; } }
/* The line-width legend, when the record's hierarchy is our reading rather than a rule it lists. */
.bp-hier { margin: 0 0 16px; padding: 12px 14px; border: 1px dashed var(--bp-wd); }
.bp-hier p { margin: 0 !important; }