/* =====================================================================
   base.css: resets, typography defaults and small shared helpers
   ---------------------------------------------------------------------
   Applies to the whole page. Also holds tiny utility classes that many
   partials use:
     .sprite           hides the <svg> symbol sheet (partials/sprite.svg)
     .visually-hidden  text for screen readers only
     .icon             line icons drawn from the sprite (<use href="#i-…">)
     .monogram         the J & J emblem (<use href="#monogram">)
     .eyebrow          small uppercase label above headings
     .section-title    big serif section heading
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Opened straight on a #section (a shared link, or after switching PT / EN):
   show the site instead of the landing from the very first paint. Set by
   the script at the top of partials/head.html, removed by js/router.js. */
.opening-site .landing { display: none !important; }
.opening-site .site[hidden] { display: block !important; }
/* Switching PT / EN loads the other page: cross-fade instead of a hard cut
   (browsers without support simply switch as before) */
@view-transition { navigation: auto; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--olive); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
/* Set by js/router.js when it moves focus after a tap, not a key press */
.no-focus-ring:focus-visible { outline: none; }
.sprite { position: absolute; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.icon {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.monogram { display: block; overflow: visible; }

.eyebrow {
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--olive);
}
.section-title {
  font: 400 60px/1.05 var(--serif);
}