/* Extra page-level styles on top of colors_and_type.css */

* { box-sizing: border-box; }
body { margin: 0; }
#app { min-height: 100vh; }

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

/* Subtle a:hover everywhere except buttons */
a { transition: color 120ms var(--ease-out), opacity 120ms var(--ease-out); }

/* Eyebrow + tiny label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  font-weight: 500;
}

/* Section base */
.section {
  padding: clamp(80px, 11vw, 144px) 32px;
  position: relative;
}
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.section-narrow {
  max-width: 880px;
  margin: 0 auto;
}

.section-divider {
  border-top: 1px solid var(--border);
}

/* Field-guide marker — a tiny corner annotation */
.field-marker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  text-transform: uppercase;
}

/* Topo pattern decorative bg */
.bg-topo {
  background-image: url("assets/topo-pattern.svg");
  background-size: 720px auto;
  background-repeat: repeat;
  background-position: center top;
}

/* Reusable buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold-400);
  color: var(--granite-900);
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid var(--gold-500);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 22px -10px rgba(217,164,65,0.55);
  transition: transform 80ms var(--ease-out), box-shadow 200ms var(--ease-out), background 120ms var(--ease-out);
  cursor: pointer;
}
.btn-primary:hover { background: var(--gold-500); }
.btn-primary:active { transform: scale(0.985); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-1);
  padding: 14px 16px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border-radius: 8px;
}
.btn-ghost:hover { color: var(--gold-700); }

/* Hairline rule */
.hr-thin {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--alpine-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Selection */
::selection { background: var(--gold-200); color: var(--granite-900); }

/* Subtle aspen-leaf ascii flourish */
.flourish {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--granite-300);
  text-transform: uppercase;
}