/* ==========================================================================
   Polk-Neal & Associates — Design System: BASE (the site-wide layer)
   Tokens, reset, and every bare-element rule (img, a, h1–h4, p, section). Loaded
   before styles.css on every page; the components in styles.css are all classes.
   Cream + Navy + Gray-Green + Marigold
   Cormorant Garamond (display) / Avenir Next → Montserrat (interface)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Motion: every hover/menu transition reads these, so reduced motion (styles.css §16) is one override */
  --motion:       0.28s;
  --motion-quick: 0.2s;

  /* Brand core */
  --navy:        #00357A;
  --green:       #626E48;   /* the logo swoosh — print and web share it */
  --marigold:    #D6A52A;
  --cream:       #F5F1E8;
  --stone:       #E4E0D6;
  --charcoal:    #30363A;

  /* Derived — needed for legible full-bleed sections. Cream type on the brand
     green is only 4.8:1, so section grounds use the deepened shade;
     --green itself stays a detail colour (rules, eyebrows, icons). */
  --navy-deep:   #002554;
  --green-deep:  #4A5741;

  /* Alpha helpers */
  --green-line:  rgba(98, 110, 72, 0.22);
  --green-faint: rgba(98, 110, 72, 0.11);
  --navy-faint:  rgba(0, 53, 122, 0.045);
  --gold-faint:  rgba(214, 165, 42, 0.13);
  --cream-dim:   rgba(245, 241, 232, 0.72);
  --cream-line:  rgba(245, 241, 232, 0.22);

  /* Type */
  --display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --ui: "Avenir Next", "Avenir", "Montserrat", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spacing */
  --pad-section: clamp(64px, 9vw, 132px);
  --wrap: 1180px;
  --measure: 68ch;

  --radius: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--ui);
  font-size: clamp(1.0625rem, 0.46vw + 0.975rem, 1.1875rem);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--navy); text-decoration: none; }

::selection { background: var(--marigold); color: var(--navy-deep); }

:focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: 3px;
}

.wrap {
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
}

@media (max-width: 700px) {
  .wrap { width: min(100% - 40px, var(--wrap)); }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  z-index: 999;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   2b. ELEMENT DEFAULTS — headings, paragraphs and section spacing (moved here
   from styles.css §3 and §4; no rule between their old and new place targets
   these elements at the same specificity, so the cascade is unchanged)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; color: var(--navy); text-wrap: balance; }

h4 {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.35;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }

p:last-child { margin-bottom: 0; }

section { padding: var(--pad-section) 0; position: relative; }