/* ==========================================================================
   PBE, LLC — "THIS SIDE UP"
   css/base.css — reset remnants, semantic element defaults,
   overscroll-behavior, focus-visible rings, .sr-only, skip-link.

   Deliberately absent: `scroll-behavior`. The document scrolls natively and
   js/engine/scroll.js damps a read of window.scrollY — spec §3.4. A CSS
   smooth-scroll declaration would fight it.
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box }

html{
  /* The rubber-band must never reveal white above the backdrop — spec §3.1. */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* No dark-mode UA inversion of form controls; the five grounds are the only
     surfaces this site has. */
  color-scheme: light;
}

body{
  margin: 0;
  overscroll-behavior: none;
  background-color: var(--plate-foam);
  color: var(--stencil);
  /* Body voice (§2.2): Archivo at wdth 108 — it reads as a different voice via
     the width axis, with no third download. */
  font-family: var(--f-label);
  font-variation-settings: "wdth" 108, "wght" 400;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.72;
}

/* ---- Lenis ---------------------------------------------------------------
   js/engine/smooth.js hands the scroll position to Lenis and adds `html.lenis`
   itself. These are Lenis's own required rules, inlined from
   node_modules/lenis/dist/lenis.css rather than linked, because this site has
   no build step and thirteen HTML pages that would each need a second <link>.
   Keep them in sync if Lenis is upgraded.

   Note there is still NO `scroll-behavior` here, and that remains deliberate:
   Lenis animates the scroll position itself, and a CSS smooth-scroll
   declaration on top of it would fight it exactly as it fought scroll.js. */

html.lenis,
html.lenis body{
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped{
  overflow: clip;
}

/* Nested scrollers opt out. js/engine/smooth.js also names `.band` and `.menu`
   in its `prevent` predicate — this is the markup-side half of the same idea. */
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch]{
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe{
  pointer-events: none;
}

/* ---- Semantic element defaults ----------------------------------------- */

h1, h2, h3, h4, h5, h6{
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

p, figure, figcaption, blockquote, dl, dd, ul, ol, pre{ margin: 0; padding: 0 }

/* Every list on this site is unbulleted by design: the spec index, the menu
   index, the locations, the colophon lines, the carbon insets. */
ul, ol{ list-style: none }

img, svg, canvas, video{ display: block; max-width: 100% }
img{ height: auto }

a{
  color: inherit;
  text-decoration: none;
  /* --seal-blue is the ONE interactive colour on the site (§2.1). */
  transition: color var(--d-onplate) linear;
}
a:hover{ color: var(--seal-blue) }

button, input, select, textarea{
  font: inherit;
  font-variation-settings: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}
button{
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}

table{ border-collapse: collapse; border-spacing: 0 }
th{ font-weight: inherit; text-align: left }
td{ text-align: left }
caption{ text-align: left }

address{ font-style: normal }

/* Bodoni Moda italic is a real voice here (the rotated mark, the one clause in
   leaf 06, the testimonial) — em/i keep their italic and are never faked. */
em, i{ font-synthesis-style: none }

[hidden]{ display: none !important }

/* ---- Focus visibility (§8) ---------------------------------------------
   Two values, because --seal-blue on #14161A is nearly invisible and the
   carbon leaf holds the contact block. */
:focus-visible{
  outline: 3px solid var(--seal-blue);
  outline-offset: 2px;
  border-radius: 2px;
}
[data-plate="carbon"] :focus-visible{ outline-color: var(--focus-dark) }

/* A mouse press must not paint a ring; a keyboard tab must. */
:focus:not(:focus-visible){ outline: none }

/* ---- Screen-reader-only ------------------------------------------------
   Used for the giant word's real string, the rotated mark's clarification,
   the visually-implicit table headings and the leaf-04 / leaf-07 headings.
   Never display:none — every one of these strings must stay in the
   accessibility tree. */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Skip link ---------------------------------------------------------
   The first focusable node on the page: `Skip to content` -> #body-01.
   js/a11y.js intercepts the click and routes it through the same
   section-offset path every other in-page anchor uses. Set as the site's own
   black pill so it reads as part of the system when it does appear. Above the
   sacrificial lay-down sheet (z-index 4) so it is reachable from frame one. */
.skip{
  position: fixed;
  z-index: 10;
  top: var(--s-4);
  left: var(--s-4);
  transform: translateY(calc(-100% - var(--s-6)));
  padding: 9px 18px;
  border-radius: 999px;
  background-color: var(--plate-carbon);
  color: var(--carbon-type);
  font-family: var(--f-label);
  font-variation-settings: "wdth" 88, "wght" 600;
  font-size: var(--t-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.024em;
  transition: transform var(--d-chrome) var(--e-lay);
}
.skip:hover{ color: var(--carbon-type) }
.skip:focus-visible{ transform: translateY(0) }