/* ==========================================================================
   securitytechinsider.com — design system
   Static CSS only. No JavaScript anywhere on this site by design:
   a CSP without 'unsafe-inline' is required for the §8 header score.
   ========================================================================== */

/* --- 1. tokens ---------------------------------------------------------- */
:root{
  /* neutrals: cool graphite bias, chosen not inherited */
  --paper:#F1F3F4;
  --surface:#FFFFFF;
  --sunk:#E7EAEC;
  --ink:#14181D;
  --ink-soft:#555E68;
  --ink-faint:#89929C;
  --rule:#DADEE2;
  --rule-soft:#E6E9EC;

  /* signal */
  --accent:#0E7C86;
  --accent-ink:#0A5F67;

  /* derived taxonomy — five fixed categories assigned at rewrite time */
  --cat-governance:#0E7C86;
  --cat-risk:#B44A2E;
  --cat-data:#2F58A6;
  --cat-policy:#8A6A16;
  --cat-infra:#34694A;

  /* type */
  --display:"Chivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,Consolas,monospace;

  /* measure */
  --gutter:clamp(1rem,4vw,2.5rem);
  --max:74rem;
  --prose:38rem;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101317;
    --surface:#171B21;
    --sunk:#1C2128;
    --ink:#E8EBEE;
    --ink-soft:#A0A8B2;
    --ink-faint:#6C757F;
    --rule:#262C34;
    --rule-soft:#1F242B;
    --accent:#3FB3BD;
    --accent-ink:#5FC6CF;
    --cat-governance:#3FB3BD;
    --cat-risk:#E08A6E;
    --cat-data:#7FA3E8;
    --cat-policy:#D4A93C;
    --cat-infra:#62B383;
  }
}
:root[data-theme="dark"]{
  --paper:#101317;
  --surface:#171B21;
  --sunk:#1C2128;
  --ink:#E8EBEE;
  --ink-soft:#A0A8B2;
  --ink-faint:#6C757F;
  --rule:#262C34;
  --rule-soft:#1F242B;
  --accent:#3FB3BD;
  --accent-ink:#5FC6CF;
  --cat-governance:#3FB3BD;
  --cat-risk:#E08A6E;
  --cat-data:#7FA3E8;
  --cat-policy:#D4A93C;
  --cat-infra:#62B383;
}

/* --- 2. base ------------------------------------------------------------ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
.skip{
  position:absolute;left:-999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);padding:.7rem 1rem;
  font-family:var(--mono);font-size:.8rem;
}
.skip:focus{left:0;}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);}

/* --- 3. shared type ---------------------------------------------------- */
.label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);
}
.stamp{
  display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cat,var(--accent));
  padding-bottom:.18rem;border-bottom:2px solid var(--cat,var(--accent));
}
.date{font-family:var(--mono);font-size:.74rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.byline{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);}
.byline a{color:var(--ink);border-bottom:1px solid var(--rule);}
.byline a:hover{border-bottom-color:var(--accent);}

.h-xl{font-family:var(--display);font-weight:900;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.02;letter-spacing:-.022em;margin:0;text-wrap:balance;}
.h-lg{font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.08;letter-spacing:-.018em;margin:0;text-wrap:balance;}
.h-md{font-family:var(--display);font-weight:700;font-size:1.18rem;line-height:1.2;letter-spacing:-.008em;margin:0;text-wrap:balance;}
.h-sm{font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.25;margin:0;text-wrap:balance;}
.standfirst{font-size:1.1rem;line-height:1.55;color:var(--ink-soft);margin:0;max-width:34rem;}

/* section heading with a rule that fills the remaining width */
.sec-head{
  display:flex;align-items:center;gap:1rem;
  margin:0 0 1.4rem;
}
.sec-head h2{
  font-family:var(--display);font-weight:900;font-size:1.05rem;
  letter-spacing:.02em;text-transform:uppercase;margin:0;white-space:nowrap;
}
.sec-head::after{content:"";flex:1;height:2px;background:var(--ink);opacity:.14;}
.sec-head .more{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.sec-head .more:hover{text-decoration:underline;text-underline-offset:3px;}

/* --- 4. masthead ------------------------------------------------------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--surface);}
.masthead-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:1.1rem;
}
.wordmark{font-family:var(--display);font-size:1.28rem;line-height:1;letter-spacing:-.02em;white-space:nowrap;}
.wordmark b{font-weight:900;}
.wordmark span{font-weight:400;color:var(--ink-soft);}
.wordmark i{
  display:block;font-style:normal;font-family:var(--mono);
  font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-top:.34rem;
}
.lang{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;}
.lang a{color:var(--ink-faint);}
.lang a:hover{color:var(--ink);}
.lang [aria-current]{color:var(--ink);font-weight:500;}
.lang s{text-decoration:none;color:var(--rule);}

.catnav{border-bottom:1px solid var(--rule);background:var(--surface);}
.catnav ul{
  display:flex;gap:1.6rem;list-style:none;margin:0;
  padding:.7rem var(--gutter);max-width:var(--max);margin-inline:auto;
  overflow-x:auto;scrollbar-width:thin;
}
.catnav a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;padding-bottom:.2rem;
  border-bottom:2px solid transparent;
}
.catnav a:hover{color:var(--ink);border-bottom-color:var(--cat,var(--accent));}
.catnav [aria-current]{color:var(--ink);border-bottom-color:var(--cat,var(--accent));}

/* --- 5. image plate ---------------------------------------------------- */
/* stands in for the uniquely generated article image */
.plate{
  width:100%;height:auto;aspect-ratio:16/9;background:var(--sunk);
  color:var(--cat,var(--accent));
}
.plate-note{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin:.45rem 0 0;
}

/* --- 6. lead story ----------------------------------------------------- */
.lead{padding-block:clamp(2rem,5vw,3.6rem);}
.lead-grid{display:grid;grid-template-columns:1fr;gap:1.8rem;}
.lead-copy{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;}
.lead-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;}
.lead-meta::before{content:"";}
@media (min-width:60rem){
  .lead-grid{grid-template-columns:1.05fr .95fr;gap:2.8rem;align-items:center;}
}

/* --- 7. bulletin rows (the signature list) ----------------------------- */
.bulletin{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);}
.bulletin>li{border-bottom:1px solid var(--rule);}
.brow{
  display:grid;grid-template-columns:1fr;gap:.3rem;
  padding:.85rem 0;align-items:baseline;
}
.brow .h-sm{transition:none;}
.brow:hover .h-sm{color:var(--cat,var(--accent));}
.brow-meta{display:flex;align-items:center;gap:.8rem;}
@media (min-width:44rem){
  .brow{grid-template-columns:5.5rem 1fr 9rem;gap:1.4rem;padding:.95rem 0;}
  .brow-meta{justify-content:flex-end;}
}

/* --- 8. story cards ---------------------------------------------------- */
.cards{
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);grid-template-columns:1fr;
}
/* auto-fit, not a fixed count: with two cards in a three-column grid the
   unused track showed the container's --rule background as a grey block.
   auto-fit collapses empty tracks so the cards always fill the row.
   minmax(20rem,...) caps it at three columns inside the 74rem wrap. */
@media (min-width:40rem){.cards{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));}}
.card{
  background:var(--surface);padding:1rem;
  display:flex;flex-direction:column;gap:.7rem;
  border-top:3px solid var(--cat,var(--accent));
}
.card:hover .h-md{color:var(--cat,var(--accent));}
.card-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:baseline;}

/* --- 9. article -------------------------------------------------------- */
.crumbs{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--ink-faint);padding-block:1rem;
}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;}
.crumbs li::after{content:"/";margin-left:.5rem;color:var(--rule);}
.crumbs li:last-child::after{content:"";}
.crumbs a:hover{color:var(--ink);}

.art-head{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;padding-bottom:1.6rem;}
.art-meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;
  padding-block:.9rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);width:100%;
}
.art-figure{margin:0 0 2rem;}
.art-figure figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-faint);margin-top:.5rem;}

.prose{max-width:var(--prose);}
.prose p{margin:0 0 1.15rem;}
.prose h2{
  font-family:var(--display);font-weight:900;font-size:1.35rem;line-height:1.18;
  letter-spacing:-.012em;margin:2.2rem 0 .8rem;text-wrap:balance;
}
.prose blockquote{
  margin:1.8rem 0;padding-left:1.1rem;border-left:3px solid var(--accent);
  font-size:1.12rem;line-height:1.5;color:var(--ink);
}
.prose a{color:var(--accent-ink);border-bottom:1px solid currentColor;}

/* author card at foot of article */
.abox{
  display:grid;grid-template-columns:1fr;gap:1.1rem;align-items:start;
  border-top:2px solid var(--ink);padding-top:1.3rem;margin-top:2.5rem;
}
.abox .portrait{width:84px;height:84px;}
@media (min-width:34rem){.abox{grid-template-columns:84px 1fr;gap:1.3rem;}}

.portrait{
  aspect-ratio:1;width:100%;height:auto;align-self:start;
  object-fit:cover;background:var(--sunk);color:var(--accent);
}

/* --- 10. author profile ------------------------------------------------ */
.profile{
  display:grid;grid-template-columns:1fr;gap:1.6rem;
  padding-block:clamp(1.8rem,4vw,3rem);
}
.profile .portrait{width:176px;height:176px;}
@media (min-width:52rem){.profile{grid-template-columns:176px 1fr;gap:2.4rem;align-items:start;}}
.profile-facts{
  list-style:none;margin:1.2rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.profile-facts>div{background:var(--surface);padding:.6rem .75rem;}
.profile-facts dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);}
.profile-facts dd{margin:.25rem 0 0;font-family:var(--mono);font-size:.8rem;}

/* --- 11. follow strip ------------------------------------------------- */
.follow{
  border:1px solid var(--rule);background:var(--surface);
  padding:1.3rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;
}
.follow-links{display:flex;flex-wrap:wrap;gap:1.2rem;}
.follow-links a{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:.1rem;
}

/* --- 12. sections spacing --------------------------------------------- */
.band{padding-block:clamp(2rem,4.5vw,3.2rem);border-top:1px solid var(--rule);}
.band-first{border-top:2px solid var(--ink);}

/* --- 13. footer ------------------------------------------------------- */
.foot{background:#0C0F12;color:#D6DADE;margin-top:3rem;}
.foot-in{
  display:grid;grid-template-columns:1fr;gap:2rem;padding-block:2.6rem;
}
@media (min-width:52rem){.foot-in{grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;}}
.foot .wordmark span{color:#8B939B;}
.foot h3{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7E868E;margin:0 0 .8rem;font-weight:400;
}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.foot a{font-size:.92rem;color:#D6DADE;}
.foot a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;}
.foot-note{
  border-top:1px solid #1E242A;padding-block:1.1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:#79818A;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
}

/* --- 14. design-mockup annotation (not shipped) ----------------------- */
.mock-bar{
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem var(--gutter);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between;
}
.mock-bar a{color:var(--paper);border-bottom:1px solid #ffffff55;}
.mock-bar a:hover{border-bottom-color:currentColor;}

/* --- 15. category binding + utilities --------------------------------- */
/* Category colour is bound by class, never by an inline style attribute:
   the CSP has no 'unsafe-inline' for style-src, so style="" would be dropped. */
.cat-governance{--cat:var(--cat-governance);}
.cat-risk{--cat:var(--cat-risk);}
.cat-data{--cat:var(--cat-data);}
.cat-policy{--cat:var(--cat-policy);}
.cat-infra{--cat:var(--cat-infra);}

.blurb{font-size:.94rem;}
.follow-blurb{font-size:.96rem;margin-top:.35rem;}
.art-title{max-width:44rem;}
.profile-bio{margin-top:.8rem;max-width:36rem;}
.abox-label{margin:0 0 .3rem;}
.abox-bio{margin:.5rem 0 0;color:var(--ink-soft);font-size:.98rem;max-width:34rem;}
.foot-blurb{font-size:.94rem;color:#9AA2AA;margin:.9rem 0 0;max-width:26rem;}
.inline-link{color:var(--accent-ink);border-bottom:1px solid currentColor;}
.mt-xs{margin-top:.7rem;}
.mt-sm{margin-top:.8rem;}
.mt-lg{margin-top:2.5rem;}
.pb-md{padding-bottom:2rem;}
.pb-lg{padding-bottom:3rem;}


/* --- 19. article measure ------------------------------------------------ */
/* Every text block on an article spans the same width as the figure — the
   full .wrap — so the headline, standfirst, body and byline all align with the
   image edges instead of sitting in a narrower column inside it.

   The measure that results is long (roughly 110 characters), so the body gets
   a larger size and looser leading to keep the return sweep findable. That is
   a deliberate trade for alignment over the 65-character ideal. */
.art-head{ max-width:none; margin-inline:0; }
.art-head .standfirst{ max-width:none; }
.art-title{ max-width:none; }
.abox{ max-width:none; }

.prose{
  max-width:none;
  margin-inline:0;
  font-size:1.12rem;
  line-height:1.78;
}
/* Constrain only what genuinely suffers at full width. */
.prose blockquote{ max-width:52rem; }

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

/* --- 16. pager ---------------------------------------------------------- */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:2rem 0 3rem;padding-top:1.1rem;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;
}
.pager a{color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:.15rem;}
.pager a:hover{color:var(--ink);}
.pager-off{color:var(--ink-faint);}
.pager-count{color:var(--ink-soft);font-variant-numeric:tabular-nums;text-transform:uppercase;}

/* --- 17. portrait in a card + placeholder notice ------------------------ */
.card .portrait{width:72px;height:72px;}

.notice{
  border-left:3px solid var(--cat,var(--accent));
  background:var(--sunk);
  padding:.9rem 1.1rem;margin:0 0 1.4rem;
}
.notice p{margin:0;font-size:.95rem;color:var(--ink-soft);}
.notice strong{color:var(--ink);}

/* --- 18. fixture marker ------------------------------------------------- */
/* Placeholder note on development fixtures. Never ships: the release gate
   blocks any build carrying the x-fixture marker. */
.fixture-note{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--ink-faint);border-top:1px solid var(--rule);
  padding-top:.7rem;margin-top:1.6rem;
}

/* --- 20. explainer prose direction -------------------------------------
   Structure the "wire" direction never emitted, so none of it had rules and
   all of it fell back to browser defaults. See PROSE_STYLES in
   src/pipeline/rewrite.ts for what generates it.

   Every selector here needs a construct wire cannot produce — a list, an h3,
   an all-bold opening paragraph — so a wire article renders unchanged. */
.prose h3{
  font-family:var(--display);font-weight:900;font-size:1.08rem;line-height:1.22;
  letter-spacing:-.008em;margin:1.7rem 0 .6rem;text-wrap:balance;
}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.4rem;max-width:44rem;}
.prose li{margin:0 0 .6rem;padding-left:.15rem;}
.prose li:last-child{margin-bottom:0;}
.prose li::marker{color:var(--ink-faint);}
/* Lead-in terms carry the scanning weight of the list, so they take the
   display face rather than heavier body text, which at this size reads as
   weight without reading as a label. */
.prose li>strong:first-child{font-family:var(--display);font-weight:900;}

/* The takeaway paragraph the explainer direction opens with is set entirely in
   bold. The source publication sets it as plain bold body copy — body size, no
   rule, no panel — so it reads as the article's first sentence rather than as a
   pull quote. An earlier version here gave it an accent bar and a size bump,
   which turned the opening of every explainer article into a highlighted box.
   Keyed on :has() so it cannot touch a wire article, whose first paragraph is
   ordinary prose. */
.prose>p:first-of-type:has(>strong:only-child){max-width:46rem;margin-bottom:1.35rem;}
.prose>p:first-of-type>strong:only-child{font-weight:700;color:var(--ink);}

/* --- 21. sources and references ----------------------------------------
   Full width like every other article block in section 19 — the reading
   measure on this theme is set by the figure, not by a column. */
.refs{border-top:1px solid var(--rule);padding-top:1.1rem;margin-top:2.5rem;}
.refs ol{margin:.9rem 0 0;padding-left:1.5rem;}
.refs li{margin:0 0 .85rem;line-height:1.45;max-width:52rem;}
.refs li::marker{font-family:var(--mono);font-size:.85rem;color:var(--ink-faint);}
/* a{color:inherit;text-decoration:none} is the global reset, so a reference
   without this rule renders as plain body text and stops reading as a link. */
.refs a{color:var(--accent-ink);border-bottom:1px solid currentColor;}
/* Publisher and date belong under the title, not trailing it: the titles are
   long enough to wrap, and inline metadata then reads as part of the headline.
   Same treatment as a figure caption, which is the other piece of source
   attribution on the page. */
.refs-pub{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:.25rem;
}

/* The note restates as a sentence what the list gives as data, for a reader
   who skims past the list. Ruled top and bottom so it reads as an editorial
   footnote rather than a fifth reference. */
.refs-note{
  margin:1.5rem 0 0;padding:.9rem 0;max-width:52rem;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  font-size:.96rem;line-height:1.6;color:var(--ink-soft);
}
.refs-note strong{color:var(--ink);}

/* --- 22. read more in this topic ---------------------------------------
   Reuses .bulletin, which brings its own 2px top rule, so this block adds
   only the heading spacing and the two tail links. */
.readmore{margin-top:2.5rem;}
.readmore .label{margin-bottom:.7rem;}
.readmore-all{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:1.2rem 0 0;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
}
.readmore-all a{color:var(--accent-ink);border-bottom:1px solid currentColor;}
/* Direction cue, in CSS rather than the string, so it stays out of both
   locales' i18n and cannot end up translated. */
.readmore-all a::before{content:"\2190\00a0";color:var(--ink-faint);}

/* --- 23. figure caption and credit -------------------------------------
   Two claims, two lines. The caption is editorial text from the rewrite; the
   credit says who made the picture. The credit is deliberately quieter than
   the caption, which is editorial text and carries the meaning. */
.art-figure figcaption .fig-cap{
  display:block;font-family:var(--body);font-size:.94rem;line-height:1.5;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);
}
.art-figure figcaption .fig-credit{display:block;margin-top:.35rem;}
.art-figure figcaption .fig-cap+.fig-credit{margin-top:.4rem;}