/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE BLOG — the index and the post template.

   Built on site.css, not beside it. Every colour here is one of the existing tokens (--navy,
   --pop, --ice, --frost, --slate, --line), the headings are the Playfair Display the rest of the
   site uses, the body is Inter, and the only action colour is still the cyan. The two devices
   this site already owns — the dot-and-bar eyebrow and the cyan pill with its circular arrow —
   are reused rather than replaced.

   What is new is only what a blog needs and the site did not have: a masthead for an article, a
   panel for the direct answer, a measure for long prose, an FAQ block, and two list treatments
   for the index.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --measure: 68ch;          /* the reading column — long-form prose, not a landing page */
  --post-max: 760px;
}

/* ── the article masthead ───────────────────────────────────────────────────────────────────
   Navy, like the site's dark bands, so an article opens with the same weight a service page
   does. No photograph: these are written pieces and there is no honest picture of "the ongoing
   storm rule". The rule under the kicker does the work instead. */
.post-head, .blog-head { background: var(--navy); color: #fff; padding: clamp(56px,7vw,104px) 0 clamp(40px,5vw,68px) }
.post-head h1, .blog-head h1 { color: #fff; max-width: 18ch; margin-bottom: 18px }
.blog-head h1 { max-width: none }
.blog-head h1 em { font-style: italic; color: var(--pop) }
.blog-head .lede { max-width: 62ch; color: #C9D6E2; font-size: clamp(16px,1.6vw,18.5px); margin: 0 }
/* NOT .crumbs — site.css already owns that name for the light breadcrumb bar on the service
   pages, frost ground and a hairline under it. On a navy masthead that reads as a white slab
   across the top of the article, which is exactly how the first build looked. A component that
   already means something keeps its meaning; this one gets its own name. */
.post-head .post-crumbs { font-size: 13.5px; color: #8FA6BC; margin-bottom: 26px; letter-spacing: .2px }
.post-head .post-crumbs a { color: #C9D6E2; text-decoration: underline; text-underline-offset: 3px }
.post-head .post-crumbs a:hover { color: var(--pop) }
.post-head .post-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-size: 14px; color: #8FA6BC; letter-spacing: .3px }

/* ── the direct answer ──────────────────────────────────────────────────────────────────────
   The paragraph a search engine lifts and the one a property manager reads before deciding
   whether to read the rest. It sits on the frost, above the article's own measure, behind a
   cyan rule — the one moment on the page where the type goes up rather than down. */
.post-answer { background: var(--frost); padding: clamp(36px,4.5vw,60px) 0 }
.post-answer .wrap { max-width: 900px }
/* No label sits over this. The client's copy has no such line and the panel does not need one — the
   ground change, the rule and the larger type already say "read this first". */
.post-answer .ans { margin: 0; font-size: clamp(18px,2vw,22px); line-height: 1.55; color: var(--navy);
  border-left: 3px solid var(--pop); padding-left: clamp(18px,2.4vw,28px) }
.post-answer .ans a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px }
.post-answer .ans a:hover { color: var(--pop-deep) }

/* ── the article body ───────────────────────────────────────────────────────────────────────
   One column at a real measure. The site's landing pages run two columns at 1220px, which is
   right for a service page and wrong for 2,000 words. */
.post-body { padding: clamp(48px,6vw,84px) 0 }
.post-body .wrap { max-width: var(--post-max) }
.post-body h2 { font-size: clamp(25px,3vw,34px); line-height: 1.15; margin: 2em 0 .55em }
.post-body h2:first-child { margin-top: 0 }
.post-body h3 { font-size: 20px; margin: 1.8em 0 .5em }
.post-body p { font-size: 17px; line-height: 1.75; margin: 0 0 1.15em; max-width: var(--measure) }
.post-body a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px }
.post-body a:hover { color: var(--pop-deep); text-decoration-thickness: 2px }
/* the lists carry a cyan marker rather than a bullet glyph, which is the one small place this
   page can echo the dot in the eyebrow */
.post-body ul { list-style: none; margin: 0 0 1.5em; padding: 0; max-width: var(--measure) }
.post-body li { position: relative; padding-left: 26px; margin-bottom: .7em; font-size: 17px; line-height: 1.7 }
.post-body li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--pop) }

/* ── the FAQ ────────────────────────────────────────────────────────────────────────────────
   A hairline between items, the question in Playfair, a "+" that rotates. EVERY ANSWER IS IN
   THE HTML whether the item is open or shut — <details> is a native element, the text is in the
   document, and an FAQ that only exists after a click is invisible to the crawler it was
   written for. */
.post-faq { background: var(--frost); padding: clamp(48px,6vw,88px) 0 }
.post-faq .wrap { max-width: 900px }
.post-faq h2 { font-size: clamp(26px,3.4vw,40px); margin-bottom: 30px }
.post-faq details { border-top: 1px solid var(--line) }
.post-faq details:last-of-type { border-bottom: 1px solid var(--line) }
.post-faq summary { list-style: none; cursor: pointer; display: flex; gap: 20px; align-items: baseline;
  padding: 20px 0; font-family: "Playfair Display", Georgia, serif; color: var(--navy);
  font-size: clamp(17px,1.9vw,21px); line-height: 1.3; font-weight: 600 }
.post-faq summary::-webkit-details-marker { display: none }
.post-faq summary::after { content: "+"; margin-left: auto; font: 400 24px/1 Inter, sans-serif;
  color: var(--ice); transition: transform .18s ease }
.post-faq details[open] summary::after { transform: rotate(45deg) }
.post-faq .a { padding: 0 0 22px }
.post-faq .a p { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.7 }

/* ── keep reading ───────────────────────────────────────────────────────────────────────────
   Three cards, white on white, held apart by a hairline and a cyan tab that runs the width of the
   card on hover. NOT the ruled rows this used to be: the index is built from ruled rows end to end,
   so the same device under every article made the foot of a post read as a second index, and it gave
   a reader three bare titles with nothing to choose between. Each card now carries the sentence that
   says what the piece is about and what it costs to read. Three items fill three columns exactly. */
.post-more { padding: clamp(48px,6vw,84px) 0; background: #fff }
.post-more .more-grid { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px }
@media (min-width: 880px) { .post-more .more-grid { grid-template-columns: repeat(3, 1fr) } }
.post-more .more-grid li { display: flex }
.post-more .more-grid a { position: relative; overflow: hidden; width: 100%;
  display: flex; flex-direction: column; padding: 28px 24px 20px;
  border: 1px solid var(--line); border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease }
/* the cyan tab: a short mark at rest, the full width of the card on hover */
.post-more .more-grid a::before { content: ""; position: absolute; top: 0; left: 0;
  height: 3px; width: 46px; background: var(--pop); transition: width .25s ease }
.post-more .more-grid a:hover { transform: translateY(-4px); border-color: rgba(43,179,232,.35);
  box-shadow: 0 24px 50px -32px rgba(16,24,37,.55) }
.post-more .more-grid a:hover::before { width: 100% }
.post-more .more-grid .k { font: 600 11.5px/1.6 Inter, sans-serif; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ice); margin-bottom: 12px }
.post-more .more-grid .t { font-family: "Playfair Display", Georgia, serif; color: var(--navy);
  font-size: 21px; font-weight: 600; line-height: 1.22; letter-spacing: -.2px; margin-bottom: 10px;
  transition: color .18s }
.post-more .more-grid a:hover .t { color: var(--ice) }
.post-more .more-grid .d { color: var(--slate); font-size: 15px; line-height: 1.6; margin-bottom: 20px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
/* the meta row is pinned to the foot so three cards of different title lengths still line up */
.post-more .more-grid .m { margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: #9AAABB }
.post-more .more-grid .m .arw { margin-left: auto; color: var(--pop); font-size: 17px;
  transition: transform .2s ease }
.post-more .more-grid a:hover .m .arw { transform: translate(3px,-3px) }

/* ── the index: the lead item ───────────────────────────────────────────────────────────────
   Five posts in a three-column grid leaves a hole in the second row. A cover item and four
   ruled rows reads as an editorial page instead, and puts the newest piece where the eye is. */
.blog-lead { padding: clamp(40px,5vw,72px) 0 0 }
.blog-lead .lead { display: block; background: var(--navy-2); color: #fff; border-radius: 18px;
  padding: clamp(28px,4vw,52px); transition: transform .2s, box-shadow .2s;
  box-shadow: 0 18px 48px -34px rgba(16,24,37,.7) }
.blog-lead .lead:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -34px rgba(16,24,37,.8) }
.blog-lead .k { display: flex; align-items: baseline; gap: 12px; font: 600 12px/1 Inter, sans-serif;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--pop); margin-bottom: 18px }
.blog-lead .k i { font-style: normal; font-size: 12px; color: #6E8299; letter-spacing: 1px }
.blog-lead .t { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 600;
  color: #fff; font-size: clamp(27px,4vw,50px); line-height: 1.08; letter-spacing: -.5px; margin-bottom: 16px }
.blog-lead .d { display: block; color: #C9D6E2; max-width: 62ch; font-size: clamp(15.5px,1.6vw,17px);
  line-height: 1.7; margin-bottom: 22px }
.blog-lead .m { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #8FA6BC }
.blog-lead .m .arw { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--pop); color: #04283A; font-size: 17px }

/* ── the index: the rows ────────────────────────────────────────────────────────────────────*/
.blog-rows { padding: clamp(36px,4.5vw,60px) 0 clamp(48px,6vw,88px) }
.blog-rows .rows { list-style: none; margin: 0; padding: 0 }
.blog-rows .rows li { border-top: 1px solid var(--line) }
.blog-rows .rows li:last-child { border-bottom: 1px solid var(--line) }
.blog-rows .rows a { display: grid; gap: 6px 28px; grid-template-columns: 1fr;
  padding: clamp(22px,2.6vw,30px) 0; transition: .18s }
.blog-rows .rows a:hover { padding-left: 10px }
.blog-rows .rows a:hover .t { color: var(--ice) }
.blog-rows .n { font: 600 12px/1.6 Inter, sans-serif; letter-spacing: 1.4px; color: #9AAABB }
.blog-rows .k { display: block; font: 600 11.5px/1.6 Inter, sans-serif; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ice); margin-bottom: 6px }
.blog-rows .t { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 600;
  color: var(--navy); font-size: clamp(20px,2.4vw,27px); line-height: 1.2; letter-spacing: -.3px;
  margin-bottom: 8px; transition: color .18s }
.blog-rows .d { display: block; color: var(--slate); max-width: 58ch; font-size: 15.5px; line-height: 1.65 }
/* the date and the reading time do not wrap. At 190px "September 16, 2026" broke over two lines and
   took "8 min" with it, which made a tidy row look like a mistake. */
.blog-rows .m { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #9AAABB;
  white-space: nowrap }
.blog-rows .m .arw { color: var(--pop); font-size: 17px }
@media (min-width: 900px) {
  .blog-rows .rows a { grid-template-columns: 54px minmax(0,1fr) 230px; align-items: start }
  .blog-rows .m { justify-content: flex-end }
}

/* ── the closing band ───────────────────────────────────────────────────────────────────────
   The same action every other page on the site ends with, in the site's own colours. */
.band-cta { background: var(--navy); color: #fff; text-align: center; padding: clamp(56px,7vw,104px) 0 }
.band-cta h2 { color: #fff; margin-bottom: 14px }
.band-cta .lede { max-width: 56ch; margin: 0 auto 30px; color: #C9D6E2; font-size: 16.5px }
.band-cta .acts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 0 }
.band-cta .btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; padding: 16px 28px }
.band-cta .btn-ghost:hover { border-color: var(--pop); color: var(--pop) }