/* blog.css — The Whisker Journal (blog.billubnb.in). Phone-first (base = 390 px); tokens only (tokens.css), no new colours
   except tints mixed FROM tokens. Idea: the morning paper read in the sunbeam — a masthead with an edition line between two
   whisker rules, stories in shallow arched windows, topics as tinted tiles, a pull-quote on blush, a sage "When to call a vet" box.
   Prefix bj- (blog journal). Loaded only by templates/sites/blog/*. */

@layer sections {
  /* ---- topic tints (cards, tags, tiles, covers) ------------------------------------------------------------------ */
  .bj-tone--sun     { --tone: var(--sun-soft);   --tone-2: #FFF3D6; }
  .bj-tone--blush   { --tone: var(--blush-soft); --tone-2: #FEF1EC; }
  .bj-tone--sage    { --tone: var(--sage-tint);  --tone-2: #F0F6EC; }
  .bj-tone--apricot { --tone: color-mix(in srgb, var(--apricot) 62%, var(--paper-3)); --tone-2: #FFF1E2; }

  /* ---- reading progress (articles; CSS scroll timeline only — no JS, gone under reduced motion) -------------------- */
  .bj-progress { display: none; }
  @supports (animation-timeline: scroll()) {
    .bj-progress { display: block; position: fixed; inset: 0 0 auto 0; height: 4px; z-index: calc(var(--z-header) + 1); pointer-events: none;
      background: var(--sun); transform-origin: 0 50%; transform: scaleX(0); animation: bj-progress linear both; animation-timeline: scroll(root block); }
    @keyframes bj-progress { to { transform: scaleX(1); } }
  }

  /* ---- shared sub-site bar, blog pages only: on narrow phones the nav always takes its own row, so the bar's height doesn't
     depend on whether the web font has loaded yet (it wrapped only after the swap → CLS 0.2–0.3). Global fix belongs in sites.css. */
  @media (max-width: 479px) { .blog .sitebar__nav { flex-basis: 100%; } }

  /* ---- masthead ------------------------------------------------------------------------------------------------ */
  .bj-mast { position: relative; isolation: isolate; overflow: clip; text-align: center;
    padding-block: var(--space-6) calc(var(--space-6) + var(--sheet-r));
    background: radial-gradient(90% 70% at 50% 0%, #FFE3A8 0%, rgba(255, 227, 168, 0) 66%), linear-gradient(180deg, #FFF2D8 0%, var(--paper) 100%); }
  .bj-mast .hero__beam { opacity: .75; }
  .bj-mast__inner { display: grid; justify-items: center; gap: var(--space-3); }
  .bj-mast__kicker { margin: 0; font-weight: 800; font-size: .95rem; color: var(--ink-2); text-wrap: balance; }
  .bj-mast__kicker .i { display: inline-block; width: 20px; height: 20px; margin-right: .4rem; vertical-align: -.25em; color: var(--amber); }
  .bj-nw { white-space: nowrap; }
  .bj-mast__title { margin: 0; font-size: clamp(2.7rem, 10.5vw + .2rem, 6.4rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance;
    font-variation-settings: "SOFT" 100, "WONK" 1; }
  .bj-mast__l1, .bj-mast__l2 { display: block; }          /* explicit lines: the title never re-wraps when the web font lands (CLS) */
  @media (min-width: 1180px) { .bj-mast__l1, .bj-mast__l2 { display: inline; } }
  .bj-mast__title em { font-style: italic; font-weight: 600; padding-inline: .04em;
    background: linear-gradient(transparent 62%, color-mix(in srgb, var(--sun) 72%, transparent) 62% 90%, transparent 90%); }
  .bj-mast__edition { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0; font-weight: 800; font-size: .9rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
  .bj-mast__edition .whisk { width: 54px; height: 16px; flex: none; }
  .bj-mast__edition span { white-space: nowrap; }
  @media (max-width: 379px) { .bj-mast__edition { font-size: .8rem; letter-spacing: .06em; gap: .4rem; } .bj-mast__edition .whisk { width: 28px; } }
  .bj-whisk--l { transform: scaleX(-1); }
  .bj-mast__intro { margin: var(--space-2) 0 0; max-width: 40rem; font-size: var(--step-0); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

  /* ---- topic chips (links) ------------------------------------------------------------------------------------- */
  .bj-chips { margin: 0 calc(var(--gutter) * -1) var(--space-6); }
  .bj-chips ul { position: relative; list-style: none; margin: 0; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
    padding: .25rem var(--gutter) .5rem; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .bj-chips ul::-webkit-scrollbar { display: none; }
  .bj-chips li { flex: none; }
  .bj-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .95rem .35rem .75rem; border-radius: var(--r-pill);
    background: var(--paper-3); border: 1px solid var(--line); color: var(--ink); font-weight: 750; font-size: .95rem; text-decoration: none; white-space: nowrap;
    transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1); }
  .bj-chip .i { width: 18px; height: 18px; color: var(--ink-2); }
  .bj-chip:hover { border-color: var(--line-strong); transform: translateY(-1px); }
  .bj-chip[aria-current="page"] { background: var(--sun); border-color: var(--sun-press); color: var(--sun-ink); }
  .bj-chip[aria-current="page"] .i { color: var(--sun-ink); }
  .bj-chip__n { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding-inline: .35rem; border-radius: var(--r-pill);
    background: var(--paper-2); font-size: .8rem; font-weight: 800; }
  .bj-chip[aria-current="page"] .bj-chip__n { background: color-mix(in srgb, var(--paper-3) 70%, transparent); }
  .bj-chip--quiet { background: transparent; border-style: dashed; }
  .bj-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  @media (min-width: 900px) {
    .bj-chips { margin-inline: 0; }
    .bj-chips ul { flex-wrap: wrap; overflow: visible; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
  }

  /* ---- story cards --------------------------------------------------------------------------------------------- */
  .bj-front { padding-top: var(--space-6); }
  .bj-grid { display: grid; gap: var(--space-7) var(--space-5); }
  @media (min-width: 640px) { .bj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1040px) { .bj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bj-grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 1040px) and (max-width: 1239px) { .bj-grid--related > :nth-child(4) { display: none; } .bj-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .bj-card { position: relative; display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
  .bj-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-2); box-shadow: var(--shadow-1);
    border-radius: 50% 50% var(--arch-r) var(--arch-r) / 24% 24% var(--arch-r) var(--arch-r); }
  .bj-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
  .bj-card__body { display: grid; gap: .5rem; align-content: start; }
  .bj-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0; }
  .bj-card__title { margin: 0; font-size: clamp(1.3rem, 1.12rem + .7vw, 1.6rem); line-height: 1.18; text-wrap: pretty; }
  .bj-card__title a { color: inherit; text-decoration: none; }
  .bj-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .bj-card__title a:focus-visible { outline: none; box-shadow: none; }
  .bj-card:focus-within { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--r-lg); }
  .bj-card__excerpt { margin: 0; color: var(--ink-2); line-height: 1.55; }
  .bj-card__meta { display: flex; flex-wrap: wrap; gap: .1rem .45rem; margin: 0; font-size: .88rem; font-weight: 700; color: var(--ink-3); }
  .bj-card__go { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; min-height: 44px; margin: .2rem 0 0; font-weight: 800; border-bottom: 2px solid var(--sun); }
  .bj-card__go .i { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease); }
  @media (hover: hover) {
    .bj-card:hover .bj-card__media > img { transform: scale(1.035); }
    .bj-card:hover .bj-card__title a { text-decoration: underline; text-decoration-color: var(--sun-deep); text-decoration-thickness: 2px; text-underline-offset: .18em; }
    .bj-card:hover .bj-card__go .i { transform: translateX(4px); }
  }

  .bj-tag { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem .25rem .55rem; border-radius: var(--r-pill);
    background: var(--tone, var(--paper-2)); color: var(--ink); font-size: .82rem; font-weight: 800; line-height: 1.25; text-decoration: none; }
  .bj-tag .i { width: 15px; height: 15px; stroke-width: 2.2; }
  a.bj-tag { min-height: 44px; padding-inline: .8rem .95rem; font-size: .88rem; }
  a.bj-tag:hover { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
  .bj-pin { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 800; color: var(--amber); }
  .bj-pin .i { width: 15px; height: 15px; fill: var(--sun); stroke: var(--sun-deep); }

  /* the lead story */
  .bj-lead { margin-bottom: var(--space-8); }
  .bj-card--lead .bj-card__title { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; }
  .bj-card--lead .bj-card__excerpt { font-size: var(--step-0); }
  .bj-card--lead .bj-card__media { box-shadow: var(--shadow-2); }
  @media (min-width: 720px) {
    .bj-card--lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-6); }
    .bj-card--lead .bj-card__title { font-size: clamp(1.7rem, .9rem + 2.2vw, 3rem); }
  }
  @media (min-width: 1100px) {
    .bj-card--lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-7); }
    .bj-card--lead .bj-card__media { aspect-ratio: 4 / 3; border-radius: 50% 50% var(--arch-r) var(--arch-r) / 30% 30% var(--arch-r) var(--arch-r); }
  }

  /* designed cover (no photo) */
  .bj-cover { position: relative; width: 100%; height: 100%; background: radial-gradient(70% 60% at 62% 34%, var(--tone-2), var(--tone)); }
  .bj-cover > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .bj-cover__win { fill: var(--paper-3); }
  .bj-cover__frame { stroke: var(--sun-deep); }
  .bj-cover__sun { fill: var(--sun); }
  .bj-cover__cat { fill: var(--ink); }
  .bj-cover__eye { fill: var(--sun); }
  .bj-cover__tail { stroke: var(--ink); }
  .bj-cover__glyph { position: absolute; left: 14px; bottom: 14px; width: 46px; height: 46px; background: var(--paper-3); box-shadow: var(--shadow-1); }
  .bj-cover__glyph .i { width: 22px; height: 22px; }

  /* section titles + pager */
  .bj-sec { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
  .bj-sec__title { margin: 0; font-size: var(--step-2); }
  .bj-sec__aside { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 800; font-size: .92rem; color: var(--ink-2); text-decoration: none; }
  .bj-sec__aside .i { width: 18px; height: 18px; color: var(--amber); }
  .bj-sec__aside:hover { color: var(--ink); text-decoration: underline; }
  .bj-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); margin-top: var(--space-8); }
  .bj-pager > :last-child { justify-self: end; }
  .bj-pager__at { font-weight: 800; color: var(--ink-3); font-size: .92rem; }
  @media (max-width: 479px) { .bj-pager { grid-template-columns: 1fr 1fr; } .bj-pager__at { grid-column: 1 / -1; grid-row: 1; text-align: center; } }

  .bj-empty { max-width: 42rem; margin: var(--space-6) auto 0; padding: var(--space-6) var(--space-5); display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
  .bj-empty h3 { margin: 0; font-size: var(--step-2); }
  .bj-empty p { margin: 0; color: var(--ink-2); }
  .bj-empty__ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-3) var(--space-5); }

  /* ---- topic tiles --------------------------------------------------------------------------------------------- */
  .bj-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
  .bj-tile a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: .25rem; height: 100%;
    padding: var(--space-4); border-radius: var(--r-md); background: linear-gradient(160deg, var(--tone-2), var(--tone)); color: var(--ink); text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  .bj-tile .pebble { grid-row: span 4; width: 46px; height: 46px; background: var(--paper-3); }
  .bj-tile .pebble .i { width: 22px; height: 22px; }
  .bj-tile__name { margin: 0; font-size: 1.15rem; line-height: 1.2; }
  .bj-tile__line { margin: 0; font-size: .93rem; line-height: 1.45; color: var(--ink-2); }
  .bj-tile__latest { margin: .15rem 0 0; font-size: .88rem; line-height: 1.4; color: var(--ink-2); font-style: italic; }
  .bj-tile__latest span { font-style: normal; font-weight: 800; color: var(--ink); }
  .bj-tile__n { display: inline-flex; align-items: center; gap: .3rem; margin-top: .2rem; font-weight: 800; font-size: .88rem; color: var(--ink); }
  .bj-tile__n .i { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
  .bj-tile a:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
  .bj-tile a:hover .bj-tile__n .i { transform: translateX(3px); }
  .bj-tile a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  @media (min-width: 600px) {
    .bj-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .bj-tile a { grid-template-columns: minmax(0, 1fr); align-content: start; padding: var(--space-5) var(--space-4); }
    .bj-tile .pebble { grid-row: auto; margin-bottom: .35rem; }
    /* a lone last tile spans the row as a wide "banner" tile instead of leaving a hole */
    .bj-tile:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
    .bj-tile:last-child:nth-child(2n+1) a { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); }
    .bj-tile:last-child:nth-child(2n+1) .pebble { grid-row: span 4; margin: 0; }
  }
  @media (min-width: 960px) {
    .bj-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bj-tile:last-child:nth-child(2n+1) { grid-column: auto; }
    .bj-tile:last-child:nth-child(2n+1) a { grid-template-columns: minmax(0, 1fr); }
    .bj-tile:last-child:nth-child(2n+1) .pebble { grid-row: auto; margin-bottom: .35rem; }
    .bj-tile:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
    .bj-tile:last-child:nth-child(3n+1) a { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); }
    .bj-tile:last-child:nth-child(3n+1) .pebble { grid-row: span 4; margin: 0; }
  }
  @media (min-width: 1240px) {
    .bj-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bj-tile:last-child:nth-child(3n+1) { grid-column: auto; }
    .bj-tile:last-child:nth-child(3n+1) a { grid-template-columns: minmax(0, 1fr); }
    .bj-tile:last-child:nth-child(3n+1) .pebble { grid-row: auto; margin-bottom: .35rem; }
    .bj-tile:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
    .bj-tile:last-child:nth-child(4n+1) a { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); }
    .bj-tile:last-child:nth-child(4n+1) .pebble { grid-row: span 4; margin: 0; }
  }
  /* front page on phones: the tiles are a swipe row (mobile.css .swipe), one tile per screen with the next peeking */
  @media (max-width: 719px) {
    .bj-tiles-row > .bj-tiles { display: flex; gap: var(--space-3); }
    .bj-tiles-row .bj-tile { flex: 0 0 var(--sw, 86%); scroll-snap-align: start; }
    .bj-tiles-row .bj-tile a { grid-template-columns: minmax(0, 1fr); align-content: start; }
    .bj-tiles-row .bj-tile .pebble { grid-row: auto; margin-bottom: .35rem; }
  }

  /* ---- topic page hero ----------------------------------------------------------------------------------------- */
  .bj-topic-hero { background: radial-gradient(80% 70% at 90% 0%, var(--tone), transparent 62%), linear-gradient(180deg, #FFF2D8 0%, var(--paper) 100%); }
  .bj-topic-hero__inner { display: grid; gap: var(--space-5); align-items: center; }
  .bj-topic-hero__n { margin: var(--space-3) 0 0; font-weight: 800; color: var(--ink-2); }
  .bj-topic-hero__art { display: none; }
  @media (min-width: 760px) {
    .bj-topic-hero__inner { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-7); }
    .bj-topic-hero__art { display: block; aspect-ratio: 4 / 3.4; overflow: hidden; box-shadow: var(--shadow-2);
      border-radius: 50% 50% var(--arch-r) var(--arch-r) / 36% 36% var(--arch-r) var(--arch-r); }
  }

  /* ---- booking nudge + family band ----------------------------------------------------------------------------- */
  .bj-nudge { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art head" "body body"; gap: var(--space-4);
    align-items: center; padding: var(--space-5) var(--space-4); margin-top: 18px; }
  .bj-nudge__art { grid-area: art; width: 96px; }
  .bj-nudge__head { grid-area: head; display: grid; gap: .45rem; min-width: 0; }
  .bj-nudge__body { grid-area: body; display: grid; gap: var(--space-3); min-width: 0; }
  .bj-nudge .eyebrow { font-size: .78rem; letter-spacing: .1em; }
  .bj-nudge .eyebrow .i { width: 1.1em; height: 1.1em; }
  .bj-nudge__title { margin: 0; font-size: var(--step-1); line-height: 1.2; text-wrap: balance; }
  .bj-nudge__text { margin: 0; color: var(--ink-2); line-height: 1.5; }
  .bj-nudge__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  @media (max-width: 479px) { .bj-nudge__ctas > .btn { flex: 1 1 100%; justify-content: center; } }
  @media (min-width: 760px) {
    .bj-nudge { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "art head" "art body"; column-gap: var(--space-6); row-gap: var(--space-3);
      align-items: end; padding: var(--space-6); }
    .bj-nudge__body { align-self: start; }
    .bj-nudge__art { width: 200px; }
    .bj-nudge__title { font-size: var(--step-2); }
  }
  .bj-family__title { margin: var(--space-8) 0 var(--space-5); font-size: var(--step-2); }

  /* ---- the article --------------------------------------------------------------------------------------------- */
  .bj-head__inner { max-width: calc(1080px + 2 * var(--gutter)); }     /* left edge = the hero photo's left edge */
  .bj-head__top { margin: 0 0 var(--space-3); }
  .bj-head__title { margin: 0; font-size: clamp(2rem, 1.35rem + 3.1vw, 3.6rem); line-height: 1.06; max-width: 18em; text-wrap: balance; }
  .bj-head__lead { margin-top: var(--space-4); max-width: 42rem; font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
  .bj-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin: var(--space-5) 0 0; font-weight: 700; font-size: .95rem; color: var(--ink-2); }
  .bj-byline__who { color: var(--ink); font-weight: 800; }
  .bj-byline__dot { color: var(--ink-3); }
  /* phones: "By BilluBnB, Noida" on its own row, so the row count never depends on whether the web font has loaded (CLS) */
  @media (max-width: 599px) { .bj-byline__who { flex-basis: 100%; } .bj-byline__who + .bj-byline__dot { display: none; } }

  .bj-read { padding-top: var(--space-5); }
  .bj-hero { margin: 0 auto var(--space-7); max-width: 1080px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-2);
    border-radius: 50% 50% var(--arch-r) var(--arch-r) / 22% 22% var(--arch-r) var(--arch-r); }
  .bj-hero > img { display: block; width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 599px) { .bj-hero { aspect-ratio: 4 / 3; margin-bottom: var(--space-6); border-radius: 50% 50% var(--arch-r) var(--arch-r) / 30% 30% var(--arch-r) var(--arch-r); } }

  .bj-layout { display: grid; gap: var(--space-5); justify-content: center; grid-template-columns: minmax(0, 43rem); }
  .bj-side { display: none; }
  @media (min-width: 1100px) {
    .bj-layout { grid-template-columns: minmax(0, 43rem) 280px; gap: var(--space-8); }
    .bj-side { display: block; }
    .bj-toc--phone { display: none; }
  }
  .bj-side__sticky { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: var(--space-5); }
  .bj-side__label { margin: 0 0 var(--space-2); font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
  .bj-side__card { padding: var(--space-4); border-radius: var(--r-md); background: var(--paper-2); }
  .bj-side__card p:not(.bj-side__label) { margin: 0 0 var(--space-2); font-size: .95rem; color: var(--ink-2); line-height: 1.5; }

  .bj-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
  .bj-toc--side ol { border-left: 2px solid var(--line); }
  .bj-toc--side a { display: block; padding: .45rem 0 .45rem .9rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2);
    font-weight: 700; font-size: .95rem; line-height: 1.35; text-decoration: none; }
  .bj-toc--side a:hover { color: var(--ink); }
  .bj-toc--side a[aria-current="true"] { color: var(--ink); border-left-color: var(--sun-deep); font-weight: 800; }
  .bj-toc--phone { border-radius: var(--r-md); background: var(--paper-2); }
  .bj-toc--phone summary { display: flex; align-items: center; gap: .55rem; min-height: 52px; padding: .4rem 1rem; cursor: pointer; list-style: none; font-weight: 800; }
  .bj-toc--phone summary::-webkit-details-marker { display: none; }
  .bj-toc--phone summary > span { flex: 1; }
  .bj-toc--phone summary .i { width: 20px; height: 20px; } .bj-toc--phone summary .i:last-child { transition: transform var(--dur-2) var(--ease); }
  .bj-toc--phone[open] summary .i:last-child { transform: rotate(180deg); }
  .bj-toc--phone ol { padding: 0 1rem .8rem 2.6rem; counter-reset: t; }
  .bj-toc--phone li { counter-increment: t; position: relative; }
  .bj-toc--phone li::before { content: counter(t); position: absolute; left: -1.6rem; top: .62rem; font-weight: 800; font-size: .85rem; color: var(--amber); }
  .bj-toc--phone a { display: block; padding: .5rem 0; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: none; line-height: 1.4; }

  /* body typography (on top of .prose--article) */
  .bj-body h2 { scroll-margin-top: calc(var(--header-h) + 24px); font-size: clamp(1.45rem, 1.25rem + .9vw, 1.95rem); line-height: 1.2; text-wrap: balance; }
  .bj-body h3 { font-size: 1.2rem; }
  .bj-body .prose > p:first-child { font-size: 1.14em; line-height: 1.65; color: var(--ink); }
  .bj-body .prose > p:first-child::first-letter { float: left; margin: .08em .1em 0 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100;
    font-weight: 800; font-size: 3.4em; line-height: .8; color: var(--amber); }
  .bj-body blockquote { position: relative; margin: var(--space-6) 0; padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 1.6rem);
    border: 0; border-radius: var(--r-md); background: var(--blush-soft); color: var(--ink);
    font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 550; font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); line-height: 1.4; }
  .bj-body blockquote::before { content: "“"; position: absolute; left: .9rem; top: .35rem; font-size: 3.4rem; line-height: 1; color: var(--sun-deep); }
  .bj-body blockquote p { margin: 0; }
  .bj-body a:not([class]) { color: var(--amber); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: .16em; }
  .bj-body .vetbox { margin-top: var(--space-7); padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 6px); border-radius: var(--r-md);
    background: var(--sage-tint); box-shadow: inset 6px 0 0 var(--sage-deep); }
  .bj-body .vetbox h3 { margin: 0 0 var(--space-3); color: var(--sage-deep); font-size: 1.2rem; }
  .bj-body .vetbox ul > li::before { background: var(--sage-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage-deep) 18%, transparent); }

  .bj-after { max-width: 43rem; margin: var(--space-7) auto 0; display: grid; gap: var(--space-4); }
  @media (min-width: 1100px) { .bj-after { margin-left: max(0px, calc((100% - 43rem - 280px - var(--space-8)) / 2)); } }
  .bj-after .honest { max-width: none; }
  .bj-note { background: var(--paper-2); }
  .bj-note--health { background: var(--sage-tint); }
  .bj-note--ai .i { color: var(--amber); }
  .bj-tags { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0; }
  .bj-tagword { padding: .2rem .65rem; border-radius: var(--r-pill); background: var(--paper-3); border: 1px solid var(--line); font-size: .85rem; font-weight: 700; color: var(--ink-2); }
  .bj-share { margin-top: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line); display: grid; gap: var(--space-3); }
  .bj-share__label { margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: var(--step-1); }
  .bj-share__row { display: flex; flex-wrap: wrap; gap: .6rem; }
  .bj-cid { margin: 0; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); user-select: all; }
  .bj-more { margin: var(--space-6) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bj-progress { display: none !important; }
  .bj-card__media > img, .bj-tile a, .bj-chip { transition: none !important; }
  .bj-card:hover .bj-card__media > img, .bj-tile a:hover, .bj-chip:hover { transform: none !important; }
}