/* Instrument Sans, served from this site since 25 Sep (SPEED: Google's stylesheet blocked the first paint
   for ~0.75s on a phone; PRIVACY: no request to Google for a font). Same files and ranges Google serves. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ==================================================================== *
   PORSCHE DESIGN SYSTEM TOKENS, lifted verbatim from porsche.com/usa

   Not approximated. These are the actual custom-property values read out
   of their stylesheets, and using them rather than my own numbers is the
   difference between "similar-looking" and "built the same way".

   What I had been getting wrong structurally, now fixed:

     1. SECONDARY TEXT IS ALPHA, NOT GREY. Their contrast levels are the
        primary colour at reduced opacity - rgba(26,26,30,.7) and so on -
        so every grey is harmonically related to the ink and the canvas.
        I had been picking flat hex greys, which never sits as well.

     2. THE GUTTER IS HUGE ON DESKTOP. max(22px, 10.625vw - 12px) is 29px
        on a phone and 141px at 1440. Most of the "premium" feeling is
        simply that much air at the edges.

     3. THE SPACING AND TYPE SCALES ARE FLUID CLAMPS, not breakpoint
        jumps, so nothing ever snaps between sizes.

     4. FOUR DURATIONS AND THREE EASINGS, used consistently. Every
        transition on the page is one of .25s / .4s / .6s / 1.2s on one
        of three curves. No ad-hoc timings.

   Porsche Next is proprietary. Archivo with its width axis stands in -
   the one substitution, and it is named rather than hidden.
 * ==================================================================== */
:root{
  color-scheme: light;

  /* ---- canvas and ink ---- */
  --p-canvas:#fff;
  --p-primary:#010205;
  --p-canvas-dark:#010205;
  --p-primary-dark:#fafbff;

  /* ---- contrast: the ink at reduced alpha, their four levels ---- */
  --p-contrast-higher:rgba(21,21,25,.8);
  --p-contrast-high:rgba(26,26,30,.7);
  --p-contrast-medium:rgba(17,17,19,.6);
  --p-contrast-low:rgba(36,36,40,.5);
  --p-contrast-lower:rgba(79,80,89,.324);
  /* on a dark ground the same ladder inverts */
  --pd-contrast-higher:rgba(246,246,248,.78);
  --pd-contrast-high:rgba(246,246,248,.67);
  --pd-contrast-medium:rgba(246,246,248,.56);
  --pd-contrast-low:rgba(246,246,248,.45);

  /* ---- frosted, their three strengths ---- */
  --p-frosted:hsla(240,5%,70%,.148);
  --p-frosted-strong:rgba(100,101,114,.236);
  --pd-frosted:hsla(240,2%,43%,.228);
  --pd-frosted-strong:rgba(156,156,159,.302);
  --p-backdrop:rgba(36,36,40,.5);

  --p-focus:#1a44ea;

  /* ---- spacing, fluid ---- */
  --sp-xs:clamp(4px,.25vw + 3px,8px);
  --sp-sm:clamp(8px,.5vw + 6px,16px);
  --sp-md:clamp(16px,1.25vw + 12px,36px);
  --sp-lg:clamp(32px,2.75vw + 23px,76px);
  --sp-xl:clamp(48px,3vw + 38px,96px);
  --sp-2xl:clamp(80px,7.5vw + 56px,200px);

  /* ---- the page gutter, theirs ---- */
  --gutter:max(22px,10.625vw - 12px);

  /* ---- type scale, fluid ---- */
  --ts-2xs:.75rem;
  --ts-xs:.875rem;
  --ts-sm:1rem;
  --ts-md:clamp(1.13rem,.21vw + 1.08rem,1.33rem);
  --ts-lg:clamp(1.27rem,.51vw + 1.16rem,1.78rem);
  --ts-xl:clamp(1.42rem,.94vw + 1.23rem,2.37rem);
  --ts-2xl:clamp(1.6rem,1.56vw + 1.29rem,3.16rem);
  --ts-3xl:clamp(1.8rem,2.41vw + 1.32rem,4.21rem);
  --ts-4xl:clamp(2.03rem,3.58vw + 1.31rem,5.61rem);
  --ts-5xl:clamp(2.28rem,5.2vw + 1.24rem,7.48rem);

  --fw-normal:400;
  --fw-semibold:600;
  --fw-bold:700;

  /* ---- radius ladder ---- */
  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px;
  --r-2xl:16px; --r-3xl:24px; --r-4xl:32px; --r-full:9999px;

  /* ---- motion: four durations, three curves, nothing else ---- */
  --d-sm:.25s;
  --d-md:.4s;
  --d-lg:.6s;
  --d-xl:1.2s;
  --e-base:cubic-bezier(.25,.1,.25,1);
  --e-in:cubic-bezier(0,0,.2,1);
  --e-out:cubic-bezier(.4,0,.5,1);

  /* ---- the typeface, MEASURED rather than chosen ----
     Porsche Next is proprietary. Their own stack falls back to Arial Narrow,
     which says the intent is a NARROW grotesque - and Archivo at 96% was not
     that. I measured Porsche Next itself on their live page (canvas advance
     width of a fixed string at 100px, plus cap and x height) and swept eleven
     candidates against it:

       Porsche Next        width 1280.4   x-height/cap 0.707
       Instrument Sans 93  width 1298.4  (+1.4%)   0.708  (+0.001)  <- this
       Encode Sans 86      width 1282.4  (+0.2%)   0.743  (+0.036)
       Saira 89            width 1293.6  (+1.0%)   0.739  (+0.032)
       Archivo 96          width 1302.2  (+1.7%)   0.768  (+0.061)  <- was this

     Archivo was close on width and wrong on proportion: its x-height is 8.6%
     too tall, which is why the page read as a different typeface however the
     sizes were set. Instrument Sans at width 93 matches both.

     The fallback chain is theirs, verbatim. */
  --sans:'Instrument Sans','Arial Narrow',Arial,sans-serif;
  --wdth-text:93;     /* the measured match */
  --wdth-wordmark:75; /* the narrowest the axis goes, for the model wordmarks */
}