/* ============================================================================
   vespa-archive — theme and page-local styles.

   Nothing here restyles .sc-stage, .sc-copy, .sc-world* or any [data-sc-*].

   LIGHT, because Vespa's identity is light. The print book is paper and ink with
   green as the single accent, and the previous attempt fought that with a dark
   world and white type. That is also what made the text read badly: on a
   mid-tone film there is nothing for white to sit against, and every fix was a
   heavier scrim over the artwork. Ink on paper needs no scrim at all.
   ========================================================================= */

@font-face{font-family:'DM Sans';font-weight:400;font-display:swap;src:url(/hubfs/RGP/vespa-travel-dossier/fonts/DMSans-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-display:swap;src:url(/hubfs/RGP/vespa-travel-dossier/fonts/DMSans-500.woff2) format('woff2')}
@font-face{font-family:'DM Sans Display';font-weight:500;font-display:swap;src:url(/hubfs/RGP/vespa-travel-dossier/fonts/DMSansDisplay-500.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:400;font-display:swap;src:url(/hubfs/RGP/vespa-travel-dossier/fonts/SpaceMono-400.woff2) format('woff2')}

:root{
  /* The print tokens, near enough verbatim. --ink and --green are exact. */
  --sc-canvas:     #F7F6F2;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #2E2F27;
  --sc-ink-soft:   rgba(46,47,39,.66);
  --sc-accent:     #2E7D4F;   /* green darkened for contrast ON paper. See note */
  --sc-accent-ink: #FFFFFF;
  --sc-font-display:'DM Sans Display','DM Sans',system-ui,sans-serif;
  --sc-font-text:  'DM Sans',system-ui,sans-serif;

  /* The print green #61D790 is a light mint. It is correct as a FILL and as the
     tabs in the world, and it fails contrast as TYPE or as a button ground on
     paper: white on #61D790 is 1.9:1. So the accent used for interface is a
     shade of the same hue, and the mint stays where print puts it. No new hues:
     both are the same green. */
  --mint:#61D790;
  --ink:#2E2F27;
  --hair:rgba(46,47,39,.16);
  --mono:'Space Mono',ui-monospace,monospace;
  --pad:clamp(1.25rem,4vw,4rem);
  --max:80rem;
  --bar-h:3.5rem;

  /* The plate's own padding, promoted to a token because the tab has to hang
     off the plate's bottom edge by exactly it. Two hardcoded clamps that must
     stay equal is one clamp waiting to drift. */
  --plate-pad:clamp(1.4rem,2.6vw,2.25rem);
  --tab-h:3.1rem;
  --drawer-w:min(46rem,94vw);
  --spine-w:2.75rem;
}

body{background:var(--sc-canvas);color:var(--ink);font-family:var(--sc-font-text)}

/* ------------------------------------------------------------------ the bar
   Rebuilt. The first version clustered a logo, five long labels and a button
   against the left edge under one thin continuous rule, which is why it read as
   unresolved: nothing was aligned to anything and the progress indicator was a
   separate object from the thing it described.

   Now the stops are distributed across the width and each one OWNS a segment of
   the rule, which fills as the reader crosses that leg. Passed segments are
   full, the live one is partial, the rest are empty, so position and progress
   are one object. rgp does the same and it is the reason its bar looks designed.
*/
.bar{
  position:fixed;z-index:60;inset:0 0 auto 0;
  /* Opaque, and the blur is gone, for the same reason as the plate and with more
     force. This is a full-width fixed strip sitting over five legs of scrubbing
     video, so blur(16px) saturate(115%) was the single most expensive per-frame
     compositor operation on the page: a 1440x56 region re-blurred against
     footage that changes on every frame of every scroll. At 92 percent opacity
     almost none of that blur was ever visible.
     A solid bar also reads better over an archive this busy. */
  background:var(--sc-canvas);
  border-bottom:1px solid var(--hair);
}
.bar__in{
  max-width:var(--max);margin-inline:auto;height:var(--bar-h);
  display:flex;align-items:center;gap:clamp(1.25rem,3vw,3rem);
  padding-inline:var(--pad);
}

/* Vespa's OFFICIAL lockup, dark variant, unmodified from brand/vespa-ai-logo/.
   SVG, so it is crisp at any size. Dark (#2e2f27) not green: mint on this bar's
   #F7F6F2 measures 1.67:1 and the dark variant measures 12.51:1.

   🔴 THE WIDTH CLAMP IS TIED TO THE ARTWORK'S ASPECT RATIO, so it moved when the
   logo did. This box is sized by WIDTH with height:auto, and the official
   Vespa.ai lockup is 5.0906 wide-to-tall against the old "Vespa" wordmark's
   4.2025. Keeping the old clamp would have kept the WIDTH and rendered the mark
   ~17% shorter, which in a horizontal bar reads as a smaller logo. These values
   preserve the rendered HEIGHT instead, so the mark looks the same size as
   before and simply says .ai as well.
       was  clamp(5rem,    6.5vw,  6.75rem)  for the 4.2025 wordmark
   Measured after the change: desktop 1440 logo 113x22 with the nav absorbing
   the extra 19px, mobile 390 logo 97x19 with the CTA still 20px inside the
   viewport and zero horizontal overflow at either width. */
.bar__logo{flex:none;display:block;line-height:0}
.bar__logo img{width:clamp(6.06rem,7.87vw,8.18rem);height:auto;display:block}

.bar__nav{flex:1 1 auto;min-width:0}
.bar__nav ol{
  list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:clamp(.5rem,1.4vw,1.25rem);
}
.bar__nav li{display:flex;flex-direction:column;gap:.5rem;min-width:0}

/* The segment. One per stop, and the fill is this stop's own progress. */
.stop__rule{display:block;height:2px;background:rgba(46,47,39,.14);overflow:hidden}
.stop__rule i{display:block;height:100%;width:0;background:var(--sc-accent)}

.stop__label{
  font-family:var(--sc-font-text);font-size:.7rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  color:rgba(46,47,39,.4);transition:color .35s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bar__nav li[data-passed] .stop__label{color:rgba(46,47,39,.62)}
.bar__nav li[data-now] .stop__label{color:var(--ink)}

.bar__cta{
  flex:none;background:var(--sc-accent);color:var(--sc-accent-ink);
  font-size:.8rem;font-weight:500;letter-spacing:.01em;
  padding:.6em 1.15em;text-decoration:none;
  transition:background .25s ease;
}
.bar__cta:hover{background:#24663f}

@media (max-width:60rem){
  /* Five labels do not fit. The segments stay, because they are the progress.
     THAT SENTENCE IS A GOAL, NOT A GUARANTEE, and hiding the labels is not what
     delivers it. `.bar__nav{flex:1 1 auto;min-width:0}` makes the nav the one
     thing in this row allowed to shrink to nothing, so the segments only stay
     while the CTA leaves room for them. On a build whose CTA is a short label
     they hold 16.2px each at 390. On a build whose CTA is a long contract
     string they were measured at 0px at 390, for the life of that edition, and
     the bar showed no progress at all on a phone. A build in that position has
     to floor the nav and cap the CTA in ITS OWN stylesheet, which is where the
     label length is a fact about that build; vespa-managers-dossier does. Do
     not add that floor here: the two builds' CTAs are different strings and the
     right numbers are different numbers. */
  .stop__label{display:none}
  .bar__nav li{gap:0}
}

/* THE BAR CTA YIELDS INSTEAD OF OVERFLOWING. HUBSPOT-LEARNINGS 3.2.

   `.bar__cta{flex:none}` above refuses to shrink, so on a narrow bar the button
   does not get smaller, it goes off the side. The retrieval dossier never
   noticed, because its label is the contract's "Contact us." at twelve
   characters. The managers dossier reuses this same bar with a 57-character
   contract label and measured its own CTA 148px past a 390px viewport, clipped
   mid-word in every mobile frame, which is the whole reason this rule now lives
   with the bar rather than with the longer label. Both editions carry it, and
   these rules are identical in both copies of this file on purpose.

   Self-limiting by construction: `flex:0 1 auto` only shrinks when there is not
   enough room and `text-overflow:ellipsis` only shows when something actually
   overflowed, so at every width where the button already fits this changes
   nothing. The full label stays in the DOM, so a crawler and a screen reader
   still get all of it: text-overflow is visual only. Scoped to 51.99rem, which
   is this pattern's own narrow-width breakpoint, the one where
   `.blk--trail > .tab{align-self:flex-end}` stops applying; above it the bar
   has clearance at both labels. `.bar__in > .bar__cta` is (0,2,0) and beats the
   (0,1,0) rule above on specificity rather than on file order. */
@media (max-width:51.99rem){
  .bar__in > .bar__cta{
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

main{padding-top:var(--bar-h)}

/* ---------------------------------------------------------------- the wash
   Almost nothing, on purpose.

   The first version of this lifted the bottom 60 percent of every frame to near
   white so the ink type would clear 4.5:1. It did clear it, and the archive
   disappeared. That is the exact failure the factory threw a build away for:
   the measurement was satisfied and the world was washed out.

   So the wash is now a whisper at the very bottom edge, for the footer line
   only, and the copy carries its own surface instead. rgp does the same: light
   world, light plate, world fully visible around it. */
.sc-world__scrim{
  background:linear-gradient(to top,
    rgba(247,246,242,.34) 0%,
    rgba(247,246,242,.12) 14%,
    rgba(247,246,242,0) 30%);
}

/* -------------------------------------------------------------------- copy
   Ink on paper. No text-shadow, no plate, no backdrop: on a high-key ground
   with a wash under it, dark type simply reads, which is the entire reason for
   inverting the world. */
/* THE PLATE. Copy sits on its own sheet of paper laid on the world, hairline
   bounded, with the archive fully visible around and behind it. This is the
   device rgp uses and it is the only honest way to put ink type over a busy
   high-key photograph: give the type a surface rather than destroying the
   picture underneath it.
   One plate per act, never as page structure. The rejected build's failure was
   dozens of panels being the layout, not a single plate carrying a headline. */
.plate{
  /* Opaque, and the blur is gone.
     It was rgba(255,255,255,.95) over backdrop-filter:blur(4px), which is 4px of
     blur applied to a moving video and then covered by a surface that lets 5
     percent of it through. The compositor re-blurred a 500x400 region of playing
     footage every frame so that almost nothing could be seen through it. At 100
     percent the plate looks the same and the per-frame work is zero. */
  background:#FFFFFF;
  /* A crisper edge than the first version, and a tighter lift. A wide soft
     shadow under a white card on a light photograph reads as a smudge, not as
     elevation. */
  border:1px solid rgba(46,47,39,.20);
  padding:var(--plate-pad);
  box-shadow:0 2px 4px -2px rgba(46,47,39,.10), 0 12px 28px -22px rgba(46,47,39,.35);
  max-width:min(31rem,80vw);
  /* The tab hangs off the bottom edge, so the plate must not clip it. */
  overflow:visible;
}

/* The print system's green rule. It sits under the kicker and above the title on
   almost every spread of the book, and leaving it out is most of why these read
   as generic cards rather than as Vespa. */
.rule{
  width:clamp(2.25rem,3.5vw,3.25rem);height:3px;
  background:var(--mint);border:0;margin:0;
}
.blk{display:flex;flex-direction:column;gap:clamp(.7rem,1.4vh,1rem)}
.blk--trail{text-align:left}
@media (min-width:52rem){.blk--trail{margin-left:auto}}
.sc-copy--trail.plate:has(.blk--peak){max-width:min(36rem,84vw)}
.blk--close{gap:1.15rem}

.kicker{
  margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sc-accent);
}
.lede{
  margin:0;font-family:var(--sc-font-display);font-weight:500;
  font-size:clamp(1.35rem,1rem+1.35vw,2.3rem);line-height:1.12;
  letter-spacing:-.022em;text-wrap:balance;color:var(--ink);
}
.lede--xl{font-size:clamp(1.55rem,1.05rem+1.9vw,2.9rem)}
.say{
  margin:0;font-size:clamp(.95rem,.9rem+.28vw,1.1rem);line-height:1.55;
  /* ink-72, the print system's body colour. Full ink was needed while the copy
     sat directly on the photograph; on an opaque plate the hierarchy is free. */
  color:rgba(46,47,39,.72);max-width:34ch;
}
/* .four, .say--tight and .also were the close plate's list of four capability
   names, its pivot line and its footnote link. All three are gone: the plates
   carry a headline and one line now, the four names are in drawer 2 and drawer
   4 where the contract puts them, and the reading edition is offered at the end
   of drawer 5. Deleted rather than left in place, because a stylesheet that
   still describes the previous version of the page is how the next person
   learns the wrong thing about this one. */

.cta{
  align-self:flex-start;background:var(--sc-accent);color:var(--sc-accent-ink);
  font-weight:500;font-size:1rem;padding:.8em 1.5em;text-decoration:none;
  transition:background .25s ease;
}
.cta:hover{background:#24663f}

/* The close plate used to measure 692px on a 390px viewport, 10px clear of the
   fixed bar, which reads as a collision even when it does not touch. It now
   carries an ask, one line, a tab and a CTA, so the pressure is off. The
   tightening stays: a plate with a tab hanging off its bottom edge needs the
   headroom the tab takes. */
@media (max-width:52rem){
  .plate:has(.blk--close){padding:1.05rem 1.1rem}
  .blk--close{gap:.7rem}
  .blk--close .say{max-width:none}
}

.sc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{
  position:fixed;left:-9999px;top:1rem;z-index:99;background:var(--sc-accent);
  color:#fff;padding:.7rem 1.2rem;font-weight:500;
}
.skip:focus{left:var(--pad)}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--sc-accent);outline-offset:3px}
/* A drawer's heading is given tabindex="-1" only so focus can be parked on it
   when the panel opens. It is not a control, and ringing it draws a green box
   around the title every single time a drawer is used. Programmatic focus on a
   landing target is exactly the case :focus-visible is not meant to paint. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}