/* ==========================================================================
   Cloud Interview — public blog (/blog)
   --------------------------------------------------------------------------
   Themed to match the sign-in screens (resources/assets/login/css/my-style.css)
   and the blog admin panel: navy #060f1e, cyan #00c8f0, Inter, glass cards with
   a cyan hairline top edge, gradient CTAs and drifting background orbs.

   SELF-CONTAINED. This file used to sit on top of landing-data/styles.css and
   borrow .btn / .badge / .orb / .bg-grid from it. It no longer does — that file
   is a COMPILED Tailwind build carrying the old indigo/sky/teal ink palette, so
   loading it would fight this one and it only contains the handful of utilities
   the landing page happens to use. Everything the blog views reference is
   defined here.

   Keep the :root block in sync with login/css/my-style.css if the brand palette
   ever changes.
   ========================================================================== */

:root {
  /* ── mirrored from login/css/my-style.css ── */
  --cyan:       #00c8f0;
  --cyan-dark:  #0099bb;
  --navy:       #060f1e;
  --navy-mid:   #0a1628;
  --navy-card:  #0f1f38;
  --border:     rgba(0, 200, 240, 0.16);
  --text:       #e8f4f8;
  --muted:      #7a9ab8;

  /* ── blog derivatives ── */
  --bl-heading: #f0f8ff;
  --bl-body:    #c4dae8;
  --bl-line:    rgba(0, 200, 240, 0.12);
  --bl-card:    linear-gradient(170deg, rgba(16, 34, 62, .82) 0%, rgba(10, 22, 42, .9) 100%);
  --bl-grad:    linear-gradient(135deg, #00d4ff 0%, #0099cc 60%, #007aaa 100%);
  --bl-sans:    'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  /* The editorial move: a high-contrast serif for headlines against the sans
     body. This is what separates the blog's voice from the app screens while
     the palette keeps them in the same family. */
  --bl-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --bl-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--navy);
  color: var(--bl-body);
  font-family: var(--bl-sans);
  overflow-x: hidden;
}
body.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::selection { background: rgba(0, 200, 240, .25); color: #fff; }

/* ── Borrowed-class replacements (were landing-data/styles.css) ─────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .22; pointer-events: none; }
.bl-orb-anim-1 { animation: blFloatOrb 9s ease-in-out infinite; }
.bl-orb-anim-2 { animation: blFloatOrb 7s ease-in-out infinite reverse; animation-delay: 2s; }
@keyframes blFloatOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-28px) scale(1.05); }
}

.bg-grid {
  background-image:
    linear-gradient(90deg, rgba(0, 200, 240, .05) 1px, transparent 1px),
    linear-gradient(rgba(0, 200, 240, .05) 1px, transparent 1px);
  background-size: 64px 64px;
}
.mask-fade-y {
  -webkit-mask-image: linear-gradient(#0000, #000 12% 88%, #0000);
          mask-image: linear-gradient(#0000, #000 12% 88%, #0000);
}

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .95rem; border-radius: 40px;
  background: rgba(0, 200, 240, .08);
  border: 1px solid var(--border);
  color: var(--cyan);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: 14px; border: 1px solid transparent;
  font-family: inherit; font-size: .93rem; font-weight: 700; line-height: 1;
  cursor: pointer; text-decoration: none; letter-spacing: .02em;
  white-space: nowrap;   /* stops "Start Hiring" breaking across two lines */
  transition: transform .2s, box-shadow .25s, background .25s, border-color .25s, color .2s;
}
.btn-primary {
  background: var(--bl-grad); color: #03111e !important;
  box-shadow: 0 4px 20px rgba(0, 200, 240, .28);
}
.btn-primary:hover {
  filter: brightness(1.08); transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 200, 240, .42);
}
.btn-ghost {
  background: rgba(0, 200, 240, .05);
  border-color: var(--border); color: var(--text) !important;
}
.btn-ghost:hover {
  background: rgba(0, 200, 240, .1);
  border-color: rgba(0, 200, 240, .42); transform: translateY(-2px);
}

/* ── Shell ──────────────────────────────────────────────────────────────── */

.bl-shell       { position: relative; min-height: 100vh; }
.bl-wrap        { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }
.bl-wrap-narrow { max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; }

.bl-atmos { position: absolute; inset: 0; z-index: -10; opacity: .55; pointer-events: none; }

/* ── Navigation ─────────────────────────────────────────────────────────── */

.bl-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 15, 30, .78);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.bl-nav-inner {
  max-width: 76rem; margin: 0 auto; padding: .9rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.bl-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.bl-brand img {
  width: 38px; height: 38px; object-fit: contain; flex: none;
  border-radius: 10px; filter: drop-shadow(0 0 10px rgba(0, 200, 240, .35));
}
.bl-brand span {
  font-size: 1.05rem; font-weight: 800; color: var(--bl-heading); letter-spacing: -.02em;
}
.bl-brand span em { font-style: normal; color: var(--cyan); }
.bl-brand small {
  display: block; margin-top: 2px;
  font-size: .58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: var(--cyan); opacity: .75;
}
.bl-nav-links { display: none; align-items: center; gap: 1.75rem; }
.bl-nav-links a {
  font-size: .875rem; font-weight: 500; color: var(--muted);
  text-decoration: none; transition: color .2s;
}
.bl-nav-links a:hover { color: var(--cyan); }
.bl-nav-cta { display: flex; align-items: center; gap: .7rem; }

@media (min-width: 900px) { .bl-nav-links { display: flex; } }

/* ── Page header ────────────────────────────────────────────────────────── */

.bl-header { padding: 4.5rem 0 0; text-align: center; position: relative; }
.bl-header h1 {
  margin: 1.1rem 0 0;
  font-family: var(--bl-display); font-weight: 600;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.08; letter-spacing: -.02em; color: var(--bl-heading);
}
.bl-header-sub {
  max-width: 38rem; margin: 1.15rem auto 0;
  color: var(--muted); font-size: 1.05rem; line-height: 1.75;
}

/* Small-caps eyebrow — the editorial label above a headline. */
.bl-eyebrow {
  display: inline-block;
  font-family: var(--bl-sans); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .28em; color: var(--cyan);
}

/* Hairline rule — the quiet separator that does a lot of the editorial work. */
.bl-rule {
  height: 1px; margin: 3rem auto 0; max-width: 22rem;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 240, .35), transparent);
}

/* ── Editorial layout: content column + sidebar ─────────────────────────── */

.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-top: 3.5rem; }
.bl-main { min-width: 0; }

@media (min-width: 1080px) {
  .bl-layout { grid-template-columns: minmax(0, 1fr) 19.5rem; gap: 3.5rem; }
}

.bl-resultline {
  margin: 0 0 2rem; text-align: center;
  font-family: var(--bl-mono); font-size: .78rem; color: var(--muted);
}

/* ── Kicker (category / label above a title) ────────────────────────────── */

.bl-kicker {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; color: var(--cyan);
}
.bl-kicker a { color: var(--cyan); text-decoration: none; transition: opacity .2s; }
.bl-kicker a:hover { opacity: .7; }
.bl-kicker span { color: var(--muted); }
.bl-kicker-sep { color: rgba(122, 154, 184, .5); }

.bl-postdate {
  margin: .7rem 0 0; text-align: center;
  font-family: var(--bl-mono); font-size: .72rem; color: var(--muted); opacity: .85;
}

/* "Continue reading" — a rule-flanked link, not a button. */
.bl-more {
  display: inline-flex; align-items: center; gap: .8rem;
  margin: 1.6rem auto 0;
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .22em; color: var(--cyan); text-decoration: none;
  transition: gap .25s, color .2s;
}
.bl-more::before, .bl-more::after {
  content: ''; width: 1.6rem; height: 1px; background: rgba(0, 200, 240, .45);
  transition: width .25s, background .2s;
}
.bl-more:hover { color: #5ce0ff; }
.bl-more:hover::before, .bl-more:hover::after { width: 2.2rem; background: rgba(0, 200, 240, .8); }
.bl-more-sm { font-size: .64rem; letter-spacing: .18em; margin-top: 1.15rem; }
.bl-more-sm::before, .bl-more-sm::after { width: 1rem; }

/* ── Lead story ─────────────────────────────────────────────────────────── */

.bl-lead { margin: 0 0 3.5rem; text-align: center; }
.bl-lead-media {
  display: block; position: relative; overflow: hidden;
  border-radius: 20px; aspect-ratio: 16 / 9;
  background: rgba(6, 15, 30, .8);
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.bl-lead-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.bl-lead-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 15, 30, .1) 0%, transparent 45%, rgba(10, 22, 42, .5) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 200, 240, .09);
}
.bl-lead:hover .bl-lead-media img { transform: scale(1.03); }

.bl-lead-body { padding: 2rem 1rem 0; display: flex; flex-direction: column; align-items: center; }
.bl-lead-title {
  margin: 1rem 0 0;
  font-family: var(--bl-display); font-weight: 600;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.16;
  letter-spacing: -.015em; color: var(--bl-heading); max-width: 22ch;
}
.bl-lead-title a { color: inherit; text-decoration: none; transition: color .2s; }
.bl-lead-title a:hover { color: var(--cyan); }
.bl-lead-excerpt {
  max-width: 42rem; margin: 1.15rem auto 0;
  color: var(--muted); font-size: 1rem; line-height: 1.8;
}

/* ── Search + filters ───────────────────────────────────────────────────── */

.bl-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem; margin: 2.25rem 0 .5rem;
}
/* min-width:0 is load-bearing. A flex item will not shrink below its content's
   intrinsic minimum by default, and an <input> carries a chunky intrinsic width
   — which is what pushed the Search button off the right edge on a phone. */
.bl-search { position: relative; flex: 1 1 18rem; max-width: 26rem; min-width: 0; }
.bl-search input {
  width: 100%; padding: .85rem 1rem .85rem 2.7rem;
  background: rgba(6, 15, 30, .75);
  border: 1px solid rgba(0, 200, 240, .14); border-radius: 14px;
  color: var(--text); font-family: inherit; font-size: .9rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.bl-search input::placeholder { color: rgba(122, 154, 184, .65); }
.bl-search input:focus {
  border-color: rgba(0, 200, 240, .55);
  box-shadow: 0 0 0 3px rgba(0, 200, 240, .12);
}
.bl-search svg {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--cyan); fill: none; stroke-width: 2; opacity: .8;
}

.bl-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.35rem 0 0; }
.bl-filter {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .45rem .9rem; border-radius: 30px;
  background: rgba(0, 200, 240, .04);
  border: 1px solid var(--border);
  color: var(--muted); font-size: .8rem; font-weight: 500; text-decoration: none;
  transition: color .2s, border-color .2s, background .2s, transform .18s;
}
.bl-filter:hover {
  color: var(--text); border-color: rgba(0, 200, 240, .42);
  background: rgba(0, 200, 240, .09); transform: translateY(-1px);
}
.bl-filter.is-active {
  color: var(--cyan);
  background: linear-gradient(135deg, rgba(0, 200, 240, .16) 0%, rgba(0, 150, 200, .07) 100%);
  border-color: rgba(0, 200, 240, .38);
  box-shadow: 0 0 20px rgba(0, 200, 240, .1);
}
.bl-filter b { font-weight: 600; font-size: .72rem; color: var(--cyan); opacity: .7; }

/* ── Post grid ──────────────────────────────────────────────────────────── */

/* Centre-fit, not stretch-fill.
   A fixed column count strands a lone post against the left edge with empty
   columns beside it — which is exactly how a young blog looks. auto-fit with a
   CAPPED column width plus justify-content:center means 1 post renders as one
   centred card, 2 as a centred pair, and a trailing row of 1 sits centred
   rather than hanging off the left. Inside the ~48rem content column this
   settles at 2 across on desktop, which is the editorial proportion. */
.bl-grid {
  display: grid; gap: 2.2rem 1.8rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 21rem));
  justify-content: center;
}
/* (single-column handling lives in the mobile block at the foot of this file) */

/* Cards are frameless on purpose. Boxing every post in a bordered panel is what
   made the grid read as a dashboard rather than a magazine; here the image is
   the frame and the type sits on the page, the way the reference does it. */
.bl-card { position: relative; display: flex; flex-direction: column; text-align: center; }
.bl-card-media {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 14px; background: rgba(6, 15, 30, .8);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
  transition: box-shadow .4s, border-color .4s;
}
.bl-card:hover .bl-card-media {
  border-color: rgba(0, 200, 240, .35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 46px rgba(0, 200, 240, .09);
}
.bl-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
/* Cover images are user content and are often light. Without this a white
   screenshot reads as a hole punched in the dark card; the scrim settles it
   into the surface and the inset hairline keeps the edge defined. */
.bl-card-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 15, 30, .1) 0%, transparent 42%, rgba(10, 22, 42, .55) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 200, 240, .09);
}
.bl-card:hover .bl-card-media img { transform: scale(1.04); }

.bl-card-body {
  padding: 1.35rem .25rem 0;
  display: flex; flex-direction: column; align-items: center; flex: 1 1 auto;
}
.bl-card-title {
  margin: .85rem 0 0;
  font-family: var(--bl-display); font-weight: 600;
  font-size: 1.3rem; line-height: 1.28; letter-spacing: -.01em;
  color: var(--bl-heading);
}
.bl-card-title a { color: inherit; text-decoration: none; transition: color .2s; }
.bl-card-title a:hover { color: var(--cyan); }
.bl-card-excerpt {
  margin: .85rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.75;
}
.bl-card .bl-more { margin-top: auto; padding-top: 1.15rem; }

/* Placeholder when a post has no image */
.bl-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(0, 200, 240, .16), transparent 55%),
    radial-gradient(120% 120% at 85% 90%, rgba(0, 85, 204, .18), transparent 55%),
    rgba(6, 15, 30, .9);
}
.bl-noimg span {
  font-size: 1.8rem; font-weight: 800; color: var(--cyan);
  text-shadow: 0 0 26px rgba(0, 200, 240, .45);
}

/* (The old .bl-cat pill was replaced by .bl-kicker — the small-caps label above
   a title — so the index, the article header and the related cards all use one
   treatment instead of two.) */

/* Truncation */
.bl-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   Sidebar
   The standing furniture that keeps the page from reading as empty when there
   are only a handful of posts. Widgets are quiet by design — hairline headings,
   no heavy panels — so they support the content column instead of competing.
   ══════════════════════════════════════════════════════════════════════════ */

.bl-sidebar { display: flex; flex-direction: column; gap: 2.6rem; min-width: 0; }

@media (min-width: 1080px) {
  /* Sticky, but never clipped.
     An earlier version added `max-height: calc(100vh - 7rem); overflow-y: auto`
     to keep the rail pinned. That gave the sidebar its own nested scrollbar and
     chopped the promo card in half whenever the widgets were taller than the
     viewport — which is most of the time. A rail taller than the screen should
     simply scroll with the page. */
  .bl-sidebar { position: sticky; top: 5.5rem; align-self: start; }
}

.bl-widget { position: relative; }
.bl-widget-title {
  margin: 0 0 1.15rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--bl-line);
  font-family: var(--bl-sans); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .24em; color: var(--cyan);
  text-align: center;
}

/* ── About ── */
.bl-widget-about { text-align: center; }
.bl-about-logo {
  width: 56px; height: 56px; object-fit: contain; margin: 0 auto .95rem;
  display: block; border-radius: 14px;
  filter: drop-shadow(0 0 14px rgba(0, 200, 240, .3));
}
.bl-about-text { margin: 0 0 .8rem; color: var(--muted); font-size: .86rem; line-height: 1.8; }
.bl-about-note { font-style: italic; opacity: .85; }
.bl-about-link {
  display: inline-block; margin-top: .3rem;
  font-size: .78rem; font-weight: 600; color: var(--cyan); text-decoration: none;
}
.bl-about-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Popular posts ── */
.bl-poplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.05rem; }
.bl-pop { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.bl-pop-thumb {
  width: 68px; height: 52px; flex: none; overflow: hidden; border-radius: 10px;
  background: rgba(6, 15, 30, .8); border: 1px solid var(--border);
  display: grid; place-items: center;
  transition: border-color .25s;
}
.bl-pop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-pop-thumb .bl-noimg span { font-size: 1.05rem; }
.bl-pop:hover .bl-pop-thumb { border-color: rgba(0, 200, 240, .4); }
.bl-pop-body { min-width: 0; }
.bl-pop-body b {
  display: block;
  font-family: var(--bl-display); font-weight: 600; font-size: .95rem;
  line-height: 1.3; color: var(--text); transition: color .2s;
}
.bl-pop:hover .bl-pop-body b { color: var(--cyan); }
.bl-pop-body time {
  display: block; margin-top: .3rem;
  font-family: var(--bl-mono); font-size: .68rem; color: var(--muted); opacity: .8;
}

/* ── Categories — two columns, like the reference ── */
.bl-catlist {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .9rem;
}
.bl-catlist a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--bl-line);
  font-size: .85rem; color: var(--muted); text-decoration: none;
  transition: color .2s;
}
.bl-catlist a:hover, .bl-catlist a.is-active { color: var(--cyan); }
.bl-catlist em {
  font-style: normal; font-family: var(--bl-mono); font-size: .68rem;
  color: var(--muted); opacity: .6;
}

/* ── Topics ── */
.bl-taglist { display: flex; flex-wrap: wrap; gap: .4rem; }
.bl-taglist .bl-tag.is-active {
  color: var(--cyan); border-color: rgba(0, 200, 240, .42); background: rgba(0, 200, 240, .1);
}

/* ── Promo (where an editorial theme puts a banner ad) ── */
.bl-promo {
  position: relative; overflow: hidden; text-align: center;
  padding: 1.9rem 1.5rem; border-radius: 18px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(0, 200, 240, .14), transparent 62%),
    var(--bl-card);
  border: 1px solid rgba(0, 200, 240, .18);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .42);
}
.bl-promo::before {
  content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 240, .75), transparent);
}
.bl-promo-eyebrow {
  display: block; font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .26em; color: var(--cyan); opacity: .85;
}
.bl-promo-title {
  margin: .8rem 0 .7rem;
  font-family: var(--bl-display); font-weight: 600; font-size: 1.5rem;
  line-height: 1.2; letter-spacing: -.01em; color: var(--bl-heading);
}
.bl-promo p { margin: 0 0 1.35rem; color: var(--muted); font-size: .84rem; line-height: 1.75; }
.bl-promo .btn { width: 100%; padding: .75rem 1.2rem; font-size: .85rem; }
.bl-promo-sub {
  display: block; margin-top: .9rem;
  font-size: .74rem; color: var(--muted); text-decoration: none;
}
.bl-promo-sub:hover { color: var(--cyan); }

/* ── Contact ── */
.bl-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.bl-contact a {
  display: flex; align-items: center; gap: .65rem; padding: .55rem 0;
  border-bottom: 1px solid var(--bl-line);
  font-size: .82rem; color: var(--muted); text-decoration: none;
  transition: color .2s;
}
.bl-contact a:hover { color: var(--cyan); }
.bl-contact svg { width: 15px; height: 15px; flex: none; opacity: .8; }

/* ── Empty state ────────────────────────────────────────────────────────── */

.bl-empty {
  text-align: center; padding: 5rem 1.5rem; margin-top: 2.5rem;
  border: 1px dashed rgba(0, 200, 240, .22); border-radius: 20px;
  background: rgba(0, 200, 240, .02);
}
.bl-empty h3 {
  margin: 0 0 .55rem;
  font-family: var(--bl-display); font-weight: 600; font-size: 1.4rem; color: var(--bl-heading);
}
.bl-empty p { margin: 0; color: var(--muted); }

/* ── Pagination ─────────────────────────────────────────────────────────── */

.bl-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .42rem; margin: 3.5rem 0 0; }
.bl-pager a, .bl-pager span {
  min-width: 2.5rem; padding: .58rem .85rem; border-radius: 12px; text-align: center;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--border); background: rgba(0, 200, 240, .04); color: var(--muted);
  transition: color .2s, border-color .2s, background .2s;
}
.bl-pager a:hover { color: var(--text); border-color: rgba(0, 200, 240, .42); background: rgba(0, 200, 240, .1); }
.bl-pager .is-current {
  color: #03111e; border-color: transparent; background: var(--bl-grad);
  box-shadow: 0 4px 16px rgba(0, 200, 240, .3);
}
.bl-pager .is-gap { border-color: transparent; background: none; }

/* ── Article ────────────────────────────────────────────────────────────── */

/* The article shares the index's two-column shell, so it starts flush with the
   sidebar rather than adding its own top padding. */
.bl-layout-article { padding-top: 2.75rem; }
.bl-article { padding: 0; }

.bl-crumbs {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.75rem;
  font-family: var(--bl-mono); font-size: .72rem; letter-spacing: .06em; color: var(--muted);
}
.bl-crumbs a { color: var(--muted); text-decoration: none; transition: color .2s; }
.bl-crumbs a:hover { color: var(--cyan); }
.bl-crumbs span { opacity: .5; }

/* Article header is left-aligned — the centred treatment belongs to the index
   lead, where it is a poster; here it is the top of a page you read. */
.bl-article-head { text-align: left; }
.bl-kicker-left { justify-content: flex-start; }
.bl-article-head .bl-meta { justify-content: flex-start; }

.bl-related { margin-top: 4.5rem; }

/* Section header with a link out to the rest of the category. */
.bl-related-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .9rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--bl-line);
}
.bl-related-head .bl-section-title { margin: 0; }
.bl-related-more {
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--cyan); text-decoration: none;
  white-space: nowrap; transition: opacity .2s;
}
.bl-related-more:hover { opacity: .75; }
.bl-related-more span { display: inline-block; transition: transform .2s; }
.bl-related-more:hover span { transform: translateX(3px); }
.bl-backlink { margin: 3rem 0 0; text-align: center; }
.bl-copied {
  display: none; color: var(--cyan);
  font-family: var(--bl-mono); font-size: .72rem;
  letter-spacing: normal; text-transform: none;
}

.bl-article h1 {
  margin: 1rem 0 0;
  font-family: var(--bl-display); font-weight: 600;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.14; letter-spacing: -.015em; color: var(--bl-heading);
}
.bl-article-lead {
  margin: 1.2rem 0 0; max-width: 42rem;
  font-size: 1.14rem; line-height: 1.75; color: var(--muted);
}
.bl-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  margin: 1.6rem 0 0; padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--bl-line);
  font-family: var(--bl-mono); font-size: .74rem; color: var(--muted);
}
.bl-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); opacity: .6; }

.bl-hero {
  margin: 2.4rem 0 0; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border); background: rgba(6, 15, 30, .8);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.bl-hero img { width: 100%; height: auto; display: block; }

/* Rendered post body — the only place bare tags are styled, scoped to .bl-body.
   max-width caps the measure at roughly 70 characters. The content column is
   ~50rem wide once the sidebar takes its share, which is fine for cards and far
   too wide for body copy. */
.bl-body {
  margin: 2.6rem 0 0; max-width: 42rem;
  color: var(--bl-body); font-size: 1.05rem; line-height: 1.85;
}
.bl-body > *:first-child { margin-top: 0; }
.bl-body p { margin: 0 0 1.35rem; }
/* Section headings share the headline serif so the article reads as one voice. */
.bl-body h2 {
  margin: 2.85rem 0 1rem;
  font-family: var(--bl-display); font-weight: 600;
  font-size: 1.8rem; line-height: 1.28; letter-spacing: -.01em; color: var(--bl-heading);
}
.bl-body h3 {
  margin: 2.3rem 0 .85rem;
  font-family: var(--bl-display); font-weight: 600;
  font-size: 1.4rem; color: var(--bl-heading); letter-spacing: -.005em;
}
/* h4-h6 are what the editor's "Heading 4/5/6" produce, and authors reach for
   them constantly for ordinary section breaks. Left at 1.05rem bold sans they
   sat almost flush with body copy and the article read as one undifferentiated
   slab — so they get the serif too, sized to stay clearly below h3. */
.bl-body h4 {
  margin: 2.1rem 0 .75rem;
  font-family: var(--bl-display); font-weight: 600;
  font-size: 1.22rem; line-height: 1.35; color: var(--bl-heading);
}
.bl-body h5, .bl-body h6 {
  margin: 1.9rem 0 .65rem;
  font-family: var(--bl-display); font-weight: 600;
  font-size: 1.08rem; color: var(--bl-heading);
}
/* A bold-only line used as a heading (very common when copy is pasted in) at
   least gets breathing room above it. */
.bl-body p > strong:only-child { display: inline-block; padding-top: .3rem; }
/* Drop-cap style opening — a small editorial flourish on the first paragraph. */
.bl-body > p:first-of-type { font-size: 1.12rem; line-height: 1.85; color: var(--text); }
.bl-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.bl-body a:hover { color: #5ce0ff; }
.bl-body strong, .bl-body b { color: var(--bl-heading); font-weight: 700; }
.bl-body ul, .bl-body ol { margin: 0 0 1.35rem; padding-left: 1.4rem; }
.bl-body li { margin: .48rem 0; }
.bl-body li::marker { color: var(--cyan); }
.bl-body blockquote {
  margin: 2rem 0; padding: 1.2rem 1.5rem;
  border-left: 3px solid var(--cyan); border-radius: 0 14px 14px 0;
  background: rgba(0, 200, 240, .05); color: var(--text); font-size: 1.06rem;
}
.bl-body blockquote p:last-child { margin-bottom: 0; }
.bl-body img {
  display: block; max-width: 100%; height: auto; margin: 2rem 0;
  border-radius: 16px; border: 1px solid var(--border);
}
.bl-body hr { border: 0; border-top: 1px solid var(--bl-line); margin: 2.6rem 0; }
.bl-body code {
  font-family: var(--bl-mono); font-size: .86em;
  padding: .14em .42em; border-radius: 6px;
  background: rgba(0, 200, 240, .09); border: 1px solid rgba(0, 200, 240, .16); color: var(--cyan);
}
.bl-body pre {
  margin: 1.8rem 0; padding: 1.2rem 1.35rem; overflow-x: auto;
  background: rgba(6, 15, 30, .85);
  border: 1px solid var(--border); border-radius: 16px;
  font-family: var(--bl-mono); font-size: .84rem; line-height: 1.7;
}
.bl-body pre code { background: none; border: 0; padding: 0; color: var(--bl-body); }
.bl-body table {
  width: 100%; margin: 1.8rem 0; border-collapse: collapse; font-size: .92rem;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.bl-body th, .bl-body td { padding: .75rem .95rem; border-bottom: 1px solid var(--bl-line); text-align: left; }
.bl-body th { background: rgba(0, 200, 240, .06); color: var(--bl-heading); font-weight: 700; }

/* ── Article footer ─────────────────────────────────────────────────────── */

/* ── FAQ (paired with FAQPage JSON-LD) ──────────────────────────────────── */

.bl-faq { margin: 3.2rem 0 0; max-width: 42rem; }
.bl-faq-title {
  margin: 0 0 1.4rem; padding-bottom: .85rem;
  border-bottom: 1px solid var(--bl-line);
  font-family: var(--bl-display); font-weight: 600;
  font-size: 1.55rem; letter-spacing: -.01em; color: var(--bl-heading);
}
.bl-faq-list { display: flex; flex-direction: column; gap: .6rem; }

.bl-faq-item {
  border: 1px solid var(--border); border-radius: 14px;
  background: rgba(0, 200, 240, .03);
  transition: border-color .25s, background .25s;
}
.bl-faq-item[open] { border-color: rgba(0, 200, 240, .3); background: rgba(0, 200, 240, .06); }
.bl-faq-item:hover { border-color: rgba(0, 200, 240, .28); }

.bl-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1rem; color: var(--bl-heading);
}
/* Hide the native disclosure marker in both engines. */
.bl-faq-item summary::-webkit-details-marker { display: none; }
.bl-faq-item summary::marker { content: ''; }
.bl-faq-item summary:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0, 200, 240, .18); border-radius: 14px;
}
.bl-faq-item summary svg {
  flex: none; width: 18px; height: 18px; color: var(--cyan);
  transition: transform .25s;
}
.bl-faq-item[open] summary svg { transform: rotate(180deg); }

.bl-faq-answer {
  padding: 0 1.15rem 1.15rem;
  color: var(--bl-body); font-size: .97rem; line-height: 1.8;
}

.bl-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 2.85rem 0 0; max-width: 42rem; }
.bl-tag {
  display: inline-flex; align-items: center; padding: .38rem .85rem; border-radius: 30px;
  background: rgba(0, 200, 240, .04); border: 1px solid var(--border);
  color: var(--muted); font-family: var(--bl-mono); font-size: .74rem; text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.bl-tag:hover { color: var(--cyan); border-color: rgba(0, 200, 240, .42); background: rgba(0, 200, 240, .09); }

.bl-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 2.1rem 0 0; padding-top: 1.8rem; max-width: 42rem;
  border-top: 1px solid var(--bl-line);
}
.bl-share span {
  margin-right: .35rem;
  font-family: var(--bl-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--muted);
}
.bl-share a, .bl-share button {
  display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem;
  border-radius: 50%; cursor: pointer; text-decoration: none;
  background: rgba(0, 200, 240, .05); border: 1px solid var(--border); color: var(--muted);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.bl-share a:hover, .bl-share button:hover {
  color: var(--cyan); border-color: rgba(0, 200, 240, .45);
  background: rgba(0, 200, 240, .12); transform: translateY(-2px);
}
.bl-share svg { width: 15px; height: 15px; }

.bl-cta-strip {
  position: relative; overflow: hidden;
  margin: 3.6rem 0 0; padding: 2.4rem; border-radius: 24px; text-align: center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(0, 200, 240, .14), transparent 60%),
    var(--bl-card);
  border: 1px solid rgba(0, 200, 240, .18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.bl-cta-strip::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 240, .75), transparent);
}
.bl-cta-strip h3 {
  margin: 0 0 .65rem;
  font-family: var(--bl-display); font-weight: 600;
  font-size: 1.65rem; letter-spacing: -.01em; color: var(--bl-heading);
}
.bl-cta-strip p { max-width: 34rem; margin: 0 auto 1.6rem; color: var(--muted); line-height: 1.7; }

/* ── Related ────────────────────────────────────────────────────────────── */

.bl-section-title {
  margin: 0 0 1.5rem;
  font-family: var(--bl-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .22em; color: var(--cyan); opacity: .8;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.bl-footer {
  margin-top: 5rem; padding: 3rem 0 2rem;
  border-top: 1px solid var(--border);
  background: rgba(10, 22, 40, .6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bl-footer-inner {
  max-width: 76rem; margin: 0 auto; padding: 0 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.bl-footer-links { display: flex; flex-wrap: wrap; gap: 1.35rem; }
.bl-footer a { color: var(--muted); font-size: .875rem; text-decoration: none; transition: color .2s; }
.bl-footer a:hover { color: var(--cyan); }
.bl-footer p { margin: 0; font-size: .78rem; color: var(--muted); opacity: .75; }

/* ── Not found / error ──────────────────────────────────────────────────── */

.bl-404 { text-align: center; padding: 7rem 1.5rem 5rem; }
.bl-404 .bl-code {
  margin: 0; line-height: 1;
  font-size: clamp(4rem, 12vw, 7rem); font-weight: 800; color: var(--cyan);
  text-shadow: 0 0 60px rgba(0, 200, 240, .4);
}
.bl-404 h1 {
  margin: 1rem 0 .6rem;
  font-family: var(--bl-display); font-weight: 600; font-size: 1.8rem; color: var(--bl-heading);
}
.bl-404 p { max-width: 30rem; margin: 0 auto 2rem; color: var(--muted); }

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   Mobile
   Everything above is written desktop-first, so this is where a phone actually
   gets laid out. The two things that were broken: the search toolbar pushed
   past the right edge (flex items refusing to shrink below an <input>'s
   intrinsic width), and the nav CTAs wrapping mid-phrase.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

  /* Tighter gutters — 1.5rem of padding is a lot of a 360px screen. */
  .bl-wrap, .bl-wrap-narrow { padding: 0 1.15rem; }

  /* ── Nav ── */
  .bl-nav-inner { padding: .7rem 1.15rem; gap: .6rem; }
  .bl-brand img { width: 32px; height: 32px; }
  .bl-brand span { font-size: .95rem; }
  .bl-brand small { font-size: .54rem; letter-spacing: .15em; }
  .bl-nav-cta { gap: .45rem; flex: none; }
  .bl-nav-cta .btn { padding: .55rem .85rem; font-size: .78rem; border-radius: 11px; }

  /* ── Masthead ── */
  .bl-header { padding: 2.75rem 0 0; }
  .bl-eyebrow { font-size: .6rem; letter-spacing: .2em; }
  .bl-header h1 { margin-top: .9rem; }
  .bl-header-sub { font-size: .95rem; margin-top: .9rem; }
  .bl-rule { margin-top: 2.25rem; }

  /* Orbs are decorative; shrink them so they cannot drive layout width. */
  .bl-header .orb { width: 18rem !important; height: 18rem !important; filter: blur(70px); }

  /* ── Search toolbar ──
     Field and button share one row: the field grows into whatever is left, the
     button stays at its natural width. `flex: 1 1 auto` on the button was the
     mistake — with the field on a row of its own the button stretched edge to
     edge and read as a giant banner rather than a control. A third button
     ("Clear", when a filter is active) simply wraps to a second row. */
  .bl-toolbar { gap: .55rem; margin-top: 1.75rem; }
  .bl-search { flex: 1 1 10rem; max-width: none; }
  .bl-toolbar .btn { flex: 0 0 auto; padding: .75rem 1.15rem; font-size: .84rem; }

  .bl-filters { gap: .4rem; margin-top: 1.15rem; }
  .bl-filter { padding: .4rem .75rem; font-size: .76rem; }

  /* ── Layout ── */
  .bl-layout { padding-top: 2.25rem; gap: 2.5rem; }
  .bl-layout-article { padding-top: 1.75rem; }

  /* One column, always. */
  .bl-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }

  /* ── Lead story ── */
  .bl-lead { margin-bottom: 2.5rem; }
  .bl-lead-media { border-radius: 14px; }
  .bl-lead-body { padding: 1.4rem .25rem 0; }
  .bl-lead-title { font-size: 1.6rem; max-width: none; }
  .bl-lead-excerpt { font-size: .93rem; margin-top: .9rem; }

  /* ── Article ── */
  .bl-article h1 { font-size: 1.85rem; }
  .bl-article-lead { font-size: 1rem; }
  .bl-body { font-size: 1rem; line-height: 1.8; }
  .bl-body > p:first-of-type { font-size: 1.04rem; }
  .bl-body h2 { font-size: 1.45rem; margin-top: 2.2rem; }
  .bl-body h3 { font-size: 1.22rem; }
  .bl-body h4 { font-size: 1.1rem; }
  .bl-body pre { padding: .9rem 1rem; font-size: .78rem; }
  .bl-hero { border-radius: 14px; margin-top: 1.8rem; }
  .bl-meta { gap: .4rem .8rem; font-size: .7rem; }

  .bl-cta-strip { padding: 1.8rem 1.25rem; border-radius: 18px; }
  .bl-cta-strip h3 { font-size: 1.3rem; }

  /* ── Sidebar (stacks under the content) ── */
  .bl-sidebar { gap: 2.25rem; }
  .bl-catlist { grid-template-columns: 1fr; }

  /* ── Footer ── */
  .bl-footer { margin-top: 3.5rem; padding: 2.25rem 0 1.75rem; }
  .bl-footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .bl-footer-links { gap: 1rem; }

  .bl-pager { margin-top: 2.5rem; }
  .bl-404 { padding: 4.5rem 1.15rem 3.5rem; }
}

/* Narrow phones — shrink the nav rather than dropping "Home".
   Hiding it left the header with no route back to the site at all: the brand
   mark links to /blog, not the homepage, so the only Home link was buried in
   the footer. Trimming the brand and both buttons keeps everything on one row
   down to ~360px, which covers essentially every phone in use. */
@media (max-width: 420px) {
  .bl-brand small { display: none; }
  .bl-brand img { width: 28px; height: 28px; }
  .bl-brand span { font-size: .88rem; }
  .bl-nav-inner { padding: .6rem .9rem; gap: .5rem; }
  .bl-nav-cta { gap: .35rem; }
  .bl-nav-cta .btn { padding: .48rem .72rem; font-size: .72rem; border-radius: 9px; }

  .bl-lead-title { font-size: 1.45rem; }
  .bl-header h1 { font-size: 2rem; }
  .bl-toolbar .btn { padding: .72rem .95rem; font-size: .8rem; }
}

/* Below ~350px there genuinely is not room for both CTAs; the footer keeps a
   Home link, so the secondary is the one that goes. */
@media (max-width: 349px) {
  .bl-nav-cta .btn-ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  .bl-card, .bl-card-media, .bl-share a, .bl-share button, .btn, .bl-filter, .bl-more { transition: none; }
  .btn:hover, .bl-filter:hover, .bl-share a:hover, .bl-share button:hover { transform: none; }
  .bl-card:hover .bl-card-media img, .bl-lead:hover .bl-lead-media img { transform: none; }
  .bl-more:hover::before, .bl-more:hover::after { width: 1.6rem; }
}