/* Light Chop LLC — base: reset, typography, layout */

/* Breakpoint overrides (§5.1). Media queries can't read custom properties. */
:root { --gutter: 1.5rem; --section-pad: 4.5rem; }                          /* base: 24 / 72 */
@media (min-width: 480px)  { :root { --gutter: 1.5rem; --section-pad: 5rem; } } /* sm: 24 / 80 */
@media (min-width: 768px)  { :root { --gutter: 2rem;   --section-pad: 6rem; } } /* md: 32 / 96 */
@media (min-width: 1024px) { :root { --gutter: 3rem;   --section-pad: 8rem; } } /* lg: 48 / 128 */
@media (min-width: 1280px) { :root { --gutter: 3rem;   --section-pad: 9rem; } } /* xl: 48 / 144 */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-page);
  color: var(--color-text);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  letter-spacing: var(--ls-body);
  font-feature-settings: var(--font-feature);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

h1, h2, h3 {
  color: var(--color-heading);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--ls-h3); }

p { text-wrap: pretty; max-width: var(--measure); margin: 0; }

ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }
svg { display: block; }

::selection { background: var(--color-text); color: var(--color-page); }

/* Focus (§11): off-white / near-black ring, never the accent */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Sections and <main> take programmatic focus from anchors (§9.3) */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus-visible { outline-offset: -2px; }

/* Layout */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Home page sections: hairline spans the content width, not full-bleed (§7.3, §8.8) */
.section__body { border-top: 1px solid var(--color-hairline); padding-block: var(--section-pad); }

/* Text styles */
.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }

.small { font-size: var(--fs-small); color: var(--color-text-muted); }

.muted { color: var(--color-text-muted); }

/* Screen-reader-only text; also the skip link until it is focused (§8.7) */
.visually-hidden,
.skip-link:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}