/* ============================================================================
   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-managers-dossier/fonts/DMSans-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-display:swap;src:url(/hubfs/RGP/vespa-managers-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-managers-dossier/fonts/DMSansDisplay-500.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:400;font-display:swap;src:url(/hubfs/RGP/vespa-managers-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 own lockup. SVG, so it is crisp at any size, and their green. */
.bar__logo{flex:none;display:block;line-height:0}
.bar__logo img{width:clamp(5rem,6.5vw,6.75rem);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. */
  .stop__label{display:none}
  .bar__nav li{gap:0}
}

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}