@layer psv-foundation, psv-components, psv-page, psv-home, psv-utilities;

/* The page ground is deliberately unlayered.
   A layered declaration loses to any unlayered one regardless of specificity,
   so a reset that ships outside a layer — a host page, an embed, a future
   third-party stylesheet — would paint straight over a layered ground. The
   body also needs an opaque colour of its own: --psv-page-background is built
   from gradients only, so setting it through the background shorthand leaves
   background-color transparent and whatever sits behind the document shows
   through. */
html {
  /* The same ground as the page, not the deeper tone: at fractional device
     scales (125 %) the layout viewport can be a sub-pixel shorter than the
     window, and that last strip is painted with this colour. A deeper tone
     showed as a hairline under every viewport-height page. */
  background-color: var(--psv-page-ground);
}

body {
  background-color: var(--psv-page-ground);
  background-image: var(--psv-page-veil);
}

/* Keep mobile page gestures on the vertical axis while retaining browser zoom. */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom}
}

html.psv-initializing { scroll-behavior: auto !important; }

/* State classes are installed during startup. They must reach their final
   values without starting transitions. Never hide the document for startup:
   that paints an empty frame on every full refresh. */
html.psv-initializing body *,
html.psv-initializing body *::before,
html.psv-initializing body *::after {
  transition: none !important;
  animation: none !important;
}

#psv-load-failure {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  gap: calc(16 * var(--psv-u));
  padding: calc(24 * var(--psv-u));
  background: #f7f9fc;
  color: #061426;
  font: calc(16 * var(--psv-u))/1.5 Arial, sans-serif;
}

#psv-load-failure,
#psv-load-failure * {
  visibility: visible !important;
}

#psv-load-failure button {
  min-height: max(44px, calc(44 * var(--psv-u)));
  font: inherit;
  color: #f7f9fc;
  background: #061426;
  border: 0;
  padding: calc(8 * var(--psv-u)) calc(20 * var(--psv-u));
}

/* A font failure selects one permanent set for this document, never a late swap. */
:root.psv-system-fonts {
  --psv-font-sans: Arial, sans-serif;
  --psv-font-display: Arial, sans-serif;
  --psv-font-hero: Arial, sans-serif;
  --psv-font-editorial: Arial, sans-serif;
  --psv-font-mono: Consolas, monospace;
}

/* Paint room for background-clip:text (Turkish circumflex and cedilla reach
   past the tight line box). Unlayered and element-qualified on purpose: the
   unlayered page styles reset h1 margins (.tq-hero-title { margin: 0 }…) and
   this must outrank them everywhere, or first lines drift between pages. */
h1.site-primary-title {
  padding-block: .14em .18em;
  margin-block: -.14em -.18em;
}

@layer psv-foundation {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 0;
    color-scheme: dark;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
    color: var(--psv-text);
    font-family: var(--psv-font-sans);
    font-size: var(--psv-body-size);
    font-weight: var(--psv-weight-regular);
    line-height: var(--psv-body-leading);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .2;
    background-image: var(--psv-page-grid);
    background-size: calc(64 * var(--psv-u)) calc(64 * var(--psv-u));
    /* mask: alpha ramp, not palette colour */
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
  }

  ::selection {
    color: var(--psv-bg-deep);
    background: var(--psv-accent-pale);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  select,
  textarea {
    color: inherit;
    font: inherit;
  }

  button,
  [type="button"],
  [type="submit"] {
    cursor: pointer;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  h1,
  h2,
  h3,
  p,
  dl,
  dd,
  ol,
  ul {
    margin-top: 0;
  }

  /* The display face is reserved for the one primary statement a page opens
     with. Everything else, headings included, is set in the sans. */
  h1,
  h2 {
    margin-bottom: 0;
    color: var(--psv-text);
    font-family: var(--psv-font-sans);
    font-weight: var(--psv-weight-medium);
    letter-spacing: var(--psv-title-tracking);
  }

  h3 {
    margin-bottom: 0;
    color: var(--psv-text);
    font-family: var(--psv-font-sans);
    font-weight: var(--psv-weight-medium);
  }

  p {
    margin-bottom: 0;
    color: var(--psv-copy);
  }

  :focus-visible {
    outline: 2px solid var(--psv-focus);
    outline-offset: 4px;
    box-shadow: var(--psv-shadow-focus);
  }

  [hidden] {
    display: none !important;
  }

  .page-main {
    position: relative;
    isolation: isolate;
  }

  .site-shell {
    width: var(--psv-shell-content);
    margin-inline: auto;
  }

  .site-shell--wide {
    width: var(--psv-shell-wide);
  }

  .site-shell--narrow {
    width: var(--psv-shell-narrow);
  }

  .site-section {
    position: relative;
    padding-block: var(--psv-section-space);
    border-top: 1px solid var(--psv-line);
  }

  .site-section--compact {
    padding-block: var(--psv-section-space-compact);
  }

  /* First section on a page: the header already draws the dividing line. */
  .site-section--flush {
    border-top: 0;
  }

  .skip-link {
    position: fixed;
    z-index: 1000;
    top: calc(12 * var(--psv-u));
    left: calc(12 * var(--psv-u));
    padding: calc(10 * var(--psv-u)) calc(14 * var(--psv-u));
    color: var(--psv-bg-deep);
    font-size: var(--psv-ui-copy);
    font-weight: var(--psv-weight-semibold);
    background: var(--psv-accent-pale);
    border-radius: var(--psv-radius-xs);
    transform: translateY(-180%);
    transition: transform .2s ease;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .sr-only {
    position: absolute !important;
    width: calc(1 * var(--psv-u)) !important;
    height: calc(1 * var(--psv-u)) !important;
    padding: 0 !important;
    margin: calc(-1 * var(--psv-u)) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .js.io-supported .reveal[data-reveal-motion] {
    opacity: 0;
    transform: translate3d(0, var(--psv-motion-distance), 0);
    transition:
      opacity var(--psv-motion-duration) var(--psv-motion-easing),
      transform var(--psv-motion-duration) var(--psv-motion-easing);
    will-change: opacity, transform;
  }

  .js.io-supported .reveal[data-reveal-motion].visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }
}

@media (max-width: 760px) {
  @layer psv-foundation {
    body::before {
      background-size: 48px 48px;
    }

    .site-shell--wide {
      width: min(100% - 32px, 680px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer psv-foundation {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }

    .js.io-supported .reveal {
      opacity: 1;
      transform: none;
    }
  }
}

@media (forced-colors: active) {
  @layer psv-foundation {
    html {
      color-scheme: light dark;
    }

    body {
      background: Canvas;
    }

    body::before {
      display: none;
    }

    :focus-visible {
      outline-color: Highlight;
      box-shadow: none;
    }
  }
}