/* =========================================================
   INLAND NORTHWEST WEB — brand system
   (Business name is PROVISIONAL — see SWAP-THE-NAME.md)

   Design direction: Inland Northwest without the postcard.
   Columbia-basalt slate as the ground, weathered copper as
   the accent, Palouse wheat as the light, river blue for
   actions, and warm paper for anything meant to be read or
   printed. Type is industrial-signage caps over a sturdy
   civic body face, with an editorial italic reserved for
   the moments where a human is talking.

   Palette
     basalt  #14181D   copper #B4491F   river #1F4E5F
     wheat   #E8C87A   paper  #F5F2EC
   Type
     Archivo (wide caps, display + wordmark)
     Public Sans (body / UI)
     Newsreader italic (human asides, used sparingly)
   ========================================================= */

/* ---- 1. Tokens — change these to restyle everything ---- */
:root {
  /* Ground */
  --basalt:       #14181D;  /* primary dark ground */
  --basalt-2:     #1E242B;  /* raised dark surface */
  --basalt-3:     #2A323B;  /* dark hairlines / chips */
  --paper:        #F5F2EC;  /* warm paper — read/print surface */
  --paper-2:      #FFFDF8;  /* raised paper card */
  --paper-3:      #EAE5DB;  /* alternating paper band */

  /* Ink */
  --ink:          #14181D;  /* body text on paper */
  --ink-soft:     #3C444C;  /* secondary text on paper */
  --ink-muted:    #5B6268;  /* captions on paper (AA on paper) */
  --on-dark:      #F5F2EC;  /* body text on basalt */
  --on-dark-soft: #B9BFC5;  /* secondary text on basalt (AA) */

  /* Accents */
  --copper:       #B4491F;  /* brand accent — graphics, rules, fills */
  --copper-ink:   #9C3B14;  /* copper as TEXT on paper (AA: 6.2:1) */
  --copper-lite:  #E2703A;  /* copper as TEXT on basalt (AA: 5.6:1) */
  --copper-tint:  #F2DFD5;  /* copper wash */
  --river:        #1F4E5F;  /* actions / links (AA: 8.1:1 on paper) */
  --river-deep:   #143743;  /* action hover */
  --wheat:        #E8C87A;  /* highlight on dark (AA: 11:1 on basalt) */
  --wheat-tint:   #F7EBCB;  /* highlight wash on paper */

  /* Lines & shadow */
  --line:         rgba(20, 24, 29, .13);
  --line-strong:  rgba(20, 24, 29, .28);
  --line-dark:    rgba(245, 242, 236, .16);
  --shadow-sm:    0 4px 14px rgba(20, 24, 29, .08);
  --shadow:       0 18px 46px rgba(20, 24, 29, .16);
  --shadow-lift:  0 34px 80px rgba(0, 0, 0, .45);

  /* Type */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --editor:  "Newsreader", Georgia, "Times New Roman", serif;

  /* Metrics */
  --radius:    10px;
  --radius-lg: 18px;
  --maxw:      1220px;
  --ease:      cubic-bezier(.22, .61, .36, 1);
}

/* ---- 2. Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 .5rem;
}
p { margin: 0 0 1rem; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--river); text-underline-offset: 3px; }
a:hover { color: var(--river-deep); }

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

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 99;
  background: var(--copper); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius) var(--radius); font-weight: 700;
  text-decoration: none; transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* ---- 3. The wordmark ---------------------------------------------
   Built from live text, NOT an image, so the business name can be
   re-lettered in one place. See SWAP-THE-NAME.md.
   ------------------------------------------------------------------ */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  text-decoration: none;
  color: inherit;
}
.wordmark__mark { flex: none; width: 42px; height: 42px; }
.wordmark__text { display: flex; flex-direction: column; gap: .16em; }
.wordmark__name {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: .98rem;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: currentColor;
  white-space: nowrap;
}
.wordmark__rule {
  display: block;
  height: 2px;
  background: var(--copper);
  width: 100%;
}
.wordmark__tag {
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  opacity: .72;
  white-space: nowrap;
}
.wordmark--lg .wordmark__mark { width: 74px; height: 74px; }
.wordmark--lg .wordmark__name { font-size: 1.72rem; letter-spacing: .11em; }
.wordmark--lg .wordmark__tag  { font-size: .8rem; }
.wordmark--sm .wordmark__mark { width: 30px; height: 30px; }
.wordmark--sm .wordmark__name { font-size: .74rem; }
.wordmark--sm .wordmark__tag  { font-size: .48rem; }

/* Horizontal lockup — for email signatures, letterhead, anywhere
   wide and short. Same two words, rule turned on its side. */
.wordmark--row .wordmark__text { flex-direction: row; align-items: center; gap: .6em; }
.wordmark--row .wordmark__rule { width: 2px; height: 1.05em; flex: none; }

/* ---- 4. Small shared pieces ---- */
.eyebrow {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper-ink);
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .9rem;
}
.eyebrow::before {
  content: ""; width: 2.2rem; height: 2px; background: var(--copper); flex: none;
}
.on-dark .eyebrow { color: var(--wheat); }
.on-dark .eyebrow::before { background: var(--copper-lite); }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--body); font-weight: 700; font-size: .98rem;
  padding: .82rem 1.4rem; border-radius: 999px;
  background: var(--river); color: #fff; text-decoration: none;
  border: 2px solid transparent;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: var(--river-deep); color: #fff; transform: translateY(-1px); }
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--paper-3); color: var(--ink); transform: translateY(-1px); }