/* The article view.
 *
 * Structure follows Inside Tech World's article layout, which is a mature and
 * well-reasoned design; the colours, type and class names are EvolveDash's.
 * This is a fork rather than an import: nothing here reaches into that
 * repository and nothing breaks if it changes.
 *
 * WHAT IS DELIBERATELY ABSENT. ITW's article CSS carries a narration player, a
 * corrections disclosure, a newsletter unit and affiliate notices, because ITW
 * has those models. EvolveDash does not build any of them, so styling them here
 * would be dead CSS that outlives the reason it was written.
 *
 * NO THIRD-PARTY CSS FRAMEWORK. Nothing here is Bootstrap, Tailwind or a reset
 * copied from elsewhere. The absence is deliberate: a framework is a large
 * surface of rules nobody on the project chose, and it makes every later
 * decision an argument with defaults.
 *
 * THE BODY RULES MATTER MOST. 357 imported articles render through
 * `.ed-art__body`, and their markup is whatever WordPress authors wrote over
 * three years: measured, that is p, h2, h3, h4, a, ul, ol, li, strong, em, hr,
 * figure, figcaption and img, and nothing else. Each is styled explicitly.
 */

/* ------------------------------------------------------------------ shell */

.ed-art {
  max-width: var(--ed-maxw);
  margin-inline: auto;
  padding-inline: var(--ed-gutter);
  padding-block: clamp(24px, 4vw, 56px);
  color: var(--ed-ink);
  font-family: var(--ed-font-body);
}

/* -------------------------------------------------------------------- head */

.ed-art__head { margin-bottom: clamp(20px, 3vw, 36px); }

.ed-art__kicker {
  display: inline-block;
  font-family: var(--ed-font-display);
  font-size: var(--ed-read-kicker);
  font-weight: var(--ed-weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  /* the INK token: this is text, so it must clear 4.5:1 */
  color: var(--ed-magenta-ink);
  text-decoration: none;
  margin-bottom: 12px;
}
.ed-art__kicker:hover { text-decoration: underline; text-underline-offset: 3px; }

.ed-art__title {
  font-family: var(--ed-font-display);
  font-size: var(--ed-read-title);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: var(--ed-weight-bold);
  text-wrap: balance;
  margin: 0 0 14px;
  color: var(--ed-ink);
}

.ed-art__dek {
  font-size: var(--ed-read-dek);
  line-height: 1.5;
  color: var(--ed-dek);
  max-width: var(--ed-measure);
  text-wrap: pretty;
  margin: 0 0 20px;
}

/* The byline, the hero and the contents list are the article view's own
 * (blog/static/css/article_view.css); careers has none of them. */


/* -------------------------------------------------------------------- body */

.ed-art__body {
  max-width: var(--ed-measure);
  font-size: var(--ed-read-body);
  line-height: 1.68;
  color: var(--ed-ink);
}

.ed-art__body > * + * { margin-top: 1.15em; }

.ed-art__body h2,
.ed-art__body h3,
.ed-art__body h4 {
  font-family: var(--ed-font-display);
  font-weight: var(--ed-weight-bold);
  line-height: 1.22;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ed-ink);
  /* scroll-margin so an in-page anchor does not land under the sticky bar.
   * 6,086 of the corpus's 6,108 in-page anchors resolve to a heading id, so
   * these are links people actually follow. */
  scroll-margin-top: 8px;
}
.ed-art__body h2 { font-size: var(--ed-read-h2); margin-top: 1.9em; }
.ed-art__body h3 { font-size: var(--ed-read-h3); margin-top: 1.6em; }
.ed-art__body h4 { font-size: var(--ed-read-h4); margin-top: 1.4em; }

/* There is deliberately no h1 rule. A body h1 competes with the page title, and
 * the importer demotes the 19 that existed to h2. */

/* NO WEIGHT, so it only resets. As `.ed-art__body p` it outranked the
 * `> * + *` rule above, and a paragraph after a paragraph got no space at all.
 * It still zeroes a paragraph nested in a list item or an FAQ answer. */
:where(.ed-art__body) p { margin-block: 0; }

/* The design's text link, #6B21C4 hovering to #4B0F9E (HANDOFF.md: "Text
 * links on light grounds are #6B21C4"; magenta is for eyebrows and filled
 * CTAs), 7.96:1 on white. THE UNDERLINE STAYS: the link is only 1.59:1
 * against the body text, so colour alone cannot mark it (WCAG 1.4.1).
 * A pill in the body (the service call to action) is a button, not a text
 * link, and keeps its own colours; :where(), so no rule weighs more. */
.ed-art__body a:where(:not(.ed-btn)) {
  color: var(--ed-link);
  text-decoration: underline;
  text-decoration-thickness: var(--ed-underline);
  text-underline-offset: 2px;
  transition: color var(--ed-transition-quick),
              text-decoration-thickness var(--ed-wipe-duration) var(--ed-ease);
}
/* Hover and keyboard focus alike, the line swells rather than snapping
 * (the owner, 4 October: "Hover and focus: ... inline links"). */
.ed-art__body a:where(:not(.ed-btn)):focus-visible,
.ed-art__body a:where(:not(.ed-btn)):hover {
  color: var(--ed-link-hover);
  text-decoration-thickness: var(--ed-underline-hover);
}

.ed-art__body strong { font-weight: var(--ed-weight-bold); }
.ed-art__body em { font-style: italic; }

.ed-art__body ul,
.ed-art__body ol { padding-inline-start: 1.35em; display: flex; flex-direction: column; gap: 0.45em; }
.ed-art__body li { line-height: 1.6; }
.ed-art__body li::marker { color: var(--ed-sub); }
/* Nested lists are real here: the corpus carries 2,836 ul/ol tags against 1,592
 * list blocks, so nesting lives inside a block's own HTML. */
.ed-art__body li > ul,
.ed-art__body li > ol { margin-top: 0.45em; }

.ed-art__body hr {
  border: 0;
  border-top: 1px solid var(--ed-rule);
  margin-block: 2.2em;
}

.ed-art__body figure { margin: 2em 0; }
.ed-art__body figure img,
.ed-art__body img,
.ed-art__body video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ed-radius);
}
/* Italic and centered under the image, the credit with it (the owner, 10
 * October 2026); IBM Plex Sans has its own italic in fonts.css, never a
 * slanted upright. */
.ed-art__body figcaption {
  margin-top: 8px;
  font-size: var(--ed-read-caption);
  font-style: italic;
  line-height: 1.45;
  text-align: center;
  color: var(--ed-sub);
}
/* The attribution is its own field rather than free text inside the caption:
 * 601 of 667 source captions carried a hand-typed "Source: X" that could not be
 * styled, linked or audited. */
.ed-art__source { color: var(--ed-sub); }
.ed-art__source a { color: var(--ed-sub); text-decoration: underline; }

/* No table styling is shipped. The corpus contains zero tables, and CSS for
 * something nothing uses is CSS nobody maintains. Add it with the first table. */

/* THE SAME BODY ON THE IMPORTED PAGES (pages/standard_page.html): privacy,
 * contact, cybersecurity and the rest read through these rules too. The
 * enquiry form is set outside the body there, so none of the rules above
 * reach into it, and it stands off the prose on either side by the space a
 * card in the body takes (.ed-cta, below). */
.ed-art__body + .ed-leadform,
.ed-leadform + .ed-art__body { margin-block-start: 2.4em; }

/* --------------------------------------------------------------------- FAQ */

/* 281 posts carry an FAQ section and 1,368 question/answer pairs were recovered
 * from them. WordPress emitted no FAQPage structured data at all,
 * so this block is also where that schema comes from. */
.ed-faq {
  margin: 2.4em 0;
  border-top: 2px solid var(--ed-magenta);
  padding-top: 1.4em;
}
.ed-faq h2 {
  font-family: var(--ed-font-display);
  font-size: var(--ed-read-faq-title);
  margin: 0 0 1em;
}
.ed-faq dl { margin: 0; display: flex; flex-direction: column; gap: 1.1em; }
/* Each question carries its number in a hanging column, so a question that
 * wraps, and its answer, line up after the number. In em, the same in the bold
 * question and the regular answer (ch is not): 1.9em holds "10." in mono. */
.ed-faq dt {
  display: grid;
  grid-template-columns: 1.9em minmax(0, 1fr);
  column-gap: 0.35em;
  font-weight: var(--ed-weight-bold);
  color: var(--ed-ink);
  margin-bottom: 0.35em;
}
.ed-faq__num {
  font-family: var(--ed-font-body);
  font-variant-numeric: tabular-nums;
  color: var(--ed-magenta);
}
.ed-faq dd {
  margin: 0;
  padding-inline-start: calc(1.9em + 0.35em);
  color: var(--ed-ink);
}

/* ------------------------------------------------------------- service CTA */

/* 56 articles already link to a service or contact page as a bare inline link.
 * This is a consultancy blog and routing readers to services is its commercial
 * job, so the most valuable link on the page should not look like a citation. */
/* The design's one card material (HANDOFF.md, "Cards — one material"), no
 * stripe. */
.ed-cta {
  margin: 2.4em 0;
  padding: clamp(20px, 1.9vw, 26px);
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-card);
  box-shadow: var(--ed-card-shadow);
}
.ed-cta h3 {
  font-family: var(--ed-font-display);
  font-size: var(--ed-read-cta-title);
  margin: 0 0 8px;
}
.ed-cta p { margin: 0 0 14px; color: var(--ed-dek); }
/* Its button is the site's main button (layout.css, "The main button"; the
 * owner, 4 October 2026), which the body's link and focus rules leave alone. */


/* ------------------------------------------------------------------- roles */

/* /careers/ sets its open roles in the body's own type: the section is an
 * .ed-art__body too (careers/careers_index_page.html), so the heading, the
 * list and the links are the body's. Two things differ, because a role is
 * not prose. Its title opens a list item, so it sits under "Open roles" by
 * the body's block spacing rather than a heading's full top margin after
 * prose; and its title, place and opening are one item, so they are spaced
 * as the items of a list are (the body's list gap), not as paragraphs. */
.ed-roles .ed-roles__title { margin-block: 0; }
.ed-roles__item > * + * { margin-block-start: 0.45em; }


/* ------------------------------------------------------------------- focus */

/* One visible focus style everywhere. Removing outlines without replacing them
 * is the single most common way a site becomes unusable by keyboard.
 *
 * SCOPED TO THE ARTICLE. It was global, and because this file loads after
 * layout.css its `border-radius: 2px` won every tie: the shell's pills and menu
 * cards turned into square-cornered rectangles the moment they took keyboard
 * focus. The shell has its own ring (layout.css, "Focus"); inside an article
 * this one still applies exactly as before, except to a pill, which keeps
 * the shell's ring and its own round corners. */
.ed-art :where(a, button, input, select, textarea, summary):where(:not(.ed-btn)):focus-visible {
  outline: 2px solid var(--ed-focus);
  outline-offset: 2px;
  border-radius: var(--ed-radius-ring);
}