/* Qizil 0.2.0: reset, typography roles, links, focus, reduced motion. Copied from src/base.css by scripts/build.mjs; edit the source. */

/* Needs qizil.css (custom properties) and, for the brand faces, fonts.css. */

/* ---------- reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
pre {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

svg {
  flex-shrink: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* ---------- page ---------- */

body {
  min-height: 100vh;
  background: var(--q-bg);
  color: var(--q-fg);
  font-family: var(--q-font-sans);
  font-size: var(--q-body-font);
  font-weight: var(--q-weight-regular);
  line-height: var(--q-leading-17);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--q-accent-soft);
  color: var(--q-fg);
}

p {
  text-wrap: pretty;
}

/* ---------- typography roles ---------- */

.q-display,
.q-h1,
.q-h2,
.q-h3,
h1,
h2,
h3 {
  font-family: var(--q-font-display);
  font-weight: var(--q-weight-regular);
  color: var(--q-fg);
}

.q-display {
  font-size: var(--q-text-44);
  line-height: var(--q-leading-44);
  letter-spacing: var(--q-tracking-44);
  text-wrap: balance;
}

h1,
.q-h1 {
  font-size: var(--q-text-38);
  line-height: var(--q-leading-38);
  letter-spacing: var(--q-tracking-38);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .q-display {
    font-size: var(--q-text-64);
    line-height: var(--q-leading-64);
    letter-spacing: var(--q-tracking-64);
  }

  h1,
  .q-h1 {
    font-size: var(--q-text-48);
    line-height: var(--q-leading-48);
    letter-spacing: var(--q-tracking-48);
  }
}

h2,
.q-h2 {
  font-size: var(--q-text-38);
  line-height: var(--q-leading-38);
  letter-spacing: var(--q-tracking-38);
}

h3,
.q-h3 {
  font-size: var(--q-text-30);
  line-height: var(--q-leading-30);
  letter-spacing: var(--q-tracking-30);
}

h4,
.q-h4 {
  font-family: var(--q-font-sans);
  font-size: var(--q-text-24);
  font-weight: var(--q-weight-medium);
  line-height: var(--q-leading-24);
}

.q-poster {
  font-family: var(--q-font-display);
  font-size: var(--q-text-72);
  line-height: var(--q-leading-72);
  letter-spacing: var(--q-tracking-72);
}

.q-lead {
  font-size: var(--q-text-20);
  line-height: var(--q-leading-20);
}

.q-body {
  font-size: var(--q-text-17);
  line-height: var(--q-leading-17);
}

.q-small {
  font-size: var(--q-text-15);
  line-height: var(--q-leading-15);
}

.q-caption {
  font-family: var(--q-font-mono);
  font-size: var(--q-text-13);
  line-height: var(--q-leading-13);
}

.q-micro {
  font-family: var(--q-font-mono);
  font-size: var(--q-text-12);
  line-height: var(--q-leading-12);
}

/* Eyebrow / section label: mono 12, uppercase, 0.08em. */
.q-eyebrow {
  font-family: var(--q-font-mono);
  font-size: var(--q-text-12);
  line-height: var(--q-leading-12);
  letter-spacing: var(--q-tracking-label);
  text-transform: uppercase;
  color: var(--q-muted);
}

.q-muted {
  color: var(--q-muted);
}

.q-mono,
code,
kbd,
samp {
  font-family: var(--q-font-mono);
}

code,
kbd,
samp {
  font-size: 0.875em;
}

strong,
b {
  font-weight: var(--q-weight-medium);
}

em,
i {
  font-style: italic;
}

@media (max-width: 639.98px) {
  body {
    --q-body-font: var(--q-text-16);
  }
}

/* ---------- links ---------- */

a {
  color: var(--q-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--q-border);
  transition: color var(--q-duration) var(--q-ease), text-decoration-color var(--q-duration) var(--q-ease);
}

a:hover {
  color: var(--q-accent);
  text-decoration-color: var(--q-accent);
}

/* ---------- focus: a 2px crimson ring, never a glow ---------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--q-line-accent) solid var(--q-accent);
  outline-offset: 2px;
}

/* ---------- helpers ---------- */

.q-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;
}

.q-icon {
  width: var(--q-icon-md);
  height: var(--q-icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--q-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.q-icon--sm {
  width: var(--q-icon-sm);
  height: var(--q-icon-sm);
}

.q-icon--lg {
  width: var(--q-icon-lg);
  height: var(--q-icon-lg);
}

.q-icon--xl {
  width: var(--q-icon-xl);
  height: var(--q-icon-xl);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  /* Transitions stop (0s, not 0.01ms: with the default transition-property "all" a tiny duration would
     start a transition on every property change). Animations end at once but still fire animationend. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* A spinner still has to show that something is happening: it keeps turning, slowly. */
  .q-spinner {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}