/* Blog. Builds entirely on the tokens defined in landing/css/styles.css -
   no new palette, no new fonts. --measure (62ch) is the article column.

   The blog renders inside two different shells: the public one (which loads
   landing/css/styles.css) and the logged-in app shell base_profile.html (which
   does not). Everything the blog needs is therefore redeclared on .blog-main so
   the pages look identical in both. Values are copied verbatim from
   landing/css/styles.css - keep them in sync if that file's palette changes. */

.blog-main,
.blog-footer {
  --paper:#FCFDFD;--paper-2:#F4F7F8;--paper-3:#EAF0F2;
  --ink:#0E1417;--ink-2:#33424A;--muted:#5D6B72;--muted-2:#8A959B;
  --line:rgba(14,20,23,.08);--line-2:rgba(14,20,23,.14);
  --teal:#026282;--teal-600:#0A7397;--teal-700:#045E7C;--teal-deep:#013F55;
  --amber:#E1932F;--amber-soft:#F6C97E;
  --nav-h:78px;--radius:22px;--maxw:1360px;
  --sec-pad:clamp(40px,5vw,78px);
  --gutter:clamp(18px,3.4vw,44px);
  --measure:62ch;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-sm:0 1px 2px rgba(14,20,23,.05);
  --shadow:0 2px 8px rgba(14,20,23,.04),0 22px 48px -26px rgba(14,20,23,.22);
  --shadow-lg:0 6px 18px rgba(14,20,23,.05),0 50px 100px -46px rgba(14,20,23,.30);
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.52));
  --glass-brd:1px solid rgba(255,255,255,.65);
  --glass-ring:0 0 0 1px rgba(14,20,23,.045);

  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.55;
}

/* Layout and control primitives, scoped so they work in the app shell too. */
.blog-main .wrap, .blog-footer .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.blog-main .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.blog-main .display { letter-spacing: -.03em; line-height: 1.0; }
.blog-main h1, .blog-main h2, .blog-main h3 { font-family: 'Space Grotesk', system-ui, sans-serif; }
.blog-main a { color: inherit; text-decoration: none; }
.blog-main .btn {
  position: relative; font-weight: 600; font-size: clamp(13px,1.15vw,15px); font-family: inherit;
  border: none; cursor: pointer; border-radius: 999px;
  padding: clamp(10px,1.2vw,13px) clamp(14px,1.9vw,25px);
  display: inline-flex; align-items: center; justify-content: center; gap: clamp(6px,.7vw,9px);
  white-space: nowrap; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), background .25s, border-color .2s, color .2s;
}
.blog-main .btn-primary { background: linear-gradient(135deg,var(--teal-600),var(--teal-deep)); color: #fff; box-shadow: 0 1px 2px rgba(14,20,23,.1),0 12px 26px -12px rgba(2,98,130,.55); }
.blog-main .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(14,20,23,.12),0 20px 40px -14px rgba(2,98,130,.65); }
.blog-main .btn-ghost { background: transparent; color: var(--ink-2); padding: 10px 8px; }
.blog-main .btn-ghost:hover { color: var(--teal); }
.blog-main .btn-sm { padding: 10px 19px; font-size: 14px; }

/* The public shell has a fixed floating navbar to clear; the app shell already
   places content below its own navbar, so it only needs normal breathing room. */
/* The two shells' navbars behave oppositely, so the top spacing differs.

   Public: .nav-outer is position:sticky, so it already occupies its 78px in
   normal flow - adding --nav-h here would double the gap. (The landing hero
   proves this: it pulls back up with margin-top:calc(-1 * var(--nav-h)).)

   App: .navbar-container is position:fixed and occupies no flow space, so the
   content must clear its 65px itself, the way home.html does with its own
   margins. Anything less and the page slides under the navbar.

   Both still SUBTRACT the navbar height from --blog-img-max-h, because either
   navbar overlays the viewport once pinned. */
.blog-main--public {
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: var(--sec-pad);
  --blog-img-max-h: calc(100vh - var(--nav-h) - 92px);
}
.blog-main--app {
  padding-top: calc(65px + clamp(16px, 2.5vw, 32px));
  padding-bottom: var(--sec-pad);
  --blog-img-max-h: calc(100vh - 65px - 92px);
}

/* ---------- index header ---------- */
.blog-header { text-align: center; max-width: min(var(--measure), 720px); margin: 0 auto clamp(30px, 4vw, 56px); }
.blog-header-tight { text-align: left; margin-left: 0; }
.blog-title { font-size: clamp(30px, 4.6vw, 54px); margin: 12px 0 0; letter-spacing: -.03em; }
.blog-lede { color: var(--muted); font-size: 18px; line-height: 1.65; margin: 16px auto 0; }

/* ---------- featured ---------- */
.blog-featured {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 3vw, 40px);
  align-items: center; margin-bottom: clamp(34px, 4vw, 60px);
  padding: clamp(16px, 2vw, 24px); border-radius: var(--radius);
  background: var(--glass-bg); border: var(--glass-brd);
  box-shadow: var(--glass-ring), var(--shadow);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.blog-featured:hover { transform: translateY(-3px); box-shadow: var(--glass-ring), var(--shadow-lg); }
.blog-featured-media { aspect-ratio: 16 / 9; border-radius: calc(var(--radius) - 8px); overflow: hidden; background: var(--paper-3); }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-featured-title { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.02em; margin: 10px 0 0; }
.blog-featured-excerpt { color: var(--muted); font-size: 16.5px; line-height: 1.65; margin: 12px 0 14px; }

/* ---------- card grid ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.blog-card {
  border-radius: var(--radius); overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card-media { display: block; aspect-ratio: 16 / 9; background: var(--paper-3); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.blog-card-title { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; margin: 8px 0 0; }
.blog-card-title a:hover { color: var(--teal); }
.blog-card-excerpt { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 10px 0 14px; flex: 1; }
.blog-card-meta { display: flex; gap: 8px; align-items: center; color: var(--muted-2); font-size: 13.5px; }

.blog-empty { text-align: center; color: var(--muted); padding: 60px 0; }
.blog-empty p { margin: 0; }

/* ---------- pagination ---------- */
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(32px, 4vw, 56px); }
.blog-page-count { color: var(--muted); font-size: 14px; }

/* ---------- article ---------- */
.blog-article { max-width: var(--measure); margin: 0 auto; }
.blog-article-head { margin-bottom: clamp(22px, 3vw, 34px); }
.blog-article-title { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.03em; margin: 12px 0 0; }
.blog-byline { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.blog-byline-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.blog-byline-text { display: flex; flex-direction: column; }
.blog-byline-name { font-weight: 600; font-size: 15px; }
.blog-byline-meta { color: var(--muted); font-size: 13.5px; display: flex; gap: 7px; }

.blog-cover { margin: 0 0 clamp(26px, 3.5vw, 44px); border-radius: var(--radius); overflow: hidden; background: var(--paper-3); }
.blog-cover img { width: 100%; object-fit: cover; display: block; }

.blog-body { font-size: 18px; line-height: 1.75; color: var(--ink-2); }
.blog-p { margin: 0 0 1.35em; }
.blog-h2 { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 30px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); margin: 2.2em 0 .7em; }
.blog-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
/* list-style is declared explicitly on purpose. The blog renders inside two
   shells that load different stylesheets - the public one applies a global
   *{margin:0;padding:0} reset, the app shell does not - so leaving the marker
   to inherit made bullets appear in one and vanish in the other. */
.blog-list {
  margin: 0 0 1.35em;
  padding-left: 1.5em;
  list-style: disc outside;
}
.blog-list li { margin-bottom: .5em; padding-left: .2em; }
.blog-list li::marker { color: var(--teal); }
.blog-quote { margin: 1.8em 0; padding-left: 22px; border-left: 3px solid var(--teal); font-size: 20px; line-height: 1.6; font-style: italic; color: var(--ink); }
.blog-divider { border: 0; height: 1px; background: var(--line-2); margin: 2.6em auto; max-width: 120px; }

.blog-figure { margin: 2em 0; }
.blog-figure img { width: 100%; border-radius: calc(var(--radius) - 8px); display: block; }
.blog-figure figcaption { text-align: center; color: var(--muted-2); font-size: 14px; margin-top: 10px; }

/* One fixed image size for the whole article - no per-image width control.
   Images fill the article column and are capped so a tall one can never run
   past the viewport. */
.blog-figure img { object-fit: cover; }

/* Image shape, keyed off data-ar so the SAME rules style the published figure
   and the editor's preview. That is what makes the editor preview honest: it
   is not an approximation of the output, it is the identical CSS.
   object-fit: cover crops for display only - the stored file is never
   modified, so changing shape later re-crops from the full original.

   Every shape is capped by --blog-img-max-h, the height actually visible below
   the fixed navbar. The cap is applied as a MAX-WIDTH derived from the aspect
   ratio rather than a max-height, so the chosen proportions are preserved
   exactly while the image still fits on screen without scrolling. */
[data-ar] img { margin-inline: auto; }
[data-ar="16-9"] img { aspect-ratio: 16 / 9; object-fit: cover; max-width: calc(var(--blog-img-max-h) * 16 / 9); }
[data-ar="1-1"]  img { aspect-ratio: 1 / 1;  object-fit: cover; max-width: var(--blog-img-max-h); }
[data-ar="4-5"]  img { aspect-ratio: 4 / 5;  object-fit: cover; max-width: calc(var(--blog-img-max-h) * 4 / 5); }

/* Editor: the shape dropdown under an image block. */
.blog-editor { --blog-img-max-h: calc(100vh - 65px - 140px); }
.blog-block-controls { display: flex; gap: 12px; margin-top: 10px; }
.blog-block-controls > * { flex: 1; }
.blog-block-controls .blog-block-field { flex: 1; margin-top: 0; }
.blog-block-controls select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-2);
  border-radius: 10px; font: inherit; font-size: 14px;
  background: var(--paper); color: var(--ink);
}

.blog-author-card { display: flex; gap: 16px; align-items: flex-start; margin-top: clamp(36px, 4vw, 56px); padding: 22px; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line); }
.blog-author-card img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blog-author-name { font-weight: 600; }
.blog-author-bio { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 4px 0 0; }

.blog-related { margin-top: clamp(48px, 6vw, 84px); }
.blog-related-title { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 24px; margin: 0 0 24px; }

.blog-draft-banner { padding: 14px 18px; border-radius: 14px; background: rgba(225,147,47,.12); border: 1px solid var(--amber-soft); font-size: 14.5px; margin-bottom: 26px; }
.blog-draft-banner a { color: var(--teal); text-decoration: underline; margin-left: 6px; }

/* ---------- manage ---------- */
.blog-manage-list { max-width: 860px; }
.blog-manage-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; background: var(--paper); }
.blog-manage-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.blog-manage-title { font-weight: 600; font-size: 16px; }
.blog-manage-title:hover { color: var(--teal); }
.blog-manage-meta { color: var(--muted-2); font-size: 13px; display: flex; gap: 7px; }
.blog-manage-actions { display: flex; gap: 8px; flex-shrink: 0; }
.blog-status { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.blog-status-draft { color: var(--amber); }
.blog-status-published { color: var(--teal); }

/* ---------- editor ---------- */
.blog-editor { max-width: 760px; margin: 0 auto; }
.blog-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.blog-field > label { font-weight: 600; font-size: 14.5px; }
.blog-hint { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 3px; }
.blog-field input[type=text], .blog-field input:not([type]), .blog-field textarea, .blog-field select,
.blog-block textarea, .blog-block-field input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 12px;
  font: inherit; font-size: 15px; background: var(--paper); color: var(--ink);
}
.blog-field textarea, .blog-block textarea { resize: vertical; }
.blog-counter { color: var(--muted-2); font-size: 12.5px; align-self: flex-end; }
.blog-cover-preview img, .blog-block-preview img { width: 100%; border-radius: 12px; margin-top: 10px; display: block; }

.blog-editor-section { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 20px; margin: 34px 0 16px; }
.blog-block { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; background: var(--paper); }
.blog-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.blog-block-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.blog-block-tools button {
  background: none; border: 1px solid var(--line-2); border-radius: 8px;
  width: 28px; height: 28px; margin-left: 5px; padding: 0;
  cursor: pointer; color: var(--ink-2);
  /* Centre the glyph on the BOX rather than letting it sit on the text
     baseline, which is what made the x and arrows look low. */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.blog-block-tools button:disabled { opacity: .35; cursor: default; }
.blog-block-tools button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.blog-block-field { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); }

.blog-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 30px; }
.blog-add-row button { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink-2); }
.blog-add-row button:hover { border-color: var(--teal); color: var(--teal); }

.blog-editor-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); }
.blog-save-status { color: var(--muted); font-size: 14px; }
.blog-save-status.is-error { color: #B4342A; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .blog-featured { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-body { font-size: 17px; }
  .blog-h2 { font-size: 25px; }
  .blog-quote { font-size: 18px; }
  .blog-manage-row { flex-direction: column; align-items: flex-start; }
}

/* Author-only affordances on the public index. */
.blog-author-toolbar { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.blog-empty .btn { margin-top: 14px; }
.blog-header-tight .btn { align-self: flex-start; margin-top: 14px; }


/* ---------- back link on an article ---------- */
.blog-back {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: 14.5px; font-weight: 500;
  margin: 0 0 22px; transition: color .2s var(--ease);
}
.blog-back:hover { color: var(--teal); }

/* ---------- quick actions menu (authors only) ---------- */
.blog-actions { position: relative; }
.blog-actions-toggle {
  background: none; border: 1px solid var(--line-2); border-radius: 10px;
  width: 32px; height: 32px; padding: 0; cursor: pointer; color: var(--ink-2);
  font-size: 16px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
}
.blog-actions-toggle:hover { border-color: var(--teal); color: var(--teal); }
.blog-actions-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 168px; padding: 6px; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--line-2);
  box-shadow: var(--shadow); display: none; flex-direction: column;
}
.blog-actions-menu[data-open="true"] { display: flex; }
.blog-actions-menu a, .blog-actions-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 11px; border-radius: 8px; font: inherit; font-size: 14px;
  color: var(--ink-2); cursor: pointer; text-decoration: none;
}
.blog-actions-menu a:hover, .blog-actions-menu button:hover { background: var(--paper-2); color: var(--teal); }
.blog-actions-menu .is-danger:hover { background: rgba(180,52,42,.08); color: #B4342A; }
.blog-actions-sep { height: 1px; background: var(--line); margin: 5px 2px; }

/* Article-level actions bar sits above the title for authors. */
.blog-owner-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }


/* ---------- lightbox ---------- */
.blog-figure img, .blog-cover img { cursor: pointer; }
.blog-lightbox {
  /* Above the app shell's fixed navbar (z-index 1500 on .navbar-container).
     Matches the value the app's own #lightbox already uses, rather than
     lowering the navbar - which is 1500 for its own reasons. */
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8, 12, 14, .92);
  display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.blog-lightbox[data-open="true"] { display: flex; }
.blog-lightbox img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; border-radius: 8px;
  aspect-ratio: auto;
}
.blog-lightbox-close {
  position: absolute; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px);
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.12); border: none; color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.blog-lightbox-close:hover { background: rgba(255,255,255,.22); }
.blog-lightbox-caption {
  position: absolute; left: 0; right: 0; bottom: clamp(12px, 3vw, 30px);
  text-align: center; color: rgba(255,255,255,.78); font-size: 14px;
  padding: 0 20px;
}

/* ---------- quick actions on cards ---------- */
.blog-card-media-wrap, .blog-featured-wrap { position: relative; }
.blog-card-actions { position: absolute; top: 10px; right: 10px; z-index: 5; }
.blog-card-actions .blog-actions-toggle {
  background: rgba(252, 253, 253, .92);
  backdrop-filter: blur(6px);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.blog-card-actions .blog-actions-toggle:hover { background: var(--paper); border-color: var(--teal); }

/* ---------- mobile ----------
   Appended last on purpose: these rules must win over the component rules
   above, which share their specificity. */

/* Mobile browsers report 100vh as the height WITHOUT the address bar, so a
   100vh-based cap still lets an image run past what is actually visible.
   100dvh tracks the real viewport; the 100vh line stays as the fallback for
   browsers that do not support it. */
@supports (height: 100dvh) {
  .blog-main--public { --blog-img-max-h: calc(100dvh - var(--nav-h) - 92px); }
  .blog-main--app { --blog-img-max-h: calc(100dvh - 65px - 92px); }
  .blog-editor { --blog-img-max-h: calc(100dvh - 65px - 140px); }
}

@media (max-width: 720px) {
  /* Touch targets: 32px is below the 44px minimum every mobile HIG asks for. */
  .blog-actions-toggle { width: 40px; height: 40px; font-size: 18px; }
  .blog-actions-menu a, .blog-actions-menu button { padding: 12px 12px; font-size: 15px; }
  .blog-actions-menu { min-width: 190px; }

  /* iOS zooms the page in when a focused input is under 16px. */
  .blog-field input[type=text], .blog-field input:not([type]),
  .blog-field textarea, .blog-field select,
  .blog-block textarea, .blog-block-field input, .blog-block-controls select {
    font-size: 16px;
  }

  /* Anything that is a row on desktop needs to be allowed to wrap. */
  .blog-author-toolbar { flex-wrap: wrap; }
  .blog-manage-actions { flex-wrap: wrap; width: 100%; }
  .blog-editor-actions { gap: 8px; }
  .blog-owner-bar { gap: 8px; }

  .blog-article-title { font-size: clamp(26px, 7vw, 34px); }
  .blog-featured-title { font-size: clamp(20px, 5.6vw, 26px); }
  .blog-author-card { flex-direction: column; }
  .blog-lightbox { padding: 12px; }
  .blog-lightbox-caption { font-size: 13px; }
}

@media (max-width: 420px) {
  /* On the narrowest phones the menu would otherwise hang off the card edge. */
  .blog-card-actions .blog-actions-menu { right: 0; min-width: 175px; }
  .blog-pagination { flex-direction: column; gap: 12px; }
}

/* ---------- public shell nav + footer corrections ----------
   Scoped to .blog-nav / .blog-footer so the landing page is untouched. */

/* landing/styles.css hides the nav buttons below 900px because the landing
   page moves them into a burger panel. The blog shell has no burger, so
   without this a logged-out mobile visitor sees only the logo. There are at
   most three short buttons here, so they simply stay visible. */
@media (max-width: 900px) {
  .blog-nav .nav-cta .btn-ghost,
  .blog-nav .nav-cta .btn-primary { display: inline-flex; }
  .blog-nav .nav-cta { gap: 6px; }
  .blog-nav .nav-cta .btn { padding: 9px 13px; font-size: 13.5px; }
}
@media (max-width: 480px) {
  /* Three buttons plus the logo no longer fit; the Blog link is the one that
     is redundant here, since you are already inside the blog. */
  .blog-nav .blog-nav-blog { display: none; }
  .blog-nav .nav-cta .btn { padding: 8px 11px; font-size: 13px; }
}

/* landing/styles.css puts a border-top on BOTH footer and .foot-bottom. On the
   landing page several columns sit between them, so they read as two separate
   rules. The blog footer has only .foot-bottom, which put the two borders back
   to back - the doubled line with a gap. Keep the outer one, drop the inner. */
/* Styled standalone rather than relying on landing/css/styles.css, because the
   logged-in shell never loads that file. Exactly one separator line: the outer
   border here, with the duplicate on .foot-bottom removed. */
.blog-footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.blog-footer .foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  border-top: none; padding-top: 0;
}
.blog-footer .foot-bottom p { font-size: 13px; color: var(--muted-2); margin: 0; }
.blog-footer .foot-legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.blog-footer .foot-legal-links a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s; }
.blog-footer .foot-legal-links a:hover { color: var(--teal); }
@media (max-width: 600px) {
  .blog-footer .foot-bottom { flex-direction: column; align-items: flex-start; }
}