/* =============================================================================
   VOCTOS BLOG — the front page

   THE ONE IDEA HERE. An earlier version varied the INSIDE of every desk
   section — a feature here, a numbered list there, a case ledger — and
   wrapped all six in the SAME FRAME: a heading row on the left, "See the
   desk →" on the right, the same container, the same air, six times. That
   repetition is what reads as machine-made. A designed page changes its
   frame; a generated one repeats it.

   So every desk gets a different FRAME, chosen by what the desk publishes,
   and no two consecutive sections share a frame, a background, or a
   container width:

     .vbf-mast    a desk word at up to 56px over a 2px rule, its feature art
                  below it, four pieces on hairlines with no card chrome
     .vbf-band    FULL BLEED ink, no container, no heading row — the desk name
                  cut into the band's own bottom edge as a 230px ghost, one
                  answer at 26px over its image and two more on a hairline
     .vbf-spine   a sticky rail listing every desk with its colour; the rail
                  IS the heading and doubles as navigation for a 10,000px page
     .vbf-slab    FULL BLEED image, a headline at up to 56px, and a white card
                  pulled -58px up INTO the slab's bottom edge
     .vbf-ledger  no heading at all — a small-caps line, a 2px rule that wipes
                  across on scroll, then the figures at up to 62px
     .vbf-panel   the navy panel, its label set vertically down the gutter;
                  one item leads tall and the rest stack beside it

   Which desk gets which frame is decided in PHP (front-page.php), not here,
   so a site with four desks or eight still gets six distinct frames in
   rotation rather than four copies of the first one.
============================================================================= */

/* =============================================================================
   LATEST — the only conventional heading row on the page

   Deliberately ordinary, and deliberately the only one: with everything
   around it structured differently, the plain heading row reads as the
   publication's own voice rather than as a template.
============================================================================= */
.vb-latest { padding-block:58px 0; }

/* =============================================================================
   FRAME 1 · THE MASTHEAD LINE

   An earlier attempt set the desk word at 142px straddling the image's bottom
   edge. On screen that did not read as a designed overlap — it read as the
   section climbing into the section above it. Overlap only works where the
   thing being crossed clearly belongs to the same section, which is why the
   Marketing slab keeps its overlap and this does not.
============================================================================= */
.vbf-mast { padding-block:70px 0; }
.vbf-mast-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 28px;
                 padding-bottom:16px; }
.vbf-word { font-size:var(--t2); line-height:.9; letter-spacing:-.04em; color:var(--acc); }
.vbf-cnt { flex:1 1 200px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
           color:var(--faint); }
.vbf-mast-line .vb-all { flex:none; font-size:16px; align-self:center; }
.vbf-rule { display:block; height:2px; background:var(--ink); margin-bottom:26px; }

.vbf-art { position:relative; display:block; overflow:hidden; border-radius:30px;
           background:#101a33; }
.vbf-art > img { display:block; width:100%; height:340px; object-fit:cover;
                 transition:scale .7s var(--ease); }
@media (min-width:900px){ .vbf-art > img { height:clamp(380px,34vw,470px); } }
.vbf-art:hover > img { scale:1.03; }
.vbf-art::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(9,17,34,.14) 0%,rgba(9,17,34,.5) 52%,
                             rgba(9,17,34,.92) 100%); }
/* the caption reads from the INLINE START like everything else. Flush-right
   English in the middle of a left-set layout was the loudest wrong note in
   this section. */
.vbf-cap { position:absolute; z-index:2; inset-inline:26px; bottom:26px; }
@media (min-width:900px){ .vbf-cap { inset-inline:44px auto; bottom:40px; max-width:46ch; } }
.vbf-cap em { display:block; margin-bottom:11px; font-style:normal; font-size:11px;
              letter-spacing:.15em; text-transform:uppercase; color:var(--limesoft); }
.vbf-cap h3 { font-size:var(--t4); line-height:1.14; color:#fff; }
.vbf-cap p { margin-top:12px; font-size:15px; line-height:1.55; max-width:42ch;
             color:rgba(255,255,255,.74); }
.vbf-cap s { display:block; margin-top:14px; text-decoration:none; font-size:11px;
             letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); }

/* four pieces on hairlines — no cards, so this row can never be mistaken for
   the Latest grid above it */
.vbf-row { display:grid; grid-template-columns:1fr; margin-top:26px;
           border-top:1px solid var(--rule); list-style:none; }
@media (min-width:640px){ .vbf-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .vbf-row { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.vbf-row li { padding:22px 24px 0; border-inline-start:1px solid var(--rule); }
.vbf-row li:first-child { padding-inline-start:0; border-inline-start:0; }
@media (max-width:999px){
  .vbf-row li:nth-child(3){ border-inline-start:0; padding-inline-start:0; }
}
/* ── THE DESK FRAME ON A PHONE, treated like Latest above it ─────────────────
   Three changes, all at ≤639, all for the same reason the front page's own
   Latest section got them: the section was four full-width blocks stacked
   under a lead whose caption had become unreadable.

   1 · THE LINK IS THE ARROW. `.vbf-mast-line .vb-all` re-states a font-size at
       0-2-0, so the theme-wide arrow-only rule in base.css (0-1-0) could not
       reach it and "See the desk" kept a line of its own under the count.
       `order` then puts the arrow on the desk word's row and pushes the count
       below both, so the head is two lines instead of three.

   2 · THE FOUR PIECES ARE ONE SCROLLING ROW, the same rail as Latest, with
       the same padding/margin pair holding the bleed to the screen edges and
       the same `animation:none` — the rail is the nearest scroll container,
       so a view() timeline would measure these against a box they never
       scroll through.

   3 · THE LEAD'S DECK COMES OFF, and this one is a legibility fix rather than
       a layout one. The caption sits ON the artwork over a scrim that only
       reaches .5 opacity at 52% of the image height. At 375px the eyebrow,
       a three-line headline, a 28-word deck and a byline are about 200px of
       type on a 340px image — so the top half of the caption was landing on
       the bright, barely-dimmed part of the picture. Dropping the deck on a
       phone keeps the caption inside the dark band; the scrim is deepened as
       well so the headline never depends on what the photograph happens to
       be. */
@media (max-width:639px){
  .vbf-mast-line { gap:12px 16px; }
  .vbf-word { flex:1 1 auto; }
  .vbf-mast-line .vb-all { font-size:0; gap:0; flex:none; align-self:center; }
  .vbf-mast-line .vb-all > span { font-size:16px; width:36px; height:36px; }
  .vbf-cnt { flex:1 0 100%; order:1; }

  .vbf-art::after {
    background:linear-gradient(180deg,rgba(9,17,34,.22) 0%,rgba(9,17,34,.62) 44%,
                               rgba(9,17,34,.95) 100%);
  }
  .vbf-cap p { display:none; }

  .vbf-row { display:flex; gap:16px; margin-top:22px;
             overflow-x:auto; overflow-y:hidden;
             scroll-snap-type:x proximity; scrollbar-width:none;
             padding:22px 25px 4px; margin-inline:-25px;
             scroll-padding-inline:25px; }
  .vbf-row::-webkit-scrollbar { display:none; }
  .vbf-row > li { flex:0 0 240px; scroll-snap-align:start;
                  padding:0; border:0; }
  .vbf-row > .vb-in { animation:none; }
}
.vbf-th { display:block; overflow:hidden; border-radius:16px; }
.vbf-row img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
               transition:scale .5s var(--ease); }
.vbf-th:hover img { scale:1.05; }
.vbf-row b { display:block; margin-top:16px; font-size:11px; font-weight:400;
             letter-spacing:.14em; color:var(--acc); }
.vbf-row h4 { margin-top:10px; font-size:var(--t6); line-height:1.3; }
.vbf-row h4 a:hover { color:var(--acc); }
.vbf-row span { display:block; margin-top:9px; font-size:11px; letter-spacing:.09em;
                text-transform:uppercase; color:var(--faint); }

/* =============================================================================
   FRAME 2 · THE FULL-BLEED INK BAND

   Three identical rows with the thumbnail always on the same side is a list,
   not a composition, and it was the flattest thing on the page. One entry now
   leads over its own image; the rest share a hairline with square thumbnails,
   so the band has a dominant element and subordinates instead of equals.
============================================================================= */
.vbf-band { position:relative; margin-top:58px; background:var(--night); color:#fff;
            overflow:hidden; padding-block:70px 60px; }
@media (min-width:1024px){ .vbf-band { padding-block:88px 70px; } }
/* scenery, not a label — nobody is meant to read it as a heading */
.vbf-ghost { position:absolute; inset-inline-start:-.02em; bottom:-.3em; z-index:0;
             font-size:clamp(84px,15vw,230px); line-height:.8; font-weight:400;
             letter-spacing:-.04em; color:rgba(255,255,255,.055); white-space:nowrap;
             pointer-events:none; user-select:none; }
.vbf-band-in { position:relative; z-index:1; }
.vbf-band-lede { max-width:52ch; margin-bottom:36px; font-size:17px; line-height:1.6;
                 color:rgba(255,255,255,.66); }
.vbf-band-lede b { font-weight:400; color:#fff; }

.vbf-feat { position:relative; display:block; overflow:hidden; border-radius:24px;
            background:#101a33; }
.vbf-feat > img { display:block; width:100%; height:300px; object-fit:cover;
                  transition:scale .7s var(--ease); }
@media (min-width:1024px){ .vbf-feat > img { height:380px; } }
.vbf-feat:hover > img { scale:1.03; }
.vbf-feat::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(15,23,42,.22) 0%,rgba(15,23,42,.62) 50%,
                             rgba(15,23,42,.95) 100%); }
.vbf-feat > div { position:absolute; z-index:2; inset-inline:26px; bottom:26px; }
@media (min-width:1024px){ .vbf-feat > div { inset-inline:44px; bottom:36px; } }
.vbf-feat h3 { font-size:var(--t4); line-height:1.08; letter-spacing:-.01em; color:#fff;
               max-width:20ch; }
.vbf-feat p { margin-top:14px; max-width:58ch; font-size:15.5px; line-height:1.6;
              color:rgba(255,255,255,.76); }
.vbf-feat s { display:block; margin-top:14px; text-decoration:none; font-size:11px;
              letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.52); }

.vbf-pair { display:grid; grid-template-columns:1fr; margin-top:6px; list-style:none; }
@media (min-width:900px){ .vbf-pair { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.vbf-pair li { display:grid; grid-template-columns:76px minmax(0,1fr); gap:18px;
               align-items:start; padding:30px 0 6px;
               border-top:1px solid rgba(255,255,255,.14); }
@media (min-width:900px){
  .vbf-pair li { padding:32px 0 6px 40px;
                 border-inline-start:1px solid rgba(255,255,255,.14); }
  .vbf-pair li:first-child { padding-inline-start:0; border-inline-start:0; }
}
.vbf-sq { display:block; overflow:hidden; border-radius:14px; }
.vbf-sq img { display:block; width:76px; height:76px; object-fit:cover;
              transition:scale .5s var(--ease); }
.vbf-sq:hover img { scale:1.07; }
.vbf-q { font-size:var(--t5); line-height:1.26; color:#fff; }
@media (min-width:1000px){ .vbf-q { max-width:24ch; } }
.vbf-q a:hover { color:var(--limesoft); }
.vbf-ans { margin-top:13px; padding-inline-start:16px;
           border-inline-start:2px solid var(--acc); font-size:15px; line-height:1.62;
           max-width:62ch; color:rgba(255,255,255,.68); }
.vbf-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; list-style:none; }
.vbf-chips li { font-size:11px; color:rgba(255,255,255,.75);
                background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
                border-radius:999px; padding:5px 12px; }
.vbf-when { margin-top:10px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
            color:rgba(255,255,255,.4); }
/* the band CLOSES on a rule instead of opening on a heading */
.vbf-band-foot { display:flex; flex-wrap:wrap; align-items:center;
                 justify-content:space-between; gap:16px 24px; margin-top:34px;
                 padding-top:24px; border-top:1px solid rgba(255,255,255,.14); }
.vbf-band-foot p { font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
                   color:rgba(255,255,255,.42); }
.vbf-band-foot p b { font-weight:400; color:#fff; unicode-bidi:plaintext; }

/* ── THE BAND ON A PHONE ─────────────────────────────────────────────────────
   Same three moves as the desk frame above, and the same reasons.

   THE PAIR BECOMES A RAIL, and its items change shape to do it. The desktop
   item is a 76px square beside its text; in a 300px rail column that leaves
   about 200px for an 18px headline, which is eleven characters a line. So in
   the rail the thumbnail goes ABOVE the text and runs the full width — the
   headline gets the whole column, and the item reads as a card rather than as
   a squeezed row. Two items instead of two stacked blocks is about 440px off
   the section.

   THE ANSWER IS CLAMPED, NOT CUT. It is the point of this desk — the quoted
   reply under the question — so it keeps four lines and a click, rather than
   disappearing the way the lead's deck does.

   THE FEATURE'S DECK DOES GO, for the legibility reason: 34 words plus a
   three-line headline is roughly 250px of type inside a 300px image, so the
   top of it lands above the scrim's dark half. */
@media (max-width:639px){
  .vbf-feat p { display:none; }

  .vbf-pair { display:flex; gap:16px; margin-top:20px;
              overflow-x:auto; overflow-y:hidden;
              scroll-snap-type:x proximity; scrollbar-width:none;
              padding:0 25px 6px; margin-inline:-25px;
              scroll-padding-inline:25px; }
  .vbf-pair::-webkit-scrollbar { display:none; }
  .vbf-pair > li { flex:0 0 300px; scroll-snap-align:start;
                   display:block; padding:22px 0 6px;
                   border-top:1px solid rgba(255,255,255,.14); }
  .vbf-pair > .vb-in { animation:none; }
  .vbf-sq { margin-bottom:16px; }
  .vbf-sq img { width:100%; height:120px; }
  .vbf-ans { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
             overflow:hidden; }

  /* the count and the arrow share the closing row instead of the arrow
     dropping to a line of its own under it */
  .vbf-band-foot { flex-wrap:nowrap; }
  .vbf-band-foot p { min-width:0; }
}

/* =============================================================================
   FRAME 3 · THE STICKY SPINE + RUNBOOK

   Six equal cells in two columns read as a grid of links. These are steps in
   an order, so they run as ONE column with the numeral out in the margin and
   a continuous hairline threaded through it — the order becomes the structure.

   The rail travels with the reader and stops at the end of its own section.
   It had been written this way from the start and never worked, for one
   reason: an ancestor with `overflow-x:hidden` becomes the scroll container
   for every sticky descendant inside it, so `top` stops resolving against
   the viewport. There is no overflow clip above this rail anywhere in the
   theme, and that is not an accident.
============================================================================= */
.vbf-spine { padding-block:70px 0; }
.vbf-spine-row { display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:1000px){
  .vbf-spine-row { grid-template-columns:230px minmax(0,1fr); gap:60px; align-items:start; }
  .vbf-rail { position:sticky; top:104px; align-self:start; }
}
.vbf-rail h2 { font-size:var(--t3); line-height:1; letter-spacing:-.01em; }
.vbf-rail > p { margin-top:14px; font-size:13.5px; line-height:1.6; color:var(--muted); }
.vbf-index { margin-top:24px; padding-top:18px; border-top:1px solid var(--rule);
             display:grid; list-style:none; }
.vbf-index a { display:grid; grid-template-columns:3px minmax(0,1fr) auto; gap:12px;
               align-items:center; padding:9px 0; font-size:13px; color:var(--faint);
               transition:color .18s var(--ease); }
.vbf-index i { display:block; width:3px; height:15px; border-radius:2px;
               background:var(--desk); opacity:.34;
               transition:opacity .18s var(--ease), height .18s var(--ease); }
.vbf-index a:hover { color:var(--ink); }
.vbf-index a:hover i { opacity:1; height:19px; }
.vbf-index b { font-weight:400; font-size:11px; }
.vbf-index .is-here a { color:var(--ink); }
.vbf-index .is-here i { opacity:1; height:19px; }

.vbf-steps { position:relative; list-style:none; }
.vbf-steps::before { content:''; position:absolute; top:26px; bottom:26px;
                     inset-inline-start:23px; width:1px; background:var(--rule); }
@media (max-width:759px){ .vbf-steps::before { display:none; } }
.vbf-steps li { position:relative; display:grid; grid-template-columns:1fr; gap:6px 22px;
                padding:14px 0; border-top:1px solid var(--rule); }
.vbf-steps li:first-child { border-top:0; padding-top:0; }
@media (min-width:760px){
  /* 150px on the thumbnail column, not 108: the caption wrapped to two lines
     on half the rows at the narrower width */
  .vbf-steps li { grid-template-columns:46px minmax(0,1fr) 150px; align-items:center; }
}
/* the numeral sits ON the hairline and masks it, so the line threads between
   the numbers rather than running behind them */
.vbf-steps b { position:relative; z-index:1; font-size:20px; font-weight:400;
               line-height:1; color:var(--acc); font-variant-numeric:tabular-nums;
               background:var(--page); padding-block:8px; }
@media (min-width:760px){ .vbf-steps b { font-size:26px; } }
.vbf-steps h4 { font-size:var(--t5); line-height:1.3; }
.vbf-steps h4 a:hover { color:var(--ink); text-decoration:underline;
                        text-underline-offset:4px; }
/* step 01 is the one that gets skipped, so it is set one step up */
.vbf-steps li:first-child h4 { font-size:var(--t4); line-height:1.2; }
.vbf-steps p { margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--muted);
               max-width:58ch; }
.vbf-steps span { display:block; margin-top:9px; font-size:11px; letter-spacing:.09em;
                  text-transform:uppercase; color:var(--faint); }
.vbf-steps .vbf-th { border-radius:12px; }
.vbf-steps img { display:block; width:150px; height:88px; object-fit:cover;
                 transition:scale .5s var(--ease); }
@media (max-width:759px){ .vbf-steps img { width:100%; height:150px; } }

/* ── THE RUNBOOK ON A PHONE ──────────────────────────────────────────────────
   NOT A RAIL, and this is the one frame where that would be wrong. These are
   steps in an order — 01 through 06 — and an order is read DOWN. Putting them
   on a horizontal track would hide step 04 behind a gesture and break the one
   thing the frame exists to show.

   So the height comes out of the pictures instead. Each row was carrying a
   full-width 150px image: 900px of photographs on a list of procedures, more
   than a third of a 2,500px section, and none of it telling a reader anything
   the title does not. The image becomes a 64px chip at the end of the row and
   the row becomes what it always was on paper — a number, a name, a date.

   THE DESK INDEX GOES TOO. It lists the same six desks with the same counts
   as the folder tabs at the top of the page; on a desktop it earns its place
   by travelling with the reader as a sticky rail, and on a phone it is not
   sticky and is simply the same navigation a second time. */
@media (max-width:639px){
  .vbf-index { display:none; }

  .vbf-steps li { grid-template-columns:32px minmax(0,1fr) 64px; gap:0 14px;
                  align-items:center; padding:15px 0; }
  .vbf-steps li:first-child { padding-top:0; }
  /* the hairline it masked is already hidden at this width */
  .vbf-steps b { font-size:18px; padding-block:0; background:none; }
  .vbf-steps h4 { font-size:16px; }
  .vbf-steps li:first-child h4 { font-size:18px; }
  /* step 01's paragraph is 26 words in a ~200px column — nine lines, for one
     row out of six */
  .vbf-steps p { display:none; }
  .vbf-steps span { margin-top:6px; }
  .vbf-steps img { width:64px; height:64px; }
}

/* =============================================================================
   FRAME 4 · THE FULL-BLEED SLAB, OVERLAPPED

   One story at hero scale, then a white card pulled UP into the slab's bottom
   edge. Sitting below the slab it was just another row; overlapping, it is
   the move that makes a spread look composed rather than stacked.
============================================================================= */
.vbf-slab { margin-top:76px; }
.vbf-slab-art { position:relative; display:flex; align-items:flex-end; min-height:480px;
                overflow:hidden; background:#101a33; }
@media (min-width:1024px){ .vbf-slab-art { min-height:560px; } }
.vbf-slab-art > img { position:absolute; inset:0; width:100%; height:100%;
                      object-fit:cover; transition:scale .8s var(--ease); }
.vbf-slab-art:hover > img { scale:1.03; }
/* TWO scrims, not one: the vertical gradient alone left the headline on the
   brightest part of the photograph */
.vbf-slab-art::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(9,17,34,.5) 0%,rgba(9,17,34,.2) 30%,
                             rgba(9,17,34,.82) 78%,rgba(9,17,34,.96) 100%),
             linear-gradient(90deg,rgba(9,17,34,.78) 0%,rgba(9,17,34,.5) 42%,
                             rgba(9,17,34,0) 74%); }
[dir="rtl"] .vbf-slab-art::after {
  background:linear-gradient(180deg,rgba(9,17,34,.5) 0%,rgba(9,17,34,.2) 30%,
                             rgba(9,17,34,.82) 78%,rgba(9,17,34,.96) 100%),
             linear-gradient(270deg,rgba(9,17,34,.78) 0%,rgba(9,17,34,.5) 42%,
                             rgba(9,17,34,0) 74%); }
.vbf-slab-in { position:relative; z-index:2; width:100%; padding-block:80px 76px; }
@media (min-width:900px){ .vbf-slab-in { padding-block:90px 104px; } }
.vbf-slab-eb { display:inline-flex; align-items:center; gap:12px; margin-bottom:18px;
               font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#fff; }
.vbf-slab-eb i { width:26px; height:3px; border-radius:2px; background:var(--lilac); }
.vbf-slab-h { font-size:var(--t2); line-height:1.04; letter-spacing:-.02em; color:#fff;
              max-width:18ch; }
.vbf-slab-h a:hover { color:var(--limesoft); }
.vbf-slab-p { margin-top:18px; max-width:52ch; font-size:16px; line-height:1.6;
              color:rgba(255,255,255,.72); }
.vbf-slab-m { margin-top:20px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
              color:rgba(255,255,255,.5); }
.vbf-slab-under { position:relative; z-index:3; margin-top:-58px; background:#fff;
                  border-radius:30px; padding:24px 26px;
                  box-shadow:0 26px 50px -22px rgba(9,17,34,.4); display:grid;
                  grid-template-columns:1fr; gap:22px; align-items:center; }
@media (min-width:900px){
  .vbf-slab-under { grid-template-columns:repeat(2,minmax(0,1fr)) 210px; gap:30px;
                    padding:26px 34px; }
}
@media (max-width:899px){ .vbf-slab-under { margin-top:-34px; } }
.vbf-sm { display:grid; grid-template-columns:104px minmax(0,1fr); gap:18px;
          align-items:center; }
.vbf-sm img { display:block; width:104px; height:104px; border-radius:20px;
              object-fit:cover; }
.vbf-sm h4 { font-size:var(--t6); line-height:1.3; }
.vbf-sm h4 a:hover { color:var(--acc); }
.vbf-sm span { display:block; margin-top:8px; font-size:11px; letter-spacing:.09em;
               text-transform:uppercase; color:var(--faint); }

/* =============================================================================
   FRAME 5 · THE LEDGER RULE

   No heading. One small-caps line, a rule that draws itself across as the
   section enters, then the figures. A case study is a figure with a sentence
   attached, so the figure is the biggest thing in the row and the frame gets
   out of the way entirely.
============================================================================= */
.vbf-ledger { padding-block:70px 0; }
.vbf-ledger-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
                   padding-bottom:14px; }
.vbf-ledger-line b { font-size:12px; font-weight:400; letter-spacing:.2em;
                     text-transform:uppercase; }
.vbf-ledger-line s { text-decoration:none; font-size:12px; letter-spacing:.14em;
                     text-transform:uppercase; color:var(--faint); }
.vbf-ledger-line a { margin-inline-start:auto; font-size:12px; letter-spacing:.14em;
                     text-transform:uppercase; color:var(--faint);
                     transition:color .2s var(--ease); }
.vbf-ledger-line a:hover { color:var(--ink); }
.vbf-ledger-rule { display:block; height:2px; background:var(--ink); margin-bottom:6px; }
.vbf-cases { list-style:none; }
.vbf-cases li { display:grid; grid-template-columns:1fr; gap:10px; padding:26px 0;
                border-bottom:1px solid var(--rule); }
@media (min-width:900px){
  /* 176px on the last column: at 150 a two-word region broke across two lines
     while every other row sat on one, which reads as a mistake not a wrap */
  .vbf-cases li { grid-template-columns:240px minmax(0,1fr) 124px 176px; gap:30px;
                  align-items:center; }
}
.vbf-fig { font-size:clamp(38px,4.4vw,62px); line-height:.92; letter-spacing:-.045em;
           font-variant-numeric:tabular-nums; unicode-bidi:plaintext; white-space:nowrap; }
/* the caption must wrap even though the figure above it must not */
.vbf-fig s { display:block; white-space:normal; text-decoration:none; margin-top:12px;
             font-size:11px; letter-spacing:.1em; text-transform:uppercase;
             color:var(--faint); }
.vbf-cases .vbf-th { border-radius:18px; }
.vbf-cases img { display:block; width:100%; height:124px; object-fit:cover;
                 transition:scale .5s var(--ease); }
@media (max-width:899px){ .vbf-cases img { height:180px; } }
.vbf-cases h4 { font-size:var(--t5); line-height:1.3; }
.vbf-cases h4 a:hover { color:var(--purple); }
.vbf-cases p { margin-top:8px; font-size:13px; line-height:1.55; color:var(--muted);
               max-width:56ch; }
.vbf-who { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); }
@media (min-width:900px){ .vbf-who { text-align:end; } }

/* ── THE LEDGER ON A PHONE ───────────────────────────────────────────────────
   NOT A RAIL EITHER, for a different reason than the runbook: there are only
   two rows. A track that scrolls to reveal one more item is a gesture asking
   to be made for almost nothing.

   The height was in the picture again — a full-width 180px image under every
   row — so it becomes an 88px square sitting BESIDE the figure. The figure is
   what this frame is for ("a case study is a figure with a sentence attached")
   so it keeps the top-left corner and its full size; the photograph moves out
   of the flow of reading rather than out of the row. */
@media (max-width:639px){
  .vbf-cases li { grid-template-columns:minmax(0,1fr) 88px; gap:8px 16px;
                  align-items:start; padding:22px 0; }
  .vbf-fig { grid-column:1; font-size:38px; }
  .vbf-cases .vbf-th { grid-column:2; grid-row:1; }
  .vbf-cases img { width:88px; height:88px; }
  .vbf-cases li > div,
  .vbf-who { grid-column:1 / -1; }
  .vbf-cases p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
                 overflow:hidden; }
}

/* =============================================================================
   FRAME 6 · THE NAVY PANEL, LABEL ON ITS EDGE

   One item leads tall on the inline start and the rest stack beside it as
   compact horizontal cards. Three equal cards said all three matter the same,
   which is never true of research — one of them is the piece we want quoted.

   THE ROTATION IS ON THE CHILD, NEVER ON THE WRAPPER. A logical inset is
   resolved against the POSITIONED ELEMENT'S OWN writing mode, so
   writing-mode:vertical-rl on the wrapper turned inset-inline-start into
   `top`, `left` fell back to the static position, and the label printed
   straight over the first card.
============================================================================= */
/* ── A BAND, NOT A BOX ───────────────────────────────────────────────────────
   THE INK MOVED OFF THE INNER DIV AND ONTO THE SECTION. It used to be a
   rounded navy card floating on the page's grey with 30px corners and its own
   inner padding — which read as one card among the page's other cards rather
   than as the publication's own evidence section. Full-bleed, it becomes a
   band the page passes through.

   THE CONTENT STAYS ON THE SITE'S GRID. The background runs edge to edge; the
   `.vb-w` inside keeps the 1350 measure every other section uses, so the
   heading here starts on the same vertical line as the heading above it. That
   is the whole reason the 92px inner left padding had to go: in a box an
   indent is just an indent, but in a band it is a column that visibly fails to
   line up with the rest of the page. */
/* THE BAND JOINS THE PAGE'S OWN RHYTHM. As a rounded card it carried
   `padding-block:70px 0`, which was the space above it; going full-bleed that
   padding had to go, because on a band it would have been 70px of INK rather
   than 70px of page. The margin replaces it on the outside.

   40 IS NOT A NEW NUMBER. Every section above this one is separated by
   exactly 40px — `.vbf-svc` carries `margin-top:40px` and it repeats six times
   down the page, measured. The band was the only section sitting at 0, which
   is why its dark edge appeared glued to the white card above it.

   NOTHING IS ADDED BELOW. The section that follows opens with 70px of its own
   top padding, so the light background already separates them; a margin here
   would stack with it and make the gap under the band nearly twice the one
   over it. */
.vbf-panel { margin-block-start:40px; background:var(--ink); color:#fff; }
.vbf-panel-in { position:relative; padding-block:38px 34px; }
@media (min-width:1024px){ .vbf-panel-in { padding-block:64px 58px; } }

/* THE VERTICAL LABEL MOVES INTO THE PAGE'S GUTTER. It cannot stay inside the
   measure without pushing the content off the grid, so it sits just outside
   it — and therefore only appears when there is a gutter to sit in.

   THE BREAKPOINT IS ARITHMETIC, NOT A GUESS. `.vb-w` is 1350 wide with 25px
   of padding, so `.vbf-panel-in` starts 25px inside it. At -38px the label's
   24px column runs from 13px OUTSIDE the measure to 11px inside it, leaving
   14px of air before the text. It needs 13px of gutter, and the gutter is
   (viewport - 1350) / 2, so it needs a 1376px viewport. 1400 is the next
   round number above that. Below it the label is hidden rather than allowed
   to collide with the first cover — the same thing it already did below
   1024. */
.vbf-edge { display:none; }
@media (min-width:1400px){
  .vbf-edge { display:flex; flex-direction:column; align-items:center; gap:16px;
              position:absolute; inset-inline-start:-38px; top:4px; bottom:4px;
              width:24px; }
  .vbf-edge i { display:block; flex:1; width:2px; background:rgba(198,227,107,.5); }
  .vbf-edge b { writing-mode:vertical-rl; rotate:180deg; font-weight:400; font-size:13px;
                letter-spacing:.24em; text-transform:uppercase;
                color:rgba(255,255,255,.5); white-space:nowrap; }
}
.vbf-panel-top { display:flex; flex-wrap:wrap; align-items:flex-end;
                 justify-content:space-between; gap:16px 24px; margin-bottom:26px; }
.vbf-panel-top h2 { font-size:var(--t3); line-height:1.1; max-width:22ch; }
/* ── THE STUDIES: A TABLE OF COLUMNS ─────────────────────────────────────
   THIRD SHAPE, AND THE REASONING FOR EACH MOVE IS WORTH KEEPING.

     1. one tall lead + two compact cards. Measured: the two side studies
        resolved to a 132x345 picture column, cropping a 1200x630 cover into
        a portrait sliver with its title sliced mid-word, and the sample was
        capped at six lines with overflow:auto — 113px shown against 188px
        and 281px, so 40-60% of the evidence sat behind a 5px scrollbar.
     2. one row per study. That fixed both: nothing cropped, nothing hidden.
        But a row whose evidence runs six lines is a tall row, and three of
        them made the panel the deepest thing on the page.
     3. columns. Same three studies read side by side, so the eye compares
        sample against sample instead of scrolling past them one at a time —
        which is what a table is for, and these are studies.

   THE EVIDENCE IS STILL PRINTED IN FULL. That was the whole point of moving
   off shape 1 and it is not quietly given back here: no clamp, no scroll, no
   max-height. Columns differ in height because the evidence differs in
   length, and that is the honest result. */
.vbf-studies { display:grid; grid-template-columns:1fr; gap:0; list-style:none; }

.vbf-study { display:flex; flex-direction:column; gap:12px;
             padding-block:22px; border-top:1px solid rgba(255,255,255,.12); }

/* THE COVER KEEPS ITS SHAPE. A fixed ratio box, never a cell the layout is
   free to squeeze — that is exactly what cropped the old side cards. These
   covers are 720x450 with the study's title drawn into them, which is 16/10
   to the pixel, so object-fit has nothing to crop. */
.vbf-study-pic { display:block; overflow:hidden; border-radius:14px;
                 background:rgba(255,255,255,.06); }
.vbf-study-pic img { display:block; width:100%; aspect-ratio:16/10;
                     object-fit:cover; transition:scale .5s var(--ease); }
.vbf-study:hover .vbf-study-pic img { scale:1.04; }

.vbf-study h3 { font-size:var(--t6); line-height:1.28; color:#fff; }
.vbf-study h3 a:hover { color:var(--limesoft); }
.vbf-study-ex { font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.6); }
.vbf-study-ex:empty { display:none; }

/* THE EVIDENCE, key above value. Not a two-column <dl>: the sample is a
   paragraph of arbitrary length, and a definition grid would set it in a
   narrow column beside a one-word label. */
.vbf-study-cell { min-width:0; padding-top:13px;
                  border-top:1px solid rgba(255,255,255,.12); }
.vbf-ev-k { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
            color:rgba(255,255,255,.38); }
.vbf-ev-v { margin:5px 0 0; font-size:13px; line-height:1.55; color:var(--limesoft); }
.vbf-ev-date { white-space:nowrap; }
/* a study with no sample on file says so rather than looking like one whose
   sample the layout simply is not showing */
.vbf-ev-none { color:rgba(255,255,255,.3); }

/* no cap and no scrollbar — the class stays so nothing referencing it breaks,
   but every declaration that hid text is gone */
.vbf-sample { max-height:none; overflow:visible; }

@media (min-width:880px){
  /* ── A TABLE OF COLUMNS, WITH ITS ROWS ACTUALLY LINED UP ─────────────────
     FIRST ATTEMPT WAS THREE FLEX COLUMNS, and it looked right in isolation
     and wrong side by side: each column pushed its own evidence to its own
     bottom, so with samples of 42, 105 and 146px the word SAMPLE printed at
     three different heights. Reading across — which is the only reason to
     put evidence in columns rather than rows — meant hunting for the label
     in each one.

     `subgrid` makes the five parts share the parent's rows, so every cover
     sits on one line, every title on the next, and SAMPLE and VERIFIED each
     land on a single line across all three. The sample row takes the height
     of the longest sample and the two shorter ones leave the rest blank,
     exactly as a table column does. Nothing is clipped to achieve it. */
  .vbf-studies { grid-template-columns:repeat(3,minmax(0,1fr));
                 grid-template-rows:auto auto auto auto auto;
                 column-gap:28px; row-gap:12px;
                 border-top:1px solid rgba(255,255,255,.12); padding-top:26px; }
  .vbf-study { grid-row:span 5; row-gap:0; padding-block:0 4px; border-top:0; }
  /* HALF THE GAP, NOT THE WHOLE GAP. Pulled by the full 28 the rule landed
     flush against the previous column's text with all 28px of air on its own
     side — measured, a divider 0px from one column and 28 from the other. */
  .vbf-study + .vbf-study { border-left:1px solid rgba(255,255,255,.12);
                            padding-left:14px; margin-left:-14px; }

  @supports (grid-template-rows:subgrid){
    .vbf-study { display:grid; grid-template-rows:subgrid; }
  }
  /* WITHOUT subgrid the columns keep the flex stack they already had, with
     the evidence pushed to the bottom. Rows will not align there, which is
     the thing subgrid is here to fix — but nothing is hidden or broken, and
     every browser this theme supports except older Safari has it. */
  @supports not (grid-template-rows:subgrid){
    .vbf-study { gap:12px; }
    .vbf-study-cell:last-child { margin-top:auto; }
  }
}
@media (min-width:1200px){
  .vbf-studies { column-gap:36px; }
  .vbf-study + .vbf-study { padding-left:18px; margin-left:-18px; }
  .vbf-study h3 { font-size:var(--t5); }
}

/* ON A PHONE they stack, each with its cover, its finding and its evidence.
   No rail: a rail suits a row of similar cards, and these are three items
   whose whole value is the paragraph under each — a 272px card could only
   show that by hiding most of it again, which is the first shape's mistake. */
@media (max-width:639px){
  .vbf-study { padding-block:18px; gap:11px; }
  .vbf-study-ex { display:-webkit-box; -webkit-line-clamp:3;
                  -webkit-box-orient:vertical; overflow:hidden; }
}

/* =============================================================================
   THE RECORD — the theme's own connected-path timeline
============================================================================= */
.vb-record { padding-block:70px 0; }
.vb-rec-row { display:grid; grid-template-columns:1fr; gap:34px; }
@media (min-width:1024px){
  .vb-rec-row { grid-template-columns:450px minmax(0,1fr); gap:64px; align-items:start; }
  /* the intro travels down the record with the reader and stops at the last
     entry, exactly as the Technical rail does */
  .vb-rec-intro { position:sticky; top:104px; align-self:start; }
}
.vb-eb { font-size:11.5px; letter-spacing:.17em; text-transform:uppercase;
         color:var(--limeink); margin-bottom:16px; }
.vb-rec-h { font-size:var(--t3); line-height:1.08; letter-spacing:-.01em; }
.vb-rec-lede { margin-top:16px; font-size:15px; line-height:1.6; color:var(--muted);
               max-width:34ch; }
.vb-rec-intro .vb-all { margin-top:24px; }
.vb-rec-list { position:relative; list-style:none; }
.vb-rec-list::before { content:''; position:absolute; top:14px; bottom:14px;
                       inset-inline-start:7px; width:2px; background:var(--rule); }
@media (min-width:760px){ .vb-rec-list::before { inset-inline-start:135px; } }
.vb-rec-item { position:relative; display:grid; grid-template-columns:1fr; gap:6px;
               padding:0 0 30px 34px; }
@media (min-width:760px){
  .vb-rec-item { grid-template-columns:110px minmax(0,1fr); gap:66px; padding:0 0 34px 0;
                 align-items:start; }
}
[dir="rtl"] .vb-rec-item { padding:0 34px 30px 0; }
@media (min-width:760px){ [dir="rtl"] .vb-rec-item { padding:0 0 34px 0; } }
.vb-rec-when { font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
               color:var(--faint); padding-top:2px; }
@media (min-width:760px){ .vb-rec-when { text-align:end; } }
/* the dot: 18px green, a 4px white ring, a 2px pale halo — the theme's own */
.vb-rec-item::before { content:''; position:absolute; top:4px; inset-inline-start:0;
  width:18px; height:18px; border-radius:50%; background:#6fa32b; border:4px solid #fff;
  box-shadow:0 0 0 2px #cfe0ad; }
@media (min-width:760px){ .vb-rec-item::before { inset-inline-start:128px; } }
/* the newest entry is the only filled-ink one — the record's head */
.vb-rec-item:first-child::before { background:var(--ink); box-shadow:0 0 0 2px #c9ced9; }
.vb-rec-body { position:relative; }
/* the ghost numeral sits BEHIND the start of the headline, vertically centred
   on it. Parked out in the gutter it read as stray figures with nothing to do. */
/* 76px and paler than the mock used.
   At 96px in #dbdfe9 the numeral sat behind a real two-line post title rather
   than the short event phrase it was drawn against, and the parts of it that
   showed between the lines read as noise instead of as a mark. Smaller and
   lighter, it is scenery again. */
.vb-rec-no { position:absolute; inset-inline-start:-14px; top:20px; translate:0 -50%;
             z-index:0; pointer-events:none; font-size:76px; line-height:1;
             letter-spacing:-.04em; color:#e4e7ef; unicode-bidi:plaintext; }
@media (max-width:1099px){ .vb-rec-no { display:none; } }
.vb-rec-event { position:relative; z-index:1; font-size:var(--t5); line-height:1.3;
                max-width:30ch; }
.vb-rec-piece { position:relative; z-index:1; display:grid; grid-template-columns:1fr;
                gap:14px; margin-top:16px; background:#fff; border-radius:30px;
                overflow:hidden; max-width:560px; transition:translate .25s var(--ease); }
.vb-rec-piece:hover { translate:0 -3px; }
@media (min-width:560px){
  .vb-rec-piece { grid-template-columns:132px minmax(0,1fr); gap:0; }
}
.vb-rec-piece img { display:block; width:100%; height:132px; object-fit:cover; }
@media (min-width:560px){ .vb-rec-piece img { height:100%; min-height:112px; } }
.vb-rec-piece div { padding:16px 20px 18px; }
@media (min-width:560px){ .vb-rec-piece div { padding:16px 22px; } }
.vb-rec-piece h3 { font-size:var(--t6); line-height:1.3; }
.vb-rec-piece:hover h3 { color:var(--purple); }
.vb-rec-piece p { margin-top:9px; font-size:11px; letter-spacing:.09em;
                  text-transform:uppercase; color:var(--faint); }
.vb-rec-piece p b { font-weight:400; color:var(--limeink); }

/* =============================================================================
   ASK IT YOURSELF — built from the agency site's own /geo/ featured unit
============================================================================= */
.vb-ask { padding-block:70px 0; }
.vb-ask-row { display:grid; grid-template-columns:1fr; gap:20px; align-items:stretch; }
@media (min-width:1000px){ .vb-ask-row { grid-template-columns:.95fr 1.05fr; } }
.vb-ask-panel { position:relative; display:flex; flex-direction:column; background:var(--ink);
                border-radius:30px; padding:30px; color:#fff; }
/* the corner cut out into a tab, joined with two radial gradients — the
   theme's own device, mirrored for RTL */
.vb-ask-tab { --n:22px; position:absolute; top:0; inset-inline-end:0; background:var(--page);
              color:var(--ink); font-size:12.5px; padding:11px 26px 15px 18px;
              border-end-start-radius:var(--n); display:inline-flex; gap:7px;
              align-items:center; }
/* ── THE LINE ON THE CURVE WAS NOT A BORDER ─────────────────────────────
   Checked before changing anything, because "remove the border" is the kind
   of instruction that sends you hunting for a border that is not there:
   every border on the tab, on both pseudo-elements and on the panel computes
   to `0px`, and box-shadow is `none`. The pale hairline tracing the concave
   corner is the GRADIENT itself.

   A radial-gradient with a hard colour stop — `var(--ink) 0 22px, var(--page)
   22px` — asks the browser to change colour at an exact radius with no ramp
   to antialias across. On a curve that renders as a fringe of stair-stepped
   pixels, which at this size reads as a thin light line drawn along the
   corner. It is the classic hard-stop artefact and it is why the stop is now
   feathered by half a pixel instead: the ramp is far too small to see as a
   gradient and gives the rasteriser something to blend, so the corner comes
   out clean.

   --n stays 22px, so the geometry is unchanged; only the stop moved. */
.vb-ask-tab::before, .vb-ask-tab::after { content:''; position:absolute;
                                          width:var(--n); height:var(--n); }
.vb-ask-tab::before { top:0; inset-inline-start:calc(var(--n) * -1);
  background:radial-gradient(circle at 0 100%, transparent 0 calc(var(--n) - .5px), var(--page) var(--n)); }
.vb-ask-tab::after { top:100%; inset-inline-end:0;
  background:radial-gradient(circle at 0 100%, var(--ink) 0 calc(var(--n) - .5px), var(--page) var(--n)); }
[dir="rtl"] .vb-ask-tab::before {
  background:radial-gradient(circle at 100% 100%, transparent 0 calc(var(--n) - .5px), var(--page) var(--n)); }
[dir="rtl"] .vb-ask-tab::after {
  background:radial-gradient(circle at 100% 100%, var(--ink) 0 calc(var(--n) - .5px), var(--page) var(--n)); }
.vb-ask-eb { font-size:11px; letter-spacing:.14em; text-transform:uppercase;
             color:var(--limesoft); margin-bottom:10px; }
.vb-ask-tab + .vb-ask-eb { margin-top:22px; }
.vb-ask-title { font-size:var(--t4); line-height:1.24; max-width:22ch; margin-bottom:18px; }
.vb-ask-lab { display:block; margin-bottom:8px; font-size:10.5px; letter-spacing:.12em;
              text-transform:uppercase; color:rgba(255,255,255,.45); }
.vb-ask-inp { width:100%; background:rgba(255,255,255,.08);
              border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:14px 15px;
              color:#fff; font-family:inherit; font-size:14px; font-weight:300; outline:0; }
.vb-ask-inp::placeholder { color:rgba(255,255,255,.38); }
.vb-ask-inp:focus { border-color:var(--limesoft);
                    box-shadow:0 0 0 3px rgba(198,227,107,.18); }
.vb-ask-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; list-style:none; }
/* THE CHIPS ARE <button> NOW, so the styling moved off the <li> and on to the
   control itself — an <li> cannot take focus and a chip that cannot be reached
   from a keyboard is not a control. The visual result is identical; what
   changed is that it now responds to being pressed. */
.vb-ask-chips li { display:contents; }
.vb-ask-chip { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
               border-radius:999px; padding:6px 12px; font-size:11.5px;
               font-family:inherit; font-weight:inherit; line-height:1.4;
               color:rgba(255,255,255,.8); cursor:pointer;
               transition:background .18s var(--ease), border-color .18s var(--ease),
                          color .18s var(--ease); }
.vb-ask-chip:hover { background:rgba(255,255,255,.14); color:#fff; }
.vb-ask-chip:focus-visible { outline:2px solid var(--limesoft); outline-offset:2px; }
/* the active question, so the panel says which of the four it will send */
.vb-ask-chip[aria-pressed="true"] { background:var(--limesoft); border-color:var(--limesoft);
                                    color:#0d172d; }
.vb-ask-prompt { margin-top:16px; background:rgba(198,227,107,.09);
                 border:1px dashed rgba(198,227,107,.45); border-radius:12px;
                 padding:13px 15px; font-size:13px; line-height:1.5; color:#e8f2cf; }
.vb-ask-prompt b { font-weight:400; color:var(--limesoft); }
.vb-ask-engs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vb-ask-eng { display:flex; align-items:center; justify-content:center;
              background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
              border-radius:12px; padding:16px 10px; font-size:13px;
              color:rgba(255,255,255,.86); transition:.15s ease; }
.vb-ask-eng:hover { background:rgba(255,255,255,.14); border-color:rgba(198,227,107,.5);
                    color:#fff; }
.vb-ask-eng img { height:20px; max-width:112px; width:auto; object-fit:contain; }
/* line-height matches the logo tiles' 20px image box, so a name-only tile is
   exactly as tall as the ones beside it instead of half a pixel shorter */
.vb-ask-eng { line-height:20px; white-space:nowrap; }
.vb-ask-eng--wide { grid-column:1 / -1; }
.vb-ask-foot { margin-top:auto; padding-top:16px;
               border-top:1px solid rgba(255,255,255,.12); font-size:11.5px;
               line-height:1.5; color:rgba(255,255,255,.45); }
.vb-ask-card { background:#fff; border-radius:30px; padding:30px; display:flex;
               flex-direction:column; }
@media (min-width:700px){ .vb-ask-card { padding:34px; } }
.vb-ask-card .vb-ask-eb { color:var(--limeink); font-size:12px; }
.vb-ask-h { font-size:var(--t3); line-height:1.12; max-width:19ch; margin-bottom:16px; }
.vb-hl { background:linear-gradient(180deg,#7B9412 0%,#D4EE69 44.02%,#7B9412 88.04%);
         -webkit-background-clip:text; background-clip:text; color:transparent; }
.vb-ask-lede { font-size:15px; line-height:1.6; color:var(--muted); max-width:52ch; }
.vb-ask-steps { margin-top:24px; display:grid; gap:2px; list-style:none; }
.vb-ask-steps li { display:grid; grid-template-columns:34px minmax(0,1fr); gap:16px;
                   padding:16px 0; border-top:1px solid var(--rule); align-items:start; }
.vb-ask-steps b { font-size:12px; font-weight:400; color:var(--limeink); padding-top:3px; }
.vb-ask-steps span { font-size:14.5px; line-height:1.55; color:var(--muted); }
.vb-ask-steps em { font-style:normal; color:var(--ink); }
.vb-ask-cols { display:grid; grid-template-columns:1fr; margin-top:auto; padding-top:22px;
               border-top:1px solid var(--rule); }
@media (min-width:640px){ .vb-ask-cols { grid-template-columns:repeat(3,1fr); } }
.vb-ask-col { padding:0 18px; border-inline-start:1px solid var(--rule); }
.vb-ask-col:first-child { padding-inline-start:0; border-inline-start:0; }
.vb-ask-col b { display:block; font-size:29px; font-weight:400; line-height:1;
                unicode-bidi:plaintext; }
.vb-ask-col span { display:block; margin-top:9px; font-size:12.5px; line-height:1.4;
                   color:var(--faint); }

/* The same list the front page's figure strip becomes on a phone: number at
   the leading edge, label at the trailing one on the same baseline, a
   hairline between rows. Stacked number-over-label they read as one run of
   text — "149 articles on what to do next 3 studies behind the advice" —
   which is exactly what was wrong with the strip. */
@media (max-width:639px){
  .vb-ask-col { display:flex; align-items:baseline; justify-content:space-between;
                gap:16px; border-inline-start:0; padding:13px 0 14px; }
  .vb-ask-col + .vb-ask-col { border-top:1px solid var(--rule); }
  .vb-ask-col b { font-size:26px; }
  .vb-ask-col span { margin-top:0; text-align:end; }
}

/* =============================================================================
   WHO WRITES HERE — the article sidebar's author card, enlarged
============================================================================= */
/* BOTTOM PADDING IS THE SECTION'S OWN JOB NOW. It used to be `70px 0`, and
   the zero was fine only because the pledge row underneath the cards carried
   26px of its own padding above a rule. With that row removed the cards butted
   straight into the FAQ that follows, so the spacing moved onto the section
   where it should have been in the first place. */
.vb-desk-row { padding-block:70px 8px; }
@media (min-width:1024px){ .vb-desk-row { padding-block:78px 14px; } }
/* ── THE HEADER: EYEBROW OVER TWO TOPS ───────────────────────────────────
   Three children now, not two. The eyebrow spans both columns because it
   labels the section; the heading and the lede sit beside each other on the
   row below, aligned at the TOP.

   The old rule bottom-aligned a 420px lede against the heading's column, and
   the measurement is the argument against it: 124px of paragraph against 73px
   of heading put the paragraph's first line 10px above the eyebrow that was
   supposed to introduce it. Top alignment holds whichever one grows.

   The lede's column went 420 → 460px in the same pass, which takes it from
   five lines to four at this copy length — one line less overhang against the
   two-line heading, for 40px that the left column was not using (the heading
   is capped at 20ch and measured 596px inside an 824px column). */
/* ── THE HEADER IS ONE COLUMN AGAIN ─────────────────────────────────────
   It was a two-column grid built to hold the lede beside the heading, and
   the whole apparatus that went with it — a full-width eyebrow row, a 460px
   second track, and a 9px optical offset measured to put the paragraph's
   first line on the heading's — went out with the paragraph.

   Removed rather than left as dead rules. A two-column grid with one child
   still reserves the second track, so the heading would have stayed capped
   at its old width with 460px of nothing beside it, which is the layout the
   request was about. */
.vb-wd-head { margin-bottom:30px; }
.vb-wd-eb { margin-bottom:6px; }

/* THE CAP GOES FROM 20ch TO 34ch. 20ch was right when a paragraph sat in the
   next column and the heading had to stay out of its way; on the full measure
   it forced the same two short lines and left most of the row empty. 34ch
   keeps the two-line break this headline reads best on at desktop widths
   without letting it run the full 1300px, which at 46px type is too long a
   line to track. */
.vb-wd-h { font-size:var(--t3); line-height:1.08; letter-spacing:-.01em; max-width:34ch; }
/* `.vb-wd-lede` removed with the paragraph it styled — the last rule left
   over from the two-column header. */
.vb-wd-grid { display:grid; grid-template-columns:1fr; gap:16px; list-style:none; }
@media (min-width:760px){ .vb-wd-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .vb-wd-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* ── THE CARD ─────────────────────────────────────────────────────────────
   No padding on the card itself any more. The colour band has to reach all
   three edges, so the padding moved onto the band and onto each element
   below it. A card that pads its own box cannot hold a full-bleed band. */
.vb-wd-card { position:relative; background:#fff; border-radius:19px;
              display:flex; flex-direction:column; overflow:hidden;
              padding:0 20px 22px; }
@media (min-width:1024px){ .vb-wd-card { padding:0 24px 26px; } }

/* ── THE DESK BAND ───────────────────────────────────────────────────────
   Bled to the card's edges with negative inline margins that cancel the
   card's own side padding, so the colour meets the rounded corners instead
   of floating inside a white frame. */
.vb-wd-band { margin:0 -20px 20px; padding:22px 20px 20px;
              background:var(--desk,#0d172d); color:var(--desk-ink,#fff);
              display:flex; align-items:center; gap:15px; }
@media (min-width:1024px){ .vb-wd-band { margin-inline:-24px; padding:24px 24px 22px; } }

/* THE PHOTOGRAPH, 84 → 96, with a ring struck from the band's own text
   colour rather than a fixed white. A desk whose colour is pale gets a dark
   ink, and a hard-coded white ring would have vanished on it — the same trap
   that made the GEO pill invisible when --tone happened to equal --desk. */
.vb-wd-pic { flex:none; display:block; width:96px; height:96px; border-radius:9999px;
             overflow:hidden; background:rgba(255,255,255,.14); }
.vb-wd-pic img, .vb-wd-pic .avatar { display:block; width:100%; height:100%;
                                     border-radius:9999px; object-fit:cover; }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .vb-wd-pic { box-shadow:0 0 0 3px color-mix(in srgb, var(--desk-ink,#fff) 24%, transparent); }
}
.vb-wd-id { min-width:0; }
/* THE 3px TOP RULE IS GONE, replaced by the band above. Removed rather than
   left underneath it: the band already sits on the card's top edge, so the
   rule would have drawn a second stripe of the same colour behind it —
   invisible, and the kind of leftover that makes the next person think the
   band is decoration on top of the real mechanism. */
.vb-wd-ph { width:100%; height:100%; border-radius:9999px; display:grid; place-items:center;
            font-size:11px; letter-spacing:.1em; text-transform:uppercase;
            color:currentColor; opacity:.6; }

/* NAME AND ROLE ON THE BAND. `inherit` on the link, not a brand colour: the
   band's text colour already adapts to the desk, and a fixed link colour is
   the one thing guaranteed to clash with six different backgrounds. */
.vb-wd-name { font-size:var(--t6); line-height:1.25; color:inherit; }
.vb-wd-name a { color:inherit; text-decoration:none;
                text-decoration-color:transparent; }
.vb-wd-card:hover .vb-wd-name a,
.vb-wd-name a:hover { text-decoration:underline; text-underline-offset:3px;
                      text-decoration-thickness:1px;
                      text-decoration-color:currentColor; }
.vb-wd-role { margin-top:4px; font-size:13.5px; line-height:1.35;
              color:currentColor; opacity:.72; }

/* THE COUNT, AS THE PANELS' PILL.
   The background is struck from the band's own ink so it reads on a navy
   desk and on a pale one alike. This is the second time that has mattered on
   this page: a pill given a fixed tone went invisible when the desk's tone
   and its background turned out to be the same colour, and a fixed white at
   14% would do it again on the white desk. */
.vb-wd-pill { display:inline-block; margin-top:11px; padding:5px 11px;
              border-radius:9999px; font-size:11px; letter-spacing:.09em;
              text-transform:uppercase; color:currentColor;
              background:rgba(255,255,255,.16); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .vb-wd-pill { background:color-mix(in srgb, var(--desk-ink,#fff) 17%, transparent); }
}
.vb-wd-runs { margin-top:20px; padding-top:18px; border-top:1px solid var(--rule); }
.vb-wd-runs dt { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
                 color:var(--faint); }
.vb-wd-runs dd { margin:0; font-size:14.5px; line-height:1.55; color:var(--ink); }

/* ── THE BIO, CLAMPED AT EVERY WIDTH ────────────────────────────────────
   Five lines, which was already the rule on a phone and is now the rule
   everywhere, for the reason the phone rule gives: the bios are written for
   an author page where they have a column to themselves, and at 50/75/54
   words they were the loudest thing on the card and different in each one.

   Line-clamp needs `overflow:hidden` on the clamped element itself, and the
   card carries `overflow:hidden` too — that is fine here and was checked:
   the clamp is on the paragraph, so the card's own clipping never reaches
   it. */
.vb-wd-bio { font-size:14.5px; line-height:1.55; color:var(--ink);
             display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
             overflow:hidden; }

/* ── THE RAGGED DASHED RULE, FIXED FROM THE BIO'S SIDE ────────────────────
   Measured live on the three real cards: the dashed rule above "Will not
   write about" sat at 393px, 460px and 415px from the top of its card. Three
   dashed lines at three heights across one row of equal-height cards, which
   is the kind of thing that reads as broken rather than as varied.

   The cause is the bios: 50, 75 and 54 words. The obvious fix — clamp the bio
   to the shortest card's line count — would have cut three lines off Monika's,
   and the bio is the ONLY thing on the card that evidences the section's
   claim. So the free space is moved instead of the text being cut:
   `margin-bottom:auto` on the bio pushes everything after it to the bottom of
   the card, which lands the rule and the count at the same height on all
   three while every word of every bio survives.

   `margin-bottom:auto` here rather than `margin-top:auto` on the rule, on
   purpose: the rule is not always rendered — the empty-state prompt is now
   editors-only — and anchoring from the bio pins the count whether or not the
   rule is there, with no rule that has to know what follows it.

   The one case this does not cover is a writer with NO bio at all: nothing
   then holds the auto margin, and that card's count sits directly under the
   name instead of at the card's foot. Left alone rather than patched with
   `:has()`, because a card with no bio is already missing the only evidence
   the section runs on — the fix for that is the bio, not the margin. */
.vb-wd-runs, .vb-wd-bio { margin-bottom:auto; }

/* the limit — the line that makes the rest credible */
.vb-wd-not { margin-top:16px; padding-top:16px; border-top:1px dashed var(--rule);
             font-size:13.5px; line-height:1.55; color:var(--muted); }
.vb-wd-not b { font-weight:400; color:var(--ink); }
/* `.vb-wd-not--todo` was removed with the front-end prompt it styled. Taken
   out rather than left behind: a rule for a class nothing emits is the kind
   of thing the next person reinstates the markup for. */

/* ── THE WAY OUT ─────────────────────────────────────────────────────────
   The arrow is drawn in CSS rather than pulled from the agency sprite: the
   sprite is fetched on the front page only, and this section also renders on
   pages that do not load it. A footer link that loses its arrow on half the
   site is worse than one that never had it. */
.vb-wd-more { margin-top:16px; padding-top:15px; border-top:1px solid var(--rule);
              display:inline-flex; align-items:center; gap:9px;
              font-size:12px; letter-spacing:.06em; text-transform:uppercase;
              color:var(--tone,var(--desk,#2563eb));
              transition:gap .22s var(--ease); }
.vb-wd-more i { width:15px; height:1px; background:currentColor; position:relative;
                flex:none; }
.vb-wd-more i::after { content:''; position:absolute; inset-inline-end:0; top:50%;
                       width:5px; height:5px; border-top:1px solid currentColor;
                       border-inline-end:1px solid currentColor;
                       translate:0 -50%; rotate:45deg; }
.vb-wd-card:hover .vb-wd-more, .vb-wd-more:hover { gap:14px; }
/* a full-width top rule, since the card's padding no longer wraps it */
.vb-wd-more { align-self:stretch; justify-content:flex-start; }

/* ── THE WRITER CARDS ON A PHONE ─────────────────────────────────────────────
   A rail, like Latest and the desk frames. Three cards stacked came to well
   over 1,500px, most of it the biography: `info` is written for an author's
   own page, where it has a column to itself, and it runs to about sixty words.

   THE BIO IS CLAMPED TO FIVE LINES, not dropped. The section's claim is that
   the people who ran the work wrote it up, and the bio is the only thing on
   the card that evidences it — the role alone is a job title. Five lines
   carries the sentence that matters and the name links to the rest.

   `overflow:hidden` on .vb-wd-card would clip the clamp, so the card keeps
   it: the 3px desk rule at the top is drawn by ::before inside the padding
   box and needs the radius to bite. Nothing else on the card overflows. */
@media (max-width:639px){
  .vb-wd-grid { display:flex; gap:16px;
                overflow-x:auto; overflow-y:hidden;
                scroll-snap-type:x proximity; scrollbar-width:none;
                padding:0 25px 6px; margin-inline:-25px;
                scroll-padding-inline:25px; }
  .vb-wd-grid::-webkit-scrollbar { display:none; }
  .vb-wd-card { flex:0 0 300px; scroll-snap-align:start; }
  /* the ring is struck at 3px on desktop; at 72px the photo is smaller and
     the ring goes with it, or it eats the gap to the name */
  .vb-wd-pic { width:72px; height:72px; }
  @supports (color: color-mix(in srgb, red 50%, transparent)) {
    .vb-wd-pic { box-shadow:0 0 0 2px color-mix(in srgb, var(--desk-ink,#fff) 24%, transparent); }
  }
  .vb-wd-band { padding:18px 20px 16px; margin-bottom:16px; gap:13px; }
  .vb-wd-runs { margin-top:16px; padding-top:14px; }
  /* THE CLAMP IS NO LONGER A PHONE-ONLY RULE — it moved up to .vb-wd-bio and
     applies at every width. Left here for `.vb-wd-runs dd`, which is the old
     labelled markup: the front page no longer emits it, but this stylesheet
     is also read by the desk archives. */
  .vb-wd-runs dd { display:-webkit-box; -webkit-line-clamp:5;
                   -webkit-box-orient:vertical; overflow:hidden; }
}
.vb-pledge { margin-top:16px; display:grid; grid-template-columns:1fr; gap:14px;
             padding-top:26px; border-top:1px solid var(--rule); list-style:none; }
@media (min-width:860px){ .vb-pledge { grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; } }
.vb-pledge li { font-size:13.5px; line-height:1.55; color:var(--muted); }
.vb-pledge b { display:block; margin-bottom:5px; font-weight:400; color:var(--ink); }

/* =============================================================================
   FAQ — an open ledger of questions, still collapsible

   Two attempts sit behind this one. A white rounded card with an accordion —
   the same panel shape as every other block. Then every answer shown open in
   two columns, which reads well at five questions and becomes a wall the
   moment the list grows, and a real FAQ grows. So the accordion stays — it is
   the only device that survives twenty questions — and the card does not.

   Collapsing costs nothing for retrieval: <details> keeps every answer in the
   DOM whether or not it is open, and inc/schema.php emits FAQPage from the
   same array the markup is built from, so the two cannot drift.
============================================================================= */
/* THE NUMBERED LEDGER ABOVE IS GONE — see the note in the template. Every
   value below is the reference's, read off www.voctos.com. `--faq-accent` is
   its literal accent (#b4d335), not this theme's --lime (#9bb725): the two are
   close and different, and the point of a port is that they match. */
/* NO SECTION BACKGROUND. The reference paints #eef0f5 behind its card
   because that is its page colour there; this page is #eff0f4. Repainting a
   near-identical grey would draw a faint band edge against the sections above
   and below for no gain, so the card simply sits on the page — which is what
   the reference's own rule achieves on its own site. */
.vb-faq { --faq-accent:#b4d335; padding-block:50px; }
.vb-faq-card { background:#fff; border-radius:32px; padding:40px 56px 24px;
               box-shadow:0 20px 50px rgba(13,23,45,.05); }

.vb-faq-head { display:flex; align-items:center; gap:22px; margin-bottom:14px; }
.vb-faq-icon { flex:none; width:54px; height:54px; border-radius:50%;
               background:var(--faq-accent); display:inline-flex;
               align-items:center; justify-content:center; }
.vb-faq-icon svg { width:30px; height:30px; }
/* 500 is the reference's own weight — the documented exception to the 400
   ceiling, inherited rather than chosen. */
.vb-faq-title { font-size:22px; font-weight:500; line-height:1.1; margin:0; }

/* a subtitle slot, kept ready in case the dropped lede is wanted back */
.vb-faq-sub { margin:-6px 0 14px; font-size:14px; line-height:1.65; color:#6b7280; }

/* ── THE ROWS ─────────────────────────────────────────────────────────── */
.vb-faq-list { border-bottom:1px solid rgba(13,23,45,.12); }
.vb-q { border-top:1px solid rgba(13,23,45,.12); }
.vb-q summary { list-style:none; cursor:pointer; display:flex; align-items:center;
                justify-content:space-between; gap:24px; padding:26px 0;
                font-size:16px; font-weight:400; line-height:1.35; color:var(--ink);
                transition:color .2s var(--ease); }
.vb-q summary::-webkit-details-marker { display:none; }
.vb-q summary::marker { content:''; }
.vb-q-t { min-width:0; }

/* THE +/− CIRCLE. Bars drawn in CSS, exactly as the reference does it, so the
   vertical one can fade to leave a minus rather than the whole glyph being
   swapped — that is what makes it read as one control changing state. */
.vb-q-i { position:relative; flex:none; width:54px; height:54px; border-radius:50%;
          border:1px solid rgba(13,23,45,.18); color:var(--ink);
          transition:background .25s var(--ease), border-color .25s var(--ease),
                     color .25s var(--ease); }
.vb-q-i::before, .vb-q-i::after { content:''; position:absolute; top:50%; left:50%;
  background:currentColor; border-radius:2px;
  transition:opacity .25s var(--ease), transform .25s var(--ease); }
.vb-q-i::before { width:20px; height:2px;  transform:translate(-50%,-50%); }
.vb-q-i::after  { width:2px;  height:20px; transform:translate(-50%,-50%); }
.vb-q summary:hover .vb-q-i,
.vb-q[open] .vb-q-i { background:var(--faq-accent); border-color:var(--faq-accent); }
.vb-q[open] .vb-q-i::after { opacity:0; transform:translate(-50%,-50%) rotate(90deg); }

/* ── THE ANSWER ───────────────────────────────────────────────────────── */
.vb-q-a { padding-bottom:26px; }
.vb-q-a p { font-size:14px; line-height:1.65; color:#6b7280; max-width:82ch; }

/* THE OPEN/CLOSE ANIMATION, where the browser has it.
   <details> normally toggles display, which is why a height transition on it
   does nothing. `interpolate-size` plus `::details-content` is the supported
   way to animate it without JavaScript, and it is behind @supports on
   purpose: where it is missing the section still opens and closes, just
   instantly. That is the trade for keeping this section working with no
   JavaScript at all — the reference buys its animation with a script. */
@supports (interpolate-size: allow-keywords) {
  .vb-q { interpolate-size:allow-keywords; }
  .vb-q::details-content { block-size:0; overflow:hidden;
                           transition:block-size .32s var(--ease), content-visibility .32s allow-discrete;
                           content-visibility:hidden; }
  .vb-q[open]::details-content { block-size:auto; content-visibility:visible; }
}

@media (max-width:768px){
  .vb-faq-card { padding:28px 22px 16px; border-radius:24px; }
  .vb-faq-title { font-size:20px; }
  .vb-q summary { padding:20px 0; gap:16px; }
  .vb-q-i { width:44px; height:44px; }
  .vb-q-i::before { width:16px; }
  .vb-q-i::after  { height:16px; }
}

/* =============================================================================
   THE DESK SECTION — voctos.com's SERVICE BLOCK

   The card, the grid and the panel all come from the agency build now
   (agency-main.css) because the markup is the agency's. What is left here is
   only what the port genuinely needs on top:

     · the space between sections
     · the article links inside the agency's <li>, which held service copy
       and now hold anchors
     · the desk colour on the two buttons

   THE PREVIOUS VERSION OF THIS BLOCK IS GONE, not commented out. It rebuilt
   the panel, the pill and six CSS keyframe loops in this theme's own rules —
   an approximation that has been replaced by the real thing, and leaving its
   selectors behind would mean two sets of rules competing over the same
   panel.
============================================================================= */
.vbf-svc { margin-top:40px; }

/* ── THE GAP UNDER THE DESK NAME ─────────────────────────────────────────
   Written here rather than as a Tailwind utility on the <h2> because the
   agency's own value (mb-3.5 → 14px) was tuned to text following text. Six
   cover images following a 34px heading need the gap of a title over a grid,
   not the gap inside a paragraph.

   Two classes deep on purpose. A single class would tie at (0,1,0) with any
   Tailwind margin utility still on the element and then be decided by which
   stylesheet the browser read last — and the agency build and this file are
   enqueued separately. At (0,2,0) the order stops mattering. */
.vbf-svc .vbf-svc-h { margin:0 0 22px; }
@media (min-width:640px){ .vbf-svc .vbf-svc-h { margin-bottom:28px; } }
@media (min-width:1024px){ .vbf-svc .vbf-svc-h { margin-bottom:32px; } }

/* ── THE DESKS GROUPED INSIDE THIS ONE ───────────────────────────────────
   Chips, not a second heading row: these are siblings of each other and
   subordinate to the desk name above them, and a chip says that without
   needing a label to explain it. The count sits inside each chip so the row
   visibly adds up to the number on the folder tab.

   When a desk has no children the <ul> is not printed at all, so this costs
   nothing on the ordinary case — which is every desk on the site today. */
.vbf-svc-subs { display:flex; flex-wrap:wrap; gap:8px; margin:-14px 0 24px; padding:0;
                list-style:none; }
@media (min-width:640px){ .vbf-svc-subs { margin:-18px 0 28px; } }
.vbf-svc-subs a { display:inline-flex; align-items:baseline; gap:7px;
                  padding:6px 13px; border-radius:999px;
                  background:var(--tint,#eef1f6); color:var(--tone,#475569);
                  font-size:12.5px; line-height:1.3;
                  transition:background .2s var(--ease), color .2s var(--ease); }
.vbf-svc-subs a:hover { background:var(--desk,#0d172d); color:var(--desk-ink,#fff); }
.vbf-svc-subs b { font-weight:400; opacity:.65; font-size:11px; }

/* ── THE ARTICLES INSIDE THE WHITE CARD ──────────────────────────────────
   Each cell is now a cover plus a headline, in the agency's own 3-column
   grid. The cover box is fixed at 16/10 so six covers of different shapes
   line up on a row instead of stepping up and down — voctos_blog_image()
   also returns a generated stand-in for a post with no cover, so the row
   never has a hole in it. */
.vbf-svc-arts { margin:0 0 24px; padding:0; list-style:none; }
@media (min-width:640px){ .vbf-svc-arts { margin-bottom:28px; } }

/* ── ON A PHONE THE ARTICLES ARE A RAIL, NOT A STACK ─────────────────────
   The agency's grid gives each cell `col-span-full` below its `sm` break, so
   six articles became six full-width rows and a desk section ran most of a
   screen on its own. With six desks that is six screens of scrolling before
   the page even reaches the Ask panel.

   THE SAME PATTERN THE REST OF THE SITE ALREADY USES on a phone — the Latest
   grid, the writer cards, the case rows — so this is the established
   behaviour reaching the one section that had not got it, not a new idea.

   THE NEGATIVE MARGIN IS THE CARD'S OWN PADDING. The white card is `px-4` on
   a phone, so the rail is pulled out by exactly 16px and given it back as
   padding: the first cover then starts flush with the heading above it, and
   the row bleeds off the card's edge instead of stopping short of it, which
   is what tells a reader there is more to the right.

   240px leaves a deliberate sliver of the next cover visible at 360–400px
   wide. A card that exactly fills the viewport reads as the only one there
   is. */
@media (max-width:639px){
  .vbf-svc-arts { display:flex; gap:14px;
                  overflow-x:auto; overflow-y:hidden;
                  scroll-snap-type:x proximity; scrollbar-width:none;
                  -webkit-overflow-scrolling:touch;
                  margin-inline:-16px; padding-inline:16px;
                  scroll-padding-inline:16px; }
  .vbf-svc-arts::-webkit-scrollbar { display:none; }
  /* beats the agency's `col-span-full` on the <li>, which is what stacked
     them — the parent is a flex row now, so the span means nothing anyway */
  .vbf-svc-arts > li { flex:0 0 240px; scroll-snap-align:start; }
  .vbf-svc-art-h { font-size:13.5px; }
}

.vbf-svc-art-link { display:block; color:inherit; }
.vbf-svc-art-pic { display:block; overflow:hidden; border-radius:14px;
                   margin-bottom:10px; background:var(--tint,#eef1f6); }
.vbf-svc-art-pic img,
.vbf-svc-art-pic svg { display:block; width:100%; height:100%;
                       aspect-ratio:16/10; object-fit:cover;
                       transition:scale .3s var(--ease); }
.vbf-svc-art-link:hover .vbf-svc-art-pic img,
.vbf-svc-art-link:hover .vbf-svc-art-pic svg { scale:1.04; }

.vbf-svc-art-h { display:block; font-size:13px; line-height:1.45; }

/* the empty state, for a desk ticked on the Front page desks screen before it
   has anything in it — quiet on purpose, it is a note not a headline */
.vbf-svc-empty { margin:0 0 24px; padding:18px 0 22px; font-size:13.5px;
                 color:var(--muted,#5b6675); border-top:1px solid var(--rule,#e3e6ee); }
.vbf-svc-art-link:hover .vbf-svc-art-h { color:var(--tone,var(--desk,#2563eb)); }


/* =============================================================================
   MORE THAN THREE WRITERS: THE GRID BECOMES A RAIL

   THE CLASS IS PUT ON BY THE TEMPLATE, which counts the people. CSS cannot
   both count children and change their width from that count, and
   `:has(> :nth-child(4))` would still leave the card width to guess at.

   IT REUSES THE PHONE RAIL'S MECHANICS EXACTLY — the same gap, the same
   negative margin and scroll padding that let the row bleed to the viewport
   edge while its first card stays on the site's 25px gutter, the same hidden
   scrollbar and proximity snapping. One pattern, two triggers: a narrow
   screen, or too many people.

   IT IS APPENDED AFTER THE GRID RULES ON PURPOSE. `.vb-wd-grid--rail` and the
   `.vb-wd-grid` column rules at 760 and 1100 are both one class, so they
   carry equal specificity and the later one wins. Moving this block up the
   file would silently hand the row back to the grid at 1100.

   360px, NOT the grid's ~422. A rail that shows three and a half cards says
   there is more to the right; one that shows exactly three looks like a grid
   that failed to wrap. */
@media (min-width:640px){
  .vb-wd-grid--rail { display:flex; gap:16px;
                      overflow-x:auto; overflow-y:hidden;
                      scroll-snap-type:x proximity; scrollbar-width:none;
                      padding:0 25px 6px; margin-inline:-25px;
                      scroll-padding-inline:25px; }
  .vb-wd-grid--rail::-webkit-scrollbar { display:none; }
  .vb-wd-grid--rail .vb-wd-card { flex:0 0 360px; scroll-snap-align:start; }
}