/* =============================================================================
   PAGONI — BASE
   Reset, the adaptive rem grid, type primitives, utilities.
   ============================================================================= */

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

/* -----------------------------------------------------------------------------
   THE ADAPTIVE REM GRID — load-bearing, do not break

   Every layout number in this project is a pixel measured on a 1440-wide frame,
   written in rem against a 16px root. The root then scales with the viewport, so
   1rem is exactly 1 frame-pixel at EVERY width. `left: 29.375rem` literally is
   "470px in the design".

   That is why there are almost no re-authored breakpoints in this codebase. If
   you hardcode px in layout, you break the whole system.
   ----------------------------------------------------------------------------- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 1441px) { html { font-size: 1.1111111vw; } }  /* 16 * 100 / 1440 */
@media (max-width: 1440px) { html { font-size: 1.1111111vw; } }
@media (max-width: 1024px) { html { font-size: 1.5625vw;   } }  /* 16 * 100 / 1024 */
@media (max-width: 640px)  { html { font-size: 4.4444444vw; } } /* 16 * 100 / 360  */

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--typeface-ui);
  font-size: var(--raw-text-body);
  line-height: var(--raw-leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* `clip`, NEVER `hidden`.
     overflow-x:hidden makes body a scroll container, which silently breaks
     every position:sticky section on the page. This cost a day once. */
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--raw-chart-a20); color: var(--raw-ink-050); }

:focus-visible {
  outline: 2px solid var(--foreground-signal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   UTILITIES
   ----------------------------------------------------------------------------- */

/* What lets a 0.8 line-height sit flush against the 24px page margin. Without
   it, display type floats off its own box and every measured inset is a lie. */
.text-trim {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Declaration order matters: 100vh first as the fallback, then 100dvh for
   browsers that have it. */
.min-h-viewport { min-height: 100vh; min-height: 100dvh; }

.page-inset { padding-inline: var(--raw-spacing-page); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* -----------------------------------------------------------------------------
   TYPE PRIMITIVES
   Classes, not element selectors, so a heading's level stays a document-outline
   decision rather than a visual one.
   ----------------------------------------------------------------------------- */
.t-hero,
.t-display,
.t-title {
  font-family: var(--typeface-display);
  font-weight: var(--weight-display);
  /* A single grotesque at display size needs the tracking pulled in; at 90px
     the default spacing reads as a word that has come apart. */
  letter-spacing: -0.03em;
}
.t-hero    { font-size: var(--raw-text-hero);    line-height: var(--raw-leading-hero); }
.t-display { font-size: var(--raw-text-display); line-height: var(--raw-leading-display); }
.t-title   { font-size: var(--raw-text-title);   line-height: var(--raw-leading-title); }

.t-lead {
  font-size: var(--raw-text-lead);
  line-height: var(--raw-leading-lead);
  color: var(--foreground-strong);
  font-weight: 400;
}

.t-body { font-size: var(--raw-text-body); line-height: var(--raw-leading-body); }

.t-caption {
  font-size: var(--raw-text-caption);
  line-height: var(--raw-leading-caption);
  letter-spacing: var(--raw-tracking-caption);
  font-weight: 500;
  color: var(--foreground-faint);
}

.t-micro {
  font-family: var(--typeface-mono);
  font-size: var(--raw-text-micro);
  line-height: 1;
  letter-spacing: var(--raw-tracking-micro);
  text-transform: uppercase;
  color: var(--foreground-faint);
}

.t-hand {
  font-family: var(--typeface-hand);
  font-weight: var(--weight-medium);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--foreground-strong);
}

/* SegmentedText — the signature type move.
   The leading capital of every word in display type is set ITALIC and the
   remainder upright, so `Pagoni` is [P italic][agoni]. It used to be a serif
   italic against a serif roman; with one family across the whole site the same
   move is carried by the italic alone, which is quieter and holds up better at
   small sizes. js/core/segment.js writes these spans. */
.seg-i { font-style: italic; }
.seg-r { font-style: normal; }

/* -----------------------------------------------------------------------------
   MOTION PREFERENCE
   Scrubbed animations hold at their resting state; pointer-follow and loops
   stop entirely. The glass grain is static and stays visible.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}