div.main-blog {
  box-sizing: border-box !important;
  align-self: stretch !important;
  -webkit-box-flex: 1 !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  -webkit-box-align: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 16px !important;
}
div.main-blog h1 {
  width: 100% !important;
  max-width: var(--desktopMaxWidth) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
div.main-blog div.blog-articles {
  width: 100% !important;
  /* --desktopMaxWidth, not a flat 1648: it is the measure the nav pill uses, so
     the grid's first column lines up with the logo (DESIGN.md §4) */
  max-width: var(--desktopMaxWidth) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  row-gap: 80px;
}
div.main-blog div.blog-articles .article {
  position: relative;
  align-self: start;
  grid-column-end: span 4;
}
/*- TABLET Article Cards -*/
@media only screen and (min-width: 641px) and (max-width: 991.98px) {
  div.main-blog div.blog-articles .article {
    grid-column-end: span 6;
  }
}
/*- MOBILE Article Cards -*/
@media only screen and (max-width: 640.98px) {
  div.main-blog {
    padding: 0 12px !important;
  }
  div.main-blog div.blog-articles .article {
    grid-column-end: span 6;
  }
}

/* ---- Article card ----
   Hooks hang off .bsb-card, not the blog grid: this card also renders in search
   results, where none of the blog page's wrappers exist. */
.bsb-card__link {
  display: block;
  color: #000;
  text-decoration: none;
}
.bsb-card__title {
  color: #000;
  transition: color 0.5s ease;
  letter-spacing: 0;
}
.bsb-card__link:hover .bsb-card__title { color: #4D1EF7; }

.bsb-card__frame { position: relative; }

/* Newest post marker — the violet signal chip from bs-store.css (.bsg-tag--signal),
   the same one the storefront uses for "Pre order". */
.bsb-card__latest {
  position: absolute; left: 12px; top: 12px;
  padding: 6px 10px;
  background: var(--brand); color: #fff;
  font-family: var(--font-mono);
  font-size: 11px; line-height: 1; letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 2px 2px 8px 2px;
  corner-shape: round round bevel round;
}

.bsb-card__frame img {
  max-width: 100%;
  width: 100%;
  /* 1:1 — the article images are square at source (793x793), so a landscape
     window would center-crop nearly half of every one away. Square costs
     nothing and still normalises any odd upload. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  /* bevel corner language, tile scale — matches .bsg-frame in bs-store.css */
  border-radius: 3px 3px 16px 3px;
  corner-shape: round round bevel round;
}

/* =============================================================================
   Blog index — owned surfaces (intro header + featured latest post), on the
   bs-chrome token set. Light store palette, deck type scale, bevel corners.
   Both blocks mirror .blog-articles' 1648px measure so the left edge lines up
   with the grid below.
   ============================================================================= */

/* ---- Search + topic controls ----
   Same 12-column grid as everything else; the controls occupy the media band
   (5-12) so they sit over the featured image, matching the reference. */
.bsb-controls {
  width: 100%;
  max-width: var(--desktopMaxWidth);
  margin: 0 auto 56px;
  padding: 0 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.bsb-field--search { grid-column: 5 / span 4; }
.bsb-field--topic  { grid-column: 9 / span 4; }

/* Page h1, in the copy rail beside the controls — the one Display-scale line on
   the page, sitting above the featured headline in the hierarchy. */
.bsb-controls__title {
  grid-column: 1 / span 4;
  align-self: end;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -.01em;
  color: #000;
}

.bsb-field { margin: 0; }
.bsb-field__label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1; letter-spacing: .06em;
  text-transform: uppercase;
  color: #70777A;
}
.bsb-field__control {
  position: relative;
  display: flex; align-items: center;
  height: 52px;
  background: var(--off-white);
  border-radius: 3px 3px 14px 3px;
  corner-shape: round round bevel round;
  transition: background-color var(--dur);
}
.bsb-field__control:hover { background: var(--hairline); }
.bsb-field__control:focus-within { background: var(--hairline); }

.bsb-field__input {
  flex: 1 1 auto;
  width: 100%; height: 100%;
  padding: 0 16px;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px; line-height: 1;
  color: #0a0a0c;
  box-sizing: border-box;
}
.bsb-field__input:focus { outline: none; }
.bsb-field__input::placeholder { color: #70777A; }

.bsb-field__submit {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  padding: 0; margin: 0;
  background: transparent; border: 0; cursor: pointer;
  color: #0a0a0c;
}

/* native select chrome off; our own caret instead */
.bsb-field__control--select .bsb-field__input {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.bsb-field__control--select option:disabled { color: #a8adaf; }
.bsb-field__caret {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #0a0a0c;
}

@media only screen and (max-width: 991.98px) {
  .bsb-controls { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 40px; }
  .bsb-controls .bsb-field:first-child,
  .bsb-controls .bsb-field:last-child,
  .bsb-controls .bsb-field:only-child { grid-column: auto; }
}
@media only screen and (max-width: 640.98px) {
  .bsb-controls { grid-template-columns: 1fr; padding: 0 12px; }
}

/* ---- Pagination ----
   Dawn centres it in the viewport, which floats free of a left-aligned grid.
   Pulled onto the same 1648 measure and left edge as the cards. Selectors are
   doubled up (.bsb-pagination .x) because component-pagination.css loads from
   inside the snippet, after this sheet. */
.bsb-pagination {
  width: 100%;
  max-width: var(--desktopMaxWidth);
  margin: 80px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
}
/* On search, pagination sits inside .page-width, which already carries the
   measure and gutter — keeping our own would inset it a second time. Scoped to
   the search template because .main-blog also carries the page-width class. */
.template-search .bsb-pagination {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.bsb-pagination .pagination__list {
  justify-content: flex-start;
  gap: 8px;
}
.bsb-pagination .pagination__item {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 44px; padding: 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  color: #0a0a0c;
  text-decoration: none;
  transition: color var(--dur);
}
.bsb-pagination .pagination__item:hover { color: var(--brand); }

/* violet stripe under the current page, same 2px bar as the active nav link.
   Anchored to the centre rather than inset from the edges, so it stays under the
   glyph whatever the item box ends up measuring. */
.bsb-pagination .pagination__item--current::after {
  content: "";
  position: absolute; left: 50%; bottom: 8px;
  /* component-pagination.css already sets transform: translateX(-50%) on this
     pseudo-element — restate it rather than centring with a margin, or the two
     stack and the stripe lands half its width to the left */
  transform: translateX(-50%);
  margin-left: 0;
  width: 18px;
  height: 2px;
  background: var(--brand);
}
/* Dawn draws its own underline on the current item */
.bsb-pagination .pagination__item--current { text-decoration: none; }

.bsb-pagination .pagination__item-arrow { color: var(--brand); }
.bsb-pagination .pagination__item-arrow svg {
  width: 17px; height: 17px;
  transition: transform var(--dur) var(--ease-signature);
}
.bsb-pagination .pagination__item--prev:hover svg { transform: translateX(4px); }
.bsb-pagination .pagination__item--next:hover svg { transform: translateX(-4px); }

@media only screen and (max-width: 640.98px) {
  .bsb-pagination { padding: 0 12px; margin-top: 56px; }
}

/* ---- Search results header ----
   Same grid and parts as the blog controls row, so a search feels like the same
   page rather than a Dawn detour. */
.bsb-search-head {
  width: 100%;
  max-width: var(--desktopMaxWidth);
  margin: 0 auto 56px;
  padding: 56px 16px 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  text-align: left;
}
/* title + back link travel together in the copy rail */
.bsb-search-head__rail { grid-column: 1 / span 4; }
.bsb-search-head__rail .bsb-back { margin-top: 24px; }

.bsb-search-status {
  grid-column: 5 / -1;
  align-self: start;
}
.bsb-search-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.4; letter-spacing: .04em;
  text-transform: uppercase;
  color: #70777A;
}
/* Prose, not data — Neue Haas, sentence case (The Two-Voice Rule) */
.bsb-search-empty {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px; line-height: 24px;
  color: #70777A;
  max-width: 52ch;
}
.bsb-back {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 17px; line-height: 24px;
  color: #000;
  text-decoration: none;
  transition: color var(--dur);
}
.bsb-back svg { flex: 0 0 auto; transition: transform var(--dur) var(--ease-signature); }
.bsb-back:hover { color: var(--brand); }
.bsb-back:hover svg { transform: translateX(-4px); }

/* Dawn centres the results wrapper and pads it for its own header; ours already
   carries the rhythm. */
.template-search--empty { padding-bottom: 120px; }

/* Dawn's .page-width is its own measure (--page-width + 5rem gutters), which
   left the results grid out of step with the header above it. Put it on the
   nav's measure so the first card lines up with the logo. */
.template-search .page-width {
  max-width: var(--desktopMaxWidth);
  padding-left: 16px;
  padding-right: 16px;
}

@media only screen and (max-width: 991.98px) {
  .bsb-search-head { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; margin-bottom: 40px; }
  .bsb-search-head__rail,
  .bsb-search-status { grid-column: auto; }
}
@media only screen and (max-width: 640.98px) {
  .bsb-search-head { padding-left: 12px; padding-right: 12px; }
}

/* ---- Featured latest post ----
   The Polestar register already used on the product page: a narrow copy rail
   left, the media running wide to its right, both top-aligned. Laid out on the
   same 12-column grid as the cards below, so the media occupies exactly two
   card columns (5 → 12) and its edges line up with cards 2 and 3. */
.bsb-feature {
  width: 100%;
  max-width: var(--desktopMaxWidth);
  /* 80px to the grid below — the reference runs the featured card tight into
     the cards, roughly one grid row-gap */
  margin: 0 auto 80px;
  /* .base-grid insets its columns by 16px inside the same 1648 box — match it
     or nothing here lines up with the card grid below */
  padding: 0 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: start;
  color: #0a0a0c;
  text-decoration: none;
}

/* Copy takes the room the media gave up, so the lede can actually run */
.bsb-feature__body { grid-column: 1 / span 7; }

.bsb-feature__frame {
  /* one card wide, last column — same footprint and 1:1 shape as the cards
     below, and its right edge still lands on card 3 */
  grid-column: 9 / -1;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--off-white);
  /* largest bevel in the system — this is the one hero surface on the page */
  border-radius: 3px 3px 32px 3px;
  corner-shape: round round bevel round;
  transition: background-color var(--dur);
}
.bsb-feature:hover .bsb-feature__frame { background: var(--hairline); }
.bsb-feature__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.bsb-feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.14;
  letter-spacing: 0;
  color: #000;
  transition: color var(--dur);
}
/* matches the grid card's hover, one row down */
.bsb-feature:hover .bsb-feature__title { color: var(--brand); }

.bsb-feature__excerpt {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px; line-height: 24px;
  color: #70777A;
  max-width: 70ch;   /* DESIGN.md caps reading measure at 65-75ch */
}

/* ---- Grid cards: same parts as the featured card, one step down ---- */
.bsb-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px; line-height: 40px;
  letter-spacing: 0;
}
/* Result-type label in search results (hollow chip, as in bs-store.css) */
.bsb-card__badge {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 11px; line-height: 1; letter-spacing: .06em;
  text-transform: uppercase;
  color: #70777A;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 2px 2px 8px 2px;
  corner-shape: round round bevel round;
}
.bsb-card__excerpt {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px; line-height: 24px;
  color: #70777A;
}

/* Dates are data — Fragment Mono, uppercase (The Caliper Rule). Replaces the
   legacy .font-label utility, which was Neue Haas *Medium*. */
.bsb-feature__meta,
.bsb-card__meta {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1; letter-spacing: .06em;
  text-transform: uppercase;
  color: #70777A;
}
.bsb-card__meta { margin: 24px 0 12px; font-size: 12px; }
.bsb-card__meta span + span { margin-left: 12px; }

/* Shared read-more affordance. Violet only on hover, so it stays a signal
   rather than decorating seven cards at once. */
.bsb-more {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 18px; line-height: 24px;
  color: #000;
  transition: color var(--dur);
}
.bsb-more svg {
  flex: 0 0 auto;
  /* violet arrow at rest, as in the reference — the label stays black so the
     colour marks the action, not the text */
  color: var(--brand);
  transition: transform var(--dur) var(--ease-signature);
}
.bsb-feature:hover .bsb-more,
.bsb-card__link:hover .bsb-more { color: var(--brand); }
.bsb-feature:hover .bsb-more svg,
.bsb-card__link:hover .bsb-more svg { transform: translateX(4px); }

/*- TABLET + MOBILE: the rail gets too narrow to read; stack it, image first -*/
@media only screen and (max-width: 991.98px) {
  .bsb-feature {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 64px;
  }
  .bsb-feature__body { grid-column: auto; }
  .bsb-feature__frame { grid-column: auto; order: -1; aspect-ratio: 4 / 3; }
}

@media only screen and (max-width: 640.98px) {
  .bsb-feature { padding: 0 12px; }
  .bsb-feature__excerpt { margin-top: 16px; }
  .bsb-card__title { font-size: 26px; line-height: 32px; }
  .bsb-more { margin-top: 16px; font-size: 16px; }
}

/* ---- Bevel fallback — no corner-shape support (Safari/iOS, Firefox): the
   bevel radius would render as a fat curve. Fill surfaces get the real cut
   via clip-path; convention, polygon template, and the outline-ring
   exception (.bsb-card__badge) in bs-chrome.css ("BEVEL FALLBACK"). ---- */
@supports not (corner-shape: round round bevel round) {
  .bsb-card__frame img {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 16px), calc(100% - 16px) 100%, -80px calc(100% + 80px));
  }
  .bsb-field__control {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 14px), calc(100% - 14px) 100%, -80px calc(100% + 80px));
  }
  .bsb-feature__frame {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 32px), calc(100% - 32px) 100%, -80px calc(100% + 80px));
  }
  .bsb-card__latest {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 8px), calc(100% - 8px) 100%, -80px calc(100% + 80px));
  }
  .bsb-card__badge { border-radius: 2px; }
}