/* ============================================================================
   vespa-travel-dossier — the four blocks this document needs and neither
   sibling dossier had.

   `scrollcraft.js`, `scrollcraft.css`, `dossier.css`, `drawer.css` and
   `dossier.js` are BYTE-IDENTICAL to `vespa-managers-dossier`'s, verified by
   sha256 at copy time, and so are `assets/fonts/`, `assets/icons.svg`,
   `assets/VespaAI-logo-dark-RGB.svg`, `assets/v-mark-square.svg` and the three
   customer logos in `assets/img/`. They are the pattern and the engine: the
   theme tokens, the bar, the plate, the tab, the drawer, the veil, the no-JS
   appendix. Editing any of them to get a result on THIS build would fork the
   pattern, and the two builds would then drift a rule at a time until the next
   application of it has no reference to copy. So the shared files stay
   untouched and everything this document alone needs is in this fourth
   stylesheet, which is the same arrangement `managers.css` states and for the
   same reason.

   Almost nothing is needed, and that is the point of the pattern. This
   document is the travel-market edition of *What Is Retrieval Engineering?*,
   so `drawer.css` already carries the blocks it shares with that book: `.caps`
   for the eight techniques, `.pil` for the four engineering problems, `.cases`
   for the three customers, `.socials`, and `.dr__kick` for a sentence print
   pulls out of the flow. What is left is four things this book owns:

     .dr__sh   "Who should read this ebook?", a question print sets as a
               sub-head over the audience list
     .aud      the six audience lines, which print sets as a list
     .kicks    the three heading-only sections, as the one pulled block they
               are on paper
     .dr__lede a lead-in that ends in a colon, before a list

   plus one declaration, `.pil__t strong`, which exists because the numeral in
   "1. Unified Retrieval" is INSIDE its own contract string here and cannot be
   split into `.pil__num` without breaking the string across two elements.

   Nothing here invents a token. Every value resolves against `dossier.css`.
   ========================================================================= */

/* ================================================================== SUB-HEAD
   One question, over the list that answers it. An h4 rather than a second
   `.dr__h`, because it is subordinate to "About this eBook" and two h3s in a
   row would say they are siblings. Full ink: it is a heading, and the list
   under it is the quieter run. */
.dr__sh{
  margin:1.6rem 0 0;font-family:var(--sc-font-display);font-weight:500;
  font-size:clamp(1rem,.95rem+.3vw,1.12rem);line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);
}

/* ============================================================== THE LEAD-IN
   A sentence that ends in a colon and hands over to a list. Display face, full
   ink, so the list under it reads as its consequence rather than as a new
   thought. Same treatment and same values as `managers.css` gives it, because
   it is the same job on the same pattern; it is restated rather than shared
   because `drawer.css` is not ours to add to. */
.dr__lede{
  margin-top:1.4rem!important;
  font-family:var(--sc-font-display);
  font-size:clamp(1rem,.95rem+.3vw,1.12rem)!important;
  color:var(--ink)!important;
}

/* ============================================================ THE AUDIENCE
   Six lines naming who the book is for. Print sets them as a list under the
   question, so they are a list: six noun phrases in a column is a register a
   reader scans for themselves, and six sentences in a paragraph is a sentence
   they have to read to find out they are not in it.

   The rule is on the MARKER side, one per row, so the column reads as six
   entries without a bullet glyph competing with the mint in the world. Ink at
   .82 is `drawer.css`'s own value for `.cap`, the other register on this page,
   so the two read at the same weight; on the drawer's white panel it is
   7.23:1, well above the 4.5:1 floor for 13.4px type. */
.aud{
  list-style:none;margin:1.1rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--hair);border:1px solid var(--hair);
}
@media (min-width:34rem){ .aud{grid-template-columns:1fr 1fr} }
.aud li{
  background:var(--sc-surface);padding:.7rem .9rem;
  font-size:.84rem;line-height:1.4;color:rgba(46,47,39,.82);
  border-left:2px solid var(--mint);
}

/* ================================================================ THE PULL
   Three sections that are nothing but a heading. The PDF extraction recovered
   print's three pulled sentences as sections of their own because they are set
   at a display weight the body never uses, and their `paras` are empty, which
   is the tell. On paper they are one block of three lines closing the
   introduction spread, so that is what they are here.

   The treatment is `drawer.css`'s `.dr__kick`, unchanged: the green rule the
   print book and both reading editions already use for a pulled sentence. This
   wrapper only groups them, so the block reads as one and the three lines sit
   closer to each other than to the prose above. The third line carries Vespa's
   own unspaced em dash and is declared in `quoted.json`. */
.kicks{margin-top:1.8rem}
.kicks .dr__kick + .dr__kick{margin-top:.9rem!important}

/* ============================================================== THE NUMERAL
   "1. Unified Retrieval" is ONE contract string. `drawer.css` sets the sibling
   build's numeral as `.pil__num`, a separate element, which works there
   because that contract carries the number and the title as two fields. This
   one does not, and splitting the string across two elements is the failure
   that cost five headings on one build and nine capability tiles on another:
   the fidelity gate strips tags to nothing rather than to a space, so
   "1. Unified Retrieval" comes back as "1.Unified Retrieval" and stops
   matching itself. So the numeral is wrapped IN PLACE and made a block here.

   Values are `.pil__num`'s own, so the four numerals read exactly as the
   sibling dossier's do. Colour is `--sc-accent` and not the mint, which is the
   rule `dossier.css` states where the two greens are declared: the print mint
   is correct as a fill and fails as type on paper. On the drawer's white panel
   the accent reads 5.05:1. */
.pil__t strong{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:.72rem;letter-spacing:.1em;line-height:1;
  color:var(--sc-accent);margin-bottom:.4rem;
}

/* ============================================================ PHONE FRAMING
   A `max-aspect-ratio: 1/1` block pulled legs 3 to 5 to `object-position:
   20% 50%` because the map world's subject was a pin at about 21% of the
   frame. The drawn world is composed on the centre column, so that rule would
   now push the chain, the engine and the phone out of the portrait crop. */

/* ============================================================== THE PLATE'S EDGE
   The pattern's plate is a white sheet with a hairline at ink .20, laid on a
   photograph. This world is a drawing on paper, and at 390 legs 1 and 5 lay
   the plate on the drawn phone's white screen: a verifier measured the fill
   at 1.02:1 and the hairline at 1.24:1 against that ground, so the sheet the
   copy sits on could not be seen as a sheet. The copy itself was 13.53:1 and
   never at risk. The edge is raised to ink .50 (about 2.9:1 on white) and the
   lift shadow deepened a little, in this stylesheet only, so the shared
   `dossier.css` plate on the photographic siblings does not change. */
.plate{
  border-color:rgba(46,47,39,.50);
  box-shadow:0 2px 4px -2px rgba(46,47,39,.16), 0 14px 30px -20px rgba(46,47,39,.45);
}

/* ==================================================================== PRINT
   The film cannot print. The document can. */
@media print{
  .aud{background:#999!important;border-color:#999!important}
  .aud li{background:#fff!important;border-left-color:#666!important;
          break-inside:avoid}
  .pil__t strong{color:#000!important}
  .pil,.case{break-inside:avoid}
}

/* ====== PORT ADDITION: narrow-width tab sizing (mobile/tablet) ============ */
/* Added by docscroll/pipeline/hubspot/port.py, not present in the source
   build. See DOSSIER_CONTROLS in targets.py for the measurements. Appended to
   managers.css because it loads LAST, so these win at equal specificity
   against drawer.css and dossier.css without raising specificity. The bar CTA
   rules that used to sit here are in the build's own dossier.css now. */
@media (max-width:51.99rem){

  /* A tab may not be wider than the sheet it hangs off. Stretching it to the
     plate makes all five the same width as each other AND as the CTA above
     them, which is the consistency that was asked for, and it hands the title
     the whole width so fewer titles need to truncate at all. */
  .blk > .tab{ align-self:stretch; }
  /* The title column takes the slack, which also pushes the arrow to the
     trailing edge instead of leaving dead space after it. min-width:0 is
     already set on .tab__in, and it is what lets the ellipsis engage. */
  .blk > .tab .tab__in{ flex:1 1 auto; }
  /* 17rem is 272px, a constant wider than the 265px plate. Let the container
     decide. */
  .blk > .tab .tab__t{ max-width:none; }
}