:root {
  --ks-cta: #CA60A5;
  --ks-feature: #D68D6B;
  --ks-mission: #CA8560;
  --ks-soft: #FEF1E7;
  --ks-band: #EDEDED;
  --ks-ink: #080710;
  --ks-heading: #212121;
  --ks-white: #FFFFFF;

  --ks-ink-muted: #4A4A4A;
  --ks-border: #E2E2E2;

  --ks-font: "Noto Sans", system-ui, sans-serif;
  --ks-weight-regular: 400;
  --ks-weight-semibold: 600;
  --ks-weight-bold: 700;
  --ks-weight-extrabold: 800;

  --ks-text-h1: clamp(40px, 4vw + 1.5rem, 76px);
  --ks-text-h2: clamp(32px, 2vw + 1.25rem, 44px);
  --ks-text-h3: clamp(20px, 1vw + 1rem, 32px);

  --ks-text-xs: 13px;
  --ks-text-sm: 14px;
  --ks-text-base: 16px;
  --ks-text-lg: 18px;
  --ks-text-xl: 20px;
  --ks-text-2xl: 24px;
  --ks-text-button: 19px;

  --ks-leading-body: 1.6;
  --ks-leading-heading: 1.1;

  --ks-space-1: 8px;
  --ks-space-2: 16px;
  --ks-space-3: 24px;
  --ks-space-4: 32px;
  --ks-space-5: 40px;
  --ks-space-6: 48px;
  --ks-space-8: 64px;
  --ks-space-12: 96px;
  --ks-space-14: 112px;

  --ks-radius: 10px;
  --ks-radius-pill: 999px;
  --ks-container: 1200px;
  --ks-gutter: 24px;
  --ks-section: clamp(var(--ks-space-8), 10vw, var(--ks-space-14));

  --ks-focus-ring: 3px solid var(--ks-ink);
  --ks-focus-offset: 2px;
}

@media (min-width: 1024px) {
  :root {
    --ks-gutter: 32px;
  }
}
.ks-h1,
.ks-h2,
.ks-h3,
.ks-page :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--ks-font) !important;
  color: var(--ks-heading);
  line-height: var(--ks-leading-heading) !important;
  letter-spacing: normal !important;
}

.ks-h1,
.ks-page :where(h1) {
  font-size: var(--ks-text-h1) !important;
  font-weight: var(--ks-weight-extrabold);
  letter-spacing: -0.03em !important;
}

.ks-h2,
.ks-page :where(h2) {
  font-size: var(--ks-text-h2) !important;
  font-weight: var(--ks-weight-extrabold);
  letter-spacing: -0.02em !important;
}

.ks-h3,
.ks-page :where(h3) {
  font-size: var(--ks-text-h3) !important;
  font-weight: var(--ks-weight-bold);
}

.ks-page :where(h4) {
  font-size: var(--ks-text-xl) !important;
  font-weight: var(--ks-weight-bold);
}

.ks-page :where(h5) {
  font-size: var(--ks-text-lg) !important;
  font-weight: var(--ks-weight-bold);
}

.ks-page :where(h6) {
  font-size: var(--ks-text-base) !important;
  font-weight: var(--ks-weight-bold);
}

.ks-body,
.ks-body-lg,
.ks-page :where(p) {
  margin: 0;
  font-family: var(--ks-font);
  font-weight: var(--ks-weight-regular);
  line-height: var(--ks-leading-body);
  color: var(--ks-ink);
}

.ks-body,
.ks-page :where(p) { font-size: var(--ks-text-base); }
.ks-body-lg { font-size: var(--ks-text-lg); }

.ks-muted { color: var(--ks-ink-muted); }

.ks-eyebrow {
  margin: 0;
  font-family: var(--ks-font);
  font-size: var(--ks-text-xs);
  font-weight: var(--ks-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-ink);
}
.ks-container {
  width: 100%;
  max-width: calc(var(--ks-container) + 2 * var(--ks-gutter));
  margin-inline: auto;
  padding-inline: var(--ks-gutter);
  box-sizing: border-box;
}

.ks-section {
  padding-block: var(--ks-section);
}

.ks-section--band { background-color: var(--ks-band); }
.ks-section--soft { background-color: var(--ks-soft); }
.ks-section--feature { background-color: var(--ks-feature); }
.ks-section--mission { background-color: var(--ks-mission); }
:where(.ks-page) button {
  all: unset;
}

.ks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ks-space-1);
  min-height: 52px;
  padding: 0 28px;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: var(--ks-radius);
  font-family: var(--ks-font);
  font-size: var(--ks-text-button);
  font-weight: var(--ks-weight-bold);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms ease, background-color 150ms ease;
}

.ks-btn:focus-visible {
  outline: var(--ks-focus-ring);
  outline-offset: var(--ks-focus-offset);
}

.ks-btn--primary {
  background-color: var(--ks-cta);
  color: var(--ks-white);
}

.ks-btn--primary:hover {
  filter: brightness(0.92);
  color: var(--ks-white);
}

.ks-btn--outline {
  background-color: var(--ks-white);
  border-color: var(--ks-ink);
  color: var(--ks-ink);
}

.ks-btn--outline:hover {
  background-color: var(--ks-soft);
  color: var(--ks-ink);
}

.ks-btn--block {
  width: 100%;
}

.ks-link {
  font-family: var(--ks-font);
  font-weight: var(--ks-weight-bold);
  color: var(--ks-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ks-link:hover {
  color: var(--ks-ink);
  text-decoration-thickness: 2px;
}

.ks-link:focus-visible {
  outline: var(--ks-focus-ring);
  outline-offset: var(--ks-focus-offset);
}
/* Clickable pill, e.g. the city pills above the map */
.ks-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ks-space-1);
  min-height: 44px;
  padding: 0 var(--ks-space-2);
  box-sizing: border-box;
  border: 0;
  border-radius: var(--ks-radius-pill);
  background-color: var(--ks-white);
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-size: var(--ks-text-base);
  font-weight: var(--ks-weight-bold);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.ks-pill:hover { background-color: var(--ks-soft); color: var(--ks-ink); }

.ks-pill:focus-visible {
  outline: var(--ks-focus-ring);
  outline-offset: var(--ks-focus-offset);
}

.ks-pill--active,
.ks-pill--active:hover {
  background-color: var(--ks-ink);
  color: var(--ks-white);
}

/* Non-interactive label, e.g. kiln type and max temperature */
.ks-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 4px 10px;
  border-radius: var(--ks-radius-pill);
  background-color: var(--ks-soft);
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-size: var(--ks-text-xs);
  font-weight: var(--ks-weight-semibold);
  line-height: 1.4;
}
.ks-card {
  display: flex;
  gap: var(--ks-space-2);
  padding: var(--ks-space-2);
  box-sizing: border-box;
  border: 2px solid var(--ks-border);
  border-radius: 12px;
  background-color: var(--ks-white);
  color: var(--ks-ink);
  text-decoration: none;
}

@media (hover: hover) {
  a.ks-card:hover {
    border-color: var(--ks-cta);
    color: var(--ks-ink);
  }
}

a.ks-card {
  -webkit-tap-highlight-color: transparent;
}

.ks-card:focus-visible {
  outline: var(--ks-focus-ring);
  outline-offset: var(--ks-focus-offset);
}

.ks-card--selected {
  border-color: var(--ks-cta);
}

.ks-card--dashed {
  border-style: dashed;
}

.ks-card__media {
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  border-radius: var(--ks-radius);
  object-fit: cover;
}

.ks-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.ks-card__title {
  margin: 0;
  font-family: var(--ks-font) !important;
  font-size: var(--ks-text-base) !important;
  font-weight: var(--ks-weight-bold);
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  color: var(--ks-heading);
}
.ks-skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ks-band) 25%, #F6F6F6 50%, var(--ks-band) 75%);
  background-size: 200% 100%;
  animation: ks-shimmer 1.2s ease-in-out infinite;
}

.ks-skeleton--title { width: 75%; height: 18px; }
.ks-skeleton--text { width: 55%; height: 14px; }
.ks-skeleton--tag { width: 80px; height: 22px; border-radius: var(--ks-radius-pill); }
.ks-skeleton--tag-wide { width: 160px; height: 22px; border-radius: var(--ks-radius-pill); }

.ks-card__body--skeleton {
  flex: 1;
  gap: 10px;
}

@keyframes ks-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-skeleton { animation: none; }
}
/*
 * Redesign styles. Only --ks-* variables and .ks-* classes, so existing pages are unaffected.
 *







 */