/* ==========================================================================
   BEST OF — EDITORIAL
   Styles the semantic class names inside the 129 articles.

   Those articles previously carried 130 embedded <style> blocks totalling
   997 KB of CSS in the old palette (#C8A24A gold, #17233B navy). Those blocks
   are stripped on import; this file replaces them once, in platform colours,
   for every article at once.

   Class inventory: BEST_OF_editorial_class_inventory.txt, 121 names.
   This is pass one and covers the structural families. Remaining classes are
   listed at the bottom of this file as explicitly not yet styled, rather than
   silently missing.
   ========================================================================== */

.bo-article {
  background: var(--bo-surface);
}

.bo-article__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px var(--bo-gutter) 72px;
  font-family: var(--bo-font-serif);
  font-size: 17px;
  line-height: 1.62;
  color: var(--bo-ink-muted);
}

.bo-article__inner h2 {
  font-family: var(--bo-font-display);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--bo-ink);
  margin: 40px 0 12px;
}

.bo-article__inner h3 {
  font-family: var(--bo-font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--bo-ink);
  margin: 30px 0 8px;
}

.bo-article__inner p { margin: 0 0 16px; }
.bo-article__inner strong, .bo-article__inner b { color: var(--bo-ink); font-weight: 600; }
.bo-article__inner a { color: var(--bo-gold-ink); text-decoration: underline; text-underline-offset: 2px; }
.bo-article__inner a:hover { color: var(--bo-gold-ink-deep); }
.bo-article__inner ul, .bo-article__inner ol { margin: 0 0 18px; padding-left: 22px; }
.bo-article__inner li { margin-bottom: 7px; }
.bo-article__inner img { border-radius: var(--bo-radius-card); display: block; }
.bo-article__inner figure { margin: 24px 0; }
.bo-article__inner small { font-family: var(--bo-font-ui); font-size: 12px; color: var(--bo-ink-soft); }

/* --- bon-eyebrow ----------------------------------------------------------
   The standfirst kicker above a section heading. 178 uses, the most common
   class in the set. */
.bon-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--bo-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bo-gold-ink);
  margin-bottom: 10px;
}

/* --- bon-section ---------------------------------------------------------- */
.bon-section { margin: 34px 0; }

/* --- bon-facts / bon-fact -------------------------------------------------
   The definition list blocks. dl/dt/dd appear 1,600 times each. */
.bon-facts {
  background: var(--bo-surface-warm);
  border: 1px solid var(--bo-border-warm);
  border-radius: var(--bo-radius-card);
  padding: 18px 20px;
  margin: 22px 0;
}

.bon-fact {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 6px 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bo-border-soft);
}
.bon-fact:last-child { border-bottom: none; }

.bon-fact-label {
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bo-ink-soft);
}

.bon-fact-value { font-size: 15px; color: var(--bo-ink); }

@media (max-width: 640px) {
  .bon-fact { grid-template-columns: 1fr; gap: 2px; }
}

/* --- bon-brief ------------------------------------------------------------ */
.bon-brief {
  border-left: 3px solid var(--bo-action-gold);
  background: var(--bo-surface-warm);
  border-radius: 0 var(--bo-radius-card) var(--bo-radius-card) 0;
  padding: 16px 20px;
  margin: 24px 0;
}
.bon-brief-copy { font-size: 16px; color: var(--bo-ink); margin: 0; }

/* --- bon-callout / bon-take ----------------------------------------------- */
.bon-callout,
.bon-take {
  background: var(--bo-gold-tint);
  border: 1px solid var(--bo-gold-tint-border);
  border-radius: var(--bo-radius-card);
  padding: 16px 20px;
  margin: 24px 0;
  color: var(--bo-gold-tint-ink);
}

/* --- bon-source / bon-source-list / bon-source-type ------------------------
   Provenance. This is the platform's whole proposition, so it is styled to be
   read rather than tucked away. */
.bon-source {
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  color: var(--bo-ink-soft);
}

.bon-source-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  border-top: 1px solid var(--bo-border);
  padding-top: 14px;
}

.bon-source-list li {
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  padding: 6px 0;
  margin: 0;
}

.bon-source-type {
  display: inline-flex;
  align-items: center;
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--bo-neutral-tint);
  color: var(--bo-neutral-ink);
  border: 1px solid var(--bo-neutral-border);
  border-radius: var(--bo-radius-pill);
  padding: 3px 9px;
  margin-right: 8px;
}

/* --- bon-meta / bon-meta-item --------------------------------------------- */
.bon-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-family: var(--bo-font-ui);
  font-size: 12px;
  color: var(--bo-ink-soft);
  margin: 0 0 20px;
}
.bon-meta-item { display: inline-flex; align-items: center; gap: 5px; }

/* --- bon-status -----------------------------------------------------------
   LOCK 4 vocabulary. Live green is for live states only and is never
   decorative. "Settling" is banned outright: if it appears, it is a bug. */
.bon-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bo-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--bo-radius-pill);
  padding: 4px 10px;
  background: var(--bo-neutral-tint);
  color: var(--bo-neutral-ink);
  border: 1px solid var(--bo-neutral-border);
}
.bon-status.is-confirmed  { background: var(--bo-green-tint); color: var(--bo-green-ink);  border-color: var(--bo-green-border); }
.bon-status.is-developing { background: var(--bo-amber-tint); color: var(--bo-amber-ink);  border-color: var(--bo-amber-border); }
.bon-status.is-announced  { background: var(--bo-blue-tint);  color: var(--bo-blue-ink);   border-color: var(--bo-blue-border); }

/* --- bon-toc / bon-on-this-page ------------------------------------------- */
.bon-on-this-page,
.bon-toc {
  background: var(--bo-surface-sunk);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-card);
  padding: 16px 20px;
  margin: 26px 0;
  font-family: var(--bo-font-ui);
  font-size: 14px;
}
.bon-toc ul, .bon-on-this-page ul { list-style: none; padding: 0; margin: 8px 0 0; }
.bon-toc li, .bon-on-this-page li { margin-bottom: 6px; }

/* --- bon-explore / bon-explore-grid / bon-explore-card --------------------- */
.bon-explore { margin: 34px 0; }

.bon-explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.bon-explore-card {
  display: block;
  background: var(--bo-surface);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-card);
  padding: 15px 17px 13px 15px;
  font-family: var(--bo-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--bo-ink);
  text-decoration: none;
  transition: border-color var(--bo-transition), box-shadow var(--bo-transition);
}
.bon-explore-card:hover {
  border-color: var(--bo-action-gold);
  box-shadow: var(--bo-shadow-card-hover);
}

/* --- bon-community and its actions ----------------------------------------
   931 <button> elements live in this content. A button that does nothing is a
   dead control, so these are styled as the affordance they are and wired up
   by the participation layer when the feed ships. Until then they are inert
   and must not pretend otherwise. */
.bon-community {
  background: var(--bo-indigo-panel);
  border: 1px solid var(--bo-indigo-border);
  border-radius: var(--bo-radius-card);
  padding: 18px 20px;
  margin: 28px 0;
}

.bon-community-note {
  font-family: var(--bo-font-ui);
  font-size: 13px;
  color: var(--bo-indigo-ink);
  margin: 0 0 12px;
}

.bon-community-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bon-community-button {
  font-family: var(--bo-font-ui);
  min-height: var(--bo-hit-target);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: var(--bo-radius-control);
  border: 1px solid var(--bo-border);
  background: var(--bo-surface);
  color: var(--bo-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--bo-transition), background var(--bo-transition);
}
.bon-community-button:hover { border-color: var(--bo-action-gold); background: var(--bo-gold-panel); }
.bon-community-button.is-primary {
  background: var(--bo-action-gold);
  border-color: var(--bo-action-gold);
  color: var(--bo-ink);
  font-family: var(--bo-font-display);
  font-weight: 800;
}
.bon-community-button.is-primary:hover { background: var(--bo-action-gold-hover); }

/* --- bon-full-picture ------------------------------------------------------ */
.bon-full-picture {
  border-top: 1px solid var(--bo-border);
  margin-top: 34px;
  padding-top: 22px;
}

/* --- details / summary -----------------------------------------------------
   1,102 uses. The most common interactive element in the articles. */
.bo-article__inner details {
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-card);
  padding: 0 18px;
  margin: 14px 0;
  background: var(--bo-surface);
}
.bo-article__inner summary {
  font-family: var(--bo-font-ui);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bo-ink);
  cursor: pointer;
  min-height: var(--bo-hit-target);
  display: flex;
  align-items: center;
  list-style: none;
}
.bo-article__inner summary::-webkit-details-marker { display: none; }
.bo-article__inner summary::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--bo-ink-faint);
  border-bottom: 2px solid var(--bo-ink-faint);
  transform: rotate(45deg);
  transition: transform var(--bo-transition);
}
.bo-article__inner details[open] summary::after { transform: rotate(-135deg); }
.bo-article__inner details > *:not(summary) { padding-bottom: 4px; }

/* --- bestof-news ----------------------------------------------------------- */
.bestof-news {
  border-left: 3px solid var(--bo-live-green);
  padding-left: 16px;
  margin: 24px 0;
}

/* --- Media credit ---------------------------------------------------------- */
.be-media-credit,
.bon-credit {
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  color: var(--bo-ink-soft);
  margin-top: 6px;
  display: block;
}

/* ==========================================================================
   NOT YET STYLED — declared honestly rather than left to look finished

   The BuzzEditor block families still present in the content:
     wp-block-buzzeditor-list, wp-block-buzzeditor-list-item,
     wp-block-buzzeditor-poll, wp-block-buzzeditor-poll-answer,
     wp-block-buzzeditor-poll-answers,
     be-answer, be-answers, be-answer-image, be-answer-title,
     be-answer-wrapper, be-list, be-list-item-number, be-list-item-text,
     be-list-item-title, be-list-number-style-border-colored,
     be-list-type-asc, be-poll, be-question

   These come from a plugin that leaves with the old platform. They need a
   decision: restyle them here, or convert that markup on import. Not guessed.

   Core WordPress block classes also present: wp-block-cover,
   wp-block-cover__inner-container, wp-block-image, has-background-dim,
   has-black-background-color, has-large-font-size, has-text-align-center,
   size-large, clearfix, text.
   ========================================================================== */


/* ==========================================================================
   GUIDES — bog4 component family (43 of Aimee's 129 guides)
   Written 25 Aug 2026. Confirmed across ALL 25 BEST OF Core stylesheets that
   no bog4- rules existed anywhere: this is new work, not a restoration.
   Structure verified against the rendered DOM, not assumed.
   ========================================================================== */
.bog4 { font-family: var(--bo-font-serif); }
.bog4 .bog4-section { margin: 44px 0; }
.bog4 .bog4-eyebrow,
.bog4 .bog4-kicker { display:block; font-family:var(--bo-font-ui); font-size:10.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--bo-gold-ink); margin:0 0 8px; }
.bog4 .bog4-eyebrow--dark { color: var(--bo-ink-soft); }
.bog4 .bog4-lead,
.bog4 .bog4-intro-copy { font-size:18px; line-height:1.6; color:var(--bo-ink-muted); }

/* Decision board — the "one glance" answer the reader came for */
.bog4 .bog4-board { border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); background:var(--bo-surface); overflow:hidden; margin:20px 0 8px; }
.bog4 .bog4-board-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto auto 22px; align-items:center; gap:14px; padding:14px 16px; min-height:var(--bo-hit-target); border-bottom:1px solid var(--bo-border-soft); text-decoration:none; color:var(--bo-ink); transition:background var(--bo-transition); }
.bog4 .bog4-board-row:last-child { border-bottom:none; }
.bog4 .bog4-board-row:hover { background:var(--bo-surface-warm); }
.bog4 .bog4-board-row:hover .bog4-board-arrow { transform:translateX(3px); color:var(--bo-gold-ink); }
.bog4 .bog4-board-rank { font-family:var(--bo-font-display); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--bo-ink-faint); text-align:center; }
.bog4 .bog4-board-row:nth-child(1) .bog4-board-rank,
.bog4 .bog4-board-row:nth-child(2) .bog4-board-rank,
.bog4 .bog4-board-row:nth-child(3) .bog4-board-rank { color:var(--bo-gold-ink-deep); }
.bog4 .bog4-board-row:nth-child(1) .bog4-board-rank { font-size:17px; }
.bog4 .bog4-board-name { display:flex; flex-direction:column; gap:2px; min-width:0; }
.bog4 .bog4-board-name strong { font-family:var(--bo-font-display); font-size:15.5px; font-weight:800; letter-spacing:-0.012em; color:var(--bo-ink); line-height:1.25; }
.bog4 .bog4-board-name small { font-family:var(--bo-font-ui); font-size:12px; font-weight:400; color:var(--bo-ink-soft); line-height:1.35; }
.bog4 .bog4-board-score { font-family:var(--bo-font-display); font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--bo-ink); white-space:nowrap; }
.bog4 .bog4-board-arrow { font-size:15px; color:var(--bo-ink-faint); transition:transform var(--bo-transition), color var(--bo-transition); }
@media (max-width:680px){
 .bog4 .bog4-board-row { grid-template-columns:32px minmax(0,1fr) auto; gap:10px; padding:12px 13px; }
 .bog4 .bog4-board-row .bog4-chip { display:none; }
 .bog4 .bog4-board-arrow { display:none; }
}

/* Chips — content type, never status */
.bog4 .bog4-chips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.bog4 .bog4-chip { display:inline-flex; align-items:center; font-family:var(--bo-font-ui); font-size:10.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; border-radius:var(--bo-radius-pill); padding:4px 10px; white-space:nowrap; background:var(--bo-neutral-tint); color:var(--bo-neutral-ink); border:1px solid var(--bo-neutral-border); }
.bog4 .bog4-chip--gold { background:var(--bo-gold-tint); color:var(--bo-gold-tint-ink); border-color:var(--bo-gold-tint-border); }
.bog4 .bog4-chip--blue { background:var(--bo-blue-tint); color:var(--bo-blue-ink); border-color:var(--bo-blue-border); }
.bog4 .bog4-chip--green { background:var(--bo-green-tint); color:var(--bo-green-ink); border-color:var(--bo-green-border); }
.bog4 .bog4-chip--grey { background:var(--bo-neutral-tint); color:var(--bo-ink-soft); border-color:var(--bo-border); }
.bog4 .bog4-chip--lilac { background:var(--bo-purple-tint); color:var(--bo-purple-ink); border-color:var(--bo-purple-border); }
.bog4 .bog4-chip--orange { background:var(--bo-amber-tint); color:var(--bo-amber-ink); border-color:var(--bo-amber-border); }
.bog4 .bog4-chip--rose { background:var(--bo-rose-tint); color:var(--bo-rose-ink); border-color:var(--bo-rose-border); }

/* Rank card */
.bog4 .bog4-rank-list { display:flex; flex-direction:column; gap:18px; margin:22px 0; }
.bog4 .bog4-rank-card { display:block; background:var(--bo-surface); border:1px solid var(--bo-border); border-left:3px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:20px 22px 18px; transition:border-color var(--bo-transition), box-shadow var(--bo-transition); }
.bog4 .bog4-rank-card:hover { box-shadow:var(--bo-shadow-card-hover); }
.bog4 .bog4-rank-list > .bog4-rank-card:first-child { border-left-color:var(--bo-credential-gold); }
.bog4 .bog4-rank-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:14px; padding-bottom:12px; border-bottom:1px solid var(--bo-border-soft); margin-bottom:12px; }
.bog4 .bog4-rank-no { font-family:var(--bo-font-display); font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; color:var(--bo-ink-faint); }
.bog4 .bog4-rank-title { min-width:0; }
.bog4 .bog4-rank-title h3 { font-family:var(--bo-font-display); font-size:20px; font-weight:800; letter-spacing:-0.015em; line-height:1.25; color:var(--bo-ink); margin:0; }
.bog4 .bog4-rank-award { font-family:var(--bo-font-ui); font-size:10.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--bo-gold-ink); margin:0 0 4px; }
.bog4 .bog4-score { font-family:var(--bo-font-display); font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; color:var(--bo-ink); white-space:nowrap; }
.bog4 .bog4-rank-summary { font-size:16px; line-height:1.58; color:var(--bo-ink-muted); margin:0 0 4px; }
.bog4 .bog4-tip { font-family:var(--bo-font-ui); font-size:13px; line-height:1.5; color:var(--bo-gold-ink-deep); background:var(--bo-gold-panel); border:1px solid var(--bo-gold-tint-border); border-radius:var(--bo-radius-card); padding:11px 14px; margin:14px 0 0; }
.bog4 .bog4-rank-actions,
.bog4 .bog4-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.bog4 .bog4-actions--top { margin:14px 0 0; }
@media (max-width:680px){
 .bog4 .bog4-rank-head { grid-template-columns:auto minmax(0,1fr); }
 .bog4 .bog4-score { grid-column:2; font-size:20px; }
 .bog4 .bog4-rank-card { padding:16px 16px 14px; }
}

/* Facts: dl > div > dt + dd */
.bog4 .bog4-facts { margin:14px 0 0; border-top:1px solid var(--bo-border-soft); }
.bog4 .bog4-facts > div { display:grid; grid-template-columns:minmax(110px,30%) 1fr; gap:4px 18px; padding:10px 0; border-bottom:1px solid var(--bo-border-soft); }
.bog4 .bog4-facts > div:last-child { border-bottom:none; }
.bog4 .bog4-facts dt { font-family:var(--bo-font-ui); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--bo-ink-soft); margin:0; }
.bog4 .bog4-facts dd { margin:0; font-size:15px; line-height:1.5; color:var(--bo-ink); }
@media (max-width:680px){ .bog4 .bog4-facts > div { grid-template-columns:1fr; gap:1px; } }

/* Trust row — the independence claim, given real presence */
.bog4 .bog4-trust { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; background:var(--bo-surface-warm); border:1px solid var(--bo-border-warm); border-radius:var(--bo-radius-card); padding:16px 18px; margin:22px 0; }
.bog4 .bog4-trust-item { display:grid; grid-template-columns:22px 1fr; grid-template-rows:auto auto; column-gap:9px; align-items:center; }
.bog4 .bog4-trust-icon { grid-row:1 / 3; display:inline-flex; align-items:center; justify-content:center; font-size:15px; color:var(--bo-gold-ink); }
.bog4 .bog4-trust-icon img { width:20px; height:20px; }
.bog4 .bog4-trust-item b { font-family:var(--bo-font-ui); font-size:13px; font-weight:700; color:var(--bo-ink); line-height:1.3; }
.bog4 .bog4-trust-item > span:last-child { font-family:var(--bo-font-ui); font-size:11.5px; color:var(--bo-ink-soft); line-height:1.35; }

/* Live rows and match list */
.bog4 .bog4-live-row,
.bog4 .bog4-match-list > a { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); background:var(--bo-surface); margin-bottom:9px; min-height:var(--bo-hit-target); text-decoration:none; color:var(--bo-ink); transition:border-color var(--bo-transition); }
.bog4 .bog4-match-list > a:hover { border-color:var(--bo-action-gold); }
.bog4 .bog4-live-icon,
.bog4 .bog4-match-list > a > span:first-child { font-size:19px; text-align:center; }
.bog4 .bog4-live-row b,
.bog4 .bog4-match-list b { display:block; font-family:var(--bo-font-ui); font-size:14.5px; font-weight:700; color:var(--bo-ink); line-height:1.3; }
.bog4 .bog4-live-row small,
.bog4 .bog4-match-list small { display:block; font-family:var(--bo-font-ui); font-size:11.5px; color:var(--bo-ink-soft); margin-top:1px; }
.bog4 .bog4-live-row p { font-size:14px; color:var(--bo-ink-muted); margin:5px 0 0; }
.bog4 .bog4-live-status { font-family:var(--bo-font-ui); font-size:10.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--bo-live-green); background:var(--bo-green-tint); border:1px solid var(--bo-green-border); border-radius:var(--bo-radius-pill); padding:4px 10px; white-space:nowrap; }
.bog4 .bog4-match-list > a > i { font-style:normal; color:var(--bo-ink-faint); }

/* Feature and mini cards */
.bog4 .bog4-feature { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; background:var(--bo-surface-warm); border:1px solid var(--bo-border-warm); border-radius:var(--bo-radius-card); padding:20px 22px; margin:26px 0; }
.bog4 .bog4-feature-intro { font-size:16px; line-height:1.58; color:var(--bo-ink-muted); }
.bog4 .bog4-feature-note { font-family:var(--bo-font-ui); font-size:12.5px; color:var(--bo-ink-soft); }
.bog4 [class*="bog4-mini-card"] { border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:15px 17px; margin:12px 0; }
.bog4 .bog4-mini-card--cream { background:var(--bo-surface-warm); border-color:var(--bo-border-warm); }
.bog4 .bog4-mini-card--blue { background:var(--bo-blue-tint); border-color:var(--bo-blue-border); }
.bog4 .bog4-mini-card--green { background:var(--bo-green-tint); border-color:var(--bo-green-border); }

/* FAQ */
.bog4 .bog4-faq details { border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); background:var(--bo-surface); padding:0 18px; margin:9px 0; }
.bog4 .bog4-faq summary { font-family:var(--bo-font-ui); font-size:15px; font-weight:700; color:var(--bo-ink); cursor:pointer; min-height:var(--bo-hit-target); display:flex; align-items:center; list-style:none; }
.bog4 .bog4-faq summary::-webkit-details-marker { display:none; }
.bog4 .bog4-faq summary::after { content:''; margin-left:auto; flex-shrink:0; width:8px; height:8px; border-right:2px solid var(--bo-ink-faint); border-bottom:2px solid var(--bo-ink-faint); transform:rotate(45deg); transition:transform var(--bo-transition); }
.bog4 .bog4-faq details[open] summary::after { transform:rotate(-135deg); }
.bog4 .bog4-faq details p { margin:0 0 14px; font-size:15.5px; line-height:1.58; color:var(--bo-ink-muted); }

/* Buttons — action gold only, never credential gold */
.bog4 .bog4-btn { border-radius:var(--bo-radius-control); border:1px solid var(--bo-border); background:var(--bo-surface); color:var(--bo-ink); font-family:var(--bo-font-ui); text-decoration:none; cursor:pointer; transition:border-color var(--bo-transition), background var(--bo-transition); }
.bog4 .bog4-btn:hover { border-color:var(--bo-action-gold); background:var(--bo-gold-panel); }
.bog4 .bog4-btn--gold { background:var(--bo-action-gold); border-color:var(--bo-action-gold); color:var(--bo-ink); font-family:var(--bo-font-display); }
.bog4 .bog4-btn--gold:hover { background:var(--bo-action-gold-hover); border-color:var(--bo-action-gold-hover); }
.bog4 .bog4-btn--dark { background:var(--bo-navy); border-color:var(--bo-navy); color:#FFFFFF; }
.bog4 .bog4-btn--dark:hover { background:var(--bo-navy-hover); border-color:var(--bo-navy-hover); }
.bog4 .bog4-btn--light { background:var(--bo-surface-sunk); }
.bog4 .bog4-btn--whatsapp { color:var(--bo-live-green); border-color:var(--bo-green-border); background:var(--bo-green-tint); }

/* Icon list, update, booking, shortlist */
.bog4 .bog4-icon-list { list-style:none; padding:0; margin:14px 0; }
.bog4 .bog4-icon-list li { display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; padding:7px 0; font-size:15.5px; line-height:1.5; }
.bog4 .bog4-update,
.bog4 .bog4-booking,
.bog4 .bog4-shortlist-share { border-left:3px solid var(--bo-action-gold); background:var(--bo-surface-warm); border-radius:0 var(--bo-radius-card) var(--bo-radius-card) 0; padding:14px 18px; margin:22px 0; }
.bog4 .bog4-update { border-left-color:var(--bo-live-green); }
.bog4 .bog4-intro { margin-bottom:26px; }
.bog4 .bog4-layout-polish { margin:0; }


/* --------------------------------------------------------------------------
   bogl-context — the "join the conversation" prompt.

   Styled by BEST OF Core (bog-build009l.css) as a three column grid, but the
   copy column has no minmax(0,1fr), so inside any narrow container it
   computes to ZERO width and the heading wraps one word per line at 34px.
   Seen at 313px inside .bog4-feature. This is a real defect in the original
   rule, not a conflict with ours, so it is corrected here rather than fought.
   -------------------------------------------------------------------------- */
.bo-article__inner .bogl-context {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start;
  background: var(--bo-indigo-panel);
  border: 1px solid var(--bo-indigo-border);
  border-radius: var(--bo-radius-card);
  padding: 16px 18px;
}
.bo-article__inner .bogl-context__copy { min-width: 0; }
.bo-article__inner .bogl-context__copy h3 {
  font-family: var(--bo-font-display);
  font-size: 17px !important;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--bo-ink);
  margin: 0 0 6px;
  text-wrap: balance;
}
.bo-article__inner .bogl-context__copy p {
  font-family: var(--bo-font-ui);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bo-ink-muted);
  margin: 0 0 10px;
}
.bo-article__inner .bogl-context a,
.bo-article__inner .bogl-context button {
  font-family: var(--bo-font-ui);
  font-size: 13px;
  font-weight: 700;
  min-height: var(--bo-hit-target);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: var(--bo-radius-control);
  border: 1px solid var(--bo-indigo-border);
  background: var(--bo-surface);
  color: var(--bo-indigo-ink);
  text-decoration: none;
  cursor: pointer;
}

/* A two column feature must collapse before its children get too narrow. */
@media (max-width: 900px) {
  .bog4 .bog4-feature { grid-template-columns: 1fr; }
}


/* ==========================================================================
   GUIDES — bestof- family (56 of 114 published guides, the largest family)
   Structure read from the rendered DOM of best-indian-restaurants-dubai.
   ========================================================================== */
.bo-article__inner .bestof-guide { font-family: var(--bo-font-serif); }
.bo-article__inner .bestof-section { margin: 44px 0; }
.bo-article__inner .bestof-section > h2 { margin-top: 0; }
.bo-article__inner .bestof-eyebrow,
.bo-article__inner .bestof-kicker { display:block; font-family:var(--bo-font-ui); font-size:10.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--bo-gold-ink); margin:0 0 8px; }
.bo-article__inner .bestof-section-lead { font-size:17px; line-height:1.6; color:var(--bo-ink-muted); margin:0 0 18px; }
.bo-article__inner .bestof-section-title { font-family:var(--bo-font-display); font-size:24px; font-weight:800; letter-spacing:-0.018em; color:var(--bo-ink); margin:0 0 10px; }

/* Divider — the crown rule between sections */
.bo-article__inner .bestof-divider { display:flex; align-items:center; justify-content:center; gap:10px; margin:38px 0; font-family:var(--bo-font-ui); font-size:10px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--bo-gold-ink-deep); }
.bo-article__inner .bestof-divider::before,
.bo-article__inner .bestof-divider::after { content:''; flex:1; height:1px; background:var(--bo-border); }

/* Venue card — the ranked entry */
.bo-article__inner .bestof-venue-card { display:block; background:var(--bo-surface); border:1px solid var(--bo-border); border-left:3px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:20px 22px 18px; margin:0 0 18px; transition:box-shadow var(--bo-transition); }
.bo-article__inner .bestof-venue-card:hover { box-shadow:var(--bo-shadow-card-hover); }
.bo-article__inner .bestof-venue-card:first-of-type { border-left-color:var(--bo-credential-gold); }
.bo-article__inner .bestof-venue-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:14px; padding-bottom:12px; border-bottom:1px solid var(--bo-border-soft); margin-bottom:12px; }
.bo-article__inner .bestof-rank { font-family:var(--bo-font-display); font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; color:var(--bo-ink-faint); }
.bo-article__inner .bestof-venue-title { min-width:0; }
.bo-article__inner .bestof-venue-title h3 { font-family:var(--bo-font-display); font-size:20px; font-weight:800; letter-spacing:-0.015em; line-height:1.25; color:var(--bo-ink); margin:0; }
.bo-article__inner .bestof-venue-meta { font-family:var(--bo-font-ui); font-size:12px; color:var(--bo-ink-soft); margin:3px 0 0; }
.bo-article__inner .bestof-venue-intro { font-size:16px; line-height:1.58; color:var(--bo-ink-muted); margin:0 0 4px; }
.bo-article__inner .bestof-award { display:block; font-family:var(--bo-font-ui); font-size:10.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--bo-gold-ink); margin:0 0 4px; }

/* Score block: label / value / denominator */
.bo-article__inner .bestof-score { display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; white-space:nowrap; }
.bo-article__inner .bestof-score > span { font-family:var(--bo-font-ui); font-size:9.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--bo-ink-soft); }
.bo-article__inner .bestof-score > strong { font-family:var(--bo-font-display); font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--bo-ink); }
.bo-article__inner .bestof-score > small { font-family:var(--bo-font-ui); font-size:11px; color:var(--bo-ink-faint); }

/* Facts: div > span(label) + strong(value) */
.bo-article__inner .bestof-facts { margin:14px 0 0; border-top:1px solid var(--bo-border-soft); }
.bo-article__inner .bestof-fact { display:grid; grid-template-columns:minmax(100px,28%) 1fr; gap:4px 18px; padding:10px 0; border-bottom:1px solid var(--bo-border-soft); }
.bo-article__inner .bestof-fact:last-child { border-bottom:none; }
.bo-article__inner .bestof-fact > span { font-family:var(--bo-font-ui); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--bo-ink-soft); }
.bo-article__inner .bestof-fact > strong { font-size:15px; font-weight:500; line-height:1.5; color:var(--bo-ink); }
@media (max-width:680px){ .bo-article__inner .bestof-fact { grid-template-columns:1fr; gap:1px; } }

/* Picks — the shortlist grid */
.bo-article__inner .bestof-picks { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:20px 0; }
.bo-article__inner .bestof-pick { display:block; background:var(--bo-surface); border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:15px 17px 13px; text-decoration:none; color:var(--bo-ink); transition:border-color var(--bo-transition), box-shadow var(--bo-transition); }
.bo-article__inner .bestof-pick:hover { border-color:var(--bo-action-gold); box-shadow:var(--bo-shadow-card-hover); }
.bo-article__inner .bestof-pick > span { display:block; font-family:var(--bo-font-ui); font-size:10.5px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; color:var(--bo-gold-ink); margin-bottom:5px; }
.bo-article__inner .bestof-pick > strong { display:block; font-family:var(--bo-font-display); font-size:16px; font-weight:800; letter-spacing:-0.012em; line-height:1.25; color:var(--bo-ink); }
.bo-article__inner .bestof-pick > p { font-family:var(--bo-font-ui); font-size:13px; line-height:1.45; color:var(--bo-ink-soft); margin:5px 0 0; }

/* Callout and key */
.bo-article__inner .bestof-callout { background:var(--bo-surface-warm); border:1px solid var(--bo-border-warm); border-radius:var(--bo-radius-card); padding:18px 20px; margin:22px 0; }
.bo-article__inner .bestof-callout-title { font-family:var(--bo-font-display); font-size:17px; font-weight:800; letter-spacing:-0.012em; color:var(--bo-ink); margin:0 0 8px; }
.bo-article__inner .bestof-callout p { font-size:15.5px; line-height:1.58; color:var(--bo-ink-muted); margin:0 0 10px; }
.bo-article__inner .bestof-callout p:last-child { margin-bottom:0; }
.bo-article__inner .bestof-key { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-family:var(--bo-font-ui); font-size:12px; color:var(--bo-ink-soft); }
.bo-article__inner .bestof-inline-note { font-family:var(--bo-font-ui); font-size:12.5px; color:var(--bo-ink-soft); }

/* Method — a details block with weighted metrics */
.bo-article__inner .bestof-method { border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); background:var(--bo-surface); padding:0 18px; margin:22px 0; }
.bo-article__inner .bestof-method > summary { font-family:var(--bo-font-ui); font-size:14.5px; font-weight:700; color:var(--bo-ink); cursor:pointer; min-height:var(--bo-hit-target); display:flex; align-items:center; list-style:none; }
.bo-article__inner .bestof-method > summary::-webkit-details-marker { display:none; }
.bo-article__inner .bestof-method > summary::after { content:''; margin-left:auto; flex-shrink:0; width:8px; height:8px; border-right:2px solid var(--bo-ink-faint); border-bottom:2px solid var(--bo-ink-faint); transform:rotate(45deg); transition:transform var(--bo-transition); }
.bo-article__inner .bestof-method[open] > summary::after { transform:rotate(-135deg); }
.bo-article__inner .bestof-method-body { padding-bottom:16px; }

.bo-article__inner .bestof-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:14px 0; }
.bo-article__inner .bestof-metric-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.bo-article__inner .bestof-metric-top > span { font-family:var(--bo-font-ui); font-size:12px; font-weight:600; color:var(--bo-ink-soft); }
.bo-article__inner .bestof-metric-top > strong { font-family:var(--bo-font-display); font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--bo-ink); }
.bo-article__inner .bestof-meter { display:block; height:5px; margin-top:6px; border-radius:var(--bo-radius-pill); background:var(--bo-border); overflow:hidden; position:relative; }
.bo-article__inner .bestof-meter::after { content:''; position:absolute; inset:0; background:var(--bo-action-gold); border-radius:inherit; }

/* Fast answer cards */
.bo-article__inner .bestof-fast-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:20px 0; }
.bo-article__inner .bestof-fast-card { display:flex; flex-direction:column; background:var(--bo-surface); border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:16px 18px 14px; text-decoration:none; color:var(--bo-ink); transition:border-color var(--bo-transition); }
.bo-article__inner .bestof-fast-card:hover { border-color:var(--bo-action-gold); }
.bo-article__inner .bestof-fast-card h3 { font-family:var(--bo-font-serif); font-size:16px; font-weight:600; font-style:italic; line-height:1.4; color:var(--bo-ink); margin:0 0 8px; }
.bo-article__inner .bestof-fast-card p { font-family:var(--bo-font-ui); font-size:13.5px; line-height:1.5; color:var(--bo-ink-muted); margin:0 0 10px; }
.bo-article__inner .bestof-fast-cta { margin-top:auto; font-family:var(--bo-font-ui); font-size:12px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--bo-gold-ink); }

/* Related guides */
.bo-article__inner .bestof-related { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:20px 0; }
.bo-article__inner .bestof-related-panel { background:var(--bo-surface-warm); border:1px solid var(--bo-border-warm); border-radius:var(--bo-radius-card); padding:20px 22px; margin:26px 0; }
.bo-article__inner .bestof-related-intro,
.bo-article__inner .bestof-related-lead { font-size:15.5px; line-height:1.55; color:var(--bo-ink-muted); margin:0 0 14px; }
.bo-article__inner .bestof-related-card { display:block; background:var(--bo-surface); border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:15px 17px 13px; text-decoration:none; color:var(--bo-ink); transition:border-color var(--bo-transition), box-shadow var(--bo-transition); }
.bo-article__inner .bestof-related-card:hover { border-color:var(--bo-action-gold); box-shadow:var(--bo-shadow-card-hover); }
.bo-article__inner .bestof-related-icon { display:block; font-size:20px; margin-bottom:6px; }
.bo-article__inner .bestof-related-label { display:block; font-family:var(--bo-font-ui); font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--bo-ink-soft); margin-bottom:4px; }
.bo-article__inner .bestof-related-card strong { display:block; font-family:var(--bo-font-display); font-size:15.5px; font-weight:800; letter-spacing:-0.012em; line-height:1.3; color:var(--bo-ink); }
.bo-article__inner .bestof-related-card p { font-family:var(--bo-font-ui); font-size:12.5px; line-height:1.45; color:var(--bo-ink-soft); margin:5px 0 0; }
.bo-article__inner .bestof-related-arrow { color:var(--bo-ink-faint); }

/* Decision rows, areas, budgets, plans, needs — all the same shape */
.bo-article__inner .bestof-decision-grid,
.bo-article__inner .bestof-area-grid,
.bo-article__inner .bestof-budget-grid,
.bo-article__inner .bestof-need-grid,
.bo-article__inner .bestof-mini-grid,
.bo-article__inner .bestof-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:18px 0; }
.bo-article__inner .bestof-decision-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:14px 16px; border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); background:var(--bo-surface); margin:0 0 10px; }
.bo-article__inner .bestof-decision-row > div { font-family:var(--bo-font-ui); font-size:13.5px; color:var(--bo-ink); }
.bo-article__inner .bestof-area-card,
.bo-article__inner .bestof-budget-card,
.bo-article__inner .bestof-plan-card,
.bo-article__inner .bestof-quick-card,
.bo-article__inner .bestof-note-card,
.bo-article__inner .bestof-card,
.bo-article__inner .bestof-slim-card,
.bo-article__inner .bestof-clean-panel { background:var(--bo-surface); border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:15px 17px 13px; }
.bo-article__inner .bestof-card-title { font-family:var(--bo-font-display); font-size:15.5px; font-weight:800; letter-spacing:-0.012em; color:var(--bo-ink); margin:0 0 6px; }

/* Status pills */
.bo-article__inner .bestof-status { display:inline-flex; align-items:center; gap:5px; font-family:var(--bo-font-ui); font-size:10px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; border-radius:var(--bo-radius-pill); padding:4px 10px; background:var(--bo-neutral-tint); color:var(--bo-neutral-ink); border:1px solid var(--bo-neutral-border); }
.bo-article__inner .bestof-status--mixed { background:var(--bo-amber-tint); color:var(--bo-amber-ink); border-color:var(--bo-amber-border); }
.bo-article__inner .bestof-status--pure { background:var(--bo-green-tint); color:var(--bo-green-ink); border-color:var(--bo-green-border); }
.bo-article__inner .bestof-status-card { border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:14px 16px; margin:10px 0; background:var(--bo-surface); }
.bo-article__inner .bestof-status-copy { font-size:15px; line-height:1.55; color:var(--bo-ink-muted); }
.bo-article__inner .bestof-status-meta,
.bo-article__inner .bestof-meta,
.bo-article__inner .bestof-label { font-family:var(--bo-font-ui); font-size:11.5px; color:var(--bo-ink-soft); }

/* Buttons and actions */
.bo-article__inner .bestof-actions { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.bo-article__inner .bestof-btn,
.bo-article__inner .bestof-guide-button,
.bo-article__inner .bestof-poll-btn { font-family:var(--bo-font-ui); font-size:13px; font-weight:700; min-height:var(--bo-hit-target); display:inline-flex; align-items:center; gap:7px; padding:0 15px; border-radius:var(--bo-radius-control); border:1px solid var(--bo-border); background:var(--bo-surface); color:var(--bo-ink); text-decoration:none; cursor:pointer; transition:border-color var(--bo-transition), background var(--bo-transition); }
.bo-article__inner .bestof-btn:hover,
.bo-article__inner .bestof-guide-button:hover,
.bo-article__inner .bestof-poll-btn:hover { border-color:var(--bo-action-gold); background:var(--bo-gold-panel); }
.bo-article__inner .bestof-btn--secondary { background:var(--bo-surface-sunk); }
.bo-article__inner .bestof-btn--map { color:var(--bo-indigo-ink); border-color:var(--bo-indigo-border); background:var(--bo-indigo-panel); }
.bo-article__inner .bestof-plain-link { color:var(--bo-gold-ink); text-decoration:underline; text-underline-offset:2px; }

/* FAQ, source, detail, booking */
.bo-article__inner .bestof-faq > details,
.bo-article__inner .bestof-detail,
.bo-article__inner .bestof-source { border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); background:var(--bo-surface); padding:0 18px; margin:9px 0; }
.bo-article__inner .bestof-faq > details > summary,
.bo-article__inner .bestof-detail > summary,
.bo-article__inner .bestof-source > summary { font-family:var(--bo-font-ui); font-size:14.5px; font-weight:700; color:var(--bo-ink); cursor:pointer; min-height:var(--bo-hit-target); display:flex; align-items:center; list-style:none; }
.bo-article__inner .bestof-faq > details > summary::-webkit-details-marker,
.bo-article__inner .bestof-detail > summary::-webkit-details-marker,
.bo-article__inner .bestof-source > summary::-webkit-details-marker { display:none; }
.bo-article__inner .bestof-faq > details > summary::after,
.bo-article__inner .bestof-detail > summary::after,
.bo-article__inner .bestof-source > summary::after { content:''; margin-left:auto; flex-shrink:0; width:8px; height:8px; border-right:2px solid var(--bo-ink-faint); border-bottom:2px solid var(--bo-ink-faint); transform:rotate(45deg); transition:transform var(--bo-transition); }
.bo-article__inner .bestof-faq > details[open] > summary::after,
.bo-article__inner .bestof-detail[open] > summary::after,
.bo-article__inner .bestof-source[open] > summary::after { transform:rotate(-135deg); }
.bo-article__inner .bestof-detail-body,
.bo-article__inner .bestof-source-body { padding-bottom:14px; font-size:15px; line-height:1.55; color:var(--bo-ink-muted); }
.bo-article__inner .bestof-booking { border-top:1px solid var(--bo-border-soft); margin-top:12px; padding-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.bo-article__inner .bestof-price { font-family:var(--bo-font-display); font-weight:800; color:var(--bo-ink); }
.bo-article__inner .bestof-route-note,
.bo-article__inner .bestof-microcopy { font-family:var(--bo-font-ui); font-size:11.5px; color:var(--bo-ink-soft); margin:8px 0 0; }

/* Tables */
.bo-article__inner .bestof-table-wrap { overflow-x:auto; margin:18px 0; border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); }
.bo-article__inner .bestof-table { width:100%; border-collapse:collapse; font-family:var(--bo-font-ui); font-size:13.5px; }
.bo-article__inner .bestof-table th { text-align:left; font-size:10.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--bo-ink-soft); padding:11px 14px; border-bottom:1px solid var(--bo-border); background:var(--bo-surface-warm); }
.bo-article__inner .bestof-table td { padding:11px 14px; border-bottom:1px solid var(--bo-border-soft); color:var(--bo-ink); }
.bo-article__inner .bestof-table tr:last-child td { border-bottom:none; }

/* Community, share, poll, comment */
.bo-article__inner .bestof-community,
.bo-article__inner .bestof-share,
.bo-article__inner .bestof-request,
.bo-article__inner .bestof-live-poll { background:var(--bo-indigo-panel); border:1px solid var(--bo-indigo-border); border-radius:var(--bo-radius-card); padding:18px 20px; margin:24px 0; }
.bo-article__inner .bestof-poll-options { display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.bo-article__inner .bestof-poll-total { font-family:var(--bo-font-ui); font-size:11.5px; color:var(--bo-ink-soft); }
.bo-article__inner .bestof-comment-link { display:inline-flex; align-items:center; gap:7px; min-height:var(--bo-hit-target); font-family:var(--bo-font-ui); font-size:13px; font-weight:700; color:var(--bo-indigo-ink); text-decoration:none; }
.bo-article__inner .bestof-verification,
.bo-article__inner .bestof-assessment,
.bo-article__inner .bestof-practical,
.bo-article__inner .bestof-match-panel { background:var(--bo-surface-warm); border:1px solid var(--bo-border-warm); border-radius:var(--bo-radius-card); padding:18px 20px; margin:22px 0; }
.bo-article__inner .bestof-match-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.bo-article__inner .bestof-score-framework { margin:18px 0; }

/* ==========================================================================
   GUIDES — remaining bog4 components (43 guides)
   ========================================================================== */
.bog4 .bog4-board-section { margin:34px 0; }
.bog4 .bog4-feature-col { min-width:0; }
.bog4 .bog4-duo { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:22px 0; }
.bog4 .bog4-planner,
.bog4 .bog4-check-list,
.bog4 .bog4-place-list { display:flex; flex-direction:column; gap:9px; margin:18px 0; }
.bog4 .bog4-check-list > *,
.bog4 .bog4-place-list > * { border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); background:var(--bo-surface); padding:13px 15px; }
.bog4 .bog4-more { margin:22px 0; }
.bog4 .bog4-sources { border-top:1px solid var(--bo-border); margin-top:30px; padding-top:16px; font-family:var(--bo-font-ui); font-size:12.5px; color:var(--bo-ink-soft); }
.bog4 .bog4-dark-panel { background:var(--bo-navy); color:#FFFFFF; border-radius:var(--bo-radius-card); padding:22px 24px; margin:26px 0; }
.bog4 .bog4-dark-panel h2,
.bog4 .bog4-dark-panel h3 { color:#FFFFFF; margin-top:0; }
.bog4 .bog4-dark-panel p { color:rgba(255,255,255,0.86); }
.bog4 .bog4-watermark { font-family:var(--bo-font-ui); font-size:10px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--bo-credential-gold); }
.bog4 .bog4-related { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:22px 0; }
.bog4 .bog4-share-panel,
.bog4 .bog4-community { background:var(--bo-indigo-panel); border:1px solid var(--bo-indigo-border); border-radius:var(--bo-radius-card); padding:18px 20px; margin:24px 0; }
.bog4 .bog4-community-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:12px 0; }
.bog4 .bog4-community-cta { margin-top:12px; }
.bog4 .bog4-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:90; background:var(--bo-navy); color:#FFFFFF; font-family:var(--bo-font-ui); font-size:13px; font-weight:600; padding:12px 18px; border-radius:var(--bo-radius-control); box-shadow:var(--bo-shadow-menu); }
.bog4 .bog4-actions--bottom { margin-top:18px; }
.bog4 .bog4-btn--dark-outline { background:transparent; border-color:var(--bo-navy); color:var(--bo-navy); }
.bog4 .bog4-btn--dark-outline:hover { background:var(--bo-navy); color:#FFFFFF; }
.bog4 .bog4-seo-meta { font-family:var(--bo-font-ui); font-size:11.5px; color:var(--bo-ink-faint); }
.bog4 .bog4-review-process { background:var(--bo-surface-warm); border:1px solid var(--bo-border-warm); border-radius:var(--bo-radius-card); padding:20px 22px; margin:26px 0; }
.bog4 .bog4-review-process-intro { font-size:15.5px; line-height:1.55; color:var(--bo-ink-muted); margin:0 0 14px; }
.bog4 .bog4-review-process-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.bog4 .bog4-review-process-card { background:var(--bo-surface); border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:15px 17px; }
.bog4 .bog4-review-process-icon { display:block; font-size:20px; margin-bottom:7px; }
.bog4 .bog4-review-process-note { font-family:var(--bo-font-ui); font-size:12px; color:var(--bo-ink-soft); margin-top:12px; }
.bog4 .bog4-v2-methodology { margin:26px 0; }
.bog4 .bog4-v2-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.bog4 .bog4-v2-panel { background:var(--bo-surface); border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:16px 18px; }
.bog4 .bog4-v2-method-list { display:flex; flex-direction:column; gap:9px; }
.bog4 .bog4-v2-method-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-family:var(--bo-font-ui); font-size:13.5px; padding:8px 0; border-bottom:1px solid var(--bo-border-soft); }

/* ==========================================================================
   GUIDES — remaining bon components (12 guides)
   ========================================================================== */
.bo-article__inner .bon-toc-label,
.bo-article__inner .bon-on-page-label,
.bo-article__inner .bon-full-picture-kicker,
.bo-article__inner .bon-news-kicker,
.bo-article__inner .bon-flash-kicker { display:block; font-family:var(--bo-font-ui); font-size:10px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase; color:var(--bo-gold-ink); margin:0 0 7px; }
.bo-article__inner .bon-on-page { background:var(--bo-surface-sunk); border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:16px 20px; margin:24px 0; }
.bo-article__inner .bon-accordion { border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); background:var(--bo-surface); margin:10px 0; overflow:hidden; }
.bo-article__inner .bon-news-flash,
.bo-article__inner .bon-flash { background:var(--bo-surface-warm); border:1px solid var(--bo-border-warm); border-left:3px solid var(--bo-live-green); border-radius:0 var(--bo-radius-card) var(--bo-radius-card) 0; padding:18px 20px; margin:24px 0; }
.bo-article__inner .bon-news-flash-head { margin-bottom:10px; }
.bo-article__inner .bon-news-flash-title,
.bo-article__inner .bon-flash-title { font-family:var(--bo-font-display); font-size:18px; font-weight:800; letter-spacing:-0.014em; color:var(--bo-ink); margin:0 0 8px; }
.bo-article__inner .bon-flash-copy { font-size:15.5px; line-height:1.55; color:var(--bo-ink-muted); margin:0 0 12px; }
.bo-article__inner .bon-news-flash-grid,
.bo-article__inner .bon-flash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.bo-article__inner .bon-news-flash-card,
.bo-article__inner .bon-flash-card { background:var(--bo-surface); border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:14px 16px; }
.bo-article__inner .bon-flash-icon,
.bo-article__inner .bon-news-flash-icon { display:block; font-size:19px; margin-bottom:6px; }
.bo-article__inner .bon-news-flash-label { font-family:var(--bo-font-ui); font-size:10px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; color:var(--bo-ink-soft); }
.bo-article__inner .bon-trust-strip,
.bo-article__inner .bon-news-proof-strip,
.bo-article__inner .bon-verified-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; background:var(--bo-surface-warm); border:1px solid var(--bo-border-warm); border-radius:var(--bo-radius-card); padding:16px 18px; margin:22px 0; }
.bo-article__inner .bon-trust-item { display:grid; grid-template-columns:22px 1fr; column-gap:9px; align-items:center; }
.bo-article__inner .bon-share-row { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }

/* ==========================================================================
   Shared generic components used by several guides
   ========================================================================== */
.bo-article__inner .status-grid,
.bo-article__inner .area-grid,
.bo-article__inner .score-grid,
.bo-article__inner .bestby-grid,
.bo-article__inner .check-grid,
.bo-article__inner .quickgrid,
.bo-article__inner .cards,
.bo-article__inner .fact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:18px 0; }
.bo-article__inner .status-item,
.bo-article__inner .mini-card,
.bo-article__inner .venue-card,
.bo-article__inner .info-box,
.bo-article__inner .guide-card,
.bo-article__inner .compare-card,
.bo-article__inner .quick,
.bo-article__inner .box { background:var(--bo-surface); border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:15px 17px 13px; }
.bo-article__inner .goldbox { background:var(--bo-gold-panel); border:1px solid var(--bo-gold-tint-border); border-radius:var(--bo-radius-card); padding:16px 18px; margin:20px 0; }
.bo-article__inner .venue-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.bo-article__inner .rank-pill,
.bo-article__inner .score-pill,
.bo-article__inner .rating-badge,
.bo-article__inner .medal { display:inline-flex; align-items:center; font-family:var(--bo-font-ui); font-size:10.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; border-radius:var(--bo-radius-pill); padding:4px 10px; background:var(--bo-gold-tint); color:var(--bo-gold-tint-ink); border:1px solid var(--bo-gold-tint-border); }
.bo-article__inner .venue-desc,
.bo-article__inner .desc { font-size:15px; line-height:1.55; color:var(--bo-ink-muted); }
.bo-article__inner .fact { display:grid; grid-template-columns:minmax(100px,30%) 1fr; gap:4px 16px; padding:9px 0; border-bottom:1px solid var(--bo-border-soft); }
.bo-article__inner .fact-label { font-family:var(--bo-font-ui); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--bo-ink-soft); }
.bo-article__inner .fact-value { font-size:15px; color:var(--bo-ink); }
.bo-article__inner .score-breakdown,
.bo-article__inner .score-mini { font-family:var(--bo-font-ui); font-size:13px; color:var(--bo-ink-muted); }
.bo-article__inner .notice,
.bo-article__inner .reader-question { background:var(--bo-surface-warm); border:1px solid var(--bo-border-warm); border-radius:var(--bo-radius-card); padding:15px 18px; margin:20px 0; }
.bo-article__inner .actions { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.bo-article__inner .microcopy { font-family:var(--bo-font-ui); font-size:11.5px; color:var(--bo-ink-soft); }
.bo-article__inner .eyebrow { display:block; font-family:var(--bo-font-ui); font-size:10.5px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase; color:var(--bo-gold-ink); margin:0 0 8px; }
.bo-article__inner .related { margin:24px 0; }

/* The author box arrives from UsersWP with Bootstrap utility classes and no
   stylesheet. Give it the platform's treatment rather than leaving it raw. */
.bo-article__inner .uwp_widget_author_box { display:flex; align-items:center; gap:14px; background:var(--bo-surface-warm); border:1px solid var(--bo-border-warm); border-radius:var(--bo-radius-card); padding:16px 18px; margin:30px 0 0; }
.bo-article__inner .uwp_widget_author_box img { width:56px; height:56px; border-radius:var(--bo-radius-pill); object-fit:cover; flex-shrink:0; }
.bo-article__inner .media-body { min-width:0; font-family:var(--bo-font-ui); font-size:13.5px; line-height:1.5; color:var(--bo-ink-muted); }
.bo-article__inner .media-body h5 { font-family:var(--bo-font-display); font-size:15px; font-weight:800; color:var(--bo-ink); margin:0 0 4px; }


/* ==========================================================================
   DEFECT FIXES — from the full page audit of best-indian-restaurants-dubai
   Each rule below corrects a measured fault, not an impression.
   ========================================================================== */

/* 1. Accordion summaries overflowed horizontally by 9 to 11px because the
      chevron is an absolutely sized pseudo element on a nowrap flex row.
      Let the label wrap and stop the row forcing its own width. */
.bo-article__inner summary {
  gap: 12px;
  padding: 12px 0;
  min-height: var(--bo-hit-target);
  box-sizing: border-box;
}
.bo-article__inner summary > * { min-width: 0; }
.bo-article__inner details,
.bo-article__inner .bestof-faq > details,
.bo-article__inner .bestof-detail,
.bo-article__inner .bestof-source,
.bo-article__inner .bestof-method { overflow: hidden; }

/* 2. Two labels computed at 10.88px, below the 11.5px floor for sentence
      case meta set in the design tokens. Nothing in an article should be
      smaller than that. All caps eyebrows may go to 9px, and are exempt. */
.bo-article__inner .bestof-score > span,
.bo-article__inner .bestof-detail summary small,
.bo-article__inner small { font-size: 11.5px; }

/* 3. The author avatar is missing, so UsersWP serves its own placeholder
      which renders as a broken image. Give it an honest neutral field
      rather than a broken icon under every guide. */
.bo-article__inner .uwp_widget_author_box img {
  background: var(--bo-neutral-tint);
  border: 1px solid var(--bo-border);
}

/* 4. The relocated related-posts block now sits last. Separate it from the
      article so it reads as a footer rather than a continuation. */
.bo-article__inner .elementor > .e-con:last-child:not(:first-child) {
  border-top: 1px solid var(--bo-border);
  margin-top: 40px;
  padding-top: 28px;
}

/* 5. Base classes I styled only as variants, present on 43 guides each. */
.bog4 .bog4-triad { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:22px 0; }
.bog4 .bog4-mini-card { background:var(--bo-surface); border:1px solid var(--bo-border); border-radius:var(--bo-radius-card); padding:15px 17px; }
.bog4 .bog4-related-guides { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:22px 0; }
.bog4 .bog4-related-arrow { color:var(--bo-ink-faint); }
.bo-article__inner .bestof-wrap,
.bo-article__inner .bestof-shell { display:block; }
.bo-article__inner .link-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:16px 0; }
.bo-article__inner .community { background:var(--bo-indigo-panel); border:1px solid var(--bo-indigo-border); border-radius:var(--bo-radius-card); padding:18px 20px; margin:24px 0; }
.bo-article__inner .featured { border-left:3px solid var(--bo-credential-gold); }
.bo-article__inner .full { grid-column: 1 / -1; }

/* 6. Guides run long. Give every section a predictable rhythm so the page
      does not drift as it descends. */
.bo-article__inner .bestof-section + .bestof-section { margin-top: 44px; }
.bo-article__inner h2 { scroll-margin-top: 88px; }
.bo-article__inner h3 { scroll-margin-top: 88px; }


/* --------------------------------------------------------------------------
   Accordion chevron: take it out of flow entirely.

   The overflow was my own doing. The chevron is a pseudo element inside a
   flex row, so it ADDS to the summary's scroll width. On guides whose own
   embedded stylesheet sets the summary padding with an ID selector, my
   padding never applies and the chevron has nowhere to sit, producing a 9
   to 11px overflow on every accordion header.

   Absolute positioning removes it from the flow, and the reserved padding
   is applied with !important so it survives the page level ID selectors.
   79 of 114 guides carry those embedded blocks, so this is not local.
   -------------------------------------------------------------------------- */
.bo-article__inner summary {
  position: relative;
  padding-right: 30px !important;
}
.bo-article__inner summary::after {
  position: absolute;
  right: 6px;
  top: 50%;
  margin-left: 0;
  transform: translateY(-70%) rotate(45deg);
}
.bo-article__inner details[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.bo-article__inner .bestof-faq > details[open] > summary::after,
.bo-article__inner .bestof-detail[open] > summary::after,
.bo-article__inner .bestof-source[open] > summary::after,
.bo-article__inner .bestof-method[open] > summary::after,
.bog4 .bog4-faq details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}


/* --------------------------------------------------------------------------
   Two faults measured on the nurseries guide. Both are in the bogl- family,
   which appears on 113 of 114 guides, so both fixes are global.
   -------------------------------------------------------------------------- */

/* A. The "Join the conversation" button rendered 42px wide, one character
      per line. My earlier two column fix assumed the panel had two children.
      It has three: icon, copy, button. The button was landing in the 42px
      icon column. Place any child after the copy on its own full width row. */
.bo-article__inner .bogl-context > *:nth-child(n+3) {
  grid-column: 2 / -1;
  justify-self: start;
}
.bo-article__inner .bogl-context .bogl-button,
.bo-article__inner .bogl-guide-next .bogl-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  min-width: 0;
  white-space: nowrap;
  min-height: var(--bo-hit-target);
  padding: 0 16px;
  border-radius: var(--bo-radius-control);
  font-family: var(--bo-font-ui);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.bo-article__inner .bogl-button--primary {
  background: var(--bo-action-gold);
  border: 1px solid var(--bo-action-gold);
  color: var(--bo-ink);
  font-family: var(--bo-font-display);
  font-weight: 800;
}
.bo-article__inner .bogl-button--primary:hover { background: var(--bo-action-gold-hover); }
.bo-article__inner .bogl-button--secondary {
  background: var(--bo-surface);
  border: 1px solid var(--bo-border);
  color: var(--bo-ink);
}
.bo-article__inner .bogl-button--secondary:hover { border-color: var(--bo-action-gold); }
.bo-article__inner .bogl-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* B. A broken image leaves a "BEST OF" fallback that rendered 37px wide and
      150px tall, a thin vertical strip of letters. Give it the full width of
      its container and treat it as an honest placeholder. */
.bo-article__inner .has-media-error { display: block; }
.bo-article__inner .bogl-media-fallback {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 150px;
  background: var(--bo-neutral-tint);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-card);
  font-family: var(--bo-font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bo-ink-faint);
  white-space: nowrap;
}

/* C. The guide-next aside carried a 52px top margin against an 18px bottom,
      which read as a hole above it. Even it out. */
.bo-article__inner .bogl-guide-next {
  margin: 34px 0 0;
  background: var(--bo-surface-warm);
  border: 1px solid var(--bo-border-warm);
  border-radius: var(--bo-radius-card);
  padding: 18px 20px;
}


/* --------------------------------------------------------------------------
   Correction: the media fallback I sized as a 150px article placeholder is
   actually the AUTHOR AVATAR inside the author box, shown because the profile
   has no picture. A 150px block there is wrong. It should be a 56px circle
   matching the avatar it replaces, showing the author's initial rather than
   the word BEST OF stacked vertically.
   -------------------------------------------------------------------------- */
.bo-article__inner .uwp_widget_author_box .bogl-media-fallback,
.bo-article__inner .uwp_widget_author_box .has-media-error .bogl-media-fallback {
  width: 56px !important;
  height: 56px !important;
  min-height: 0 !important;
  flex: 0 0 56px;
  border-radius: var(--bo-radius-pill);
  font-size: 0 !important;
  letter-spacing: 0 !important;
  overflow: hidden;
  background: var(--bo-neutral-tint);
  border: 1px solid var(--bo-border);
}
.bo-article__inner .uwp_widget_author_box .bogl-media-fallback::before {
  content: '♛';
  font-size: 20px;
  line-height: 1;
  color: var(--bo-credential-gold);
}
.bo-article__inner .uwp_widget_author_box .has-media-error {
  flex: 0 0 auto;
  width: auto;
}


/* --------------------------------------------------------------------------
   Dead space at the top of every guide.

   Measured from the header's lower edge to the first word: 119px, spent on
   four stacked spacers that each looked reasonable alone.
     40px  the article's own top padding
     40px  the Elementor container's top margin
     28px  the Elementor container's top padding
     10px  its inner wrapper's top padding

   The page needs one gap, not four. Collapse the Elementor container's
   spacing and let the article's padding be the only one that counts.
   -------------------------------------------------------------------------- */
.bo-article__inner { padding-top: 30px; }
.bo-article__inner > .elementor > .e-con:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.bo-article__inner > .elementor > .e-con:first-child > .e-con-inner {
  padding-top: 0 !important;
}
.bo-article__inner > .elementor > .e-con:first-child > .e-con-inner > *:first-child {
  margin-top: 0;
}
.bo-article__inner > *:first-child { margin-top: 0; }


/* ==========================================================================
   BRAND MARK — replace the retired crown with the current BEST OF icon.

   The old crown ships as best-of-current-crown-icon-gold-transparent-128.png,
   referenced inside the article content itself across the guides. Rewriting
   129 articles to change it would be slow and risky, so the image is swapped
   at render instead: same markup, same alt text, new artwork.

   ⚠ THE PRIOR VERSION OF THIS COMMENT WAS WRONG, AND SO WAS THE ARTWORK IT
   DESCRIBED. It claimed the gold-chevron-over-navy-podium shape (the crown)
   was "identical geometry to the wordmark in the site header" — it was not;
   the real header mark is the bookmark-and-star (assets/img/bestof-icon.svg),
   and this rule was re-injecting the OLD, retired mark into all 129 articles
   while believing it was the fix. Corrected: same technique (a data URI, no
   upload, no 404, no extra request), the actual current mark.
   ========================================================================== */
.bo-article__inner img[src*="crown"],
.bo-article__inner img[src*="Crown"],
.bo-article__inner img[src*="CROWN"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 4 88 91.5'%3E%3Cg transform='translate(6,4) scale(3.667)'%3E%3Cpath d='M5.6 2.2h12.8a1.9 1.9 0 0 1 1.9 1.9v17.05a0.75 0.75 0 0 1-1.18 0.61L12 17.05l-7.12 4.71A0.75 0.75 0 0 1 3.7 21.15V4.1a1.9 1.9 0 0 1 1.9-1.9Z' fill='%23080C0F'/%3E%3Cpath d='M12 5.15l1.53 3.24 3.55.36-2.65 2.4.75 3.5L12 12.83l-3.18 1.82.75-3.5-2.65-2.4 3.55-.36Z' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
  object-fit: contain;
}

/* The kicker mark sits on the eyebrow line. */
.bo-article__inner .bog4-kicker img[src*="crown"],
.bo-article__inner .bon-eyebrow img[src*="crown"],
.bo-article__inner .bestof-eyebrow img[src*="crown"] {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin-right: 7px;
}

/* The trust row mark sits inside a fixed 22px column. */
.bo-article__inner .bog4-trust-icon img[src*="crown"],
.bo-article__inner .bon-trust-item img[src*="crown"] {
  width: 18px;
  height: 18px;
  display: block;
}

/* The author box placeholder used the retired crown glyph. Use the mark. */
.bo-article__inner .uwp_widget_author_box .bogl-media-fallback::before {
  content: '';
  width: 26px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 4 88 91.5'%3E%3Cg transform='translate(6,4) scale(3.667)'%3E%3Cpath d='M5.6 2.2h12.8a1.9 1.9 0 0 1 1.9 1.9v17.05a0.75 0.75 0 0 1-1.18 0.61L12 17.05l-7.12 4.71A0.75 0.75 0 0 1 3.7 21.15V4.1a1.9 1.9 0 0 1 1.9-1.9Z' fill='%23080C0F'/%3E%3Cpath d='M12 5.15l1.53 3.24 3.55.36-2.65 2.4.75 3.5L12 12.83l-3.18 1.82.75-3.5-2.65-2.4 3.55-.36Z' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* ==========================================================================
   ARTICLE OPENING — measured faults at the top of every guide

   1. The brand mark sat on its own line above the eyebrow, because the img
      was display:block inside a block container. It belongs ON the line.
   2. The headline carried a 40px top margin against a mark that had just
      been pushed away, doubling the gap.
   3. The trust panel laid four items into three columns, leaving one orphan
      on a second row with a ragged right edge. Four items want two by two.
   4. Trust icons were vertically centred against two lines of text, so the
      tick and the mark floated between the label and its caption.
   ========================================================================== */

/* 1. Mark and eyebrow on one line. */
.bo-article__inner .bog4-kicker,
.bo-article__inner .bon-eyebrow,
.bo-article__inner .bestof-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.bo-article__inner .bog4-kicker img,
.bo-article__inner .bon-eyebrow img,
.bo-article__inner .bestof-eyebrow img {
  display: block !important;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: baseline;
}
.bo-article__inner .bog4-kicker > span,
.bo-article__inner .bog4-kicker > a { line-height: 1.2; }

/* 2. The opening headline should sit tight under the eyebrow. Only the
      FIRST heading in the article loses its top margin. */
.bo-article__inner .bog4-intro h2:first-of-type,
.bo-article__inner .bestof-guide > *:first-child h2,
.bo-article__inner .elementor .bog4 > *:first-child h2 {
  margin-top: 0 !important;
}

/* 3. Four trust items become two by two rather than three plus an orphan. */
.bo-article__inner .bog4-trust,
.bo-article__inner .bon-trust-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  padding: 18px 20px;
  margin: 24px 0;
}
@media (max-width: 620px) {
  .bo-article__inner .bog4-trust,
  .bo-article__inner .bon-trust-strip { grid-template-columns: 1fr; }
}

/* 4. Icons align to the first line of the label, not to the block centre. */
.bo-article__inner .bog4-trust-item,
.bo-article__inner .bon-trust-item {
  align-items: start;
  column-gap: 10px;
}
.bo-article__inner .bog4-trust-icon,
.bo-article__inner .bon-trust-item > span:first-child {
  align-self: start;
  margin-top: 1px;
  line-height: 1.2;
  font-size: 14px;
}
.bo-article__inner .bog4-trust-item b { line-height: 1.35; }
.bo-article__inner .bog4-trust-item > span:last-child { margin-top: 2px; }

/* 5. The standfirst was set at 18px serif, larger than the body it leads
      into. Bring it to a lead size that still reads as an introduction. */
.bo-article__inner .bog4-intro > p:first-of-type,
.bo-article__inner .bog4-lead,
.bo-article__inner .bestof-section-lead {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 20px;
}


/* ==========================================================================
   CORRECTION — section wrappers are not card grids.

   I made .bog4-related-guides a grid. It is a SECTION wrapper: its children
   are its own eyebrow, heading and intro, plus .bog4-triad which holds the
   actual cards. Making the wrapper a grid laid the heading and the intro out
   as columns, pushing the headline into the right column with its own intro
   stranded on the left, and left the cards stacked vertically inside a 312px
   cell.

   The wrapper flows normally. The TRIAD is the grid.
   ========================================================================== */
.bog4 .bog4-related-guides,
.bog4 .bog4-related,
.bog4 .bog4-more,
.bog4 .bog4-community,
.bog4 .bog4-review-process {
  display: block;
}

/* The card row. Three across on desktop, wrapping down gracefully. */
.bog4 .bog4-triad,
.bog4 .bog4-related-guides .bog4-triad,
.bog4 .bog4-related > .bog4-triad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  align-items: stretch;
}

/* Cards fill their cell and align their buttons to a common baseline, so a
   row of cards with different amounts of copy still reads as a row. */
.bog4 .bog4-triad > * {
  display: flex;
  flex-direction: column;
  background: var(--bo-surface);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-card);
  padding: 18px 18px 16px;
  text-decoration: none;
  color: var(--bo-ink);
  transition: border-color var(--bo-transition), box-shadow var(--bo-transition);
}
.bog4 .bog4-triad > *:hover {
  border-color: var(--bo-action-gold);
  box-shadow: var(--bo-shadow-card-hover);
}
.bog4 .bog4-triad h3,
.bog4 .bog4-triad strong {
  font-family: var(--bo-font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--bo-ink);
  margin: 10px 0 8px;
}
.bog4 .bog4-triad p {
  font-family: var(--bo-font-ui);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bo-ink-muted);
  margin: 0 0 14px;
}
/* The card's leading emoji or mark. */
.bog4 .bog4-triad > * > span:first-child,
.bog4 .bog4-triad > * > i:first-child { font-size: 22px; line-height: 1; }

/* Buttons inside cards sit at the bottom, full width, at a sane size.
   They were rendering as oversized gold slabs taller than the copy. */
.bog4 .bog4-triad .bog4-btn,
.bog4 .bog4-related-guides .bog4-btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  min-height: var(--bo-hit-target);
  font-size: 13px;
  box-shadow: none;
}

/* The related section's own heading and intro flow normally above the row. */
.bog4 .bog4-related-guides > .bog4-intro-copy,
.bog4 .bog4-related > .bog4-intro-copy {
  font-size: 16px;
  line-height: 1.55;
  color: var(--bo-ink-muted);
  margin: 0 0 4px;
  max-width: 62ch;
}


/* ==========================================================================
   ROOT CAUSE — the guides were being rendered in their own MOBILE layout.

   Aimee's embedded stylesheets carry breakpoints written for a full width
   page, for example:
     @media (max-width:700px){ .bog4-related-guides .bog4-triad{
       grid-template-columns:1fr !important } }

   The reading column was 760px, so the inner container measured 636px and
   every one of those mobile rules fired on desktop. That is why component
   rows kept stacking vertically when they should sit side by side. It was
   never the components: it was the column being narrower than the
   breakpoints they were designed against.

   Fixing the column fixes the whole class of fault across all 114 guides,
   rather than overriding each media query one at a time.

   Prose still needs a comfortable measure, so the reading width is applied
   to text rather than to the container.
   ========================================================================== */
.bo-article__inner { max-width: 1040px; }

/* Keep running prose to a readable line length inside the wider column. */
.bo-article__inner .bog4 > p,
.bo-article__inner .bog4-section > p,
.bo-article__inner .bog4-intro > p,
.bo-article__inner .bestof-section > p,
.bo-article__inner .bestof-guide > p,
.bo-article__inner .bog4-lead,
.bo-article__inner .bog4-intro-copy,
.bo-article__inner .bestof-section-lead { max-width: 68ch; }

/* Headings can run a little wider than body copy but should not span 1040px. */
.bo-article__inner .bog4 > h2,
.bo-article__inner .bog4-section > h2,
.bo-article__inner .bestof-section > h2 { max-width: 24ch; }

/* --------------------------------------------------------------------------
   CORRECTION — bog4-triad is used for two different things.

   Inside a related-guides section it holds three small link cards.
   Directly inside .bog4 it holds full content panels with their own
   headings and lists. My blanket card styling squeezed the second kind into
   221px columns. Card treatment now applies only to the first kind.
   -------------------------------------------------------------------------- */
.bog4 > .bog4-triad > * {
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.bog4 > .bog4-triad > *:hover { border-color: transparent; box-shadow: none; }
.bog4 > .bog4-triad {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  align-items: start;
}
.bog4 > .bog4-triad h2 { margin-top: 0 !important; font-size: 19px; }
.bog4 > .bog4-triad > * > h2 + * { margin-top: 10px; }

/* ==========================================================================
   ARTICLE FURNITURE + ARCHIVES
   Added when single.php and index.php were rewritten. The 129 imported guides
   rendered with no headline and no date, and every archive was a list of bare
   links; these style the markup that fixes both.
   ========================================================================== */

.bo-article__head {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--bo-gutter) 0;
}

.bo-article__kicker {
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bo-gold-ink);
  margin: 0 0 10px;
}

.bo-article__title {
  font-family: var(--bo-font-display);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--bo-ink);
  margin: 0 0 14px;
  text-wrap: balance;
}

.bo-article__meta {
  font-family: var(--bo-font-ui);
  font-size: 13px;
  color: var(--bo-ink-soft);
  margin: 0;
}

.bo-article__meta-sep { margin: 0 7px; }

.bo-article__lead {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 0 var(--bo-gutter);
}

.bo-article__lead-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--bo-radius-card);
}

.bo-article__lead-caption {
  font-family: var(--bo-font-ui);
  font-size: 12px;
  color: var(--bo-ink-soft);
  margin: 8px 0 0;
}

/* The article body sits directly under the furniture, so its own top padding
   would double the gap. */
.bo-article__head + .bo-article__inner,
.bo-article__lead + .bo-article__inner { padding-top: 28px; }

/* --- archives ----------------------------------------------------------- */

.bo-archive {
  max-width: var(--bo-content-width, 860px);
  margin: 0 auto;
  padding: 48px var(--bo-gutter) 80px;
}

.bo-archive__title {
  font-family: var(--bo-font-display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--bo-ink);
  margin: 0 0 10px;
  text-wrap: balance;
}

.bo-archive__standfirst {
  font-family: var(--bo-font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--bo-ink-muted);
  margin: 0 0 8px;
  max-width: 68ch;
}

.bo-archive__count {
  font-family: var(--bo-font-ui);
  font-size: 13px;
  color: var(--bo-ink-soft);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.bo-archive__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.bo-archive__item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--bo-border-soft);
}

.bo-archive__item:last-child { border-bottom: 1px solid var(--bo-border-soft); }

/* No thumbnail, no empty column. */
.bo-archive__item:not(:has(.bo-archive__thumb)) { grid-template-columns: 1fr; }

.bo-archive__thumb img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  display: block;
  border-radius: var(--bo-radius-card);
}

.bo-archive__item-title {
  font-family: var(--bo-font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.28;
  margin: 0 0 5px;
  text-wrap: balance;
}

.bo-archive__item-title a {
  color: var(--bo-ink);
  text-decoration: none;
}

.bo-archive__item-title a:hover { color: var(--bo-gold-ink); }

.bo-archive__item-meta {
  font-family: var(--bo-font-ui);
  font-size: 12px;
  color: var(--bo-ink-soft);
  margin: 0 0 6px;
}

.bo-archive__item-standfirst {
  font-family: var(--bo-font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bo-ink-muted);
  margin: 0;
  max-width: 68ch;
}

.bo-archive__empty {
  font-family: var(--bo-font-serif);
  font-size: 17px;
  color: var(--bo-ink-muted);
}

.bo-archive__pagination {
  margin-top: 36px;
  font-family: var(--bo-font-ui);
  font-size: 14px;
}

.bo-archive__pagination a { color: var(--bo-gold-ink); }

@media (max-width: 560px) {
  .bo-archive__item { grid-template-columns: 60px 1fr; gap: 14px; }
  .bo-archive__thumb img { width: 60px; height: 60px; }
}

/* --- guide trust signal --------------------------------------------------
   Ported from newsy/views/post/meta-style-1.php, which rendered these classes
   and which NOTHING styled — the badge inherited newsy's meta styling. So this
   is new CSS for old markup, written to sit in the platform palette rather than
   to reproduce a look that was never designed.
   ------------------------------------------------------------------------- */

.bo-article__byline {
  font-family: var(--bo-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--bo-ink);
  margin: 0 0 6px;
}

.bo-article__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--bo-gold-ink);
  font-weight: 700;
}

.bo-article__verified-icon { font-size: 14px; line-height: 1; }

/* --- My Picks button -----------------------------------------------------
   PORTED FROM THE CUSTOMISER, DELIBERATELY.

   This lived in WordPress's Customiser "Additional CSS", which is stored PER
   THEME. It styled 14 buttons inside a single guide, and switching theme would
   have left every one of them unstyled — worse than absent. Here it is
   theme-independent and in version control.

   Ported faithfully: the gradient, radius and shadow are unchanged, so nothing
   moves visually. Two notes for whoever changes it next.

   1 The original set white text on this gold. That is roughly 2.3:1 and fails
     WCAG AA, which is why the original also carried a text-shadow to cope. The
     shadow is preserved here rather than silently redesigned — the fix is a
     decision, not a tidy-up, and it is flagged rather than taken.
   2 It used !important throughout to outrank newsy. Those are dropped: there is
     no longer a theme to fight, and keeping them would only make this rule
     unoverridable for no reason.

   ⛔⛔ THE a[href*='/my-picks/'] HALF OF THIS SELECTOR IS REMOVED — Mark, 15
   Sep 2026: "amber renders in the left rail's own 'My Picks' row, which
   claims a status (the reader's own saved act) a plain nav row does not
   have." Root-caused: class-bog-rail.php's real nav row links to the same
   /my-picks/ page (self::page_url('my-picks', ...)) but carries none of
   this button's classes — `bo-rail-row`, nothing else — so the ONLY reason
   it ever picked up this gold treatment was the attribute selector
   matching ANY link whose href contains the string, not just this button.
   The "14 buttons inside a single guide" this was ported to catch no
   longer exist as real content — checked directly: 0 real published posts
   embed a raw, classless /my-picks/ link today (one stray post, 2692, has
   this very CSS block pasted into its own body as text, not a real link).
   The floating button itself (footer.php) has always carried
   .bog4-my-picks-link directly, so it loses nothing here. ------------- */

.bog4-my-picks-link {
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, #f1cf67 0%, #c99525 50%, #a87512 100%);
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(70, 45, 5, .38), 0 0 0 3px rgba(214, 173, 59, .22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  text-decoration: none;
  min-height: var(--bo-hit-target, 44px);
}

.bog4-my-picks-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(70, 45, 5, .44), 0 0 0 3px rgba(214, 173, 59, .3);
}

.bog4-my-picks-link:focus-visible {
  outline: 3px solid var(--bo-ink);
  outline-offset: 2px;
}

/* The floating variant. The base button styling is the ported rule above; this
   only positions it. Sits clear of the mobile tab bar where one exists. */
.bo-my-picks-float {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 900;
}

/* ⛔⛔ FOUND 15 Sep 2026, MARK'S OWN MOBILE SWEEP: at 390px this covered a
   real portion of BOTH the Post and Me tab-bar buttons — measured live,
   the button's own box (bottom 24px, height ~47px) overlapped the tab
   bar's real box by up to 36.5px vertically. Two bugs stacked: (1) this
   rule's own breakpoint (768px) did not match the tab bar's real one
   (chrome.css, 900px — see "MOBILE — tab bar" there), so between 769px
   and 900px the button used the bare 24px offset with no tab-bar
   awareness at all; (2) even below 768px, the only adjustment was for
   env(safe-area-inset-bottom) — the tab bar's own height was never
   accounted for. Fixed by matching the SAME breakpoint and reusing the
   SAME clearance chrome.css's own `body { padding-bottom: 92px; }`
   already establishes for exactly this bar — "so the last card is never
   trapped underneath it" is the identical problem this button had. */
@media (max-width: 900px) {
  .bo-my-picks-float { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .bog4-my-picks-link { transition: none; }
  .bog4-my-picks-link:hover { transform: none; }
}

/* ==========================================================================
   IMPORTED GUIDE STRUCTURE

   The 129 guides carry NO class attributes — every styling hook was lost
   before import, which orphaned the 51 classes their embedded CSS still
   styles. That embedded CSS is therefore INERT: it targets classes that are
   not in the document. What survives is good semantic markup with nothing
   pointing at it.

   SELECTOR DISCIPLINE. The first version of this block used
   "section:has(> b)" for the meta strip. That matched TWENTY sections, not
   one — every restaurant entry contains a bold "Area:" label — and turned
   fifteen article bodies into flex rows. Counted against the live DOM this
   time, before writing a rule:

       31  section                                       all
        1  section:has(> b:first-child) with no h2/h3/p  the meta strip
       15  section[id]                                   restaurant entries
        3  section with a > em                           comparison lists
       75  a[target=_blank][rel~=nofollow]               official links
       34  a:has(> strong):has(> em)                     comparison cards

   No content is modified. Deleting this block reverts everything.
   ========================================================================== */

/* --- the meta strip: reviewed by / published / last verified ------------- */

.bo-article__inner section:has(> b:first-child):not(:has(h2)):not(:has(h3)):not(:has(p)) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 0;
  padding: 16px 20px;
  margin: 26px 0;
  background: var(--bo-surface-warm, #FAF7F1);
  border: 1px solid var(--bo-border-soft);
  border-radius: var(--bo-radius-card);
  font-family: var(--bo-font-ui);
  font-size: 14px;
  color: var(--bo-ink-muted);
}

.bo-article__inner section:has(> b:first-child):not(:has(h2)):not(:has(h3)):not(:has(p)) > b {
  color: var(--bo-ink);
  font-weight: 700;
}

.bo-article__inner section:has(> b:first-child):not(:has(h2)):not(:has(h3)):not(:has(p)) > b::after {
  content: "\00a0";
}

.bo-article__inner section:has(> b:first-child):not(:has(h2)):not(:has(h3)):not(:has(p)) > b:not(:first-child) {
  margin-left: 22px;
  padding-left: 22px;
  border-left: 1px solid var(--bo-border-soft);
}

/* --- restaurant entries -------------------------------------------------- */

/* Each opens with a bare text node — the rank line — which no selector can
   reach. Shrinking the SECTION's inherited type turns that loose text into an
   eyebrow, and the real elements below restore their own size. Styling what a
   text node inherits from is the only way to style a text node. */
.bo-article__inner section[id] {
  display: block;
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bo-ink-soft);
  padding: 26px 26px 22px;
  margin: 26px 0;
  background: var(--bo-surface);
  border: 1px solid var(--bo-border-soft);
  border-radius: var(--bo-radius-card);
}

/* The score. A chip, because it is the one number a reader compares across
   fifteen entries. */
.bo-article__inner section[id] > strong {
  display: inline-block;
  margin: 0 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bo-gold-tint);
  color: var(--bo-gold-ink-deep);
  font-family: var(--bo-font-ui);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Restore real typography to the real elements. */
.bo-article__inner section[id] > h2 {
  font-family: var(--bo-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--bo-ink);
  margin: 10px 0 4px;
  text-wrap: balance;
}

.bo-article__inner section[id] > h3 {
  font-family: var(--bo-font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--bo-gold-ink);
  margin: 0 0 14px;
}

.bo-article__inner section[id] > p {
  font-family: var(--bo-font-serif);
  font-size: 16.5px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.6;
  color: var(--bo-ink-muted);
  margin: 0 0 12px;
}

/* A label opening its own paragraph. */
.bo-article__inner section[id] > p > strong:first-child {
  font-family: var(--bo-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--bo-ink);
}

/* --- fact panels: Area Planner, Best By, Checklist ----------------------- */

/* An h2 followed by bold label plus loose text pairs. Making the label a block
   turns a run-on paragraph into a definition list without touching content. */
.bo-article__inner section:not([id]):has(> h2):has(> b) {
  padding: 24px 26px;
  margin: 26px 0;
  background: var(--bo-gold-panel, #FFFBF2);
  border: 1px solid var(--bo-border-soft);
  border-radius: var(--bo-radius-card);
  font-family: var(--bo-font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bo-ink-muted);
}

.bo-article__inner section:not([id]):has(> h2):has(> b) > h2 {
  margin-top: 0;
}

.bo-article__inner section:not([id]):has(> h2):has(> b) > b {
  display: block;
  margin: 16px 0 2px;
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bo-gold-ink);
}

/* --- official links: pills, not five links sharing an underline ---------- */

.bo-article__inner a[target="_blank"][rel~="nofollow"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px 8px 0;
  padding: 9px 15px;
  border: 1px solid var(--bo-border);
  border-radius: 999px;
  background: var(--bo-surface);
  color: var(--bo-ink);
  font-family: var(--bo-font-ui);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--bo-transition, all .15s ease);
}

.bo-article__inner a[target="_blank"][rel~="nofollow"]:hover {
  border-color: var(--bo-action-gold);
  background: var(--bo-gold-tint);
  color: var(--bo-gold-ink-deep);
}

.bo-article__inner a[target="_blank"][rel~="nofollow"]:focus-visible {
  outline: 3px solid var(--bo-action-gold);
  outline-offset: 2px;
}

/* --- comparison cards ---------------------------------------------------- */

.bo-article__inner a:has(> strong):has(> em) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--bo-border-soft);
  border-radius: var(--bo-radius-card);
  background: var(--bo-surface);
  text-decoration: none;
  color: var(--bo-ink);
  transition: var(--bo-transition, all .15s ease);
}

.bo-article__inner a:has(> strong):has(> em):hover {
  border-color: var(--bo-action-gold);
  background: var(--bo-gold-tint);
}

.bo-article__inner a:has(> strong):has(> em):focus-visible {
  outline: 3px solid var(--bo-action-gold);
  outline-offset: 2px;
}

.bo-article__inner a:has(> strong):has(> em) > strong {
  font-family: var(--bo-font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bo-ink);
}

/* Upright, not italic: it is a label, and a column of italics is harder to
   scan rather than more emphatic. Takes the remaining width so the score is
   pushed to the end of the row. */
.bo-article__inner a:has(> strong):has(> em) > em {
  flex: 1 1 240px;
  font-style: normal;
  font-family: var(--bo-font-ui);
  font-size: 14px;
  color: var(--bo-ink-muted);
}

.bo-article__inner a:has(> strong):has(> em) > small {
  font-family: var(--bo-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bo-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- the crown mark ------------------------------------------------------
   TOKEN LOCK 2 says credential gold is for marks, badges and the logo, and
   action gold is for things you DO. The crown is a mark, so it takes
   credential gold — but only the GLYPH. #FABD12 as text on white is around
   1.9:1 and would be unreadable, so the words stay in gold ink.
   ------------------------------------------------------------------------- */

.bo-article__verified-icon {
  color: var(--bo-credential-gold);
}

@media (max-width: 560px) {
  .bo-article__inner section:has(> b:first-child):not(:has(h2)):not(:has(h3)):not(:has(p)) > b:not(:first-child) {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    flex-basis: 100%;
    margin-top: 8px;
  }

  .bo-article__inner section[id],
  .bo-article__inner section:not([id]):has(> h2):has(> b) {
    padding: 20px 18px;
  }
}

/* The breadcrumb line that opens an imported guide. Wrapped at render time by
   bestof_wrap_guide_eyebrow(); see the note there for why it is not a heading. */
.bo-article__inner .bo-article__eyebrow-line {
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bo-gold-ink);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bo-border-soft);
}

/* ==========================================================================
   GUIDE SECTION SYSTEM

   A pass over every section type in an imported guide, rather than the one or
   two that looked worst. Surveyed against the live DOM first — sixteen
   non-entry sections, catalogued by their children — so this covers the set
   instead of the sample.

   The restraint that shapes all of it: gold is an ACCENT, not a background.
   Four consecutive gold-washed panels read as decoration and stop meaning
   anything, so the fact panels lose the wash and keep a gold rule and gold
   labels. Colour marks what matters; it does not fill space.
   ========================================================================== */

/* --- section kickers -----------------------------------------------------
   "Fast comparison", "Decision helper", "Continue exploring". Loose text
   nodes before each h2, wrapped at render time by bestof_wrap_guide_eyebrow().
   ------------------------------------------------------------------------- */

.bo-article__inner .bo-section-kicker {
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bo-ink-soft);
  margin: 0 0 4px;
}

.bo-article__inner .bo-section-kicker + h2 {
  margin-top: 0;
}

/* --- section rhythm ------------------------------------------------------ */

.bo-article__inner > section {
  margin: 40px 0;
}

/* --- fact panels: Area Planner, Best By, Checklist, Honest Caveats -------
   Was a full gold wash on four consecutive sections. Now a neutral surface
   with a gold rule down the edge: the same grouping, a quarter of the noise.
   ------------------------------------------------------------------------- */

.bo-article__inner section:not([id]):has(> h2):has(> b) {
  padding: 22px 26px;
  background: var(--bo-surface-sunk, #FAFAF8);
  border: 1px solid var(--bo-border-soft);
  border-left: 3px solid var(--bo-action-gold);
  border-radius: var(--bo-radius-card);
  font-family: var(--bo-font-serif);
  font-size: 16px;
  line-height: 1.62;
  color: var(--bo-ink-muted);
}

.bo-article__inner section:not([id]):has(> h2):has(> b) > h2 {
  margin-top: 0;
  font-size: 21px;
}

/* Each label opens its own row. The value is a loose text node that follows,
   so the label is the only thing there is to style. */
.bo-article__inner section:not([id]):has(> h2):has(> b) > b {
  display: block;
  margin: 18px 0 1px;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bo-gold-ink);
}

/* --- guide link cards: "More Dubai Restaurant Guides to Try Next" --------
   <a><b>🥩 Best Steak Restaurants →</b>Premium beef, views…</a>
   Four of these rendered as one underlined paragraph.
   ------------------------------------------------------------------------- */

.bo-article__inner section:not([id]) > a:has(> b) {
  display: block;
  margin: 0 0 8px;
  padding: 16px 18px;
  border: 1px solid var(--bo-border-soft);
  border-radius: var(--bo-radius-card);
  background: var(--bo-surface);
  text-decoration: none;
  color: var(--bo-ink-muted);
  font-family: var(--bo-font-serif);
  font-size: 15px;
  line-height: 1.5;
  transition: var(--bo-transition, all .15s ease);
}

.bo-article__inner section:not([id]) > a:has(> b):hover {
  border-color: var(--bo-action-gold);
  background: var(--bo-gold-tint);
}

.bo-article__inner section:not([id]) > a:has(> b):focus-visible {
  outline: 3px solid var(--bo-action-gold);
  outline-offset: 2px;
}

.bo-article__inner section:not([id]) > a:has(> b) > b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--bo-font-display);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bo-ink);
}

/* --- FAQ accordion ------------------------------------------------------- */

.bo-article__inner details {
  border: 1px solid var(--bo-border-soft);
  border-radius: var(--bo-radius-card);
  background: var(--bo-surface);
  margin: 0 0 8px;
  overflow: hidden;
}

.bo-article__inner details > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 46px 15px 18px;
  position: relative;
  font-family: var(--bo-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--bo-ink);
}

.bo-article__inner details > summary::-webkit-details-marker { display: none; }

/* A chevron drawn in CSS rather than an entity, so it can rotate. */
.bo-article__inner details > summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--bo-gold-ink);
  border-bottom: 2px solid var(--bo-gold-ink);
  transform: rotate(45deg);
  transition: transform .18s ease;
}

.bo-article__inner details[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.bo-article__inner details > summary:hover { background: var(--bo-gold-tint); }

.bo-article__inner details > summary:focus-visible {
  outline: 3px solid var(--bo-action-gold);
  outline-offset: -3px;
}

.bo-article__inner details > p {
  margin: 0;
  padding: 0 18px 16px;
  font-family: var(--bo-font-serif);
  font-size: 16px;
  line-height: 1.62;
  color: var(--bo-ink-muted);
}

/* --- the share row ------------------------------------------------------
   Three <button>s and two <a>s, no classes between them, so the buttons
   rendered as operating-system chrome next to underlined links. They do the
   same job and now look like it.
   ------------------------------------------------------------------------- */

.bo-article__inner section:not([id]):has(> button) > a,
.bo-article__inner section:not([id]):has(> button) > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px 8px 0;
  padding: 10px 16px;
  min-height: var(--bo-hit-target, 44px);
  border: 1px solid var(--bo-border);
  border-radius: 999px;
  background: var(--bo-surface);
  color: var(--bo-ink);
  font-family: var(--bo-font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: var(--bo-transition, all .15s ease);
}

.bo-article__inner section:not([id]):has(> button) > a:hover,
.bo-article__inner section:not([id]):has(> button) > button:hover {
  border-color: var(--bo-action-gold);
  background: var(--bo-gold-tint);
  color: var(--bo-gold-ink-deep);
}

.bo-article__inner section:not([id]):has(> button) > a:focus-visible,
.bo-article__inner section:not([id]):has(> button) > button:focus-visible {
  outline: 3px solid var(--bo-action-gold);
  outline-offset: 2px;
}

/* The first control is the one being asked for. */
.bo-article__inner section:not([id]):has(> button) > a:first-of-type {
  border-color: var(--bo-action-gold);
  background: var(--bo-action-gold);
  color: var(--bo-gold-ink-darkest);
  font-weight: 700;
}

.bo-article__inner section:not([id]):has(> button) > a:first-of-type:hover {
  background: var(--bo-action-gold-hover);
  color: #fff;
}

/* --- jump links: "Tell us in the comments →" ----------------------------- */

.bo-article__inner section:not([id]) > a[href^="#"]:not(:has(strong)):not(:has(b)) {
  display: inline-block;
  font-family: var(--bo-font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--bo-gold-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--bo-gold-tint-border, var(--bo-border));
  padding-bottom: 2px;
}

.bo-article__inner section:not([id]) > a[href^="#"]:not(:has(strong)):not(:has(b)):hover {
  color: var(--bo-gold-ink-deep);
  border-bottom-color: var(--bo-action-gold);
}

/* --- author box ---------------------------------------------------------
   Its avatar had no dimensions, so a missing image stretched to whatever the
   flex row gave it.
   ------------------------------------------------------------------------- */

.bo-article__inner img[class*="avatar"],
.bo-article__inner img[src*="gravatar"] {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 560px) {
  .bo-article__inner > section { margin: 30px 0; }
  .bo-article__inner section:not([id]):has(> h2):has(> b) { padding: 18px 18px; }
  .bo-article__inner section:not([id]) > a:has(> b) { padding: 14px 15px; }
}

/* ==========================================================================
   ENTRY HEADER + SCORE BREAKDOWN — restored from the original design

   Recovered from the guides' own inline stylesheet, which is inert (it targets
   51 class names no longer present in the markup) but is a complete record of
   the intended design. Ported to platform colours: navy where the original used
   #111, action gold where it used the retired #C8A24A.
   ========================================================================== */

.bo-article__inner .bo-entry__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}

/* "14. Reif Kushiyaki" — .rank-pill in the original. */
.bo-article__inner .bo-entry__rank {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--bo-action-gold);
  border-radius: 999px;
  background: var(--bo-gold-panel, #FFFBF2);
  font-family: var(--bo-font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--bo-ink);
}

/* The rating, large, top right — .rating-badge in the original. */
.bo-article__inner .bo-entry__score {
  flex: 0 0 auto;
  min-width: 96px;
  padding: 12px 15px;
  border: 1px solid var(--bo-action-gold);
  border-radius: 18px;
  background: var(--bo-ink);
  text-align: center;
}

.bo-article__inner .bo-entry__score strong {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  border-radius: 0;
  color: #fff;
  font-family: var(--bo-font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bo-article__inner .bo-entry__score span {
  display: block;
  color: var(--bo-credential-gold);
  font-family: var(--bo-font-ui);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  line-height: 1.15;
}

/* The entry heading now sits under its own header, so it starts flush. */
.bo-article__inner section[id] > .bo-entry__head + h2 {
  margin-top: 0;
}

/* --- score breakdown: a card per score, gold left edge ------------------- */

.bo-article__inner section[id] > h3 + .bo-score-mini,
.bo-article__inner .bo-score-mini {
  display: inline-block;
  min-width: 132px;
  margin: 0 8px 8px 0;
  padding: 12px 14px 12px 15px;
  border: 1px solid var(--bo-border-soft);
  border-left: 4px solid var(--bo-action-gold);
  border-radius: 12px;
  background: var(--bo-surface-warm, #FAF7F1);
  vertical-align: top;
}

.bo-article__inner .bo-score-mini b {
  display: block;
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--bo-ink);
}

.bo-article__inner .bo-score-mini em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-family: var(--bo-font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--bo-gold-ink);
  font-variant-numeric: tabular-nums;
}

/* --- an inline colour on one heading ------------------------------------
   "Sources & Verification" carries style="color:#111111" in the content, which
   renders it pure black beside every other heading in platform navy. An inline
   style can only be beaten with !important, and a single stray hard-coded
   colour is what that is for.
   ------------------------------------------------------------------------- */

.bo-article__inner section > h2[style] {
  color: var(--bo-ink) !important;
}

@media (max-width: 560px) {
  .bo-article__inner .bo-entry__head { gap: 12px; }
  .bo-article__inner .bo-entry__score { min-width: 78px; padding: 10px 12px; }
  .bo-article__inner .bo-entry__score strong { font-size: 23px; }
  .bo-article__inner .bo-score-mini { min-width: 108px; }
}

/* ==========================================================================
   COMMENTS

   Comments were open on all 143 posts the whole time; the theme just never
   rendered them, so "Jump to Comments" pointed at an anchor that did not
   exist. This styles what WordPress outputs.
   ========================================================================== */

.bo-article__inner + .comments-area,
.comments-area {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px var(--bo-gutter) 72px;
  font-family: var(--bo-font-ui);
  border-top: 1px solid var(--bo-border-soft);
}

.comments-area .comments-title,
.comments-area .comment-reply-title {
  font-family: var(--bo-font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--bo-ink);
  margin: 0 0 18px;
}

.comments-area .comment-list {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}

.comments-area .comment-list li {
  padding: 18px 0;
  border-top: 1px solid var(--bo-border-soft);
}

.comments-area .comment-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--bo-ink);
}

.comments-area .comment-metadata,
.comments-area .comment-metadata a {
  font-size: 12px;
  color: var(--bo-ink-soft);
  text-decoration: none;
}

.comments-area .comment-content {
  font-family: var(--bo-font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bo-ink-muted);
  margin-top: 6px;
}

.comments-area textarea,
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--bo-border);
  border-radius: 10px;
  background: var(--bo-surface);
  font-family: var(--bo-font-ui);
  font-size: 15px;
  color: var(--bo-ink);
}

.comments-area textarea:focus-visible,
.comments-area input:focus-visible {
  outline: 3px solid var(--bo-action-gold);
  outline-offset: 1px;
}

.comments-area .form-submit input[type="submit"] {
  padding: 12px 22px;
  min-height: var(--bo-hit-target, 44px);
  border: 1px solid var(--bo-action-gold);
  border-radius: 999px;
  background: var(--bo-action-gold);
  color: var(--bo-gold-ink-darkest);
  font-family: var(--bo-font-ui);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.comments-area .form-submit input[type="submit"]:hover {
  background: var(--bo-action-gold-hover);
  color: #fff;
}

/* --- the dead Save control ------------------------------------------------
   "⭐ Save this Guide" is an <a> whose href is the page it is already on. It
   does nothing, and Save is not built — only a URL helper exists for it.
   Hidden rather than restyled, under the standing ruling: remove the
   affordance, do not wire it. Removing it in CSS touches no content and
   reverses by deleting this rule.

   The gold therefore moves to the first control that actually works. A row
   whose loudest button is the broken one is worse than no emphasis at all.
   ------------------------------------------------------------------------- */

.bo-article__inner section:not([id]):has(> button) > a:first-of-type {
  display: none;
}

.bo-article__inner section:not([id]):has(> button) > button:first-of-type {
  border-color: var(--bo-action-gold);
  background: var(--bo-action-gold);
  color: var(--bo-gold-ink-darkest);
  font-weight: 700;
}

.bo-article__inner section:not([id]):has(> button) > button:first-of-type:hover {
  background: var(--bo-action-gold-hover);
  color: #fff;
}

/* ==========================================================================
   AUTHOR BOX + THE GUIDE-END ACTION BLOCK

   The author box is UsersWP's widget, rendered through Bootstrap classes
   (.bsui, .d-md-flex, .bg-light). Its avatar is a placeholder SVG carrying no
   width or height, so flex stretched it to 24 x 56 — the oval in the review.
   An earlier rule here missed it because the image has neither an "avatar"
   class nor a gravatar src, which is a reminder to target what is on the page
   rather than what usually is.
   ========================================================================== */

.uwp_widget_author_box {
  margin: 34px 0;
  border: 1px solid var(--bo-border-soft);
  border-radius: var(--bo-radius-card);
  overflow: hidden;
}

/* Bootstrap's .bg-light is a grey that belongs to another palette. */
.uwp_widget_author_box .bg-light {
  background: var(--bo-surface-warm, #FAF7F1) !important;
  padding: 22px !important;
  gap: 16px;
  align-items: flex-start;
}

.uwp_widget_author_box img {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bo-surface);
  box-shadow: none;
}

.uwp_widget_author_box .media-body h5 {
  font-family: var(--bo-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--bo-ink-soft);
  margin: 0 0 6px;
}

/* The author's name is the only thing in that line worth a colour. */
.uwp_widget_author_box .media-body h5 a {
  color: var(--bo-ink);
  font-size: 15px;
  text-decoration: none;
}

.uwp_widget_author_box .media-body h5 a:hover {
  color: var(--bo-gold-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.uwp_widget_author_box .media-body p {
  font-family: var(--bo-font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bo-ink-muted);
  margin: 0;
  max-width: 68ch;
}

/* --- the guide-end action block ------------------------------------------ */

.bogl-guide-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 34px 0;
  padding: 26px 28px;
  background: var(--bo-gold-panel, #FFFBF2);
  border: 1px solid var(--bo-border-soft);
  border-radius: var(--bo-radius-card);
}

.bogl-guide-next .bogl-eyebrow {
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bo-ink-soft);
  margin: 0 0 6px;
}

.bogl-guide-next h3 {
  font-family: var(--bo-font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: var(--bo-ink);
  margin: 0 0 8px;
  text-wrap: balance;
}

.bogl-guide-next p:not(.bogl-eyebrow) {
  font-family: var(--bo-font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bo-ink-muted);
  margin: 0;
  max-width: 60ch;
}

.bogl-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}

.bogl-action-row .bogl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bo-hit-target, 44px);
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--bo-font-ui);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--bo-transition, all .15s ease);
}

.bogl-action-row .bogl-button--primary {
  background: var(--bo-action-gold);
  border: 1px solid var(--bo-action-gold);
  color: var(--bo-gold-ink-darkest);
}

.bogl-action-row .bogl-button--primary:hover {
  background: var(--bo-action-gold-hover);
  color: #fff;
}

.bogl-action-row .bogl-button--secondary {
  background: var(--bo-surface);
  border: 1px solid var(--bo-border);
  color: var(--bo-ink);
}

.bogl-action-row .bogl-button--secondary:hover {
  border-color: var(--bo-action-gold);
  background: var(--bo-gold-tint);
  color: var(--bo-gold-ink-deep);
}

.bogl-action-row .bogl-button:focus-visible {
  outline: 3px solid var(--bo-ink);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .bogl-guide-next { flex-direction: column; align-items: stretch; }
  .bogl-action-row .bogl-button { flex: 1 1 auto; }
}

/* --- Rise on an article --------------------------------------------------
   The button itself is styled by chrome.css, which already owns .bo-card__rise
   and the bo-rise-fly animation. This only places it.
   ------------------------------------------------------------------------- */

.bo-article__actions {
  max-width: 760px;
  margin: 8px auto 0;
  padding: 20px var(--bo-gutter) 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bo-article__actions-note {
  margin: 0;
  font-family: var(--bo-font-ui);
  font-size: 13px;
  color: var(--bo-ink-soft);
  max-width: 46ch;
}

/* --- source links --------------------------------------------------------- */

.bo-article__inner a.bo-source-link {
  color: var(--bo-gold-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.bo-article__inner a.bo-source-link:hover {
  color: var(--bo-gold-ink-deep);
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   ARTICLE ACTION PANEL

   At the top beside the headline, because a reader decides whether a guide is
   worth keeping while reading it, not after scrolling past everything.

   The rise control reuses the feed's exact markup and styling — .bo-card__rise
   with the count over the label — so it is one component on two surfaces
   rather than two that drift apart. Save and Comments are built to sit beside
   it at the same height and weight.
   ========================================================================== */

.bo-article__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 20px auto 0;
  padding: 0 var(--bo-gutter);
}

/* The feed styles .bo-card__rise but keys its risen state on a class the
   ledger does not set. The ledger sets data-bo-risen, so the state is driven
   from the same attribute the persistence uses. */
.bo-article__actions[data-bo-risen="1"] .bo-card__rise {
  color: var(--bo-action-gold);
  background: var(--bo-credential-gold);
  border-color: var(--bo-action-gold-hover);
  box-shadow: 0 4px 14px rgba(184, 136, 16, .34);
  cursor: default;
}

.bo-article__actions[data-bo-risen="1"] .bo-card__rise-count,
.bo-article__actions[data-bo-risen="1"] .bo-card__rise-label {
  color: var(--bo-ink);
}

/* Save and Comments: same height and radius as the rise pill, laid out
   horizontally because they carry a word rather than a number. */
.bo-article__save,
.bo-article__jump {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--bo-hit-target, 44px);
  padding: 9px 15px;
  border: 1.5px solid var(--bo-border-warm, #EDE9E0);
  border-radius: 12px;
  background: var(--bo-surface);
  box-shadow: 0 1px 2px rgba(11, 31, 58, .05);
  font-family: var(--bo-font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--bo-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.bo-article__save:hover,
.bo-article__jump:hover {
  transform: translateY(-1px);
  border-color: var(--bo-action-gold);
  background: var(--bo-gold-tint);
  color: var(--bo-gold-ink-deep);
}

.bo-article__save:focus-visible,
.bo-article__jump:focus-visible {
  outline: 3px solid var(--bo-action-gold);
  outline-offset: 2px;
}

.bo-article__save-icon { font-size: 15px; line-height: 1; }
.bo-article__jump-icon { font-size: 14px; line-height: 1; }

/* Saved. Filled star, gold panel — the same visual grammar as a risen card,
   at lower volume, because saving is quieter than rising. */
.bo-article__actions[data-bo-saved="1"] .bo-article__save {
  border-color: var(--bo-action-gold);
  background: var(--bo-gold-tint);
  color: var(--bo-gold-ink-deep);
}

.bo-article__actions[data-bo-saved="1"] .bo-article__save-icon {
  color: var(--bo-action-gold);
}

.bo-article__actions-note {
  flex: 1 1 220px;
  margin: 0;
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--bo-ink-soft);
  max-width: 34ch;
}

@media (max-width: 560px) {
  .bo-article__actions { gap: 8px; }
  .bo-article__actions-note { flex-basis: 100%; max-width: none; margin-top: 4px; }
}

/* --- official links: plain links, not buttons -----------------------------
   These were pills. They are references a reader follows, not actions the page
   is asking for, and five ovals in a row competed with the actual controls at
   the top. Plain links, separated properly — the original fault was that they
   ran together sharing one underline, which spacing fixes without turning
   every reference into a button.
   ------------------------------------------------------------------------- */

.bo-article__inner a[target="_blank"][rel~="nofollow"] {
  display: inline;
  align-items: initial;
  gap: initial;
  margin: 0 18px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  min-height: 0;
  color: var(--bo-gold-ink);
  font-family: var(--bo-font-ui);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

.bo-article__inner a[target="_blank"][rel~="nofollow"]:hover {
  background: none;
  color: var(--bo-gold-ink-deep);
  text-decoration-thickness: 2px;
}

.bo-article__actions[data-bo-saved="1"] .bo-article__save:hover {
  transform: none;
}

/* --- the rail on an article ----------------------------------------------
   .bo-card__rail, .bo-card__rise and .bo-card__save are the feed's, styled in
   chrome.css. Nothing here restyles them — that would be the drift this reuse
   exists to avoid. These rules place the rail and drive its states from
   data-bo-risen / data-bo-saved, which is what the ledger writes, rather than
   the .is-risen class the feed toggles locally.
   ------------------------------------------------------------------------- */

.bo-article__actions[data-bo-risen="1"] .bo-card__rise {
  color: var(--bo-action-gold);
  background: var(--bo-credential-gold);
  border-color: var(--bo-action-gold-hover);
  box-shadow: 0 4px 14px rgba(184, 136, 16, .34);
  cursor: default;
}

.bo-article__actions[data-bo-risen="1"] .bo-card__rise-count,
.bo-article__actions[data-bo-risen="1"] .bo-card__rise-label {
  color: var(--bo-ink);
}

/* Saved fills the bookmark, which is what a bookmark filling means. */
.bo-article__actions[data-bo-saved="1"] .bo-card__save {
  color: var(--bo-gold-ink-deep);
  border-color: var(--bo-action-gold);
  background: var(--bo-gold-tint);
}

.bo-article__actions[data-bo-saved="1"] .bo-card__save svg {
  fill: var(--bo-action-gold);
  stroke: var(--bo-action-gold);
}


/* ==========================================================================
   TWO-COLUMN ARTICLE

   The article kept its measure — 760px of text is 760px of text — and the rail
   uses width that was empty margin. On narrower screens the rail moves below
   rather than squeezing the column, because the reading is the thing and the
   composer is the invitation.
   ========================================================================== */

.bo-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--bo-gutter);
  align-items: start;
}

/* The article's own parts centred themselves inside 760px. Inside a column
   that job belongs to the grid, so they fill it and the layout supplies the
   gutter — otherwise the text sits off-centre in its own column. */
.bo-article__main .bo-article__head,
.bo-article__main .bo-article__inner,
.bo-article__main .bo-article__lead,
.bo-article__main .bo-article__actions,
.bo-article__main .comments-area {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.bo-article__rail-sticky {
  position: sticky;
  top: calc(var(--bo-header-height, 64px) + 20px);
}

.bo-article__rail-kicker {
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bo-ink-soft);
  margin: 0 0 10px;
}

/* The composer was built for the homepage's full width. In a 344px rail it
   needs to stop assuming that. */
.bo-article__rail .bo-composer {
  max-width: 100%;
  margin: 0;
}

@media (max-width: 1080px) {
  .bo-article__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    max-width: 760px;
  }

  .bo-article__rail-sticky { position: static; }
}

/* ==========================================================================
   ARTICLE PAGE POLISH

   Four things, all measured on the page rather than guessed:

   1 .bo-article carried a white background and ZERO horizontal padding, so the
     text ran to the exact edge of the white and the card looked too narrow for
     its own contents. A card needs to be wider than what it holds or it does
     not read as a card.
   2 The header opened with 48px of padding under a 73px site header. Cutting it
     lifts the headline and everything below it.
   3 The action rail was vertical, which is right in a feed column and wrong
     across the top of an article where the space is horizontal.
   4 The composer's six categories were a six-column grid — 44px each inside a
     344px rail, with labels overflowing their cells.
   ========================================================================== */

/* --- 1 · the card frames its contents ------------------------------------ */

.bo-article__main .bo-article {
  padding: 0 44px 8px;
  border-radius: var(--bo-radius-card);
  border: 1px solid var(--bo-border-soft);
}

.bo-article__main .comments-area {
  padding: 32px 44px 56px;
  background: var(--bo-surface);
  border: 1px solid var(--bo-border-soft);
  border-top: 0;
  border-radius: 0 0 var(--bo-radius-card) var(--bo-radius-card);
  margin-top: -1px;
}

/* The article and the comments read as one sheet, so the join is not doubled. */
.bo-article__main .bo-article {
  border-bottom: 0;
  border-radius: var(--bo-radius-card) var(--bo-radius-card) 0 0;
}

/* --- 2 · lift the top ----------------------------------------------------- */

.bo-article__main .bo-article__head {
  padding-top: 26px;
}

.bo-article__main .bo-article__lead {
  margin-top: 20px;
}

.bo-article__main .bo-article__head + .bo-article__inner,
.bo-article__main .bo-article__lead + .bo-article__inner {
  padding-top: 22px;
}

/* --- 3 · the actions run across, not down -------------------------------- */

.bo-article__actions {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--bo-border-soft);
  gap: 12px;
}

/* The feed stacks rise above save because its column is narrow. Across the top
   of an article the space is horizontal, so the rail turns. */
.bo-article__actions .bo-card__rail {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* A vertical hairline between two stacked controls becomes a vertical divider
   between two side-by-side ones. */
.bo-article__actions .bo-card__hairline {
  width: 1px;
  height: 26px;
  align-self: center;
  background: var(--bo-border-soft);
  margin: 0 2px;
}

/* Rise reads as a row here: arrow, count, word — not a stacked pill. */
.bo-article__actions .bo-card__rise,
.bo-article__actions .bo-card__save {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 15px;
  border-radius: 12px;
}

.bo-article__actions .bo-card__rise-label,
.bo-article__actions .bo-card__save-label {
  font-size: 11.5px;
  letter-spacing: .07em;
}

.bo-article__actions .bo-card__rise-count:empty {
  display: none;
}

/* --- 4 · the composer in a narrow rail ------------------------------------ */

.bo-article__rail .bo-composer__cats,
.bo-article__rail .bo-composer__cat-row,
.bo-article__rail [class*="bo-composer__cat"]:not(.bo-composer__cat) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.bo-article__rail .bo-composer__cat {
  min-width: 0;
  padding: 9px 4px;
  font-size: 10.5px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-align: center;
}

@media (max-width: 700px) {
  .bo-article__main .bo-article { padding: 0 20px 8px; }
  .bo-article__main .comments-area { padding: 26px 20px 44px; }
  .bo-article__actions { gap: 8px; }
}

/* The feed pins .bo-card__rail to width:74px, which is correct for a vertical
   strip beside a card and far too narrow once the rail turns horizontal — the
   two controls were crushed to 33px and 30px and their contents collided. It
   also hides the rail entirely under 632px, which would remove rise and save
   from an article on a phone. Both are overridden here, for articles only. */
.bo-article__actions .bo-card__rail {
  width: auto;
  min-width: 0;
  flex-shrink: 0;
  padding-top: 0;
}

.bo-article__actions .bo-card__rise,
.bo-article__actions .bo-card__save {
  flex: 0 0 auto;
  min-width: auto;
  white-space: nowrap;
}

@media (max-width: 632px) {
  .bo-article__actions .bo-card__rail { display: flex; }
}

/* ==========================================================================
   ALIGNMENT PASS

   Measured against the site header rather than chosen. .bo-header__inner is
   max-width 1240px with 24px padding — that is the --bo-content-width token —
   so the logo's left edge sits at 117px on a 1440px screen. The article layout
   was capped at 1200px and started at 137px, twenty pixels adrift of the mark
   above it. Using the same token puts the article under the logo, and the
   twenty pixels recovered go to the column rather than the margin.
   ========================================================================== */

/* ⛔⛔ FOUND 15 Sep 2026, MARK'S OWN MOBILE SWEEP — a real, severe live
   defect: EVERY single-post article page rendered nearly unreadable at
   390px, the h1 wrapped to a near-zero-width column (measured: 0px),
   the "add to this guide" composer panel overlapping it. Root cause:
   this rule used to also restate `grid-template-columns:
   minmax(0, 1fr) 344px` — IDENTICAL to the desktop value the section
   above already sets, so restating it here changed nothing at desktop
   widths, but because this rule sits AFTER the @media (max-width:
   1080px) collapse-to-one-column rule in the file, it silently WON at
   every width up to 1080px and undid that collapse — the fixed 344px
   rail column kept claiming its full width even at a 390px viewport,
   squeezing the article into a sliver. Removed here (redundant at
   desktop, actively wrong on mobile); max-width and gap are the only
   two properties this "alignment pass" ever actually needed to touch. */
.bo-article__layout {
  max-width: var(--bo-content-width, 1240px);
  gap: 32px;
}

/* --- no box around the actions ------------------------------------------
   The row carried .bo-card, which is the feed's card shell: white fill, border,
   radius. Inside a white article it drew a box around three buttons for no
   reason. The data-bo-card ATTRIBUTE stays — that is what the animation keys
   on — and only the class goes.
   ------------------------------------------------------------------------- */

.bo-article__actions {
  background: none;
  border: 0;
  border-top: 1px solid var(--bo-border-soft);
  border-radius: 0;
  box-shadow: none;
}

/* --- the rail starts where the article's text starts ---------------------
   The article card opens with a 1px border and 26px of head padding, so its
   kicker sits 27px below the top of the column. The rail had neither and began
   27px higher, which is why the two headings did not line up.
   ------------------------------------------------------------------------- */

.bo-article__rail-sticky {
  padding-top: 27px;
}

@media (max-width: 1080px) {
  .bo-article__rail-sticky { padding-top: 0; }
}

/* --- the composer in the rail -------------------------------------------- */

/* The mark sat above the field instead of beside it. */
.bo-article__rail .bo-composer__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bo-article__rail .bo-composer__mark {
  flex: 0 0 auto;
  margin-top: 6px;
}

/* THE FIELD JUMPED ON EVERY KEYSTROKE. grow() sets height to auto to measure
   scrollHeight, which collapses the box for a frame before it re-expands — and
   in a 344px column the text rewraps constantly, so it happened on almost every
   character. A floor height means the collapse has nowhere to go until the text
   genuinely needs a fourth line. */
.bo-article__rail .bo-composer__input {
  min-height: 76px;
  box-sizing: border-box;
}

/* ==========================================================================
   THE RAIL: STICKY, AND TIGHTER

   WHY THE STICKY DID NOTHING. The layout uses align-items:start, so the rail
   column shrinks to its content — measured at 591px tall holding 591px of
   composer. A sticky element can only travel inside its containing block, and
   a containing block exactly its own height gives it nowhere to go. It was
   correctly declared sticky and had zero room to be sticky in.

   The rail now stretches to the row height while the article stays top
   aligned, which is what gives the sticky its travel.
   ========================================================================== */

.bo-article__rail {
  align-self: stretch;
}

.bo-article__rail-sticky {
  position: sticky;
  top: calc(var(--bo-header-height, 64px) + 20px);
}

/* --- spacing -------------------------------------------------------------
   572px of composer in a 344px column, and it read as both crammed and wasteful
   at once: too little room around the things that matter and whole rows spent
   on things that do not. Scoped to the rail, so the homepage composer is
   untouched.
   ------------------------------------------------------------------------- */

.bo-article__rail .bo-composer {
  padding: 18px 18px 16px;
}

/* The crown is decoration, and at this width it costs an entire row above the
   field. The panel already says what it is. */
.bo-article__rail .bo-composer__mark {
  display: none;
}

.bo-article__rail .bo-composer__intro {
  margin-bottom: 2px;
}

/* The field was 76px of floor plus a row of controls — 166px before anyone had
   typed anything. Three lines is enough to start in. */
.bo-article__rail .bo-composer__input {
  min-height: 62px;
}

.bo-article__rail .bo-composer__control {
  gap: 10px;
}

/* Six tiles wrapping their labels onto two lines each. Slightly less padding
   and a tighter line gives the words room instead of the box. */
.bo-article__rail .bo-composer__cats {
  gap: 7px !important;
  margin-top: 10px;
}

.bo-article__rail .bo-composer__cat {
  padding: 10px 5px;
  font-size: 11px;
  line-height: 1.25;
}

/* "More ways to post" and the guest note are supporting text, not headline
   acts, and were taking 91px and 43px respectively. */
.bo-article__rail .bo-composer__more {
  margin: 10px 0 0;
}

.bo-article__rail .bo-composer__guest {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
}

/* ==========================================================================
   TIGHTEN, AND PUT THE ACTIONS ON THE DATE LINE

   The actions had a row to themselves under a line that ended halfway across
   the column — a full row spent on three buttons, with the space beside the
   date left empty. They now share that line: dates left, actions right.

   And the padding was compounding. The article card inset 44px, then each
   entry card inset another 26px, so the text inside an entry started 70px from
   the edge of a 816px column on both sides. That is where the score cards ran
   out of room and the fifth wrapped onto its own line.
   ========================================================================== */

.bo-article__head {
  display: flex;
  flex-direction: column;
}

/* Dates and actions share one line, and wrap onto two only when they must. */
.bo-article__head .bo-article__meta {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.bo-article__head .bo-article__actions {
  margin: -30px 0 0;
  padding: 0;
  border: 0;
  justify-content: flex-end;
  align-self: flex-end;
}

@media (max-width: 860px) {
  .bo-article__head .bo-article__actions {
    margin: 14px 0 0;
    align-self: flex-start;
    justify-content: flex-start;
  }
}

/* --- less compounded padding --------------------------------------------- */

.bo-article__main .bo-article {
  padding: 0 32px 8px;
}

.bo-article__main .comments-area {
  padding: 30px 32px 52px;
}

.bo-article__inner section[id] {
  padding: 22px 20px 18px;
}

.bo-article__inner section:not([id]):has(> h2):has(> b) {
  padding: 20px 22px;
}

/* --- five score cards, one row -------------------------------------------
   816 column, less 64 of card padding, less 40 of entry padding, leaves 712.
   Five cards and four gaps at the old 132px floor needed 692 plus margins and
   overflowed by a whisker, so the fifth dropped to its own line. Narrower floor
   and a tighter gap fit all five with room to spare.
   ------------------------------------------------------------------------- */

.bo-article__inner .bo-score-mini {
  min-width: 0;
  width: calc((100% - 4 * 7px) / 5);
  margin: 0 7px 7px 0;
  padding: 10px 11px;
}

.bo-article__inner .bo-score-mini:nth-of-type(5n) {
  margin-right: 0;
}

@media (max-width: 700px) {
  .bo-article__inner .bo-score-mini { width: calc((100% - 7px) / 2); }
  .bo-article__main .bo-article { padding: 0 18px 8px; }
  .bo-article__main .comments-area { padding: 24px 18px 40px; }
}

/* The crown, gone from the rail composer.
   chrome.css:4355 pins it with `display: inline-flex !important`, so hiding it
   needs the same weapon — matched here with higher specificity rather than by
   editing that line, because the homepage composer still wants its mark and
   this is only about the 344px rail, where the crown costs a whole row above
   the field and says nothing the panel heading has not already said. */
.bo-article__rail .bo-composer__mark {
  display: none !important;
}

/* ==========================================================================
   THE RAIL COMPOSER HAS TO FIT THE RAIL

   Two faults, and the first is mine by construction: this is the homepage
   composer, built for a full-width surface, dropped into a 344px column. It
   was never going to sit right, and expanding "More ways to post" made it
   taller than the screen.

   The second follows from the first. A sticky panel taller than the viewport
   is UNREACHABLE at the bottom — the page scrolls, the panel does not, and the
   part below the fold can never be brought into view. Sticky is only safe when
   what is stuck fits.

   So: the panel can never exceed the space it has, and scrolls inside itself if
   it would; and the expander that pushes it past that height is not offered
   here. The rail keeps the six ways to post, which is the useful part. The
   full set lives on the homepage, where there is room for it.
   ========================================================================== */

.bo-article__rail-sticky {
  max-height: calc(100vh - var(--bo-header-height, 64px) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 2px;
}

/* Ten more post types behind a toggle is a homepage affordance. In the rail it
   doubles the height of the panel to reach options the reader can get to from
   the composer on any page. */
.bo-article__rail .bo-composer__more {
  display: none;
}

/* With the expander gone the panel fits, so the field can breathe again. */
.bo-article__rail .bo-composer__input {
  min-height: 70px;
}

.bo-article__rail .bo-composer__cat {
  padding: 11px 6px;
  font-size: 11.5px;
}

/* The rail's own framing. It answers what this is for and where it goes, which
   the composer's heading cannot do because that heading belongs to the
   homepage and rewrites itself per post type. */
.bo-article__rail-lede {
  margin: 0 0 12px;
  font-family: var(--bo-font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bo-ink-muted);
}

/* --- the rail composer, tightened ----------------------------------------
   457px of panel, and the height was going to gaps rather than to anything a
   reader wants: five stacked blocks each separated by 8–10px, a 54px heading
   block, and 34px of panel padding on top of that. Measured, then cut where
   the space was doing no work.
   ------------------------------------------------------------------------- */

.bo-article__rail .bo-composer {
  padding: 14px 14px 12px;
}

.bo-article__rail .bo-composer__top {
  margin-bottom: 4px;
}

.bo-article__rail .bo-composer__head {
  font-size: 16px;
  line-height: 1.25;
  margin: 0;
}

.bo-article__rail .bo-composer__control {
  gap: 8px;
}

.bo-article__rail .bo-composer__input {
  min-height: 60px;
}

.bo-article__rail .bo-composer__cats {
  gap: 6px !important;
  margin-top: 8px;
}

.bo-article__rail .bo-composer__cat {
  padding: 9px 5px;
}

.bo-article__rail .bo-composer__guest {
  margin-top: 8px;
  font-size: 11.5px;
}

/* The kicker and lede carry the explaining, so they sit tight to the panel
   rather than floating above it. */
.bo-article__rail-kicker {
  margin-bottom: 4px;
}

.bo-article__rail-lede {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.45;
}

/* ==========================================================================
   TYPE HIERARCHY AUDIT — three faults, measured on the rendered page

   1 A HEADING SMALLER THAN ITS OWN BODY TEXT. 105 h3s were rendering at 14px
     Inter while the paragraphs under them sit at 16.5px serif. That inverts the
     hierarchy: the label is quieter than the thing it labels.

     My doing. Inside a restaurant entry the FIRST h3 is the venue's tagline —
     "Best Overall Restaurant in Dubai" — which should be a small gold label.
     Every h3 after it is a real sub-heading — "Why it ranks", "What to expect",
     "Who should skip it" — and was getting the tagline's treatment.

   2 A GEORGIA HEADING. "Ask, compare or add what is missing." renders in
     Georgia at 30px — a font outside the system entirely, in a document
     otherwise built from Archivo, Source Serif 4 and Inter.

   3 FOUR BODY SIZES doing one job: 16.5px on 154 paragraphs, plus 17, 16 and
     15px on a handful. Differences too small to read as intent and large enough
     to read as drift.
   ========================================================================== */

/* 1 · the tagline keeps its label treatment … */
.bo-article__inner section[id] > h3:first-of-type {
  font-family: var(--bo-font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--bo-gold-ink);
  margin: 0 0 14px;
}

/* … and every later h3 becomes a real sub-heading, above its text rather than
   below it in weight. */
.bo-article__inner section[id] > h3 ~ h3 {
  font-family: var(--bo-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--bo-ink);
  margin: 26px 0 6px;
}

/* 2 · the stray Georgia heading, brought back into the system */
.bogl-guide-next h3,
.bo-article__main .bogl-guide-next h3 {
  font-family: var(--bo-font-display) !important;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: var(--bo-ink);
}

/* 3 · one body size, not four */
.bo-article__inner p,
.bo-article__inner li,
.bo-article__inner section[id] > p,
.bo-article__inner section:not([id]):has(> h2):has(> b) {
  font-size: 16.5px;
  line-height: 1.6;
}

/* The standfirst is allowed to be larger — that is a deliberate step in the
   scale, not drift. */
.bo-article__inner > p:first-of-type,
.bo-article__inner .bo-article__eyebrow-line + p {
  font-size: 18px;
  line-height: 1.55;
}

/* ==========================================================================
   GUIDE REFRESH — let space do the work borders were doing

   The page had accumulated boxes. An entry was a bordered card; inside it the
   scores were bordered cards; the fact panels were bordered and filled; the
   comparison rows were bordered; the official links had been pills. Every
   element announced its own edges, so nothing had any air and the whole thing
   read as heavy and busy rather than considered.

   This pass removes edges and gives back space. Hierarchy comes from type size
   and vertical rhythm, which is what makes editorial pages feel calm, and
   colour is kept for the two or three things that carry meaning — the score,
   the verified mark, a link.

   Nothing here changes content or structure. It is all surface.
   ========================================================================== */

/* --- vertical rhythm: the single biggest lever ---------------------------- */

.bo-article__inner > section,
.bo-article__inner section[id] {
  margin: 56px 0;
}

.bo-article__inner h2 {
  margin-top: 8px;
}

/* --- entries: a headline and its text, not a card ------------------------- */

.bo-article__inner section[id] {
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bo-border-soft);
  border-radius: 0;
  padding-top: 34px;
}

.bo-article__inner section[id] > h2 {
  font-size: 30px;
  letter-spacing: -0.025em;
  margin: 12px 0 4px;
}

.bo-article__inner section[id] > p {
  line-height: 1.65;
}

/* The label paragraphs — Area, Price, Mood — read as a spec list, so they get
   the tighter rhythm of one and the label sits inline in small caps. */
.bo-article__inner section[id] > p > strong:first-child {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bo-ink-soft);
}

/* --- the entry header ----------------------------------------------------- */

.bo-article__inner .bo-entry__head {
  align-items: center;
  margin-bottom: 4px;
}

/* The rank loses its outline; a small caps line is enough. */
.bo-article__inner .bo-entry__rank {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bo-ink-soft);
}

/* The score stays a solid block, because it is the one number a reader
   compares fifteen times and it has earned the weight. */
.bo-article__inner .bo-entry__score {
  min-width: 84px;
  padding: 10px 14px;
  border: 0;
  border-radius: 14px;
}

/* --- score breakdown: numbers, not boxes ---------------------------------- */

.bo-article__inner .bo-score-mini {
  border: 0;
  border-top: 2px solid var(--bo-gold-tint-border, #EADFC2);
  border-radius: 0;
  background: none;
  padding: 10px 12px 0 0;
}

.bo-article__inner .bo-score-mini b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bo-ink-soft);
}

.bo-article__inner .bo-score-mini em {
  font-size: 20px;
  margin-top: 3px;
  color: var(--bo-ink);
}

/* --- fact panels: a rule, not a fill -------------------------------------- */

.bo-article__inner section:not([id]):has(> h2):has(> b) {
  padding: 0 0 0 22px;
  background: none;
  border: 0;
  border-left: 2px solid var(--bo-action-gold);
  border-radius: 0;
}

/* --- comparison rows: hairlines ------------------------------------------- */

.bo-article__inner a:has(> strong):has(> em) {
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid var(--bo-border-soft);
  border-radius: 0;
  background: none;
  margin: 0;
}

.bo-article__inner a:has(> strong):has(> em):hover {
  background: none;
  border-bottom-color: var(--bo-action-gold);
}

.bo-article__inner a:has(> strong):has(> em) > strong {
  font-size: 16.5px;
}

/* --- guide links: same treatment ------------------------------------------ */

.bo-article__inner section:not([id]) > a:has(> b) {
  padding: 16px 2px;
  border: 0;
  border-bottom: 1px solid var(--bo-border-soft);
  border-radius: 0;
  background: none;
  margin: 0;
}

.bo-article__inner section:not([id]) > a:has(> b):hover {
  background: none;
  border-bottom-color: var(--bo-action-gold);
}

/* --- FAQ: hairlines, no cards --------------------------------------------- */

.bo-article__inner details {
  border: 0;
  border-bottom: 1px solid var(--bo-border-soft);
  border-radius: 0;
  background: none;
  margin: 0;
}

.bo-article__inner details > summary {
  padding: 16px 44px 16px 0;
  font-size: 17px;
}

.bo-article__inner details > summary:hover {
  background: none;
  color: var(--bo-gold-ink);
}

.bo-article__inner details > summary::after {
  right: 6px;
}

.bo-article__inner details > p {
  padding: 0 44px 18px 0;
}

/* --- the meta strip: one hairline ----------------------------------------- */

.bo-article__inner section:has(> b:first-child):not(:has(h2)):not(:has(h3)):not(:has(p)) {
  padding: 14px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bo-border-soft);
  border-bottom: 1px solid var(--bo-border-soft);
  border-radius: 0;
}

/* --- the article sheet ---------------------------------------------------- */

/* With the internal boxes gone the outer card can lose its edges too, so the
   page reads as one sheet of paper rather than a stack of trays. */
.bo-article__main .bo-article,
.bo-article__main .comments-area {
  border: 0;
  border-radius: 0;
  background: none;
}

.bo-article__main .comments-area {
  border-top: 1px solid var(--bo-border-soft);
  margin-top: 48px;
}

/* --- the participation panel ---------------------------------------------- */

.bogl-context {
  border-radius: 0;
  border: 0;
  border-left: 2px solid var(--bo-action-gold);
  background: none;
  padding: 4px 0 4px 22px;
  margin: 48px 0;
}

.bogl-context h3 {
  font-family: var(--bo-font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--bo-ink);
  margin: 4px 0 6px;
  text-wrap: balance;
}

.bogl-context__icon {
  display: none;
}

@media (max-width: 700px) {
  .bo-article__inner > section,
  .bo-article__inner section[id] { margin: 40px 0; }
  .bo-article__inner section[id] > h2 { font-size: 25px; }
}

/* The score cards kept their box because an earlier rule reaches them through
   `section[id] > h3 + .bo-score-mini`, which outranks a plain
   `.bo-article__inner .bo-score-mini`. Matched here rather than weakened there,
   so the original rule still stands for anywhere else these appear. */
.bo-article__inner section[id] > h3 + .bo-score-mini,
.bo-article__inner section[id] .bo-score-mini,
.bo-article__inner .bo-score-mini {
  border: 0;
  border-top: 2px solid var(--bo-gold-tint-border, #EADFC2);
  border-radius: 0;
  background: none;
  padding: 10px 12px 0 0;
}

/* --- one sheet, not none --------------------------------------------------
   Stripping the internal boxes was right; stripping the sheet with them was
   not. An article with no surface of its own has nothing to tell a reader
   where the reading starts. The card comes back — once, around everything,
   with room inside — while the contents stay unboxed. Its own 1px border
   is what draws the edge now that the page ground is white too (16 Sep
   2026, Mark's correction — was #FBFAF7 here, now --bo-page-bg's own
   #FFFFFF), not a colour difference from the page any more.
   ------------------------------------------------------------------------- */

.bo-article__main .bo-article {
  background: var(--bo-surface);
  border: 1px solid var(--bo-border-soft);
  border-bottom: 0;
  border-radius: var(--bo-radius-card) var(--bo-radius-card) 0 0;
  padding: 4px 40px 24px;
}

.bo-article__main .comments-area {
  background: var(--bo-surface);
  border: 1px solid var(--bo-border-soft);
  border-top: 1px solid var(--bo-border-soft);
  border-radius: 0 0 var(--bo-radius-card) var(--bo-radius-card);
  padding: 34px 40px 52px;
  margin-top: 0;
}

/* The first section should not double the sheet's own top padding. */
.bo-article__main .bo-article__head {
  padding-top: 30px;
}

@media (max-width: 700px) {
  .bo-article__main .bo-article { padding: 4px 20px 20px; }
  .bo-article__main .comments-area { padding: 28px 20px 40px; }
}

/* --- community invitations ------------------------------------------------
   A line, never a panel. These repeat fifteen times down a guide, and anything
   with a border or a fill becomes furniture by the third one — the reader stops
   seeing the shape. Held at the weight of a caption, and lit only on hover, so
   they read as an offer rather than an advert.
   ------------------------------------------------------------------------- */

.bo-article__inner .bo-engage {
  margin: 18px 0 0;
}

.bo-article__inner .bo-engage__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-family: var(--bo-font-ui);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--bo-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--bo-transition, all .15s ease);
}

.bo-article__inner .bo-engage__link:hover {
  color: var(--bo-gold-ink);
  border-bottom-color: var(--bo-action-gold);
}

.bo-article__inner .bo-engage__link:focus-visible {
  outline: 3px solid var(--bo-action-gold);
  outline-offset: 3px;
}

.bo-article__inner .bo-engage__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bo-gold-tint);
  color: var(--bo-gold-ink);
  font-size: 13px;
  line-height: 1;
  flex: 0 0 20px;
}

.bo-article__inner .bo-engage__link:hover .bo-engage__icon {
  background: var(--bo-action-gold);
  color: var(--bo-gold-ink-darkest);
}

/* ==========================================================================
   POLISH PASS

   1 THE FAQ CHEVRON WAS A BLACK DOT. The guides' own embedded CSS styles
     `summary:after` with a dark background, and my border-drawn chevron sat on
     top of it. The arrow was correct the whole time and invisible underneath a
     filled square. Backgrounds cleared explicitly, because the rule painting it
     is inside the content and cannot be edited from here.

   2 THE RANK IS A LIST POSITION, so it is set like one. A numeral at 34px does
     the job that 12px small caps could not.

   3 THE META STRIP wrapped its last item onto a second line and took its
     divider with it, so a rule appeared in mid-air. Dividers now belong to the
     pair rather than to the gap.

   4 OFFICIAL LINKS sat at uneven distances because the emoji inside each label
     is a different width. Spacing that does not depend on the glyph fixes it.
   ========================================================================== */

/* 1 · the chevron ---------------------------------------------------------- */

.bo-article__inner details > summary::after {
  background: none !important;
  border-radius: 0;
  box-shadow: none;
  width: 8px;
  height: 8px;
  content: "";
  border-right: 2px solid var(--bo-gold-ink);
  border-bottom: 2px solid var(--bo-gold-ink);
  border-top: 0;
  border-left: 0;
}

.bo-article__inner details > summary::-webkit-details-marker,
.bo-article__inner details > summary::marker {
  display: none;
  content: "";
}

/* 2 · the rank numeral ----------------------------------------------------- */

.bo-article__inner .bo-entry__rank {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}

.bo-article__inner .bo-entry__num {
  font-family: var(--bo-font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bo-action-gold);
  font-variant-numeric: tabular-nums;
}

.bo-article__inner .bo-entry__medal {
  font-size: 15px;
  line-height: 1;
}

/* The heading sits tight under its own number. */
.bo-article__inner section[id] > .bo-entry__head + h2 {
  margin-top: 6px;
}

/* 3 · the meta strip ------------------------------------------------------- */

.bo-article__inner section:has(> b:first-child):not(:has(h2)):not(:has(h3)):not(:has(p)) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 26px;
  padding: 16px 0;
}

/* A divider drawn in the gap ends up stranded when the row wraps. Attaching it
   to the label instead means it wraps with the pair it belongs to — and the
   first item on any line does not need one. */
.bo-article__inner section:has(> b:first-child):not(:has(h2)):not(:has(h3)):not(:has(p)) > b:not(:first-child) {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/* 4 · official links ------------------------------------------------------- */

.bo-article__inner a[target="_blank"][rel~="nofollow"] {
  display: inline-block;
  margin: 0 22px 6px 0;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bo-gold-tint-border, #EADFC2);
}

.bo-article__inner a[target="_blank"][rel~="nofollow"]:hover {
  text-decoration-color: var(--bo-action-gold);
}

/* 5 · the byline and date line, now that the mark has gone ----------------- */

.bo-article__byline {
  margin-bottom: 4px;
}

.bo-article__meta {
  gap: 0 8px;
}

/* 6 · rhythm around the invitations ---------------------------------------- */

.bo-article__inner .bo-engage {
  margin: 22px 0 0;
}

/* The rank and the name now share a heading, so the numeral sits on the same
   baseline as the words rather than floating above them. */
.bo-article__inner .bo-entry__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--bo-font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--bo-ink);
  text-wrap: balance;
}

.bo-article__inner .bo-entry__title .bo-entry__rank {
  gap: 7px;
}

.bo-article__inner .bo-entry__title .bo-entry__num {
  font-size: 30px;
  line-height: 1.15;
}

.bo-article__inner .bo-entry__name {
  min-width: 0;
}

/* The header is now heading-plus-score, so it aligns on the first line. */
.bo-article__inner .bo-entry__head {
  align-items: flex-start;
  margin-bottom: 10px;
}

@media (max-width: 700px) {
  .bo-article__inner .bo-entry__title,
  .bo-article__inner .bo-entry__title .bo-entry__num { font-size: 25px; }
}

/* --- the invitations, one step louder -------------------------------------
   They were set at caption grey, which is where you put something you do not
   mind being missed. These are the point of the page for the business, so they
   read in gold — the colour this platform already uses for an action — while
   staying a line rather than a box. Loud enough to be seen on a scroll, quiet
   enough to repeat seventeen times without becoming wallpaper.
   ------------------------------------------------------------------------- */

.bo-article__inner .bo-engage__link {
  color: var(--bo-gold-ink);
  font-size: 14px;
}

.bo-article__inner .bo-engage__link:hover {
  color: var(--bo-gold-ink-deep);
}

.bo-article__inner .bo-engage__icon {
  background: var(--bo-action-gold);
  color: var(--bo-gold-ink-darkest);
  font-weight: 700;
}

.bo-article__inner .bo-engage__link:hover .bo-engage__icon {
  background: var(--bo-action-gold-hover);
  color: #fff;
}

/* ==========================================================================
   THE SPEC ROWS AND THE SCORES

   THE LABELS. Area, Price, Mood and the rest were small-caps grey sitting
   inline in front of a 16.5px serif value, each in its own paragraph with a
   paragraph's worth of space beneath. The result was a list where nothing
   lined up: every value started at a different place, because every label is a
   different length. They are a specification, so they are set as one — labels
   in a fixed column, values aligned down a single edge.

   THE SCORES now sit on one line, in a grid that divides the row rather than
   in five boxes each guessing at a fifth of it.
   ========================================================================== */

.bo-article__inner section[id] > p:has(> strong:first-child) {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 0 16px;
  align-items: baseline;
  margin: 0 0 6px;
}

.bo-article__inner section[id] > p > strong:first-child {
  font-size: 11px;
  letter-spacing: .085em;
  line-height: 1.5;
  color: var(--bo-ink-soft);
}

/* A little air before and after the block of them, none within it. */
.bo-article__inner section[id] > p:has(> strong:first-child):first-of-type {
  margin-top: 14px;
}

/* --- the score grid ------------------------------------------------------- */

.bo-article__inner .bo-score-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 18px;
  margin: 12px 0 4px;
}

.bo-article__inner .bo-score-grid .bo-score-mini {
  width: auto;
  min-width: 0;
  margin: 0;
  display: block;
}

@media (max-width: 900px) {
  .bo-article__inner .bo-score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
}

@media (max-width: 560px) {
  .bo-article__inner .bo-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-article__inner section[id] > p:has(> strong:first-child) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-bottom: 12px;
  }
}