/* ==========================================================================
   RAPTURE RADAR — THE SHARED DESIGN SYSTEM
   Created 2026-08-15 on branch `redesign`.

   WHY THIS FILE EXISTS. Twelve pages each carried their own <style> block —
   twelve private copies of the same design. "Update the palette" was
   therefore a twelve-file edit that would drift the first time anyone
   missed one. This is the same disease as the typed numbers killed the same
   morning: a value with no single owner. One file owns the look now.

   THE PALETTE IS RULED (JMark, 2026-08-15, on five rendered options):
     B "INSTRUMENT PAPER" — every page. Defined here.
     C "WATCHMAN'S LAMP"  — the newsletter and every share card. Tokens are
       at the foot of this file so the two registers live in one place, but
       C is applied by scoping .lamp, never to a page ground.

   THE CLASS NAMES ARE DELIBERATELY UNCHANGED from the old inline blocks
   (.wrap, .top, .covenant, .note ...). The markup on every page keeps
   working untouched; only the look moves. A conversion that also rewrote
   the HTML would have been a rewrite pretending to be a restyle.
   ========================================================================== */

:root{
  /* THE SHEET'S SIDE MARGIN, ONE VALUE FOR THE WHOLE SITE. JMark, 2026-08-16,
     circling the left and right edges of the chrome: "Lets add an extra space
     on the borders so we dont start/end the text right on the edges." The nav
     row set padding:2px 0 0, so Home sat on the glass and the date ran into
     the opposite edge.

     IT IS A TOKEN BECAUSE FOUR THINGS HAVE TO AGREE ON IT: the brand row, the
     site nav, the sector strip and the colophon - which bleeds outward by
     exactly this much to reach the sheet's edge and overshot the viewport on
     every page whose padding was not 20px. One value, and they cannot drift. */
  --sheet-pad: clamp(34px, 5vw, 64px);
  /* The card's top padding. A token because the header band has to
     cancel it: the band is paper and that padding is WHITE, so it
     showed as a white strip across the top of the card above the
     header - the band JMark circled. */
  --sheet-top: 26px;

  /* --- palette B, revised 2026-08-16 on JMark's word after he compared it
     against Google News: "this layout is mUCH better. Let come closer to
     this color scheme."

     WHAT MOVED: the ground is now a cool light grey and the CARDS carry the
     white. That is the whole trick of that layout - content sits on white
     islands above a grey field, so hierarchy comes from surface rather than
     from rules and heavy type. Corners softened, a whisper of lift, more air.

     WHAT DID NOT MOVE: the accent stays OUR red. Google's blue on white is
     the most recognisable interface palette on the internet, and wearing it
     would make a prophecy wire look like a Google product. The one thing we
     must not borrow is the thing people would recognise. ------------------- */
  --paper:#F1F3F4;        /* the GROUND is grey; the cards are the white */
  --card:#FFFFFF;
  --panel:#F8F9FA;
  --panel-2:#EDEFF1;
  --ink:#1F2124;          /* near-black, faintly cool */
  --ink-2:#5F6368;
  --ink-3:#80868B;
  --rule:#DADCE0;
  --rule-2:#C4C7CA;
  --radius:8px;
  --lift:0 1px 2px rgba(31,33,36,.06), 0 1px 3px rgba(31,33,36,.04);
  --needle:#B0201C;       /* THE ONE ACCENT. Used sparingly, on purpose. */
  --needle-soft:rgba(176,32,28,.10);
  --calm:#3D6B58;
  --caution:#8A6A12;
  --caution-bg:rgba(138,106,18,.09);

  /* --- three faces, three jobs ------------------------------------------ */
  --f-inst:"Courier New",Courier,monospace;                    /* instrument */
  --f-edit:Palatino,"Book Antiqua","Palatino Linotype",Georgia,serif; /* prose */
  --f-wire:"Helvetica Neue",Helvetica,Arial,sans-serif;        /* the wire   */

  --measure:64ch;
  --gap:clamp(26px,3.6vw,44px);
}

/* The viewer has THREE states, not two: an explicit choice stamps
   data-theme, and the default "system" setting stamps nothing at all. Both
   are handled, and every colour is a token so none can be defined only
   inside a media query. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1012; --card:#1A1C1F; --panel:#17191C; --panel-2:#212428;
    --ink:#E8EAED; --ink-2:#9AA0A6; --ink-3:#7B8085;
    --rule:#2A2D31; --rule-2:#3A3E43;
    --lift:0 1px 2px rgba(0,0,0,.36), 0 1px 3px rgba(0,0,0,.24);
    --needle:#E2564E; --needle-soft:rgba(226,86,78,.13); --calm:#74B096;
    --caution:#D6B25A; --caution-bg:rgba(214,178,90,.11);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1012; --card:#1A1C1F; --panel:#17191C; --panel-2:#212428;
  --ink:#E8EAED; --ink-2:#9AA0A6; --ink-3:#7B8085;
  --rule:#2A2D31; --rule-2:#3A3E43;
  --lift:0 1px 2px rgba(0,0,0,.36), 0 1px 3px rgba(0,0,0,.24);
  --needle:#E2564E; --needle-soft:rgba(226,86,78,.13); --calm:#74B096;
  --caution:#D6B25A; --caution-bg:rgba(214,178,90,.11);
}

/* ------------------------------------------------------------------ base */
*{ margin:0; padding:0; box-sizing:border-box; }

/* THE CANVAS IS PAPER, NOT WHITE. The card's 22px top margin collapses out
   through body, so body's box starts 22px down the page and its background
   starts with it - leaving a white band across the top of every page, which is
   what JMark circled. body's background only propagates to the canvas when
   nothing else claims it, and the collapse makes that band nobody's. Painting
   the root settles it at the source. */
html{ background:var(--paper); }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-edit);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* NO OUTER PADDING HERE. It was added as a guess at an edge problem whose
     real cause was the header band painting exactly from the first letter to
     the last, and it left the site with two different left edges: pages with
     a .wrap paid it on top of the card's own margin (445px in) while pages
     that ARE the sheet did not (417px). The sheet's margin is --sheet-pad and
     nothing else adds to it. */
}

/* THE WRAP IS THE MEASURE. Do not also set max-width on p/ul: the rules
   would then run past the text and leave a dead gutter down the right,
   which is exactly what shipped in the first cut. 680px of Palatino at
   17px is about 68 characters — inside the comfortable 60-75 band. */
.wrap{ max-width:680px; margin:0 auto; padding:20px 18px 60px; }

/* On a grey ground the reading column becomes a white card, the way the
   news layout works: content on white islands, air around them. */
body > .wrap{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--lift);
  margin:22px auto 60px;
  /* THE CARD READS THE TOKEN TOO, 2026-08-16. It carried its own
     clamp(20px,4vw,40px) - the same numbers the colophon was hard-coding, and
     the reason the front page did not move when the token landed everywhere
     else. Four places knew this measurement and three of them were copies. */
  padding:var(--sheet-top) var(--sheet-pad) 44px;
}

a{ color:inherit; text-underline-offset:2px; }
a:hover{ color:var(--needle); }
:focus-visible{ outline:2px solid var(--needle); outline-offset:3px; }

/* --------------------------------------------------------- the masthead */
.top{
  text-align:center;
  border-bottom:2px solid var(--ink);
  padding-bottom:14px;
  margin-bottom:26px;
}
.top .logo{
  font-family:var(--f-wire);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(23px,4.2vw,36px);
  letter-spacing:.2em;
  display:block;
}
.top .logo b{ color:var(--needle); font-weight:700; }
.top .tag{
  font-family:var(--f-inst);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-top:7px;
  display:block;
}
.top .back{
  display:inline-block;
  margin-top:12px;
  font-family:var(--f-inst);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  text-decoration:none;
  border-bottom:1px solid var(--rule-2);
  padding-bottom:2px;
}
.top .back:hover{ color:var(--needle); border-bottom-color:var(--needle); }

/* ------------------------------------------------------------ headings */
h1{
  font-family:var(--f-wire);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(24px,3.6vw,32px);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 8px;
  text-wrap:balance;
}

/* The old h2 was a black bar with reversed type on every page. Kept as a
   strong rule instead: the section still stops the eye, without twelve
   solid blocks fighting the one accent. */
h2{
  font-family:var(--f-inst);
  font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ink);
  border-bottom:2px solid var(--ink);
  padding-bottom:6px;
  margin:34px 0 14px;
}
h3{
  font-family:var(--f-inst);
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--needle);
  margin:22px 0 8px;
}

/* ---------------------------------------------------------------- prose */
p{ margin:0 0 14px; }
ul,ol{ margin:0 0 14px 22px; }
li{ margin-bottom:7px; }
strong,b{ font-weight:700; }
hr{ border:0; border-top:1px solid var(--rule); margin:28px 0; }

blockquote{
  margin:18px 0;
  padding:2px 0 2px 18px;
  border-left:3px solid var(--rule-2);
  color:var(--ink-2);
  font-style:italic;
}

code,pre{ font-family:var(--f-inst); font-size:14px; }
pre{
  background:var(--panel-2);
  border:1px solid var(--rule);
  padding:14px 16px;
  overflow-x:auto;
  margin:0 0 16px;
}

/* The effective-date / as-of line under a title. */
.eff{
  font-family:var(--f-inst);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 24px;
}

/* An aside, a caveat, a piece of housekeeping. */
.note{
  background:var(--panel);
  border-left:3px solid var(--ink);
  padding:14px 16px;
  font-size:16px;
  color:var(--ink-2);
  margin:20px 0;
}
.note p:last-child{ margin-bottom:0; }

/* Something the reader must not miss — used sparingly or it means nothing. */
.caution{
  background:var(--caution-bg);
  border-left:3px solid var(--caution);
  padding:14px 16px;
  margin:20px 0;
}
.caution p:last-child{ margin-bottom:0; }

/* Inline marker for a placeholder or a flag inside prose. */
.ph{
  font-family:var(--f-inst);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--needle);
  border:1px solid var(--needle);
  padding:1px 5px;
  white-space:nowrap;
}

/* --------------------------------------------------------------- tables */
table{
  border-collapse:collapse;
  width:100%;
  font-size:16px;
  font-variant-numeric:tabular-nums;
  margin:0 0 18px;
}
th,td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--rule); }
th{
  font-family:var(--f-inst);
  font-size:13px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
}
/* Wide content scrolls inside its own box; the page body never scrolls
   sideways. */
.scroll{ overflow-x:auto; border:1px solid var(--rule); }

/* ------------------------------------------------------------- the foot */
.covenant{
  text-align:center;
  font-family:var(--f-inst);
  font-size:13px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-3);
  border-top:2px solid var(--ink);
  margin-top:48px;
  padding-top:18px;
  line-height:1.9;
}

/* ================================================== PALETTE C, SCOPED ===
   The watchman's lamp. Newsletter and share cards ONLY. Scoped to .lamp so
   it can never become a page ground by accident — the ruling was a split,
   not a replacement. */
.lamp{
  --paper:#12100D;
  --card:#1A1713;
  --panel:#1E1A15;
  --ink:#EFE7D6;
  --ink-2:#9A9081;
  --ink-3:#7C7365;
  --rule:#2E2921;
  --rule-2:#3B352B;
  --needle:#C9903A;      /* brass: LAMPLIGHT, NOT ALARM */
  --calm:#7FA98C;
  background:var(--paper);
  color:var(--ink);
}

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

/* ======================================================= THE BRAND BAR ===
   Generated by data/build_brandbar.py and injected on every public page.
   It exists because nine pages named the product ZERO times and carried no
   trademark mark at all - a reader could cross most of this site without
   ever learning what THE RAPTURE SIGNAL is. It carries the name, the mark,
   TODAY'S READING and the one CTA, so the number is never more than a
   screen away whichever page someone lands on. */
.rrbrand{
  display:flex; align-items:center; gap:clamp(12px,2vw,26px); flex-wrap:wrap;
  max-width:1180px; margin:0 auto; padding:10px var(--sheet-pad);
}
/* Inside a .wrap the sheet has already paid the side margin; paying it twice
   pushed the brand row 22px further in than the nav above it on the watch
   pages. Same rule as the sector strip. */
.wrap .rrbrand{ padding-left:0; padding-right:0; }
.rrb-logo{
  font-family:var(--f-wire); font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:14px; text-decoration:none; color:var(--ink);
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px;
}
.rrb-logo b{ color:var(--needle); }
/* THE TURNING MARK, on every page (JMark 2026-08-16: "all pages have the
   animated icon next to the name Rapture Radar- like on the homepage"). The
   front page's masthead had it and every other page carried the wordmark
   bare. Same SVG, one owner in data/sitenav.py, same six-second sweep the
   masthead and the colophon use. */
.rrb-ico{ display:inline-flex; }
.rrb-ico .rr-ico{ display:block; }
.rrb-ico .swp{ animation:rrsweep 6s linear infinite; transform-origin:50% 50%; }
@media (prefers-reduced-motion: reduce){ .rrb-ico .swp{ animation:none; } }
/* THE MARK IS NEVER BARE (JMark, binding). Sized off the wordmark so it
   reads as a trademark symbol and not as a character in the name. */
.rrb-tm{ font-size:.5em; letter-spacing:0; top:-.75em; margin-left:2px;
  color:var(--ink-3); }

/* ONE LINE, ALWAYS. flex-wrap:wrap let the as-of clause drop to a second row
   on About, Sources, Corrections and Methodology, which made the pill 69px
   instead of 40 and the whole header 138px instead of 109 - four pages a
   different height from the rest of the site for no reason a reader could
   see. It is a pill; a pill does not have two lines. */
.rrb-sig{
  display:flex; align-items:baseline; gap:10px; flex-wrap:nowrap;
  white-space:nowrap; min-width:0;
  text-decoration:none; padding:5px 12px; border-radius:999px;
  border:1px solid var(--rule); background:var(--card);
}
.rrb-sig:hover{ border-color:var(--needle); }
.rrb-name{
  font-family:var(--f-wire); font-weight:700; font-size:13px; color:var(--ink);
  white-space:nowrap;
}
.rrb-name sup{ font-size:9px; vertical-align:super; color:var(--ink-3); }
.rrb-num{
  font-family:var(--f-inst); font-weight:700; font-size:17px;
  font-variant-numeric:tabular-nums; color:var(--needle);
}
.rrb-state{
  font-family:var(--f-inst); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--calm);
}
.rrb-as{
  font-family:var(--f-inst); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
@media(max-width:620px){ .rrb-as{ display:none; } }

.rrb-cta{
  margin-left:auto; font-family:var(--f-inst); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; font-size:12px;
  background:var(--needle); color:#fff; padding:10px 18px;
  border-radius:999px; text-decoration:none; white-space:nowrap;
}
.rrb-cta:hover{ background:var(--ink); color:#fff; }
@media(max-width:620px){ .rrb-cta{ margin-left:0; } }