/* ============================================================
   INTELLIGENCE BRIEFINGS — cards, reader overlay, and the PDF.

   The PDF is window.print() rather than a bundled generator: no library
   over the wire, nothing to keep patched, and it stays inside the site's
   Content Security Policy. The letterhead is rebuilt here in CSS rather
   than dropped in as the source PNG, because browsers strip background
   images from print by default and a letterhead that vanishes on half of
   the world's printers is not a letterhead. Rebuilt, it also stays sharp
   at any paper size and adds nothing to page weight.
   ============================================================ */

/* Page-local reading colours.
   The shared --ink-soft composites to 3.78:1 on ivory and --ink-mut to
   2.3:1. Those are fine for a one-line caption and not fine for decks,
   source lists and small-caps metadata, which is most of what this
   section is made of. Same hue, held at a weight that clears 4.5:1. */
:root{
  --ar-body:rgba(28,59,56,.86);
  --ar-soft:rgba(28,59,56,.80);
  --ar-mut:rgba(28,59,56,.72);
  --ar-quote:#0A6E68;
}

/* ============ SECTION ============ */
.arts{position:relative;background:var(--ivory);
  padding:clamp(72px,11vh,130px) 0 clamp(74px,11vh,130px);overflow:hidden}
.arts::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 84% 0%,rgba(14,156,147,.08),transparent 68%)}
.arts .wrap{position:relative;z-index:1;max-width:var(--maxw)}
.arts-head{max-width:64ch}
.arts-head h2{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4.2vw,58px);
  letter-spacing:-.03em;line-height:1.04;color:var(--ink);margin-top:16px}
.arts-head h2 em{font-style:normal;color:var(--teal-deep)}
.arts-head p{font-size:clamp(15px,1.15vw,18px);color:var(--ar-soft);line-height:1.74;
  margin-top:18px;max-width:60ch}

/* ---- the index ----
   Rules, not boxes. A card grid put six framed rectangles on a page that
   already has plenty; a ruled list reads as an index of published work,
   which is what this is. Each row carries a flat block of the article's
   own colour with a glyph standing for its argument - no photography,
   because the stock available had nothing to do with any of these pieces
   and generic imagery on a briefing undercuts the briefing. */
.art-grid{border-top:1px solid var(--line);margin-top:clamp(30px,4.4vh,48px)}
.art-row{border-bottom:1px solid var(--line)}
.art-row.art-hide{display:none}

.art-open{display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(16px,2.4vw,34px);
  width:100%;text-align:left;cursor:pointer;background:transparent;border:0;
  padding:clamp(22px,2.8vh,34px) clamp(6px,1vw,14px);
  transition:background .45s var(--ease),padding-left .45s var(--ease)}
.art-open:hover{background:rgba(14,156,147,.045);padding-left:clamp(14px,1.8vw,26px)}
.art-open:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}

.art-n{font-family:var(--disp);font-size:clamp(11px,.9vw,13px);font-weight:600;
  letter-spacing:.08em;color:var(--ar-mut);align-self:start;padding-top:4px}

/* the mark: a solid field of the article's colour, and its glyph */
.art-mark{display:grid;place-items:center;flex:none;
  width:clamp(56px,5.4vw,74px);aspect-ratio:1;border-radius:12px;
  background:var(--c);
  box-shadow:0 14px 26px -16px color-mix(in srgb,var(--c) 85%,transparent);
  transition:transform .5s var(--ease)}
.art-open:hover .art-mark{transform:translateY(-3px) scale(1.04)}
.art-mark svg{width:52%;height:52%;fill:none;stroke:#fff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

.art-body{display:block;min-width:0}
.art-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--disp);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ar-mut)}
.art-meta em{font-style:normal;font-weight:600;color:color-mix(in srgb,var(--c) 62%,var(--ink))}
.art-meta i{width:3px;height:3px;border-radius:50%;background:var(--line);display:block}
.art-title{display:block;font-family:var(--serif);font-weight:750;
  font-size:clamp(19px,1.9vw,29px);letter-spacing:-.026em;line-height:1.14;
  color:var(--ink);margin-top:10px}
.art-deck{display:block;font-size:clamp(13.5px,1vw,16px);color:var(--ar-soft);
  line-height:1.68;margin-top:9px;max-width:62ch}

.art-go{display:grid;place-items:center;flex:none;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink);
  transition:background .45s var(--ease),border-color .45s,color .45s,transform .45s var(--ease)}
.art-open:hover .art-go{background:var(--c);border-color:transparent;color:#fff;transform:translateX(4px)}
.art-go svg{width:17px;height:17px}

@media(max-width:820px){
  .art-open{grid-template-columns:auto minmax(0,1fr);gap:16px;
    padding:22px clamp(4px,1vw,10px)}
  .art-n,.art-go{display:none}
  .art-mark{width:48px;border-radius:10px;align-self:start}
  .art-open:hover{padding-left:clamp(4px,1vw,10px)}
}

/* ============ READER OVERLAY ============ */
.art-reader{position:fixed;inset:0;z-index:220;display:flex;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.art-reader.open{opacity:1;visibility:visible}
.ar-back{position:absolute;inset:0;background:rgba(10,22,20,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ar-card{position:relative;width:min(880px,100%);height:100%;
  background:var(--ivory);overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(22px);transition:transform .5s var(--ease);
  box-shadow:0 0 90px -20px rgba(10,22,20,.6)}
.art-reader.open .ar-card{transform:none}

.ar-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px clamp(20px,3.4vw,52px);
  background:rgba(250,248,243,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft)}
.ar-brand{display:flex;align-items:center;gap:10px;
  font-family:var(--disp);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ar-mut)}
.ar-brand img{width:22px;height:auto;display:block}
.ar-bar-r{display:flex;align-items:center;gap:10px}
.ar-dl{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:10px 18px;border-radius:999px;border:0;background:var(--grad);color:#fff;
  font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.04em;
  box-shadow:0 16px 32px -16px rgba(11,133,125,.6);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ar-dl:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(11,133,125,.72)}
.ar-dl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ar-x{width:38px;height:38px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  font-size:20px;line-height:1;display:grid;place-items:center;
  transition:background .35s,border-color .35s}
.ar-x:hover{background:var(--surface);border-color:var(--teal)}
.ar-x:focus-visible,.ar-dl:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.ar-inner{padding:clamp(30px,4.4vw,62px) clamp(20px,3.4vw,52px) clamp(60px,9vh,110px)}
.ar-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ar-mut)}
.ar-meta em{font-style:normal;font-weight:600;color:var(--teal-deep)}
.ar-meta i{width:3px;height:3px;border-radius:50%;background:var(--line);display:block}
.ar-head h2{font-family:var(--serif);font-weight:800;font-size:clamp(28px,4vw,52px);
  letter-spacing:-.032em;line-height:1.05;color:var(--ink);margin-top:14px}
.ar-deck{font-size:clamp(16px,1.35vw,21px);line-height:1.6;color:var(--ar-soft);
  margin-top:16px;font-weight:400;max-width:54ch}
.ar-byline{font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ar-mut);margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}

.ar-mark{display:grid;place-items:center;width:56px;aspect-ratio:1;border-radius:13px;
  background:var(--c,var(--teal));margin-bottom:24px;
  box-shadow:0 16px 30px -18px color-mix(in srgb,var(--c,var(--teal)) 85%,transparent)}
.ar-mark svg{width:52%;height:52%;fill:none;stroke:#fff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* the reading column: measure held near 68 characters */
.ar-copy{max-width:66ch;margin-top:clamp(26px,3.4vh,38px);
  padding-top:clamp(24px,3vh,34px);border-top:2px solid var(--c,var(--teal))}
.ar-copy p{font-size:clamp(15px,1.12vw,17.5px);line-height:1.78;color:var(--ar-body);
  margin-top:18px}
.ar-copy h3{font-family:var(--serif);font-weight:750;font-size:clamp(19px,1.7vw,25px);
  letter-spacing:-.024em;line-height:1.18;color:var(--ink);margin-top:clamp(30px,4vh,44px)}
.ar-copy ul{margin-top:18px;list-style:none}
.ar-copy li{position:relative;padding-left:22px;margin-top:11px;
  font-size:clamp(14.5px,1.06vw,16.5px);line-height:1.72;color:var(--ar-body)}
.ar-copy li::before{content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--teal)}
.ar-copy blockquote{margin:clamp(26px,3.4vh,38px) 0;padding:2px 0 2px 24px;
  border-left:3px solid var(--amber);
  font-family:var(--serif);font-weight:650;font-size:clamp(17px,1.55vw,23px);
  line-height:1.42;letter-spacing:-.018em;color:var(--ar-quote)}
@media(max-width:620px){
  .ar-bar{padding:12px 18px}
  .ar-brand span{display:none}
  .ar-dl{padding:9px 14px;font-size:11px}
}

/* ============================================================
   PRINT — the article on the STAIR letterhead.

   Everything on screen is hidden; only #artPrint prints. The header and
   footer sit in the flow, so nothing can land on top of the copy.
   ============================================================ */
.art-print{display:none}

@media print{
  /* Ordinary margins. The letterhead is in the flow now, so it does not
     need the page box padded out to make room for a fixed element. */
  @page{size:A4;margin:16mm 18mm 18mm}

  html,body{background:#fff !important}
  body > *{display:none !important}
  .art-print{display:block !important;position:relative;
    font-family:var(--font);color:#111;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* ---- letterhead ----
     These were position:fixed, which in paged media is supposed to repeat
     them on every sheet. Browsers disagree about whether a fixed element in
     print is positioned against the page box or the content box, and Chrome
     put both of them into the middle of the flowing text: the logo landed
     across a heading and the address across a paragraph.

     They are ordinary flow elements now - masthead first, sign-off last -
     so the alignment is whatever the page margins say and nothing can
     overlap the copy. The trade is that on a three-page briefing the
     letterhead appears once rather than on each sheet, which is how a
     printed letter behaves anyway. */
  .ap-head{display:flex;align-items:flex-start;justify-content:space-between;
    gap:10mm;margin-bottom:9mm;break-inside:avoid;page-break-inside:avoid}
  .ap-logo{display:flex;flex-direction:column;gap:2mm}
  .ap-logo img{width:17mm;height:auto;display:block}
  .ap-logo b{font-family:var(--disp);font-size:10pt;font-weight:700;letter-spacing:.34em;
    color:#111;line-height:1}
  .ap-logo span{font-family:var(--disp);font-size:5.6pt;letter-spacing:.44em;
    color:#B07B3C;line-height:1}
  .ap-contact{text-align:right;font-size:8pt;line-height:1.5;color:#111;
    border-bottom:1.6pt solid #111;padding-bottom:2mm;min-width:62mm}
  .ap-contact b{display:block;font-size:9.5pt;font-weight:700;letter-spacing:.02em;
    text-transform:uppercase;margin-bottom:1mm}

  .ap-foot{margin-top:10mm;padding-top:3mm;
    font-size:7.6pt;line-height:1.45;color:#333;
    border-top:1px solid #ddd;
    display:flex;justify-content:space-between;align-items:flex-end;gap:8mm;
    break-inside:avoid;page-break-inside:avoid}
  .ap-foot em{font-style:normal;color:#777}

  /* ---- the article itself ---- */
  .ap-kicker{font-family:var(--disp);font-size:8pt;letter-spacing:.2em;text-transform:uppercase;
    color:#0B857D;margin:0 0 3mm}
  .art-print h1{font-family:var(--serif);font-size:22pt;font-weight:800;letter-spacing:-.02em;
    line-height:1.1;color:#0F2A27;margin:0 0 4mm}
  .ap-deck{font-size:11pt;line-height:1.5;color:#3A4E4B;margin:0 0 6mm;
    padding-bottom:5mm;border-bottom:1px solid #ddd}

  .ap-copy p{font-size:10pt;line-height:1.62;color:#1a1a1a;margin:0 0 3.4mm;
    orphans:3;widows:3}
  .ap-copy h3{font-family:var(--serif);font-size:12.5pt;font-weight:700;color:#0F2A27;
    margin:7mm 0 2.6mm;break-after:avoid;page-break-after:avoid}
  .ap-copy ul{margin:0 0 3.4mm;padding-left:5mm}
  .ap-copy li{font-size:10pt;line-height:1.58;margin-bottom:1.6mm;color:#1a1a1a}
  .ap-copy blockquote{margin:5mm 0;padding-left:5mm;border-left:2pt solid #E08A3C;
    font-family:var(--serif);font-size:11.5pt;font-weight:650;line-height:1.36;
    color:#0B6B64;break-inside:avoid;page-break-inside:avoid}
  a[href]::after{content:""}   /* no URL dumps in the margins */
}