/* ==========================================================================
   Peddlers 30A — Reset, elements, layout primitives
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   Fluid design scale

   Every length in this project is authored in rem against the 1920px Figma
   canvas, where 1rem = 16 design pixels. Binding the root font-size to the
   viewport (100vw / 120 === 16px at 1920px) makes the whole composition scale
   proportionally, so a narrower screen shows the same layout as the design
   rather than reflowing it — the same number of cards in the rail, the same
   ratio of column to gutter.

   Capped at 16px so the page stops growing past the design width, and floored
   at 12px so type stays legible; below 1024px the responsive rules take over
   and the root returns to a normal 16px.
   -------------------------------------------------------------------------- */
html {
  font-size: clamp(12px, calc(100vw / 120), 16px);
  -webkit-text-size-adjust: 100%;
}

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

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

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

@media (max-width: 1024px) {
  html {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 1rem;
  }
}

/* The page is capped at the 1920px design width and centred, so it never
   stretches past the canvas on wide monitors. `min(…, 100%)` matters: the root
   scale is derived from 100vw, which includes the vertical scrollbar, so a bare
   120rem would sit a scrollbar-width wider than the content area and force a
   horizontal scroll. */
body {
  max-width: min(var(--canvas), 100%);
  margin: 0 auto;
  overflow-x: clip;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--p1);
  outline-offset: 0.1875rem;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 100%; /* body already caps the page at the canvas width */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--flush {
  padding-inline: 0;
}

.section {
  position: relative;
}

/* Vertical rhythm used between the page's stacked sections. */
.section--pad {
  padding-block: var(--sp-11);
}

.section--pad-sm {
  padding-block: var(--sp-9);
}

.section--sand {
  background: var(--s3);
}

.section--grey {
  background: var(--s1);
}

.section--cream {
  background: var(--cream);
}

.section--blue {
  background: var(--p1);
  color: var(--s1);
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */

/* Blue cursive display face — every major section heading uses this. */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--p1);
  line-height: 1.08;
  letter-spacing: 0;
}

.script--light {
  color: var(--p2);
}

.script--teal {
  color: var(--s2);
}

.script--cream {
  color: var(--s3);
}

.script--xxl { font-size: var(--fs-script-xxl); }
.script--xl  { font-size: var(--fs-script-xl); }
.script--lg  { font-size: var(--fs-script-lg); }
.script--md  { font-size: var(--fs-script-md); }
.script--sm  { font-size: var(--fs-script-sm); }
.script--xs  { font-size: var(--fs-script-xs); }

/* Letterspaced uppercase kicker that sits above most section headings. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text);
}

/* Pitch Sans semibold italic — card titles, tags, nav-adjacent labels. */
.label {
  font-family: var(--font-label);
  font-style: italic;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--p1);
}

.label--lg { font-size: var(--fs-label-lg); }
.label--md { font-size: var(--fs-label-md); }
.label--sm { font-size: var(--fs-label-sm); }
.label--xs { font-size: var(--fs-label-xs); }

/* Body copy is 20px in the design — GT Walsheim at 20px is by far the most
   used cut (34 instances vs 25 at 16px, which is the nav-link size). */
.body-copy {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: 1.45;
  color: var(--text);
}

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

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

.media-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}