/* In-page sheets. Everything stays on the one page: the audience cards and the
   footer links open a dialog rather than navigating away.
   Built on the native <dialog>, so focus trapping, Escape and the top layer come
   from the browser rather than from hand-rolled JavaScript.
   Additive to a4.css. Scoped under .sheet so a4 is untouched. */

.sheet{
  border:0;padding:0;background:transparent;color:var(--ink);
  width:min(680px,calc(100vw - 32px));max-height:min(86vh,900px);
  margin:auto;overflow:visible;
}
.sheet::backdrop{background:rgba(23,16,9,.58);backdrop-filter:blur(3px)}

.sheet-in{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:0 30px 80px rgba(23,16,9,.28);
  max-height:min(86vh,900px);overflow-y:auto;
  padding:clamp(28px,4vw,46px);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
}

/* the close control sits with the content, not floating over it */
.sheet-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;margin-bottom:6px}
.sheet-top .label{margin-bottom:0}
.sheet-x{flex:0 0 auto;width:34px;height:34px;border-radius:100px;cursor:pointer;
  border:1px solid var(--rule);background:transparent;color:var(--ink-2);
  display:grid;place-items:center;font-family:var(--sans);font-size:17px;
  line-height:1;transition:background .25s ease,color .25s ease,border-color .25s ease}
.sheet-x:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sheet-x:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

.sheet h3{font-family:var(--display);font-size:clamp(26px,3.4vw,36px);
  line-height:1.08;letter-spacing:-.03em;font-weight:500;margin:14px 0 0;
  max-width:20ch}
.sheet .q{font-family:var(--display);font-style:italic;font-size:19px;
  line-height:1.4;color:var(--ink-2);margin:16px 0 0;max-width:44ch}
.sheet h4{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);font-weight:400;
  margin:28px 0 10px}
.sheet p{margin:0 0 1em;max-width:60ch;color:var(--ink-2)}
.sheet p:last-child{margin-bottom:0}
.sheet ul{margin:0 0 1em;padding-left:1.1em;display:grid;gap:8px;max-width:60ch}
.sheet li{color:var(--ink-2)}
.sheet strong{color:var(--ink);font-weight:600}
.sheet .bound{border-left:2px solid var(--ochre);padding:2px 0 2px 18px;
  margin:24px 0 0;font-size:15.5px;color:var(--ink-2);max-width:58ch}
.sheet-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;
  padding-top:24px;border-top:1px solid var(--rule)}

@media (prefers-reduced-motion:no-preference){
  .sheet[open]{animation:sheet-in .34s cubic-bezier(.22,.7,.3,1)}
  @keyframes sheet-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* the audience cards become buttons, so reset the button chrome to match .card */
button.card{font:inherit;text-align:left;width:100%;cursor:pointer;color:inherit}
button.card:hover{transform:translateY(-4px);
  box-shadow:0 20px 48px rgba(42,33,22,.11);border-color:#CBBCA6}
button.card:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* a button that has to read as a link, in the footer and on the dark network band */
button.linky{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:inherit;border-bottom:1px solid transparent;text-align:left}
button.linky:hover{border-bottom-color:var(--ochre)}
button.linky:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
.site-foot button.linky{color:#E2D8C8;font-family:var(--sans);font-size:var(--t-small)}


/* the footer bar is mono and uppercase, so its buttons have to be too */
.foot-bar button.linky{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#7E7060}
.foot-bar button.linky:hover{color:#E2D8C8;border-bottom-color:var(--ochre)}

.sheet-src{display:none}

/* ------------------------------------------------------ the urgent sheet
   Light, like every other panel. The dark version relied on :has() to repaint
   the dialog, which was not applying, so the panel stayed light while the text
   inside it kept the colours written for a dark ground: the heading was very
   nearly white on white.

   Urgency is carried by a deep red on the numbers rather than by inverting the
   panel. It sits in the same warm family as the ochre, a few steps darker and
   redder, so it reads as serious without importing a colour from outside the
   palette. */

.urgent-block{padding:0}

.urgent-block h3{
  color:var(--ink);
  margin:0 0 12px;
  font-size:clamp(27px,3.4vw,40px);
  line-height:1.08;
}
.urgent-lede{
  color:var(--ink-2);
  margin:0;
  max-width:44ch;
  font-size:clamp(15.5px,1.5vw,17px);
}

.urgent-lines{
  list-style:none;
  margin:clamp(24px,3vw,34px) 0 0;
  padding:0;
  border-top:1px solid var(--rule);
}
.urgent-lines li{border-bottom:1px solid var(--rule)}

.urgent-lines a{
  display:flex;
  align-items:baseline;
  gap:clamp(14px,2vw,26px);
  padding:clamp(15px,1.8vw,20px) 4px;
  text-decoration:none;
  border:0;
  transition:padding-left .3s ease, background .3s ease;
}
.urgent-lines a:hover{padding-left:12px;background:rgba(163,58,34,.05)}
.urgent-lines a:focus-visible{outline:2px solid #A33A22;outline-offset:-3px}

.urgent-lines b{
  flex:none;
  font-family:var(--display);
  font-size:clamp(25px,3.4vw,38px);
  line-height:1;
  letter-spacing:-.02em;
  color:#A33A22;
  font-variant-numeric:tabular-nums;
}
.urgent-lines span{
  font-size:14.5px;
  line-height:1.45;
  color:var(--ink-3);
}

@media (prefers-reduced-motion:reduce){ .urgent-lines a{transition:none} }