/* ===================================================================
   Blog page — per-page styles (loads after css/styles.css). Namespace: .blog-* only.
   Ported 2026-10-18 from blog-lab.html (its inline <style>) with the user's LOCKED settings (the lab's «Log settings»
   of 2026-10-18 = the lab's defaults) baked in as the .blog custom-property defaults below, and the lab's data-*
   toggles fixed on main.blog in the markup (src/pages/blog.pug). Dropped with the port: the #blogLab panel rules,
   the html.blog-no-reveal / html.blog-guides toggles, and the CSS of the variants the lock leaves unreachable
   (the gradient / mockup covers, the byline, the coral band, the box pill, promo none, progress / arrows / badge
   off, the card underline, the pager).
   =================================================================== */
  .blog {
    --blog-field: #F4F4F4;
    --blog-hushed: #565656;
    --blog-space-m: 64px;
    --blog-space-l: 128px;
    --blog-hero-top: 64px;
    --blog-head-gap: 40px;
    --blog-title-w: 400;
    --blog-title-size: 64px;
    --blog-title-ls: -.035em;
    --blog-btn-radius: 8px;
    --blog-slide-gap: 32px;
    --blog-slide-dur: 1000ms;
    --blog-slide-ease: cubic-bezier(.22, 1, .36, 1);
    --blog-peek-op: .2;
    --blog-peek-fade: 300ms;
    --blog-slide-cols: 40fr 60fr;
    --blog-slide-pad: 40px;
    --blog-slide-title: 28px;
    --blog-media-pad: 12px;
    --blog-media-radius: 8px;
    --blog-card-radius: 12px;
    --blog-card-aspect: 2 / 1;
    --blog-zoom-slide: 1.02;
    --blog-zoom-card: 1.02;
    --blog-zoom-row: 1.05;
    --blog-zoom-dur: 300ms;
    --blog-band-cols: 1fr 1fr;
    --blog-band-gap: 16px;
    --blog-row-space: 128px;
    --blog-row-head-gap: 40px;
    --blog-cat-h2: 32px;
    --blog-cat-cols: 4;
    --blog-cat-gap-x: 24px;
    --blog-cat-gap-y: 32px;
    --blog-h2: 40px;
    --blog-thumb-w: 200px;
    --blog-row-pad: 16px;
    --blog-recent-rows: 7;
    --blog-search-blur: 24px;
    --blog-search-fade: 200ms;
    --blog-menu-hl: var(--blog-field);
  }
  :root[data-theme="dark"] .blog { --blog-field: rgba(255, 255, 255, .06); --blog-hushed: var(--text); }

  /* The search dialog is a SIBLING of main.blog (it sits after it), so it inherits none of the .blog
     variables. It carries the subset its own content reads, and its own data-cover="photo" in the markup. */
  .blog-search {
    --blog-field: #F4F4F4;
    --blog-hushed: #565656;
    --blog-card-radius: 12px;
    --blog-zoom-card: 1.02;
    --blog-zoom-dur: 300ms;
    --blog-search-blur: 24px;
    --blog-search-fade: 200ms;
  }
  :root[data-theme="dark"] .blog-search { --blog-field: rgba(255, 255, 255, .06); --blog-hushed: var(--text); }

  /* styles.css resets img/svg to display:block, which beats the UA [hidden] rule (the closer-form gotcha) */
  .blog [hidden], .blog-search [hidden] { display: none !important; }

  .blog { display: block; }
  :where(.blog) a { color: inherit; text-decoration: none; }   /* :where keeps this at (0,0,1) so .blog-link etc. still win */
  .blog-wrap { width: min(1312px, 100% - 2 * var(--gutter)); margin-inline: auto; }

  /* ---- shared type ---- */
  .blog-title { font-family: "Geist", sans-serif; font-weight: var(--blog-title-w); font-size: var(--blog-title-size); line-height: 1; letter-spacing: var(--blog-title-ls); color: var(--headline); margin: 0; }
  .blog-h2 { font-family: "Geist", sans-serif; font-weight: 400; font-size: var(--blog-h2); line-height: 1.2; letter-spacing: -.025em; color: var(--text-strong); margin: 0; }
  .blog-h2-cat { font-family: "Geist", sans-serif; font-weight: 400; font-size: var(--blog-cat-h2); line-height: 1.2; letter-spacing: -.02em; color: var(--text-strong); margin: 0; }
  .blog-label { font-size: 14px; line-height: 20px; text-transform: uppercase; color: var(--blog-hushed); margin: 0; }
  .blog-label--xs { font-size: 13px; line-height: 19px; letter-spacing: .04em; padding-bottom: 16px; }

  /* ---- links with the arrow-slide ---- */
  .blog-link { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; color: var(--blog-hushed); text-decoration: none; transition: color .2s; }
  .blog-link:hover { color: var(--text-strong); }
  .blog-link__arrow { width: 16px; height: 16px; flex: 0 0 auto; }
  .blog[data-view-arrow="1"] .blog-link:hover .blog-link__arrow { animation: blog-arrow-slide .5s ease-in-out forwards; }
  @keyframes blog-arrow-slide {
    0% { opacity: 1; transform: translateX(0); }
    20% { opacity: 0; transform: translateX(8px); }
    40%, 60% { opacity: 0; transform: translateX(-8px); }
    100% { opacity: 1; transform: translateX(0); }
  }

  /* ---- 1 . Hero head ---- */
  .blog-hero { margin-top: var(--blog-hero-top); overflow-x: clip; }   /* clip, not hidden: belt and braces against a horizontal scrollbar, and the menu can still drop down */
  .blog-hero__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--blog-head-gap); }
  .blog-hero__tools { display: flex; gap: 16px; align-items: flex-end; }
  .blog-iconbtn { width: 52px; height: 52px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--blog-btn-radius); background: transparent; color: var(--text-strong); cursor: pointer; transition: background-color .2s; }
  .blog-iconbtn:hover { background: var(--blog-field); }
  .blog-menu { position: relative; }
  .blog-menu__btn { height: 50px; padding: 14px 32px; border: 1px solid var(--border); border-radius: var(--blog-btn-radius); background: transparent; color: var(--text-strong); font: 400 14px/20px "Geist", sans-serif; white-space: nowrap; cursor: pointer; transition: background-color .2s; }
  .blog-menu__btn:hover, .blog-menu__btn[aria-expanded="true"] { background: var(--blog-field); }
  .blog-menu__list { position: absolute; top: calc(100% + 8px); right: 0; width: max-content; min-width: 100%; max-width: 320px; z-index: 20; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--blog-btn-radius); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
  .blog-menu__item { display: block; white-space: nowrap; font-size: 14px; line-height: 20px; padding: 12px 20px; border-radius: 4px; color: var(--blog-hushed); text-decoration: none; }   /* the list is right-aligned under the trigger and grows to the longest name (Ramp's = the trigger width, but its names are shorter) */
  .blog-menu__item:hover, .blog-menu__item.is-hl { background: var(--blog-menu-hl); text-decoration: underline; }
  :root[data-theme="dark"] .blog-menu__list { box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35); }

  /* ---- 2 . Featured carousel ---- */
  /* .blog-carousel is a direct child of the full-width section, so the clip is simply 100% wide (no 100vw trick). */
  .blog-carousel { position: relative; }
  .blog-carousel__clip { width: 100%; overflow: hidden; }
  .blog-carousel__track { display: flex; will-change: transform; transform: translate3d(var(--blog-x, 0px), 0, 0); transition: transform var(--blog-slide-dur) var(--blog-slide-ease); }
  .blog-slide { flex: 0 0 calc(var(--blog-col, 1312px) + var(--blog-slide-gap)); padding-left: var(--blog-slide-gap); position: relative; opacity: var(--blog-peek-op); transition: opacity var(--blog-peek-fade) ease; }
  .blog-slide.is-active { opacity: 1; }
  .blog-slide__card { display: grid; grid-template-columns: var(--blog-slide-cols); border-radius: var(--blog-card-radius); background: var(--blog-field); overflow: hidden; color: inherit; text-decoration: none; }
  .blog-slide__card:hover .blog-slide__title { text-decoration: underline; text-underline-offset: .12em; }
  .blog-slide__text { display: flex; flex-direction: column; justify-content: center; padding: var(--blog-slide-pad); min-width: 0; }
  .blog-slide__title { font-family: "Geist", sans-serif; font-weight: 500; font-size: var(--blog-slide-title); line-height: 1.15; color: var(--text-strong); margin: 24px 0 0; }
  .blog-slide__media { padding: var(--blog-media-pad); min-width: 0; }
  .blog-slide__frame { aspect-ratio: 2 / 1; border-radius: var(--blog-media-radius); overflow: hidden; position: relative; background: #0a1128; isolation: isolate; }
  .blog-slide__jump { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; }

  .blog-carousel__bar { margin-top: 16px; display: flex; align-items: center; gap: 32px; }
  .blog-progress { flex: 1; display: flex; gap: 12px; }
  .blog-progress__seg { flex: 1; height: 1px; background: var(--border); position: relative; overflow: hidden; }
  .blog-progress__fill { position: absolute; inset: 0; background: var(--text-strong); transform-origin: left; transform: scaleX(0); }   /* js/blog.js writes transform inline per frame -- no CSS transition */
  .blog-carousel__nav { display: flex; gap: 12px; }
  .blog-arrow { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; background: var(--blog-field); color: var(--text-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; }
  .blog-arrow:hover { background: rgba(10, 23, 51, .06); }
  .blog-arrow:disabled { cursor: default; background: var(--blog-field); }
  .blog-arrow:disabled .blog-arrow__icon { color: rgba(10, 23, 51, .2); }
  .blog-arrow__icon { width: 16px; height: 16px; }
  .blog-arrow--prev .blog-arrow__icon { transform: scaleX(-1); }
  :root[data-theme="dark"] .blog-progress__fill { background: var(--brand); }
  :root[data-theme="dark"] .blog-arrow:not(:disabled):hover { background: rgba(255, 255, 255, .1); }
  :root[data-theme="dark"] .blog-arrow:disabled .blog-arrow__icon { color: rgba(255, 255, 255, .2); }

  /* ---- covers (slides, cards, rows, search results): the posts' own photos (data-cover="photo", locked) ---- */
  .blog-cover { position: absolute; inset: 0; transform-origin: center; transition: transform var(--blog-zoom-dur) cubic-bezier(.4, 0, .2, 1); }
  .blog-cover__photo { display: none; }
  :is(.blog, .blog-search)[data-cover="photo"] .blog-cover__photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .blog-slide__card:hover .blog-cover { transform: scale(var(--blog-zoom-slide)); }
  .blog-card:hover .blog-cover { transform: scale(var(--blog-zoom-card)); }
  .blog-row:hover .blog-cover { transform: scale(var(--blog-zoom-row)); transition-duration: .15s; }

  /* ---- 3 . Newsletter band ---- */
  .blog-band { margin-top: var(--blog-space-m); }
  .blog-band__grid { display: grid; grid-template-columns: var(--blog-band-cols); gap: var(--blog-band-gap); }
  .blog-band__news { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--blog-card-radius); padding: 32px 24px; background: #0A1733; }   /* fixed navy in both themes */
  .blog-band__news::before, .blog-band__news::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .blog-band__news::before { background: radial-gradient(60% 80% at 85% 20%, rgba(255, 95, 22, .28), transparent 60%); }
  .blog-band__news::after { background: radial-gradient(50% 70% at 10% 90%, rgba(86, 116, 166, .25), transparent 60%); }
  .blog-band__news > * { position: relative; z-index: 1; }
  :root[data-theme="dark"] .blog-band__news { outline: 1px solid var(--border); outline-offset: -1px; }   /* the navy card is nearly the dark page colour; the hairline gives it an edge like the promo card's field */
  .blog-band__title { font-family: "Geist", sans-serif; font-weight: 500; font-size: 20px; line-height: 26px; color: #fff; margin: 0 0 16px; }
  .blog-band__title--dark { color: var(--text-strong); margin-bottom: 24px; }
  .blog-band__sub { font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, .6); margin: 0 0 24px; }
  .blog-band__desc { font-size: 16px; line-height: 22px; color: var(--blog-hushed); text-wrap: pretty; margin: 0 0 16px; }

  /* the site's email pill (the closer anatomy); js/main.js wireEmailForm validates + sends it */
  .blog-pill { position: relative; width: min(500px, 100%); height: 58px; padding: 5px; display: flex; align-items: center; background: var(--surface); border: 1px solid #F7F7F7; border-radius: 999px; box-shadow: 0 12px 32px rgba(10, 23, 51, .15); }
  .blog-pill__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 12px 0 20px; font: 400 16px/1 "Geist", sans-serif; letter-spacing: -.02em; color: var(--text-strong); outline: none; }
  .blog-pill__input::placeholder { color: #565656; opacity: 1; }
  :root[data-theme="dark"] .blog-pill__input::placeholder { color: var(--text); }
  .blog-pill__btn { height: 48px; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font: 500 16px/1 "Geist", sans-serif; white-space: nowrap; cursor: pointer; }
  .blog-pill:has(.blog-pill__input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .blog-pill.is-error { border-color: #d02e2e; }
  .blog-pill__error { margin: 8px 0 0; font-size: 14px; color: #ffb4b4; }   /* on navy */
  .blog-pill__done { margin: 0; min-height: 58px; display: flex; align-items: center; font-size: 18px; color: #fff; }
  :root[data-theme="dark"] .blog-pill { border-color: var(--border); }
  :root[data-theme="dark"] .blog-pill.is-error { border-color: #d02e2e; }

  .blog-band__promo { position: relative; overflow: hidden; border-radius: var(--blog-card-radius); padding: 32px 24px; background: var(--blog-field); }
  .blog-band__promotext { max-width: calc(100% - 200px); position: relative; z-index: 1; }
  .blog-band__stack { position: absolute; top: 50%; right: -32px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; padding-bottom: 80px; pointer-events: none; }
  .blog-band__stack img { width: 163px; height: auto; margin-bottom: -80px; }
  .blog-band__stack img:nth-child(1) { transform: translateX(40px); }
  .blog-band__stack img:nth-child(2) { transform: translateX(20px); }
  .blog-band__stack img:nth-child(3) { transform: translateX(0); }

  /* ---- 4 . Category rows ---- */
  .blog-cat { padding-top: var(--blog-row-space); scroll-margin-top: 90px; }
  .blog-cat__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--blog-row-head-gap); }
  .blog-cat__grid { display: grid; grid-template-columns: repeat(var(--blog-cat-cols), 1fr); gap: var(--blog-cat-gap-y) var(--blog-cat-gap-x); }
  .blog-card { display: block; color: inherit; text-decoration: none; }
  .blog-card__media { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: var(--blog-card-aspect); border-radius: var(--blog-card-radius); }
  .blog-card__body { margin-top: 24px; }
  .blog-card__title { font-family: "Geist", sans-serif; font-weight: 500; font-size: 18px; line-height: 24px; color: var(--text-strong); text-wrap: balance; margin: 0; }
  .blog-card__excerpt { font-size: 16px; line-height: 22px; color: var(--blog-hushed); margin: 16px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .blog-card--sm .blog-card__media { aspect-ratio: 16 / 9; }
  .blog-card--sm .blog-card__title { font-size: 16px; line-height: 22px; }
  .blog-card--sm .blog-card__body { margin-top: 12px; }

  /* ---- 5 . Recently published (the categories' «View all» lands here: #blog-recent) ---- */
  .blog-recent { margin-top: var(--blog-space-l); padding-bottom: var(--blog-space-l); scroll-margin-top: 90px; }
  .blog-recent__space { height: var(--blog-space-m); }
  .blog-list { list-style: none; margin: 0; padding: 0; min-height: calc(var(--blog-recent-rows, 7) * 133px); }
  .blog-list__item + .blog-list__item { border-top: 1px solid var(--border); }
  .blog-row { display: grid; grid-template-columns: var(--blog-thumb-w) 1fr 220px; gap: 24px; align-items: center; padding: var(--blog-row-pad); color: inherit; text-decoration: none; }
  .blog[data-hover="field"] .blog-row:hover { background: var(--blog-field); }   /* instant, like Ramp -- no transition */
  .blog-row:hover .blog-row__title { text-decoration: underline; text-underline-offset: .12em; }
  .blog-row__thumb { aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden; position: relative; isolation: isolate; }
  .blog-row__text { min-width: 0; }   /* lets the 1fr track shrink under the nowrap excerpt */
  .blog-row__title { font-family: "Geist", sans-serif; font-weight: 500; font-size: 20px; line-height: 26px; color: var(--text-strong); margin: 0; }
  .blog-row__excerpt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 24px; color: var(--text-strong); margin: 8px 0 0; }
  .blog-row__meta { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 40px; }
  .blog-row__date { font-size: 16px; line-height: 22px; color: var(--blog-hushed); }
  .blog[data-swap="1"] .blog-row:hover .blog-row__date { opacity: 0; }
  .blog-row__badge { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 8px; border-radius: 8px; background: var(--surface); color: var(--text-strong); opacity: 0; display: grid; place-items: center; }
  .blog[data-badge="1"] .blog-row:hover .blog-row__badge { opacity: 1; }

  /* ---- 6 . Search dialog (native showModal) ---- */
  .blog-search { position: fixed; inset: 10% auto auto 50%; transform: translateX(-50%); margin: 0; width: min(800px, 95vw); max-width: none; max-height: 85vh; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--text-strong); }
  .blog-search::backdrop { background: transparent; -webkit-backdrop-filter: blur(var(--blog-search-blur, 24px)); backdrop-filter: blur(var(--blog-search-blur, 24px)); }
  .blog-search[open] { animation: blog-fade-in var(--blog-search-fade, 200ms) ease; }
  @keyframes blog-fade-in { from { opacity: 0; } }
  .blog-search__form { position: relative; margin: 0; }
  .blog-search__input { display: block; width: 100%; height: 47px; margin: 0; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); padding: 0 64px 0 20px; font: 400 16px/22px "Geist", sans-serif; color: var(--text-strong); -webkit-appearance: none; appearance: none; }
  .blog-search__input::placeholder { color: var(--blog-hushed); }
  .blog-search__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }   /* the native clear-x would sit under the close button */
  .blog-search__close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; border-radius: 4px; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; }
  .blog-search__results { margin-top: 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); padding: 16px 16px 8px; max-height: calc(85vh - 100px); overflow: auto; }
  .blog-search__kicker { font-size: 14px; line-height: 20px; color: var(--blog-hushed); margin: 0; }
  .blog-search__kw { list-style: none; margin: 0 0 12px; padding: 0; border-bottom: 1px solid var(--border); }
  .blog-search__kwbtn { display: block; width: 100%; margin: 0; padding: 12px 0; border: 0; background: none; text-align: left; font: 400 16px/22px "Geist", sans-serif; color: var(--text-strong); cursor: pointer; }
  .blog-search__kwbtn:hover { text-decoration: underline; }
  .blog-search__kwbtn strong { font-weight: 600; }
  .blog-search__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 16px; margin: 12px 0 8px; }
  .blog-search__empty { font-size: 16px; line-height: 22px; color: var(--blog-hushed); margin: 12px 0 8px; }

  /* ---- focus rings keep each control's shape (the global :focus-visible sets border-radius: 6px) ---- */
  .blog-iconbtn:focus-visible, .blog-menu__btn:focus-visible { border-radius: var(--blog-btn-radius); }
  .blog-arrow:focus-visible { border-radius: 50%; }
  .blog-pill__btn:focus-visible { border-radius: 999px; }
  .blog-slide__card:focus-visible { border-radius: var(--blog-card-radius); outline-offset: -2px; }   /* inset: the carousel clip would cut an outside ring */
  .blog-menu__item:focus-visible, .blog-search__close:focus-visible { border-radius: 4px; }
  .blog-search__input:focus-visible { border-radius: 12px; }
  .blog a, .blog button, .blog input { scroll-margin-top: 96px; }   /* a focused control scrolled into view (Shift+Tab) stays clear of the 75-px sticky navbar (css/legal.css:79) */

  /* ---- reduced motion ---- */
  @media (prefers-reduced-motion: reduce) {
    .blog-carousel__track, .blog-slide, .blog-cover, .blog-link, .blog-arrow { transition: none !important; }
    .blog-link__arrow { animation: none !important; }
    .blog-search[open] { animation: none; }
  }