/* Sitebound base kit: a tested foundation every draft builds on.
   It sets structure and polish only (reset, type and spacing scales, buttons, forms, focus, motion).
   It has no look of its own: each site sets the custom properties below and styles itself in style.css.
   Do not edit this file; override it in style.css. */

:root {
  /* Set these for each site */
  --color-bg: #ffffff;
  --color-surface: #f6f6f4;
  --color-text: #1d1d1b;
  --color-muted: #5f5f5a;
  --color-accent: #1d1d1b;
  --color-accent-text: #ffffff;
  --color-line: rgba(0, 0, 0, 0.14);
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);
  --radius: 6px;
  --focus: #2563eb;

  /* Fluid type scale, from a 390px phone to a 1440px desktop */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.42rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.73rem, 1.5rem + 1.15vw, 2.4rem);
  --step-4: clamp(2.07rem, 1.7rem + 1.85vw, 3.2rem);
  --step-5: clamp(2.49rem, 1.9rem + 2.9vw, 4.3rem);

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --space-3xl: clamp(5rem, 3rem + 7vw, 9rem);

  --measure: 66ch;
  --container: 1200px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* stops sideways scrolling without breaking sticky headers */
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { object-fit: cover; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li, dd, figcaption { overflow-wrap: break-word; text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { max-width: var(--measure); }
small { font-size: var(--step--1); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
::selection { background: var(--color-accent); color: var(--color-accent-text); }

/* Focus that is always visible for keyboard users */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

/* Layout helpers */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-2xl); }
.stack > * + * { margin-top: var(--space-s); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.visually-hidden {
  position: absolute !important; 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: var(--space-s); top: -100px; z-index: 1000; padding: var(--space-2xs) var(--space-s); background: var(--color-bg); color: var(--color-text); }
.skip-link:focus { top: var(--space-s); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Buttons: a 48px touch target, set the look in style.css */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.75em 1.4em;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--color-accent); color: var(--color-accent-text);
  font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--color-text); border-color: currentColor; }

/* Forms */
label { display: block; font-weight: 600; margin-bottom: var(--space-3xs); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  display: block; width: 100%; min-height: 48px;
  padding: 0.7em 0.9em;
  border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-bg);
  font-size: max(16px, 1rem);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* People who ask for less motion get none */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}