/* ============================================================================
   Likidera — Base: reset, typography roles, layout primitives, a11y utilities
   Class selectors only (all pages share one CSS).
   ============================================================================ */

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-body);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }

:where(h1, h2, h3, h4) {
  line-height: var(--leading-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

/* ---- Focus and selection ------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
::selection { background: var(--brand); color: var(--on-brand); }
/* Anchor targets (sections with tabindex="-1", and <main> itself, which the
   back-to-top button focuses) take focus on in-page navigation so assistive
   tech lands on them; they are not controls, so the ring that would otherwise
   trace the whole band is not drawn. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible,
main [tabindex="-1"]:focus,
main [tabindex="-1"]:focus-visible { outline: none; }


/* ---- Reduced motion (durations are zeroed at the token layer) ----------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- Layout primitives -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) { .container { padding-inline: var(--gutter); } }
@media (min-width: 1280px) { .container { padding-inline: var(--space-6); } }
/* Wide stage for hero, screenshot bands and the ERP ruler on large screens. */
@media (min-width: 1440px) { .container--wide { max-width: var(--container-wide); } }

/* ---- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 300;
  background: var(--brand);
  color: var(--on-brand);
  padding: 0.65rem 1.1rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  transition: transform var(--duration-base) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---- Typography roles ---------------------------------------------------
   One family; character comes from weight, tracking and figure style. */

/* Uppercase label opened by a teal nick. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--brand);
}

.lead {
  font-size: var(--text-lead);
  color: var(--text-muted);
  line-height: 1.55;
}

/* Every amount, date, count and axis label carries this role.
   nowrap: an amount and its currency symbol never separate. */
.figures {
  font-variant-numeric: tabular-nums slashed-zero lining-nums;
  font-feature-settings: var(--numeric-figures);
  letter-spacing: var(--tracking-data);
  font-weight: var(--weight-figure);
  white-space: nowrap;
}

.measure { max-width: 54ch; }
.accent { color: var(--brand); }

/* ---- Scroll reveal -------------------------------------------------------
   Hiding lives only under `.js` (set pre-paint): with scripts off nothing
   is ever hidden. ui.js adds .is-in; stagger via --reveal-delay. */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-in {
  animation: reveal-rise var(--duration-slow) var(--ease-out) var(--reveal-delay, 0ms) both;
}
@keyframes reveal-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}
/* The duration is a token so the kill-switch in tokens.css reaches it: this
   rule hardcoded 620ms and ran at full length under `reduce` on all eight
   pages, because `opacity: 1` below sets the resting state and a running
   animation overrides it. The delay has to go too — animation-fill-mode: both
   applies the `from` keyframe throughout the delay, so a zero duration alone
   would still hold Home's staggered cards invisible for up to 350ms. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; }
  .js [data-reveal].is-in { animation-delay: 0ms; }
}

/* ---- Accessible hiding --------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
[hidden] { display: none; }


/* ---- Print ---------------------------------------------------------------
   Paper is the light theme: color-scheme resolves every light-dark() token to
   its light value whichever theme was pinned on screen. Chrome and the
   overlays go, reveals stop waiting for a scroll, and plates print flat.
   Links print as their text only — an internal URL after every cross-link
   would be noise. */
@page { margin: 16mm; }
@media print {
  :root,
  :root[data-theme="dark"] { color-scheme: light; }
  body { background: var(--white); }
  .site-header,
  .sheet,
  .modal-overlay,
  .grid-texture,
  .ruler,
  .page-index,
  .to-top,
  #cta,
  .methods__cta,
  .intake__cta,
  .footer-menu,
  .footer-brand .btn,
  .photo { display: none; }
  .plate { background: var(--white); box-shadow: none; }
  .plate__light { display: none; }
  .js [data-reveal],
  .js [data-reveal].is-in { opacity: 1; transform: none; animation: none; }
}