/* ---------------------------------------------------------------------------
   Knowledge Center article body, the last block only.

   Loaded by mu-plugins/elevated-kc-article.php on single `post` views and
   nowhere else, and every rule is additionally scoped to
   `article.post-type-post` so it cannot reach a building, a guide, a portfolio
   item or a page even if the enqueue gate is ever widened. Its own file for the
   same reason neighborhood.css and home-sections.css are: sitewide.css is the
   ported record of Squarespace's Custom CSS and stays that.

   No new value is introduced here. 17px is the block gutter the ported bundle
   already uses everywhere, from
     .sqs-block:not(.fluid-engine .sqs-block){padding-top:17px;padding-bottom:17px}
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Restore the bottom gutter on a body that is a single block.

   The lead form is emitted by single-post.php as a bare .sqs-block after the
   imported body, so the space above the card is one block gutter (17px) plus
   the card's own 48px top margin: 65px, identical to a building page and to a
   neighborhood guide, at every breakpoint, measured.

   What was NOT identical is the space the body contributes below its own last
   line. The ported bundle carries

     .sqs-layout:not(.sqs-editing) .sqs-row
       .sqs-block:not(.float):not(.sqs-feature-gated-wrapper):first-child:last-child
       { padding-bottom: 0 }

   which fires only when a column holds exactly ONE block. Guides and building
   pages always hold two or more (copy, then a code block), so their last block
   keeps its 17px and their last line of copy sits 82.5px above the card. A
   Knowledge Center article written by scripts/kc_post.php or by
   scripts/market_watch_post.php is a single html-block, so it hit that rule and
   came out 17px tighter, at 65.5px. Every one of the market watch posts is
   built that way, so this is the difference on most of the collection rather
   than an edge case.

   Squarespace itself does not want that 0 below 767px: the same bundle already
   forces the gutter back with

     @media (max-width:767px){ .sqs-layout .sqs-row .sqs-block:last-child
       { padding-bottom: 17px !important } }

   which is exactly why the 390 measurement already agreed with the guides
   (82.8px on all three) while 1440 did not. This restores the same 17px above
   the breakpoint, so an article reads the same at both widths.

   Specificity, not !important: the rule being overridden is eight classes deep
   and lives in an enqueued sheet (sqs/sqs-site.css), not in a per-section
   <style> inside post content, so a longer selector in a later sheet wins
   cleanly. `article.post-type-post` supplies the scope and the extra weight.
   --------------------------------------------------------------------------- */
article.post-type-post .blog-item-content .sqs-layout:not(.sqs-editing) .sqs-row
  > [class*="sqs-col"] > .sqs-block:not(.float):first-child:last-child{padding-bottom:17px}

/* ---------------------------------------------------------------------------
   The trailing schema block, kept in step with the guides.

   Eleven of the fifteen neighborhood guides end their body with a Code Block
   whose whole payload is a FAQPage JSON-LD <script>. It paints nothing but it
   is still a .sqs-block, so it reserves 17px top and bottom: 34px of measured
   white space with no pixel in it, landing between the last line of copy and
   the card. neighborhood.css collapses it for that reason.

   No Knowledge Center article carries one today. kc_post.php stores `faq` as
   the `_elevated_faq` post meta and inc/schema.php emits it into the document
   head, so the generator cannot produce one, and this rule is currently inert
   on all fourteen articles. It is here anyway because it is the second half of
   the same mechanism: an article hand-written with a schema code block at the
   end would otherwise sit 34px lower than every other article, which is the
   inconsistency this whole change exists to remove.

   Same guard as the guides use. :has() restricts it to a block that is nothing
   but a JSON-LD script, so a code block with something visible in it keeps its
   padding, and where :has() is unsupported the rule simply does not apply.

   !important because the ported bundle sets padding-bottom on this exact
   element from a nine-class selector that outweighs anything of a sane length.
   --------------------------------------------------------------------------- */
article.post-type-post .blog-item-content .sqs-block-code:last-child:has(
  > .sqs-block-content > .sqs-code-container > script[type="application/ld+json"]
){padding-top:0 !important;padding-bottom:0 !important}

/* ===========================================================================
   BELOW THIS LINE: the article as a page to read, added when the twelve guides
   were cross-linked.

   Everything above is spacing arithmetic around the enquiry card and stays
   exactly as it is. Everything below is presentation, and it introduces no new
   colour, no new face and no new component. Every value is one already in use
   somewhere Zeve has signed off:

     3.25rem x 1px sand rule ....... .ea-nbhd-hero__rule, neighborhood.css
     .72rem / .16em uppercase ...... .ea-topicfilter__label, kc-archive.css
     "\00b7" as a meta separator ... .ea-kcindex__meta, kc-archive.css
     2.1rem / 1.75rem heading ...... .ea-nbhd-related__title, neighborhood.css
     1.6 line-height on prose ...... .ea-kc__intro, home-sections.css
     band ground / rule / measure .. .ea-nbhd-related, neighborhood.css

   Scope. Every rule is under `article.post-type-post`, or under the band's own
   .ea-kc-related, on top of an enqueue that only fires on is_singular('post').
   Nothing here can reach a building, a guide, a portfolio item or a page.

   The 31 weekly reports render through this same template and are deliberately
   IN scope for the type below and OUT of scope for the band: they are the same
   collection and should read the same, but their own furniture (the figures
   panel above the intro, the previous week / All reports / next week nav at the
   foot) already answers "where next" and a second cross-link band would be two
   blocks competing for the same job. See template-parts/related-articles.php.

   How the type rules avoid that furniture: they are all written against the
   DIRECT CHILDREN of the two prose wrappers the imported bodies use,
   `.sqs-block-markdown > .sqs-block-content` (the older guides) and
   `.sqs-html-content` (everything the generators write). The panel is a
   <section> spliced into the second of those, so `> p`, `> h2`, `> ul` and the
   rest step straight past it and its stat tiles, its chart and its bar links
   keep every value mw-chart.css gives them. A descendant selector would have
   reached inside and re-set them, which is exactly the fight to avoid.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   The masthead.

   It was a topic and a byline run together with a single space between them
   ("BUYING WRITTEN BY ELEVATED TEAM"), set at 16px in solid black, directly
   above a 45px title it was competing with. The date was in the markup and
   hidden.

   Three changes, no new words: show the date, separate the parts with the
   index's own middle dot, and drop the whole line to label size and muted ink
   so the title leads. The result is the /knowledge-center card's meta line,
   which is where a reader has just come from.
   --------------------------------------------------------------------------- */

/* Beats `.blog-item-wrapper .blog-meta-item`(0,2,0) and
   `.blog-item-wrapper .blog-meta-item span`(0,3,0) from sqs/sqs-site.css.

   The ROW is in the list as well, and not for show: it is what the three
   separator dots below inherit from. Set on the .blog-meta-item children
   alone, the dot that sits between the topics and the date took EB Garamond at
   21px from .blog-item-inner-wrapper instead, and printed at twice the size of
   the one after the date, on a different baseline. */
article.post-type-post .blog-item-meta-wrapper,
article.post-type-post .blog-item-meta-wrapper .blog-meta-item,
article.post-type-post .blog-item-meta-wrapper .blog-meta-item a,
article.post-type-post .blog-item-meta-wrapper .blog-meta-item span{
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.72rem;font-weight:400;line-height:1.3;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}

/* Baseline alignment and a wrapping gap, so a three-topic article (the
   pied-a-terre tax guide carries Pied-a-Terre, NYC and Taxes) drops to a
   second line at 390 instead of pushing the page sideways. Same gap pair as
   .ea-kcindex__meta.

   The topics row is flexed for the gap alone: as inline spans, the only thing
   between one topic and the next was the newline in the markup collapsing to a
   single 3px space, against the 8.8px on the other side of the separator, and
   the row read as three unevenly spaced words. Both wrappers carry
   `.blog-item-meta-wrapper` in the selector to outweigh
   `.tweak-blog-item-show-categories .blog-item-wrapper
   .blog-meta-item--categories{display:block}`, which is 0,3,0. */
article.post-type-post .blog-item-meta-wrapper{align-items:baseline;gap:.2rem .55rem}
article.post-type-post .blog-item-meta-wrapper .blog-meta-item--categories{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem}

/* display:contents, so the date and the byline are items of the meta row
   itself rather than one indivisible box inside it. As a flex item the pair
   could only wrap together, and at 390 that put "BUYING" alone on the first
   line with two thirds of it empty and both other parts on the second. Split,
   the row fills and then breaks wherever it runs out, which at 390 is after
   the date. The wrapper carries no role and no semantics of its own, so
   nothing is lost by taking its box away. */
article.post-type-post .blog-item-meta-wrapper .blog-item-author-date-wrapper{
  display:contents}

/* The date, unhidden. `.blog-item-wrapper .blog-meta-item--date{display:none}`
   in sqs/sqs-site.css is 0,2,0 and is switched by a `tweak-blog-item-show-date`
   body class the migrated tweak set does not carry. Overridden here rather than
   by inventing a body class Squarespace never set on this site. */
article.post-type-post .blog-item-meta-wrapper .blog-meta-item--date{display:inline}

/* The separator, three times: between two topics, between the topics and the
   date, and between the date and the byline. A dot, as on the index, and for
   the reason given there: it has to survive the parts sitting on two different
   lines, where a border or a dash would hang in space.

   Always an ::after on the part BEFORE it, never a ::before on the part after.
   Written the other way round the line wraps at 390 with a dot orphaned at the
   start of the second row; trailing its own text, a dot wraps with the words it
   belongs to. Each one is .55rem from the text on its left (this margin) and
   .55rem from the text on its right (the flex gap on the row it sits in), so
   all three read identically.

   `.blog-item-meta-wrapper` is in the first selector only to outweigh
   `.tweak-blog-item-delimiter-dash .blog-item-wrapper
   .blog-item-category-wrapper:not(:last-child)::after`, which is 0,4,0 and
   prints a hyphen. */
article.post-type-post .blog-item-meta-wrapper .blog-item-category-wrapper:not(:last-child)::after,
article.post-type-post .blog-item-meta-wrapper .blog-meta-item--date::after{
  content:"\00b7";padding:0;margin-left:.55rem}

/* The one dot that does not need a margin: it is a flex item of the topics row
   itself, so that row's own .55rem gap already sits it off the last topic. */
article.post-type-post .blog-item-meta-wrapper .blog-meta-item--categories::after{
  content:"\00b7";padding:0}

/* The topic chip is the one link in the line and now goes somewhere (the
   Knowledge Center filtered to that topic, see single-post.php). Ink on hover,
   the same promotion .ea-kcindex__aside a uses to mark the live word in a
   muted sentence. */
article.post-type-post .blog-item-meta-wrapper .blog-item-category:hover,
article.post-type-post .blog-item-meta-wrapper .blog-item-category:focus-visible{
  color:var(--eabc-ink,#2e2e2f)}
article.post-type-post .blog-item-meta-wrapper a:focus-visible{
  outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* The hairline that closes the masthead. Identical to .ea-nbhd-hero__rule, and
   it sits in the same place: after the byline, before the thing the reader
   came for. A neighborhood guide has a photograph there and this page type has
   none, so the rule does that job by itself. The 38px above it is the ported
   `.blog-item-top-wrapper{margin-bottom:38px}`, untouched, so the header of an
   article and the header of a guide are built from the same two numbers. */
article.post-type-post .ea-kc-rule{
  display:block;width:3.25rem;height:1px;margin:0 0 1.9rem;
  background:var(--eabc-sand,#dbd7ce)}

/* ---------------------------------------------------------------------------
   The body, as something to read for ten minutes.

   The guides run from 10,000 to 24,000 characters of continuous prose. They
   were being set at the Squarespace global body leading of 1.30 with 16px
   between paragraphs, which is a setting for a page of short blocks, not for a
   3,000 word guide: at 21px EB Garamond on a 677px measure it produces an even
   grey field with no rhythm in it, which is most of what "boring" means here.

   1.6 is not a new number. It is what .ea-kc__intro sets for a run of EB
   Garamond on the homepage and on the index, so the collection is now set the
   same way on the card, on the listing and in the article.
   --------------------------------------------------------------------------- */

article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > p{
  margin:0 0 1.05em;line-height:1.6}

article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > :is(ul,ol){
  margin:1.05em 0 1.5em;line-height:1.6}

/* The list items were the tightest thing on the page: a nine-item rate
   schedule read as one block. A third of the paragraph gap between them is
   enough to separate them without turning the list into nine paragraphs. */
article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > :is(ul,ol) li{
  margin-bottom:.35em}
article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > :is(ul,ol) li:last-child{
  margin-bottom:0}

/* ---------------------------------------------------------------------------
   Headings.

   The h1 is 45.4px and the section headings were 40.2px. Five pixels apart, on
   a page with between seven and twelve of them, is not a hierarchy: it reads as
   twelve titles stacked down the page, and it is the other half of why the
   articles look flat.

   2.1rem is the size .ea-nbhd-related__title and .ea-kc-related__title use for
   exactly this, a heading inside a page rather than the heading of one. That
   puts the h1 at 1.35x the section heading and the section heading at 1.6x the
   body, which is a scale a reader can feel.

   And the space is no longer symmetrical. 32px above and 32px below left every
   heading floating equidistant between the section it ended and the section it
   opened. More above than below binds a heading to the copy it introduces,
   which is the whole job of the space.
   --------------------------------------------------------------------------- */
article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > h2{
  margin:3.2rem 0 1.05rem;
  font-size:2.1rem;line-height:1.15;letter-spacing:-.005em}

/* Only the weekly reports carry h3 today (five each, under four h2s). Sized
   between the section heading and the body so the reports keep a visible two
   level structure once the h2 above them came down. */
article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > h3{
  margin:2.4rem 0 .8rem;
  font-size:1.5rem;line-height:1.2;letter-spacing:-.005em}

/* First heading in a body does not need the full 3.2rem: the masthead rule is
   already the separator above it. */
article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > :is(h2,h3):first-child{
  margin-top:0}

/* ---------------------------------------------------------------------------
   Asides and rules.

   Seven of the twelve guides carry a blockquote near the top, usually the
   "this is general information, not tax or legal advice" note and on the
   pied-a-terre guide a status callout. It was a bare 40px indent, so it read as
   an oddly placed paragraph rather than as something set apart. A sand rule
   says what it is, using the same hairline the masthead and the cards use
   rather than a box or a tint.

   THE INK IS NOT CHANGED. Muting the type was tried and reverted: the
   pied-a-terre guide's callout is the single most important sentence on the
   page ("the tax has passed"), and greying every blockquote demotes that in
   order to soften a disclaimer four guides down the list. The rule is the
   signal; the words keep their weight.

   One guide (off-market real estate) has a horizontal rule in it, and it was
   the browser default. Same hairline, same colour.
   --------------------------------------------------------------------------- */
article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > blockquote{
  margin:1.8rem 0;padding:0 0 0 1.6rem;line-height:1.6;
  border-left:1px solid var(--eabc-sand,#dbd7ce)}
article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > blockquote > p:last-child{
  margin-bottom:0}

article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > hr{
  height:0;margin:2.6rem 0;border:0;border-top:1px solid var(--eabc-sand,#dbd7ce)}

/* ---------------------------------------------------------------------------
   Links in the copy, one treatment instead of two.

   The collection renders links two different ways today, because the bodies
   arrived in two different block types: the imported markdown guides get bold
   700 with a 1.5px underline, and everything the generators write gets regular
   400 with a 1px one. Same site, same sentence position, two weights.

   Settled on the lighter of the two. Bold plus a full-strength underline is
   three signals for one link and it interrupts a line of serif copy; weight
   inherited plus a muted hairline underline that goes to full ink under the
   cursor is the same promotion .ea-kcindex__aside already uses, and it leaves
   an emphasised link inside a <strong> still bold, because it inherits.

   Restricted to the direct-child prose blocks, so the chart bars in a weekly
   report (links, inside the panel, inside .sqs-html-content) are untouched.
   --------------------------------------------------------------------------- */
article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content)
  > :is(p,ul,ol,blockquote,h2,h3) a{
  font-weight:inherit;
  text-decoration-line:underline;text-decoration-thickness:1px;
  text-underline-offset:.16em;
  text-decoration-color:var(--eabc-muted,rgba(0,0,0,.58))}

article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content)
  > :is(p,ul,ol,blockquote,h2,h3) a:hover,
article.post-type-post .blog-item-content
  :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content)
  > :is(p,ul,ol,blockquote,h2,h3) a:focus-visible{
  text-decoration-color:currentColor}

/* ---------------------------------------------------------------------------
   "More from the Knowledge Center" (.ea-kc-related), rendered by
   template-parts/related-articles.php as a sibling of .blog-item-wrapper.

   ONLY the band is defined here. The cards inside it are .ea-kc__grid /
   .ea-kc__card / .ea-kc__name / .ea-kc__line / .ea-kc__link from
   assets/css/home-sections.css, unchanged and unextended: same hairline rule
   in place of a photograph, same Cormorant name over a muted supporting line,
   same stretched link, same 3 / 2 / 1 column steps at the same breakpoints as
   the homepage section and the /knowledge-center index.

   Rule for rule the same band neighborhood.css gives the guides, because it is
   the same band doing the same job one page type over. Keep the two in step.
   --------------------------------------------------------------------------- */

/* Paper, and a hairline across the top: the band has to read as the foot of
   the page rather than as another section of the article, and the article ends
   on the sand enquiry card directly above it. */
.ea-kc-related{padding:4.4rem 6vw 5rem;background:var(--eabc-paper,#fafafa);
  color:var(--eabc-ink,#2e2e2f);border-top:1px solid rgba(0,0,0,.12)}

/* Same measure as .ea-kc__inner and .ea-kcindex, so three cards here are the
   same width as three cards on the homepage and on the index. */
.ea-kc-related__inner{max-width:1180px;margin:0 auto;min-width:0}

.ea-kc-related__eyebrow{margin:0 0 1.1rem;text-align:center;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}

/* 2.1rem rather than the homepage section's 2.4rem, for the reason
   .ea-nbhd-related__title gives: this is a closing band on a reading page, not
   the heading of a section someone landed on. */
.ea-kc-related__title{margin:0 0 2.6rem;text-align:center;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:2.1rem;line-height:1.15;letter-spacing:-.005em;
  color:var(--eabc-ink,#2e2e2f)}

/* Two adjustments to the shared grid, both the ones .ea-nbhd-related makes.

   The row gap only bites once the three cards stop being one row, at 1024 and
   again at 767, and there a hairline-topped card wants more air above it than
   the homepage section's stacked pairs get: 2.8rem, the same as the guides'
   band, so the two read alike when they stack.

   The 3.2rem bottom margin on .ea-kc__grid is space for the button under it on
   the homepage. Here .ea-kc-related__cta owns that space, so keeping the
   margin would count it twice. */
.ea-kc-related .ea-kc__grid{row-gap:2.8rem;margin-bottom:0}

.ea-kc-related__cta{margin:3rem 0 0;text-align:center}

@media (max-width:767px){
  .ea-kc-related{padding:3.2rem 6vw 3.6rem}
  .ea-kc-related__title{margin-bottom:2.1rem;font-size:1.75rem}
  .ea-kc-related__cta{margin-top:2.4rem}
}

/* The button stays the site's inline pill at every width the audit checks. Its
   2.2rem side padding plus the label only runs out of room below roughly
   360px. Same rule, same reason, as .ea-nbhd-related__cta. */
@media (max-width:360px){
  .ea-kc-related__cta .eabc-btn{padding-left:1.1rem;padding-right:1.1rem}
}

/* ---------------------------------------------------------------------------
   Narrow.

   Same steps the rest of the family takes at 767: the section heading drops to
   1.75rem (.ea-kc__title, .ea-nbhd-related__title) and the masthead rule takes
   the 1.4rem .ea-nbhd-hero__rule takes. The body leading is NOT reduced, since
   a narrower measure is the one place open leading matters most.
   --------------------------------------------------------------------------- */
@media (max-width:767px){
  article.post-type-post .ea-kc-rule{margin-bottom:1.4rem}

  article.post-type-post .blog-item-content
    :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > h2{
    margin:2.4rem 0 .9rem;font-size:1.75rem}

  article.post-type-post .blog-item-content
    :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > h3{
    margin:1.9rem 0 .7rem;font-size:1.3rem}

  article.post-type-post .blog-item-content
    :is(.sqs-block-markdown > .sqs-block-content, .sqs-html-content) > blockquote{
    padding-left:1.1rem}
}