/* OnlineReputation.top — blog-only styles.
   Loaded AFTER /assets/css/site.css and deliberately additive: every colour,
   radius and type step below comes from that file's custom properties, so the
   blog cannot drift from the marketing site's palette. Nothing here restyles a
   shared component — .band, .shell, .posts, .post, .btn, .chip, .nav and .foot
   are used exactly as the landing page defines them.

   What this file is actually for: Ghost renders operator-authored HTML that the
   marketing stylesheet has never seen — blockquotes, figures, code blocks,
   tables, embeds. Those need typography. That is `.prose`. */

/* ------------------------------------------------------------- blog heads */

/* The landing page's h1 is a 5.2rem hero statement. A blog title at that size
   fights the article; step it down to the h2 scale. */
.blog-hero h1,
.article__head h1 {
  font-size: var(--t-h2);
  max-width: 30ch;
}
.blog-hero h1 { margin-inline: auto; }

/* Compact. `var(--band)` is 4.5–7.5rem top AND bottom, which on a listing page
   pushed the first card most of the way down the first screen for a heading and
   two lines of standing copy. Roughly half that, and the band's own padding is
   overridden rather than fought with margins.

   No `grid-bg` or `spot` on this band any more: the grid lines and the pointer
   spotlight belong to the landing page's dark sections, where there is art to
   sit behind. Here they were texture on an empty slab. One soft radial stays,
   so the band is not flat. */
.blog-hero {
  padding-block: clamp(2.25rem, 4vw, 3.25rem) clamp(2rem, 3.5vw, 2.75rem);
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%, rgba(45, 212, 191, .07), transparent 70%),
    var(--dark);
}
.blog-hero .band-head { margin-bottom: 0; }
.blog-hero p { margin-top: .9rem; }

/* ----------------------------------------------------------- blog listing */

.blog-body { padding-block: clamp(2.25rem, 4vw, 3.25rem) var(--band); }

/* Featured article: image left, copy right, one card. */
.featured {
  display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
  border: 1px solid var(--light-line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--white);
  text-decoration: none; color: inherit;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.featured:hover { border-color: var(--accent); box-shadow: 0 18px 44px -30px rgba(11, 26, 38, .45); }
/* min-height on the IMAGE, not the card: a stretched grid item with
   object-fit:cover needs an intrinsic floor or it collapses to the copy's
   height on a short excerpt. */
.featured img { width: 100%; height: 100%; min-height: 265px; object-fit: cover; }
.featured__copy {
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.featured__copy .eyebrow { margin-bottom: .5rem; }
.featured__copy h2 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  line-height: 1.3; margin-bottom: .7rem;
}
.featured__copy p { color: var(--ink-mute); font-size: .97rem; margin-bottom: 1rem; }
.featured time, .post time { font-size: .78rem; color: var(--ink-mute); font-weight: 600; }

/* Browse-by-topic pills. Anchors to the sections below, which are rendered
   from the same query — so a pill cannot point at a missing section. */
.browse {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--light-line);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.browse span { font-size: .84rem; font-weight: 700; margin-right: .2rem; }
.browse a {
  padding: .5rem .9rem; border: 1px solid var(--light-line); border-radius: 999px;
  font-size: .84rem; font-weight: 600; color: var(--ink-mute);
  background: var(--offwhite); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.browse a:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }

.topic { margin-bottom: clamp(2rem, 4vw, 2.75rem); scroll-margin-top: 96px; }
.topic:last-child { margin-bottom: 0; }
.topic__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.topic__head h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
.topic__all { font-size: .86rem; font-weight: 700; color: var(--accent-deep); text-decoration: none; white-space: nowrap; }
.topic__count { font-size: .82rem; color: var(--ink-mute); font-weight: 600; white-space: nowrap; }
.topic__all:hover { text-decoration: underline; text-underline-offset: 3px; }

.posts--index { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------- article header */

/* Copy left, image right. */
.article__head { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.article__head-in {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem); align-items: center;
}
.article__intro { min-width: 0; }
.article__head h1 { margin-inline: 0; }
.article__head .eyebrow { text-decoration: none; }
.article__head .eyebrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.article__summary {
  color: var(--ink-on-dark-mute); font-size: var(--t-lead);
  line-height: 1.7; margin-top: 1rem; max-width: 46ch;
}
.article__meta {
  color: var(--ink-on-dark-mute); font-size: .88rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: 1.1rem;
}
.article__img {
  width: 100%; height: clamp(220px, 30vw, 310px); object-fit: cover;
  display: block; border-radius: var(--radius-lg);
  border: 1px solid var(--dark-line);
}

.article__body { padding-block: clamp(2.5rem, 5vw, 3.5rem) var(--band); }
.article__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.article__tags .chip { text-decoration: none; }

/* Related articles sit on the same light ground as the body, so the seam
   between them is a hairline rather than a change of colour. */
.related { padding-block: 0 var(--band); border-top: 1px solid var(--light-line); }
.related > .shell { padding-top: clamp(2rem, 4vw, 2.75rem); }
.related__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.related__head h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.related__head a { font-size: .88rem; font-weight: 700; color: var(--accent-deep); text-decoration: none; }

/* Feature image on a listing card. */
.post__img {
  width: 100%; height: 170px; object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: .3rem;
}

.blog-empty { color: var(--ink-mute); text-align: center; font-size: var(--t-lead); }

.error__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

/* -------------------------------------------------------------- pagination */

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 3rem;
  border-top: 1px solid var(--light-line); padding-top: 1.8rem;
}
.pager__at { font-size: .88rem; color: var(--ink-mute); font-weight: 700; }
.pager__gap { flex: 0 0 auto; width: 1px; }

/* ------------------------------------------------------------------ prose */

/* Scoped to CMS output only. The landing page has no equivalent because it has
   no long-form text.

   The measure is set in rem, NOT ch, on purpose. `ch` is the width of the "0"
   glyph, and in Plus Jakarta Sans that glyph is about a third wider than the
   average lowercase character — so a plausible-looking `68ch` renders ~90
   characters per line, well past the readable range. Measured on real copy,
   46rem lands at ~70. Verify by measurement if you change this, not by the
   unit's name. */
.prose { max-width: 46rem; margin-inline: auto; font-size: var(--t-lead); line-height: 1.8; }
.prose--narrow { max-width: 42rem; }

.prose > * + * { margin-top: 1.4em; }

/* Headings: space ABOVE a heading separates sections, space below it must not.
   The old rule set a NEGATIVE bottom margin and relied on `> * + *` to add the
   gap back, which meant the real distance depended on what followed — a list,
   a table and a paragraph each sat differently. Stated directly instead. */
.prose h2, .prose h3, .prose h4 {
  line-height: 1.3; letter-spacing: -.02em;
}
.prose h2 {
  font-size: clamp(1.45rem, 1.25rem + .8vw, 1.85rem);
  margin-top: 2.5em; margin-bottom: .6em;
  scroll-margin-top: 96px;
}
.prose h3 {
  font-size: var(--t-h3);
  margin-top: 1.9em; margin-bottom: .5em;
}
.prose h4 { font-size: 1.05rem; margin-top: 1.6em; margin-bottom: .45em; }
/* `> * + *` would otherwise stack its own margin on top of these. */
.prose > * + h2, .prose > * + h3, .prose > * + h4 { margin-top: 2.5em; }
.prose > * + h3 { margin-top: 1.9em; }
.prose > * + h4 { margin-top: 1.6em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
/* A heading immediately after a heading is a subtitle, not a new section. */
.prose h2 + h3, .prose h3 + h4 { margin-top: .9em; }

.prose a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-thickness: 2px; }

.prose strong { font-weight: 700; }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .55em; }
.prose li { padding-left: .15em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li > ul, .prose li > ol { margin-top: .55em; }

.prose blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 1.1rem 1.4rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.05em;
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: .8em; }

.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

.prose figure { margin-inline: 0; }
.prose figcaption {
  font-size: .85rem; color: var(--ink-mute);
  text-align: center; margin-top: .7rem;
}

.prose hr { border: 0; border-top: 1px solid var(--light-line); margin-block: 2.6em; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--offwhite);
  border: 1px solid var(--light-line);
  border-radius: 6px;
  padding: .12em .38em;
}
.prose pre {
  background: var(--dark);
  color: var(--ink-on-dark);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  overflow-x: auto;             /* long lines scroll, the page never does */
  font-size: .9rem; line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* ------------------------------------------------------------------ tables */

/* The content ships bare `<table><caption><tr><th>` — no thead, no tbody, no
   wrapper. The previous rule made the table itself `display: block` to get
   `overflow-x` onto it, and that is what broke the format: a block table stops
   being a table box, so `width: 100%` no longer fills, the caption stops being
   a caption, and the columns no longer share a sizing pass.

   So the table stays `display: table` and default.hbs wraps it in
   `.table-wrap` at runtime, which is the element that scrolls. The `:has()`
   fallback below keeps a no-JS page from widening: without a wrapper the table
   is capped and its cells wrap instead. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--light-line);
  border-radius: var(--radius);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.prose table {
  width: 100%; border-collapse: collapse;
  font-size: .92rem; line-height: 1.6; text-align: left;
}
/* min-width only INSIDE the scroller. Unwrapped (no JS), the table keeps
   `table-layout: auto` with no floor, so its cells wrap and it fits the measure
   instead of widening the document. `:not(.table-wrap) > table` was the first
   attempt and never matched: the table is a DIRECT child of .prose, so there is
   no intermediate element for the negation to apply to. */
.table-wrap table { min-width: 640px; }

.prose caption {
  caption-side: top; text-align: left;
  padding: .95rem 1.05rem;
  font-weight: 700; font-size: .92rem;
  color: var(--ink); background: var(--offwhite);
  border-bottom: 1px solid var(--light-line);
}
.prose th, .prose td {
  padding: .85rem 1.05rem; vertical-align: top;
  border-top: 1px solid var(--light-line);
}
.prose thead th, .prose tr:first-child th {
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: .8rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  border-top: 0; white-space: nowrap;
}
/* Zebra. `tr:first-child` is the header row here (there is no thead), so the
   striping counts from the second row. */
.prose tr:nth-child(even) { background: rgba(11, 26, 38, .025); }
.prose td:first-child { font-weight: 700; color: var(--ink); }

/* ------------------------------------------------------ search + filter */

.blog-filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
  margin-bottom: clamp(1.1rem, 2.5vw, 1.5rem);
}

/* A button that looks like a field: sodo-search opens its own overlay with its
   own input, so a real input here would swallow the first keystroke. */
.blog-filter__search {
  display: inline-flex; align-items: center; gap: .55rem;
  font: inherit; font-size: .9rem; color: var(--ink-mute);
  background: var(--white); cursor: pointer; text-align: left;
  border: 1px solid var(--light-line); border-radius: 999px;
  padding: .6rem 1.1rem .6rem .95rem;
  min-width: min(16rem, 100%);
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.blog-filter__search:hover { border-color: var(--accent); color: var(--ink); }
.blog-filter__search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.blog-filter__search svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* --- the browsable tag list ------------------------------------------------
   Its own block under the search row rather than inline with it: the list is
   as long as the archive has tags, and sharing a flex row with the search
   field made the field shrink as tags were added. */
.tagbar {
  padding-bottom: clamp(1.4rem, 3vw, 1.9rem);
  border-bottom: 1px solid var(--light-line);
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
}
.tagbar__head {
  font-size: .74rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: .8rem;
}
.tagbar__list { display: flex; flex-wrap: wrap; gap: .5rem; }
/* A handful of categories rather than dozens of keywords, so these can be a
   touch larger and read as primary navigation. */
.tagbar .pill { font-size: .86rem; padding: .5rem .95rem; }

/* Author `display` would beat the UA's `[hidden]` on a specificity tie, the
   same trap as .cform and .chat__panel in site.css. Kept even though nothing
   currently hides a pill, because .pill is inline-flex and the next person to
   reach for `hidden` here would lose an afternoon to it. */
.pill[hidden] { display: none !important; }

/* --- the long tail, one line at any archive size --------------------------
   There is a keyword tag per article and an article per day, so as pills these
   were a nine-row wall in which every pill led to a page holding exactly one
   post. A <select> is one line whether there are 24 of them or 400, and it is
   natively keyboard- and touch-accessible, which a custom dropdown would have
   had to re-earn. */
.tagpicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  /* Both margins stated. It only had a top one, so the row sat flush against
     whatever followed -- the first category heading on the index, the card grid
     on a tag archive. Matches the .tagbar rhythm above it so the three controls
     read as one group with even spacing rather than a stack that drifts. */
  margin-block: 1.1rem clamp(1.75rem, 3.5vw, 2.5rem);
}
.tagpicker__label { font-size: .84rem; color: var(--ink-mute); font-weight: 600; }
.tagpicker__select {
  font: inherit; font-size: .86rem; color: var(--ink);
  background-color: var(--white);
  border: 1px solid var(--light-line); border-radius: 999px;
  padding: .5rem 2.4rem .5rem 1rem;
  max-width: min(24rem, 100%); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23536778' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
  transition: border-color .15s ease;
}
.tagpicker__select:hover { border-color: var(--accent); }
.tagpicker__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid var(--light-line); background: var(--offwhite);
  font-size: .82rem; font-weight: 600; color: var(--ink-mute);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pill:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.pill--on {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-deep); font-weight: 700;
}
/* tabular-nums so the counts do not jitter the pill widths. */
.pill__n {
  font-size: .72rem; font-weight: 700; opacity: .7;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- key takeaway box */

/* The content authors these inline:
     <div style="background-color:#f0f7ff; border-left:4px solid #1a73e8; ...">
       <strong>Key Takeaway:</strong> …
     </div>
   An inline style beats any class, so this is the one place in the file that
   needs !important — and it is why the boxes were Google-blue on a turquoise
   site. Matching on `[style*="border-left"]` targets exactly that pattern.

   The content is NOT rewritten to add a class: 22 of 23 posts still carry
   mobiledoc, so Ghost regenerates `html` from it whenever a post is re-saved
   in the editor, and any markup edit made in the database would silently
   disappear the next time someone opened one. */
/* The canonical shape, built by default.hbs from whichever markup a post
   happens to carry. This is the rule that actually styles callouts; the two
   below it are no-JS fallbacks for the variants that ship their own colours. */
.takeaway {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.5rem;
  margin-block: 2em;
}
.takeaway__label {
  font-size: .74rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 .5rem;
}
.takeaway__body { font-size: 1rem; line-height: 1.75; }
/* .prose's `> * + *` does not reach inside, so the body sets its own rhythm. */
.takeaway__body > * { margin: 0; }
.takeaway__body > * + * { margin-top: .8em; }
.takeaway__body p:empty { display: none; }

/* No-JS fallback for the inline-styled variant. */
.prose div[style*="border-left"] {
  background: var(--accent-soft) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem !important;
  margin-block: 2em !important;
  font-size: 1rem;
}
.prose div[style*="border-left"] strong:first-child {
  display: block;
  font-size: .74rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: .5rem;
}
.prose div[style*="border-left"] > p:first-of-type { margin-top: 0; }
.prose div[style*="border-left"] > p:last-child { margin-bottom: 0; }

/* No-JS fallback for the semantic variant, which shipped with these class
   names and no stylesheet anywhere — so it rendered as an emoji above three
   unstyled lines of text. */
.prose .key-takeaway {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.5rem;
  margin-block: 2em;
  display: flex; gap: .8rem; align-items: flex-start;
}
.prose .key-takeaway-icon { flex: 0 0 auto; line-height: 1.4; }
.prose .key-takeaway-label {
  font-size: .74rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: .4rem;
}
.prose .key-takeaway-text { margin: 0; font-size: 1rem; line-height: 1.75; }

/* Ghost wraps full/wide-width cards in these. */
.prose .kg-width-wide  { max-width: min(100%, 900px);  margin-inline: auto; }
.prose .kg-width-full  { max-width: 100%; }
.prose .kg-card + .kg-card { margin-top: 1.4em; }

/* Ghost's member/subscribe CTA cards are not used — this site sells a product,
   not a newsletter — but hide them defensively if one is ever inserted. */
.prose .kg-cta-card, .prose .kg-signup-card { display: none; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .posts--index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article__head-in { grid-template-columns: 1fr; gap: 1.6rem; }
  .article__summary { max-width: none; }
  .article__img { height: clamp(200px, 42vw, 280px); }
  .article__head h1, .blog-hero h1 { max-width: none; }
}

@media (max-width: 760px) {
  .featured { grid-template-columns: 1fr; }
  .featured img { min-height: 0; height: 200px; }
}

@media (max-width: 560px) {
  .posts--index { grid-template-columns: 1fr; }
  .blog-filter__search { width: 100%; min-width: 0; }
  .tagpicker { gap: .4rem; }
  .tagpicker__select { width: 100%; max-width: none; }
  .takeaway { padding: 1rem 1.15rem; }
  .pager { flex-wrap: wrap; justify-content: center; }
  .post__img { height: 170px; }
  .browse span { width: 100%; }
  .prose th, .prose td { padding: .7rem .8rem; }
}