/* Reset + base typography */

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

html, body { margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-iron);
  background: var(--color-cream);
  font-feature-settings: 'kern', 'liga', 'calt';
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* Better line-breaking on headings, ledes, and body — avoid widows
   and improve last-line balance. Progressive enhancement. */
h1, h2, h3,
.home-brand, .home-tagline, .page-title, .case-title,
.statement-text, .principles-title, .work-card-title,
.featured-title, .case-pull-text, .home-section-heading,
.about-statement-text,
p, .home-lede, .page-intro, .case-lede,
.service-body, .work-card-summary, .principle-text {
  text-wrap: pretty;
}

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

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

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

:focus-visible {
  outline: 2px solid var(--accent-structural-small);
  outline-offset: 2px;
}

/* Page frame + gradients */

.page-frame {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-frame > main { flex: 1; }

.page-frame[data-page="home"] {
  background: linear-gradient(180deg,
    #fad080 0%, #fad080 1%,
    #f9eec4 18%,
    #fbf7ed 55%, #fbf7ed 100%);
}

.page-frame[data-page="services"] {
  background: linear-gradient(180deg,
    #f9eec4 0%, #fbf7ed 60%, #fbf7ed 100%);
}

.page-frame[data-page="about"] {
  background: linear-gradient(180deg,
    #fbf7dc 0%, #fbf7ed 70%, #fbf7ed 100%);
}

.page-frame[data-page="work"],
.page-frame[data-page="case"] {
  background: linear-gradient(180deg,
    #fbf7dc 0%, #fbf7ed 50%, #fbf7ed 100%);
}

.page-frame[data-page="404"] {
  background: var(--color-vellum);
}

/* Skip link */

.skip-link {
  position: absolute; top: 0; left: 0;
  padding: 12px 16px;
  background: var(--color-vellum);
  color: var(--color-iron);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 1;
  transform: translateY(-100%);
  transition: transform var(--duration-fast) var(--ease-standard);
  z-index: 100;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-teal-dark);
  outline-offset: 2px;
}

/* Shared measures */

.measure-body { max-width: var(--measure-body); }
.measure-lede { max-width: var(--measure-lede); }

/* Selection — teal at low alpha on light grounds, teal-iron on dark panels */

::selection {
  background: rgba(91, 138, 128, 0.22);   /* teal at 22% */
  color: var(--color-iron);
}
.home-statement ::selection,
.about-principles ::selection,
.case-outcomes ::selection {
  background: rgba(127, 169, 159, 0.32);  /* teal-iron on iron panels */
  color: var(--color-vellum);
}