@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ===== GENERATED by build-native.js. Do not edit. =====
   Sources, in order: ../../assets/css/aditi-article-style.html,
   ../../assets/css/aditi-post-additions.css, aditi-blog-post-overrides.css,
   aditi-blog-post-map.css.
   Edit those, then re-run: node build-native.js --all
   ===================================================== */

/* Aditi blog article. Theme unchanged from the live blog; typeface only.
   Source Sans Pro -> Montserrat (headings) + Inter (body), the two faces from
   the brand system. Recolour the whole article from these five variables. */

.aditi-post{
  --a:#3550a0;        /* blog accent, unchanged */
  --ink:#333333;
  --body:#666666;
  --line:#e2e7ee;
  --panel:#f7f9fc;
  --tint:#eef2fa;
  --head:'Montserrat',Helvetica,Arial,sans-serif;
  --text:'Inter',Helvetica,Arial,sans-serif;
  font-family:var(--text);
  font-size:18px;
  line-height:1.7;
  color:var(--body);
}
.aditi-post *{box-sizing:border-box}

.aditi-post h2,.aditi-post h3,
#et-boc .et-l .aditi-post h2,#et-boc .et-l .aditi-post h3{
  font-family:var(--head);
  color:var(--a);
  font-weight:600;
  line-height:1.3;
  margin:2em 0 .6em;
  padding-bottom:0;
}
.aditi-post h2{font-size:27px}
.aditi-post h3{font-size:21px}
.aditi-post p{margin:0 0 1.15em}
.aditi-post strong{color:var(--ink);font-weight:600}

/* standfirst */
.aditi-post .lede{
  font-size:21px;line-height:1.6;color:var(--ink);
  margin:0 0 1.2em;
}
.aditi-post .byline{
  font-family:var(--head);font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--body);
  margin:0 0 2em;padding-bottom:1.4em;border-bottom:1px solid var(--line);
}

/* figure */
.aditi-post figure{margin:2.4em 0;padding:0}
.aditi-post .dg{display:block;width:100%;height:auto}
.aditi-post figcaption{
  font-family:var(--text);font-size:15px;line-height:1.55;
  color:var(--body);margin-top:.9em;padding-left:14px;
  border-left:3px solid var(--a);
}
.aditi-post .dg-t{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;fill:#333}
.aditi-post .dg-t-inv{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;fill:#fff}
.aditi-post .dg-s{font-family:'Inter',sans-serif;font-size:13px;fill:#666}
.aditi-post .dg-s-inv{font-family:'Inter',sans-serif;font-size:13px;fill:rgba(255,255,255,.85)}
.aditi-post .dg-k{font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;fill:#666}
.aditi-post .dg-num{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;fill:#fff}
.aditi-post .dg-big{font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;fill:#3550a0}

/* series footer */
.aditi-post .series{
  margin:2.6em 0 0;padding:22px 26px;
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--a);border-radius:0 6px 6px 0;
}
.aditi-post .series p{margin:0;font-size:16px}
.aditi-post .series .k{
  font-family:var(--head);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--body);
  display:block;margin-bottom:.4em;
}

@media (max-width:767px){
  .aditi-post{font-size:17px}
  .aditi-post h2{font-size:23px}
  .aditi-post .lede{font-size:19px}
  .aditi-post figcaption{font-size:14px}
}

/* ==========================================================================
   Additions to the canonical article stylesheet.

   The canonical block is aditi-article-style.html, copied byte for byte from
   D:\Articles\build-articles.js and shared by all eleven articles already
   published. IT IS NOT EDITED HERE. build-post.js splices this file in just
   before the canonical block's own closing style tag, so the eleven existing
   articles and the new posts stay on one stylesheet with one set of variables.

   DO NOT spell out the HTML tag that closes a stylesheet block anywhere in
   this comment (or below it) again, quoted or not: this whole file lands
   between a real opening and closing instance of that tag, which a browser
   parses as raw text rather than CSS - it is scanning for that exact
   substring literally, comments and quoted strings included, with no
   understanding of CSS/comment syntax at all. That is exactly what happened
   here: an earlier sentence describing build-post.js's own splice point
   spelled the closing tag out, which cut the real stylesheet off right at
   this comment on every post this file has ever shipped in, silently
   dropping every rule below it - the LinkedIn square, the code block
   styling, the list styling - on the live site.

   Only what the canonical block genuinely does not have is added here (this
   list grows as posts need more than the eleven live articles ever did -
   keep it accurate, do not just leave the count from whenever it was last
   two):

     1. .ccard-li      the LinkedIn square in the byline. Vikas supplied the
                       rule; it is scoped under .aditi-post here, in line with
                       the rest of the sheet, so it cannot leak into the Divi
                       header or the certificates pages, which use a .ccard-li
                       of their own at a different size.

     2. pre / code     the eleven existing articles carry no code at all, so
                       the canonical block never needed these. These posts
                       argue from source, and without a rule a C# block renders
                       as an unindented run of Inter body text.

     3. ul             likewise: none of the eleven use a bullet list.

     4. .post-featured the hero image at the top of a post, when it has one
                       (see lib/blog-post-parse.js's featuredImageBlock).

   Everything else, the typeface pair, the colours, the heading sizes, comes
   from the canonical block. Do not restate any of it here.
   ========================================================================== */

/* ---------- byline: the engagement line ------------------------------------

   .aditi-post .byline already exists in the canonical block: Montserrat, 13px,
   600, uppercase, letter-spaced, --body, with the rule underneath. This is the
   one part of the byline it has no rule for.

   Sentence case and quieter, so it reads as a fact about the work rather than
   a third line of the attribution. Required by the publish checklist in
   content-seo-standards.md, and omitted automatically where a post has no
   engagement. */

.aditi-post .byline .engagement{
  display:block;
  margin:.5em 0 .2em;
  font-family:var(--text);
  font-size:15px;font-weight:400;
  letter-spacing:0;text-transform:none;
  color:var(--body);
}

/* Vikas's rule, scoped. The size is 30px and the radius 3px, which is what is
   already in use on the live posts, and deliberately not the 42px/4px the
   certificates hub uses for its own .ccard-li: there it has to match a
   button's height, here it sits under two lines of small caps.
   The duplicate `display:flow` in the original is dropped, because the
   `display:inline-flex` on the next line overrode it. */
.aditi-post .ccard-li{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  border-radius:3px;
  background-color:var(--a);
  color:#fff;
  transition:background-color .18s ease;
}
.aditi-post .ccard-li:hover,
.aditi-post .ccard-li:focus{background-color:#2c4488;color:#fff}
/* An <img> now, not an inline <svg> - see lib/blog-post-parse.js's
   LINKEDIN_ICON_IMG for why (kses strips <svg> from plain post_content). */
.aditi-post .ccard-li img{display:block}

/* ---------- code -------------------------------------------------------------

   The block scrolls rather than wraps. A wrapped C# line reads as two
   statements, which is exactly the misreading a post about a threshold
   constant cannot afford.

   --panel and --line are the same tokens the .series footer uses, so a code
   block and a series block read as the same family of surface. */

.aditi-post pre{
  margin:0 0 1.6em;padding:16px 18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--a);
  border-radius:0 6px 6px 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.aditi-post pre code{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:14px;line-height:1.6;
  color:var(--ink);
  white-space:pre;background:none;border:0;padding:0;
}
/* :not(pre) so the block rule above is not undone by this one. */
.aditi-post :not(pre) > code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:.92em;
  padding:2px 6px;border-radius:3px;
  background:var(--tint);
  border:1px solid var(--line);
  color:var(--ink);
}

/* ---------- lists ------------------------------------------------------------
   The canonical block has no list rule, because none of the eleven articles
   uses one. Four of these twelve do. Kept to the same rhythm as .aditi-post p,
   whose bottom margin is 1.15em. */

.aditi-post ul{margin:0 0 1.4em;padding-left:1.2em;list-style:disc}
.aditi-post ul li{margin:0 0 .45em}

/* ---------- featured image -----------------------------------------------
   Sits first in .aditi-post, before the byline, when the draft has one. Uses
   the canonical block's own figure rule (2.4em margin, meant for a diagram
   mid-article) for everything except the top edge: as the very first thing
   in the post that margin would just be dead space under the WordPress-
   rendered title, so it is zeroed here and only here. */
.aditi-post .post-featured{margin-top:0}

@media (max-width:767px){
  .aditi-post pre{padding:13px 14px}
  .aditi-post pre code{font-size:13px}
}

/* ==========================================================================
   Post-extraction decisions for the native-module blog post pilot.

   Empty for now. build-native.js still reads this file (and includes it in
   aditi-blog-post-native.css) so a future deliberate deviation from the
   pasted-block design has somewhere to go that is not aditi-blog-post-map.css
   - see every other pilot's *-overrides.css for the same convention.
   ========================================================================== */


/* ==========================================================================
   Maps the .aditi-post design onto Divi's real per-module DOM.

   Unlike every other pilot, this one needs almost no mapping. The canonical
   stylesheet (assets/css/aditi-article-style.html + aditi-post-additions.css)
   only ever uses descendant selectors - `.aditi-post h2`, `.aditi-post p`,
   `.aditi-post .byline` - never a child combinator and never a grid/flex
   rule. `.aditi-post` lands on the Divi column (build-native.js), and every
   heading/paragraph/list/code block is a descendant of it no matter how many
   Divi module wrapper divs sit in between, so the design applies unchanged
   with zero remapping. There is no card grid here to keep aligned and no
   subgrid/`display:contents` trick to reach for.

   The only real work is neutralising the handful of Divi defaults this
   design never asked for, found by reading Divi's own CSS directly (see
   build-native.js's diviParts) rather than guessing:

     .et_pb_module{margin-bottom:30px}        style.min.css, every module
     .et_pb_text ul{padding-bottom:1em}       text.css

   Neither exists in the pasted-block version (build-post.js's delivery
   method), where a heading/paragraph/list is just a sibling element with
   only its own CSS margin - so both would silently add space this design
   was never tuned for. Restated at 0 here, scoped under .aditi-post so nothing
   outside a post is touched.
   ========================================================================== */

.aditi-post .et_pb_module{margin-bottom:0}
.aditi-post .et_pb_text ul{padding-bottom:0}

/* style.min.css carries `p:not(.has-background):last-of-type{padding-bottom:0}`
   (specificity: 1 tag + 2 pseudo-classes, higher than `.aditi-post .byline`'s
   2 classes) for the normal case of a WordPress content column, where only
   the actual last paragraph of the whole post is :last-of-type. Here every
   block is its own Text module, so EVERY paragraph - including the byline -
   is the only <p> in its own .et_pb_text_inner and therefore trivially
   :last-of-type too. Harmless for ordinary paragraphs (the design already
   uses margin, not padding, for their spacing - forcing padding-bottom:0
   changes nothing they wanted). Not harmless for .byline, which sets
   padding-bottom:1.4em on purpose (the line the border-bottom sits under);
   restated at higher specificity to win it back. */
.aditi-post .et_pb_text .byline{padding-bottom:1.4em}

/* ---- reading column ------------------------------------------------------
   The pasted-block version sits in the theme's own post-content column, which
   this repo has always approximated as an 800px centred column with 44px top
   / 80px bottom padding (build-post.js's previewPage .simrow - unchanged
   here, copied so the two previews compare like for like). Divi's own
   row/column gutter padding is generated per builder-version at render time
   and is not in the static theme CSS this build reads, so it is disabled
   outright via custom_padding="0px||0px||true|false" on the section and row
   (build-native.js) and replaced with these explicit numbers instead of
   fighting an unknown value.

   VERIFY ON IMPORT: this 800px measure has not been checked against how wide
   the real theme actually renders a Divi-Builder-enabled post's content
   column (sidebar presence, theme container width). See STEPS.md step 1.

   custom_padding="0px||0px||true|false" on the section and row (build-native.js's
   shortcode) is a real Divi Builder attribute and would zero their padding on
   the actual imported page - but build-native.js's own emit() never reads or
   simulates that attribute (neither does any other pilot's), so leaving it as
   the only defence made the *local preview* run ~86px of unrelated section/row
   padding it will never actually carry once imported. Restated explicitly
   below too, the same belt-and-braces the other pilots all use, so the
   comparison is honest with or without the attribute being honoured.

   Centring it turned out not to be a one-liner. A floated column (Divi's
   default, even for a single 4_4 column with nothing to float next to)
   ignores margin:auto outright. Turning the float off and using margin:auto
   almost worked, except Divi also carries
   `.et_pb_row .et_pb_column.et-last-child{margin-right:0!important}` - every
   column here IS the last (and only) one, so that !important pins the right
   margin to 0 no matter what this file says, and CSS's rule for a single
   auto margin ("it absorbs all the free space") then shoves the whole 280px
   of slack onto margin-left alone: the column rendered 280px off-centre, not
   spurious, actually MORE broken than the un-centred float had been. Flexbox
   sidesteps the whole fight: float and margin-right stop being part of the
   centring math at all once the parent is a flex container. */
.ad-post-section.et_pb_section,
.ad-post-row.et_pb_row{padding:0}

.ad-post-row.et_pb_row{
  display:flex;
  justify-content:center;
}
/* Divi clears floated columns with ::after; a flex row has no floats left to
   clear, so the pseudo-element must be turned off or it becomes a phantom
   flex item and opens an empty track (same rule check-native-css.js's
   sibling pilots enforce for every grid/flex row - there is no grid here, so
   restated by hand instead of a script). */
.ad-post-row.et_pb_row::before,
.ad-post-row.et_pb_row::after{content:none}

.aditi-post.et_pb_column{
  /* The pasted-block version's .simrow (build-post.js's previewPage, and the
     theme's real content column it approximates) is never given
     box-sizing:border-box, so its 44px/30px/80px padding sits OUTSIDE the
     800px reading measure - true text width is 800px, not 800-60. Divi's own
     reset sets box-sizing:border-box globally, which would fold that padding
     back into the 800px and narrow every line by 60px; overridden explicitly
     here so the two measures actually match rather than merely looking like
     they should. */
  box-sizing:content-box;
  float:none;
  width:800px;
  margin:0;
  padding:44px 30px 80px;
}

/* No responsive reduction here on purpose: build-post.js's own previewPage
   (.simrow) uses this same fixed 44px/30px/80px at every width, with no
   media query of its own - matching an approximation, not the real theme's
   actual responsive behaviour, which is exactly the thing STEPS.md step 1
   flags as unverified. Inventing a media query here that the pasted-block
   side does not have only made the two previews disagree at phone width;
   removed rather than guessed at real numbers. */