/* ===========================
   Juliana — General Reset
   =========================== */

/*
 * Minimal browser normalisation. Box-sizing, margin/padding wipe on
 * type elements, and sensible media defaults.
 * Does NOT set colours — tokens + typography own those.
 */

/* ===========================
   Box Model
   =========================== */

*,
*::before,
*::after {
  /* box model */
  box-sizing: border-box;

}


/* ===========================
   Body styles
   =========================== */

html {
  /* other */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

}

body {
  /* box model */
  margin: 0;
  padding: 0;
  min-height: 100vh;

  /* other */
  overflow-x: hidden;

}


/* ===========================
   Typography
   =========================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  /* text */
  font-weight: inherit;
  font-size: inherit;

  /* box model */
  margin: 0;
  padding: 0;

}

p,
blockquote,
figure,
ul,
ol,
li,
dl,
dt,
dd {
  /* box model */
  margin: 0;
  padding: 0;

}


/* ===========================
   Navigation styles
   =========================== */

ul,
ol {
  /* other */
  list-style: none;

}

a {
  /* text */
  text-decoration: none;

  /* color */
  color: inherit;

}


/* ===========================
   Main content styles
   =========================== */

img,
video,
svg {
  /* box model */
  max-width: 100%;

  /* display */
  display: block;

}

img {
  /* box model */
  height: auto;

}


/* ===========================
   Form styles
   =========================== */

button,
input,
select,
textarea {
  /* text */
  font: inherit;

  /* color */
  color: inherit;
  background: transparent;

  /* box model */
  padding: 0;
  margin: 0;

  /* border */
  border: 0;

  /* other */
  appearance: none;
  -webkit-appearance: none;

}

/* Checkboxes and radios need their native appearance — the blanket
 * appearance:none above collapses them to an invisible 0x0 box. */
input[type="checkbox"],
input[type="radio"] {
  /* other */
  appearance: auto;
  -webkit-appearance: auto;

}

button {
  /* text */
  line-height: inherit;

  /* other */
  cursor: pointer;

}

textarea {
  /* other */
  resize: vertical;

}


/* ===========================
   Accessibility styles
   =========================== */

:focus-visible {
  /* other */
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;

}

.screen-reader-text,
.sr-only {
  /* box model */
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;

  /* border */
  border: 0;

  /* positioning */
  position: absolute;

  /* other */
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);

}

.skip-link {
  /* text */
  font-weight: var(--fw-semibold);

  /* color */
  color: var(--c-ink);
  background: var(--c-base);

  /* box model */
  padding: var(--sp-8) var(--sp-16);

  /* border */
  border: 2px solid var(--c-ink);
  border-radius: var(--r-button);

  /* positioning */
  position: absolute;
  top: -9999px;
  left: var(--sp-16);
  z-index: 9999;

}

.skip-link:focus {
  /* positioning */
  top: var(--sp-16);

}