/* Vulnytics blog / article styles. Extends landing/assets/style.css.
   Evidence Dossier: warm bone on deep navy, serif headings, oxblood accent.
   Green is reserved for a PROVEN yes (a verified finding, a comparison win); it
   is never used as a generic highlight, which is what it was before. */

/* Article shell */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.post-header { padding: 64px 0 8px; }
.crumbs { font-family: var(--mono); font-size: 13px; color: var(--faint); margin: 0 0 22px; }
.crumbs a { color: var(--faint); }
.crumbs a:hover { color: var(--stamp-text); text-decoration: none; }
.crumbs .sep { color: var(--line); margin: 0 8px; }

.post-title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.6vw, 50px);
  margin: 0 0 18px; letter-spacing: -.015em; line-height: 1.12; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono);
  font-size: 13px; color: var(--faint); margin-bottom: 8px; }
.post-meta .tag { color: var(--stamp-text); }

/* Article body. Serif headings against a sans body is the landing's pairing;
   keeping it here is most of what makes the two pages feel like one site. */
article.post { padding: 30px 0 20px; font-size: 18px; }
article.post > p { color: var(--ink-dim); margin: 0 0 1.15em; }
article.post h2 { font-size: clamp(24px, 3vw, 32px); margin: 1.7em 0 .55em; }
article.post h3 { font-size: 21px; margin: 1.4em 0 .4em; }
article.post h2 + p, article.post h3 + p { margin-top: 0; }
article.post strong { color: var(--ink); font-weight: 700; }
article.post a:not(.btn) { color: var(--link); font-weight: 500; }
/* Inside a sentence, colour alone separates the link from the prose at 1.8:1 -
   well under the 3:1 WCAG 1.4.1 asks for when colour is the only signal. The
   "Keep reading" row and the CTA button are unambiguous from their own layout,
   so only in-sentence links get the rule. */
article.post p:not(.post-related) a:not(.btn),
article.post li a:not(.btn) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
  text-decoration-color: rgba(127, 176, 218, .45);
}
:root[data-theme="light"] article.post p:not(.post-related) a:not(.btn),
:root[data-theme="light"] article.post li a:not(.btn) { text-decoration-color: rgba(44, 78, 110, .45); }
article.post p:not(.post-related) a:not(.btn):hover,
article.post li a:not(.btn):hover { text-decoration-color: currentColor; }
article.post ul, article.post ol { margin: 0 0 1.3em; padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 11px; }
article.post ol { counter-reset: step; }
/* The item is a normal text block with the marker in a gutter, NOT a flex row.
   It used to be display:flex, which turned every inline child into its own flex
   item: a leading <strong> became a narrow column of its own and the sentence
   after it was squeezed into a second one. Readable enough at desktop width, but
   at 390px it shredded each bullet into two or three columns a few words wide -
   and mobile search is where most of these articles are read. */
article.post li { position: relative; display: block; padding-left: 26px;
  color: var(--ink-dim); font-size: 17px; line-height: 1.55; }
/* The section mark from the dossier, not a generic bullet. */
article.post ul li::before { content: "\00a7"; position: absolute; left: 0; top: 0;
  color: var(--stamp-text); font-weight: 700; }
article.post ol li { counter-increment: step; padding-left: 38px; }
article.post ol li::before { content: counter(step); position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--stamp-text);
  border: 1px solid rgba(194,66,48,.4); border-radius: 4px;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }

article.post .lede { font-size: 21px; line-height: 1.55; color: var(--ink);
  font-family: var(--sans); font-weight: 500; letter-spacing: -.005em; margin-bottom: 1.3em; }

/* Callout */
.note { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--stamp);
  border-radius: 6px; padding: 18px 20px; margin: 1.6em 0; }
.note p { margin: 0; font-size: 16px; color: var(--ink-dim); }
.note .k { font-family: var(--sans); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700; color: var(--stamp-text); display: block; margin-bottom: 6px; }

/* Comparison table */
.post-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; margin: 1.8em 0; }
.post-table table { width: 100%; border-collapse: collapse; min-width: 560px;
  background: var(--surface); font-size: 15px; }
.post-table th, .post-table td { padding: 13px 16px; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.post-table thead th { font-family: var(--sans); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); background: var(--bg-2); font-weight: 700; }
.post-table thead th.us { color: var(--stamp-text); }
.post-table tbody th { font-weight: 600; color: var(--ink); font-family: var(--sans); font-size: 14.5px; }
.post-table td.us { color: var(--ink); background: var(--stamp-wash); font-weight: 500; }
.post-table tr:last-child td, .post-table tr:last-child th { border-bottom: none; }
.post-table .yes { color: var(--seal); font-weight: 700; }
.post-table .no { color: var(--faint); }

/* In-article CTA */
.cta-box { background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--stamp); border-radius: 8px; padding: 30px; margin: 2.4em 0 1em; }
.cta-box h3 { font-size: 24px; margin: 0 0 8px; }
.cta-box p { font-size: 16px; color: var(--ink-dim); margin: 0 0 18px; max-width: 52ch; }
.cta-box .hero-cta { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* Post footer */
.post-foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 10px;
  display: flex; align-items: center; gap: 12px; }
/* The wax seal, the same mark that closes a delivered dossier. */
.post-foot .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--seal);
  box-shadow: 0 0 0 4px var(--seal-wash); flex-shrink: 0; }
.post-foot p { margin: 0; font-size: 14px; color: var(--faint); }

.disclaimer { font-size: 13px; color: var(--faint); font-family: var(--mono);
  line-height: 1.6; margin-top: 18px; }

/* Blog index */
.blog-hero { padding: 72px 0 20px; text-align: center; }
.blog-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 52px);
  margin-bottom: 14px; letter-spacing: -.015em; }
.blog-hero p { font-size: 19px; color: var(--mute); max-width: 48ch; margin: 0 auto; }

.post-list { display: flex; flex-direction: column; gap: 18px; max-width: 820px; margin: 44px auto 0; }
.post-card { display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 26px 28px;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease; }
.post-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--stamp);
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.6); }
.post-card .kicker { display: block; font-family: var(--sans); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--stamp-text);
  margin-bottom: 10px; }
.post-card h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; color: var(--ink);
  margin: 0 0 8px; letter-spacing: -.01em; }
.post-card p { font-size: 15.5px; color: var(--mute); margin: 0 0 14px; }
.post-card .more { font-family: var(--sans); font-weight: 700; font-size: 14.5px;
  color: var(--stamp-text); display: inline-flex; align-items: center; gap: 6px; }

.post-related { margin-top: 2.4em; }

/* Article FAQ. Mirrors the homepage disclosure pattern so the two surfaces read
   as one site; the copy here is the same text the FAQPage schema declares. */
.post-faq { margin: 2.6em 0 1em; border-top: 1px solid var(--line); }
.post-faq h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 1.2em 0 .2em; }
.post-faq details { border-bottom: 1px solid var(--line); }
.post-faq summary { list-style: none; cursor: pointer; position: relative;
  padding: 18px 40px 18px 0; font-family: var(--serif); font-size: 18px;
  color: var(--ink); line-height: 1.35; }
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; position: absolute; right: 4px; top: 15px;
  font-family: var(--sans); font-size: 22px; font-weight: 400; color: var(--stamp-text); }
.post-faq details[open] summary::after { content: "\2013"; }
.post-faq summary:focus-visible { outline: 2.5px solid var(--stamp-text); outline-offset: 3px; }
.post-faq .ans { padding: 0 40px 20px 0; color: var(--ink-dim); font-size: 16.5px; line-height: 1.65; }
@media (max-width: 620px) {
  .post-faq summary { font-size: 17px; padding-right: 34px; }
  .post-faq .ans { padding-right: 0; }
}

@media (max-width: 620px) {
  article.post { font-size: 17px; }
  article.post .lede { font-size: 19px; }
  .post-card { padding: 22px; }
}