/* ============================================================
   BASE — layer 2 of 3 (tokens.css → base.css → {variant}.css)
   Self-hosted fonts, reset, and the STRUCTURE of shared
   components (c-form, c-field, c-btn, c-switch). Variants own
   the look; base owns the bones.
   ============================================================ */

/* ---- self-hosted fonts (zero external requests) ---- */
@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-300-normal-latin.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-400-normal-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-600-normal-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-700-normal-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-900-normal-latin.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proxima-nova-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proxima-nova-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proxima-nova-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proxima-nova-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-300-900-normal-latin.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo-2-500-normal-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo-2-700-normal-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo-2-800-normal-latin.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivo-black-400-normal-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("../fonts/zilla-slab-400-normal-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("../fonts/zilla-slab-500-normal-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("../fonts/zilla-slab-700-normal-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--link); }
h1, h2, h3, h4 { line-height: var(--leading-tight); text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@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;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- contact form: bones only ---- */
.c-form { width: 100%; }
.c-form__form { display: grid; gap: var(--sp-4); }
.c-form__hp {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden;
}
.c-field { display: grid; gap: var(--sp-1); }
.c-field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.c-field__input {
  width: 100%;
  min-width: 0; /* text inputs refuse to shrink below ~20ch without this */
  padding: 0.7em 0.9em;
  border: 1.5px solid color-mix(in oklab, var(--ink) 25%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--surface) 70%, white);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.c-field__input:focus { border-color: var(--accent); outline: none; }
.c-field__textarea { resize: vertical; min-height: 8rem; }
.c-btn {
  display: inline-block;
  padding: 0.8em 2em;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--cr-white);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.c-btn:hover { transform: translateY(-2px); }
.c-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.c-form__error {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--cr-crimson-100);
  color: var(--cr-crimson-700);
  font-weight: 600;
}
.c-form__done { display: grid; gap: var(--sp-2); }
.c-form__done-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}
.c-form__again { font-weight: 600; }

/* htmx request feedback */
.c-form__form.htmx-request { opacity: 0.55; }

/* ---- style switcher: bones only ---- */
.c-switch {
  position: fixed;
  z-index: 90;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  max-width: min(calc(100vw - 2rem), 92rem);
}
.c-switch__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.c-switch__list {
  display: flex;
  gap: var(--sp-1);
  margin: 0; padding: 0;
  list-style: none;
  /* 15 styles stay on ONE row — scroll sideways when they don't fit.
     min-width: 0 lets the list shrink inside the flex dock so the
     scroll actually engages instead of pushing the page wider. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.c-switch { overflow: hidden; }
.c-switch__li { flex: none; }
.c-switch__item {
  display: inline-block;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}