/* =========================================================
   LIVEOP PREPAREDNESS, page styles
   Zone A: shared across all three preparedness pages
   Zone B: the Limburg schematic
   Zone C: the position paper
   All font-sizes use the role tokens from tokens.css.
   ========================================================= */

/* ---------- Zone A: shared ---------- */

/* .hero--page centres its column, but .hero__sub keeps a 56ch measure
   and so sat off-centre. Only the preparedness pages use .hero--page,
   and this stylesheet loads only on them, so the fix lives here. */
.hero--page .hero__sub{margin-inline:auto}

/* The load-bearing closing line under a divided list. Sized from the
   role scale, deliberately one step below the section heading so it
   reads as a verdict rather than as a second heading. */
.prep-kicker{
  max-width:34ch;
  margin-top:clamp(28px,3.4vw,44px);
  padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--hairline);
  font-size:var(--fs-h4);
  font-weight:500;
  line-height:var(--lh-tight);
  letter-spacing:-.01em;
  color:var(--fg);
}

/* Product names in the "what arrives" list are links. Given its own
   class rather than a descendant selector on .cap b, per the house
   rule about section-level rules reaching into nested components. */
.prep-app{color:var(--accent);text-decoration:none}
.prep-app:hover{text-decoration:underline}

/* Sourced pull quote. Used where the argument rests on a third-party
   document rather than on our own assertion, so the attribution is part
   of the component instead of an afterthought. Child selectors only,
   per the house rule about section-level rules reaching into nested
   components. Colours come from theme tokens, so it works on the dark
   and the light surfaces without a second rule. */
.prep-quote{
  max-width:62ch;
  margin:clamp(22px,2.6vw,32px) 0 0;
  padding-left:clamp(20px,2.4vw,30px);
  border-left:2px solid var(--accent);
}
.prep-quote > blockquote{
  margin:0;
  font-size:var(--fs-h4);
  font-weight:400;
  line-height:var(--lh-snug);
  letter-spacing:-.01em;
  color:var(--fg);
  text-wrap:pretty;
}
.prep-quote > figcaption{
  margin-top:clamp(14px,1.6vw,18px);
  font-size:var(--fs-meta);
  line-height:var(--lh-normal);
  color:var(--fg-subtle);
}
.prep-quote > figcaption > a{color:var(--accent)}
.prep-quote > figcaption > a:hover{text-decoration:underline}

/* ---------- Zone B: Limburg schematic ---------- */

/* The sourced-facts list in "What happened". Every rule targets its own
   class rather than reaching in by element, per the house rule about
   section-level selectors. */
.lf-facts{
  list-style:none;
  margin:clamp(28px,3.4vw,44px) 0 0;
  padding:0;
  border-top:1px solid var(--hairline);
}
.lf-fact{
  position:relative;
  padding:clamp(16px,1.8vw,22px) 0 clamp(16px,1.8vw,22px) 0;
  border-bottom:1px solid var(--hairline);
  font-size:var(--fs-body);
  line-height:var(--lh-relaxed);
  color:var(--fg);
}

/* The citation marker. Sized from the meta role so it reads as apparatus
   rather than as body text, but stays a real, tappable link. */
.lf-cite{
  display:inline-block;
  min-width:1.55em;
  margin-left:.5em;
  padding:.1em .45em;
  border:1px solid var(--border-strong);
  border-radius:999px;
  font-size:var(--fs-meta);
  font-weight:500;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  color:var(--fg-muted);
  vertical-align:.12em;
  transition:color var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease);
}
.lf-cite:hover,.lf-cite:focus-visible{color:var(--accent);border-color:var(--accent-line)}

/* The scope statement that closes the factual section. */
.lf-scope{
  max-width:62ch;
  margin-top:clamp(24px,3vw,34px);
  font-size:var(--fs-body);
  color:var(--fg-muted);
}

.lf-sources{margin-top:clamp(32px,4vw,48px)}
.lf-srclist{
  margin:12px 0 0;
  padding-left:1.4em;
  display:grid;
  gap:10px;
}
.lf-src{
  font-size:var(--fs-small);
  line-height:var(--lh-relaxed);
  color:var(--fg-muted);
}
.lf-src > a{color:var(--accent);text-decoration:none;word-break:break-word}
.lf-src > a:hover{text-decoration:underline}

/* ---- the schematic itself ----
   A schematic, deliberately not a map. Portrait viewBox so the labels stay
   legible at 360px: at that width the drawing is ~320px across, a scale of
   about .61, which keeps the 23-unit labels above 14px on screen. SVG text
   sizes are user-space units tied to the viewBox, not px, so they scale
   with the drawing. */
.lf-schematic{margin:clamp(28px,3.6vw,44px) 0 0;padding:0}
.lf-svg{
  display:block;
  width:100%;
  max-width:540px;
  height:auto;
  margin-inline:auto;
  font-family:var(--font-sans);
  overflow:visible;
}

.lf-node__box{fill:rgba(255,255,255,.045);stroke:var(--border-strong);stroke-width:1.5}
.lf-node__label{fill:var(--fg);font-weight:500}

.lf-core__ring{fill:none;stroke:var(--accent-line);stroke-width:1.5;stroke-dasharray:3 9}
.lf-core__disc{fill:rgba(255,255,255,.05);stroke:var(--border-strong);stroke-width:1.5}
.lf-core__label{fill:var(--fg);font-weight:500}
.lf-core__sub{fill:var(--fg-subtle);letter-spacing:.06em}

/* Base arrows are always fully drawn, so the reduced-motion default is the
   complete picture with nothing dimmed or half-finished. Both the arrow and
   the pulse are <use> clones of one route definition, so these properties are
   set on the clone and inherit into it: stroke, fill and the marker are all
   inherited SVG properties. The marker lives here rather than as an attribute
   on the route, so only the arrow carries an arrowhead and the pulse does not. */
.lf-arrow{fill:none;stroke:rgba(255,255,255,.26);stroke-width:2;marker-end:url(#lf-arrowhead)}
.lf-head{fill:rgba(255,255,255,.4)}

/* The travelling pulse is the only animated element, and it carries no
   information the base arrow does not already carry. That is precisely why it
   must not be drawn in a public-safety colour: on this page those colours carry
   meaning and are never decoration. It uses the UI accent instead. Hidden
   outright when motion is not wanted. */
.lf-pulse{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:12 88;
  opacity:0;
}

.lf-figcaption{
  max-width:52ch;
  margin:clamp(20px,2.4vw,28px) auto 0;
  font-size:var(--fs-meta);
  line-height:var(--lh-relaxed);
  color:var(--fg-subtle);
  text-align:center;
}

@media (prefers-reduced-motion: no-preference){
  .lf-pulse{
    opacity:1;
    animation:lf-flow 3.6s linear infinite;
  }
  .lf-pulse--1{animation-delay:0s}
  .lf-pulse--2{animation-delay:.6s}
  .lf-pulse--3{animation-delay:1.2s}
  .lf-pulse--4{animation-delay:1.8s}
  .lf-pulse--5{animation-delay:2.4s}
  .lf-pulse--6{animation-delay:3s}
  .lf-core__ring{animation:lf-breathe 6s var(--ease) infinite}
}

/* pathLength is 100 on every arrow, so all six pulses travel at the same
   apparent rate regardless of how long their curve actually is. */
@keyframes lf-flow{
  from{stroke-dashoffset:100}
  to{stroke-dashoffset:-12}
}
@keyframes lf-breathe{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* ---------- Zone C: position paper ---------- */

/* The paper is a document, not a landing page, so it opts out of the
   cinematic title block the other two pages use. The hero markup is the
   shared one; only its scale and weight change, scoped to this page by
   the body class so pages 1 and 2 are untouched. */
.paper-page .hero--page{
  min-height:clamp(300px,42svh,420px);
  padding-bottom:clamp(40px,5vw,64px);
}
.paper-page .hero--page h1{
  font-size:var(--fs-h1);
  font-weight:400;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-snug);
  max-width:20ch;
  margin-inline:auto;
}

/* One measured column for the whole document. 46rem holds the body role
   token at roughly 66 characters, which is the measure a long argument
   needs to stay readable. --paper-lh is leading, not a font size, so it
   is set here rather than taken from the type scale. */
/* This page is the one most likely to be saved, re-hosted, or opened in a
   locked-down browser with scripting off, and the scroll-reveal layer starts
   at opacity 0 and is only lifted by site.js. A ministry official meeting a
   blank page is the worst failure available to this document, so the reveal
   is inert here. Pages 1 and 2 keep it. */
.paper-page .reveal{opacity:1;transform:none;transition:none}

.paper{--paper-lh:1.68}
.paper__wrap{max-width:46rem}

.paper__dateline{
  font-size:var(--fs-meta);
  line-height:var(--lh-normal);
  letter-spacing:.02em;
  color:var(--fg-subtle);
  padding-bottom:clamp(16px,1.8vw,22px);
  border-bottom:1px solid var(--border-strong);
}

/* Contents. Document apparatus rather than site navigation, so it stays
   on the printed copy, with its link styling neutralised there. */
.paper__toc{
  margin-top:clamp(24px,3vw,34px);
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,30px);
  background:var(--bg-sunken);
  border-radius:var(--r-lg);
}
.paper__toc-title{
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg-subtle);
}
.paper__toc-list{
  margin:10px 0 0;
  padding-left:1.5em;
  display:grid;
  gap:7px;
}
.paper__toc-item{
  font-size:var(--fs-small);
  line-height:var(--lh-normal);
  color:var(--fg-muted);
}
.paper__toc-item > a{color:var(--fg-muted);text-decoration:none}
.paper__toc-item > a:hover{color:var(--accent);text-decoration:underline}

/* Numbered sections, separated by a rule rather than by a change of
   surface. Every type rule below uses a child combinator, per the house
   rule about section-level selectors reaching into nested components:
   .prep-quote sits inside .paper__sec and must keep its own styles. */
.paper__sec{
  margin-top:clamp(44px,5.2vw,72px);
  padding-top:clamp(28px,3.2vw,40px);
  border-top:1px solid var(--hairline);
}
.paper__h{
  display:flex;
  gap:.6em;
  align-items:baseline;
  font-size:var(--fs-h4);
  font-weight:500;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-snug);
  color:var(--fg);
  margin-bottom:clamp(16px,1.8vw,22px);
}
.paper__num{
  flex:none;
  font-size:var(--fs-meta);
  font-weight:500;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--accent);
}
.paper__sec > p{
  font-size:var(--fs-body);
  line-height:var(--paper-lh);
  color:var(--fg-muted);
  text-wrap:pretty;
}
/* A paragraph that follows a quote, a list or an aside needs the same
   separation as one that follows another paragraph. Listed explicitly
   rather than as > * + p, so the first paragraph after a heading keeps
   the heading's own spacing. */
.paper__sec > p + p,
.paper__sec > figure + p,
.paper__sec > ul + p,
.paper__sec > ol + p,
.paper__sec > aside + p{margin-top:clamp(18px,2vw,26px)}
.paper__sec > .paper__standfirst{
  font-size:var(--fs-lead);
  line-height:var(--lh-relaxed);
  color:var(--fg);
}
/* The load-bearing line of an argument, given its own weight so a reader
   skimming the paper still collects the claim. */
.paper__sec > .paper__emph{
  margin-top:clamp(20px,2.4vw,28px);
  padding-left:clamp(18px,2vw,24px);
  border-left:2px solid var(--accent);
  font-size:var(--fs-h5);
  line-height:var(--lh-snug);
  color:var(--fg);
}
.paper__sec > .paper__note{
  margin-top:clamp(24px,3vw,34px);
  font-size:var(--fs-small);
  line-height:var(--lh-relaxed);
  color:var(--fg-subtle);
}
/* A note used as a source line carries a link out to the source. */
.paper__note > a{color:var(--accent)}
.paper__note > a:hover{text-decoration:underline}

/* Plain lists inside a section. */
.paper__list{
  margin:clamp(14px,1.6vw,20px) 0 0;
  padding-left:1.4em;
  display:grid;
  gap:10px;
}
.paper__list-item{
  font-size:var(--fs-body);
  line-height:var(--paper-lh);
  color:var(--fg-muted);
}

/* The four pillars, the three testable properties and the four asks share
   one divided-list treatment: a named heading over a paragraph, separated
   by hairlines, with the ordinal drawn by a counter so the markup carries
   no numbering of its own. */
.paper__pillars,.paper__props,.paper__asks{
  list-style:none;
  counter-reset:paper-item;
  margin:clamp(22px,2.6vw,32px) 0 0;
  padding:0;
  border-top:1px solid var(--hairline);
}
.paper__pillar,.paper__prop,.paper__ask{
  counter-increment:paper-item;
  padding:clamp(20px,2.4vw,28px) 0;
  border-bottom:1px solid var(--hairline);
}
.paper__pillar-name,.paper__prop-name,.paper__ask-name{
  font-size:var(--fs-h5);
  font-weight:500;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-snug);
  color:var(--fg);
}
.paper__pillar-name::before,.paper__prop-name::before,.paper__ask-name::before{
  content:counter(paper-item) ".";
  margin-right:.5em;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--accent);
}
.paper__pillar > p,.paper__prop > p,.paper__ask > p{
  margin-top:clamp(10px,1.2vw,14px);
  font-size:var(--fs-body);
  line-height:var(--paper-lh);
  color:var(--fg-muted);
  text-wrap:pretty;
}

/* Declaring our own interest belongs in the paper, not in a footnote, so
   it gets a bordered aside rather than small print. */
.paper__aside{
  margin-top:clamp(28px,3.2vw,40px);
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px);
  background:var(--bg-sunken);
  border-left:2px solid var(--border-strong);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
}
.paper__aside-label{
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg-subtle);
  margin-bottom:10px;
}
.paper__aside > p{
  font-size:var(--fs-body);
  line-height:var(--paper-lh);
  color:var(--fg-muted);
}

/* Signature block. The only ask on the page is the closing line, and it is
   a sentence with an address in it rather than a button. */
.paper__sign{
  margin-top:clamp(48px,5.6vw,76px);
  padding-top:clamp(28px,3.2vw,40px);
  border-top:1px solid var(--border-strong);
}
.paper__sign-org{
  font-size:var(--fs-h5);
  font-weight:500;
  letter-spacing:var(--ls-snug);
  color:var(--fg);
}
.paper__sign-lines{
  margin-top:10px;
  font-size:var(--fs-small);
  line-height:var(--lh-relaxed);
  color:var(--fg-muted);
}
.paper__sign-about{
  margin-top:clamp(20px,2.4vw,28px);
  font-size:var(--fs-small);
  line-height:var(--lh-relaxed);
  color:var(--fg-subtle);
}
.paper__offer{
  margin-top:clamp(20px,2.4vw,28px);
  font-size:var(--fs-body);
  line-height:var(--paper-lh);
  color:var(--fg);
}
.paper__offer > a{color:var(--accent)}
.paper__offer > a:hover{text-decoration:underline}

/* ---- print ----
   The paper is meant to be attached to a submission, so printing is a
   first-class output. Site chrome goes, the hero becomes a plain title
   block on white, and the scroll-reveal layer is forced visible because
   sections below the fold may never have been observed. */
@media print{
  /* Everything is scoped to .paper-page, the body class this page alone
     carries, so pages 1 and 2 of the campaign keep their own print
     behaviour even though they load this stylesheet. @page cannot be
     scoped that way and is the one deliberate exception: an 18mm margin
     is right for all three. */
  @page{margin:18mm 16mm}

  .paper-page > .lo-header,.paper-page > .lo-mobile,.paper-page > .lo-footer{display:none !important}
  /* transition:none as well, so a print snapshot taken the instant the
     media switches is never caught mid fade-in. */
  .paper-page .reveal{opacity:1 !important;transform:none !important;transition:none !important}

  body.paper-page{background:#fff;color:#000}

  .paper-page .hero{
    min-height:0;
    padding:0 0 clamp(12px,3vw,18px);
    background:#fff;
    color:#000;
    text-align:left;
    --fg:#000;--fg-muted:#222;--fg-subtle:#444;
  }
  .paper-page .hero__grad,.paper-page .hero__bg,.paper-page .hero__scan,.paper-page .scroll-cue{display:none}
  .paper-page .hero__inner{max-width:none;margin-inline:0}
  .paper-page .hero .eyebrow{justify-content:flex-start;color:#000}
  .paper-page .hero h1{color:#000;max-width:none;margin-inline:0}

  /* The section surface token paints a grey band across the page once the
     paper is printed on white, so the paper drops its own background. */
  .paper-page .paper{padding-block:0;background:none}
  .paper-page .wrap,.paper-page .paper__wrap{max-width:none;padding-inline:0}

  .paper-page .paper__toc{background:none;border-radius:0;padding:12px 0 0;border-top:1px solid #999}
  .paper-page .paper__toc-item > a{color:#000;text-decoration:none}

  .paper-page .paper__aside{background:none;border-left:1px solid #666;border-radius:0}
  .paper-page .paper__emph{border-left-color:#666}
  .paper-page .prep-quote{border-left-color:#666}

  /* Keep a heading with the paragraph it introduces, and never split one
     numbered item across a page. */
  .paper-page .paper__h,
  .paper-page .paper__pillar-name,
  .paper-page .paper__prop-name,
  .paper-page .paper__ask-name{break-after:avoid;page-break-after:avoid}
  .paper-page .paper__pillar,
  .paper-page .paper__prop,
  .paper-page .paper__ask,
  .paper-page .paper__aside,
  .paper-page .paper__sign,
  .paper-page .prep-quote{break-inside:avoid;page-break-inside:avoid}

  /* A printed copy is meant to be checkable, so every reference prints its
     address. An external link carries its own; an internal one cannot, because
     CSS sees the relative href rather than the resolved URL, so the two
     cross-references carry the absolute address in data-print-url. The mailto
     in the signature block has neither and prints as plain text, which is
     right: the address is already written out beside it. */
  .paper-page .paper a[href^="http"]::after{content:" (" attr(href) ")";font-size:var(--fs-micro);color:#444;word-break:break-all}
  .paper-page .paper a[data-print-url]::after{content:" (" attr(data-print-url) ")";font-size:var(--fs-micro);color:#444;word-break:break-all}
}