/* =============================================================================
   Utilities layer

   Hand-written subset of Tailwind, limited to the classes this page uses, so
   the markup is already Tailwind-shaped. Adopting Tailwind means deleting this
   file: the generated utilities carry the same names and the same values,
   because the spacing scale here is the same base-4 scale (step N === N * 4px).

   Breakpoints match Tailwind defaults: sm 640px, lg 1024px. Mobile first.
   ========================================================================== */

/* --- Layout ---------------------------------------------------------------- */
.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: 0;
}

.top-\[10\%\] {
  top: 10%;
}

.right-\[-30\%\] {
  right: -30%;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

/* --- Display and box ------------------------------------------------------- */
.block {
  display: block;
}

.hidden {
  display: none;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-clip {
  overflow-x: clip;
}

.pointer-events-none {
  pointer-events: none;
}

/* --- Flex and grid --------------------------------------------------------- */
.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1 1 0%;
}

.items-baseline {
  align-items: baseline;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-stretch {
  align-items: stretch;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.self-start {
  align-self: flex-start;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-\[72px_1fr\] {
  grid-template-columns: 72px 1fr;
}

/* --- Spacing (base-4 scale) ------------------------------------------------ */
.gap-1 {
  gap: var(--spacing-1);
}

.gap-2 {
  gap: var(--spacing-2);
}

.gap-4 {
  gap: var(--spacing-4);
}

.gap-6 {
  gap: var(--spacing-6);
}

.gap-8 {
  gap: var(--spacing-8);
}

.gap-12 {
  gap: var(--spacing-12);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt-2 {
  margin-top: var(--spacing-2);
}

.mb-2 {
  margin-bottom: var(--spacing-2);
}

.-mr-6 {
  margin-right: calc(var(--spacing-6) * -1);
}

.p-6 {
  padding: var(--spacing-6);
}

.p-8 {
  padding: var(--spacing-8);
}

.px-6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

.py-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.py-12 {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.pt-6 {
  padding-top: var(--spacing-6);
}

.pb-2 {
  padding-bottom: var(--spacing-2);
}

/* --- Sizing ---------------------------------------------------------------- */
.min-h-11 {
  min-height: var(--spacing-11);
}

.min-h-svh {
  min-height: 100svh;
}

.min-h-90 {
  min-height: calc(var(--spacing-1) * 90);
}

.min-w-0 {
  min-width: 0;
}

.w-\[135\%\] {
  width: 135%;
}

.max-w-wide {
  max-width: var(--width-wide);
}

.max-w-\[32em\] {
  max-width: 32em;
}

.max-w-\[34em\] {
  max-width: 34em;
}

/* --- Borders --------------------------------------------------------------- */
.rounded-sm {
  border-radius: var(--radius-sm);
}

.border-t {
  border-top-width: var(--border-hairline);
}

.border-b {
  border-bottom-width: var(--border-hairline);
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-brick {
  border-color: var(--color-brick);
}

.border-carbon\/15 {
  border-color: rgb(63 67 60 / 0.15);
}

/* --- Backgrounds ----------------------------------------------------------- */
.bg-carbon {
  background-color: var(--color-carbon);
}

.bg-ivory {
  background-color: var(--color-ivory);
}

/* --- Typography ------------------------------------------------------------ */
.font-body {
  font-family: var(--font-body);
}

.font-display {
  font-family: var(--font-display);
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-bold {
  font-weight: 700;
}

.text-label {
  font-size: var(--text-label);
}

.text-small {
  font-size: var(--text-small);
}

.text-body {
  font-size: var(--text-body);
}

.text-medium {
  font-size: var(--text-medium);
}

.text-display {
  font-size: var(--text-display);
}

.leading-none {
  line-height: var(--leading-none);
}

.leading-relaxed {
  line-height: var(--leading-relaxed);
}

.uppercase {
  text-transform: uppercase;
}

.text-right {
  text-align: right;
}

.tracking-tight {
  letter-spacing: -0.01em;
}

.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}

.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}

.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}

/* --- Text colour ----------------------------------------------------------- */
.text-brass {
  color: var(--color-brass);
}

.text-brick {
  color: var(--color-brick);
}

.text-carbon {
  color: var(--color-carbon);
}

.text-ivory {
  color: var(--color-ivory);
}

.text-moss {
  color: var(--color-moss);
}

.text-carbon\/80 {
  color: rgb(63 67 60 / 0.8);
}

.text-carbon\/90 {
  color: rgb(63 67 60 / 0.9);
}

.text-ivory\/70 {
  color: rgb(248 245 237 / 0.7);
}

.text-ivory\/90 {
  color: rgb(248 245 237 / 0.9);
}

/* --- Transitions and states ------------------------------------------------ */
.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

.duration-200 {
  transition-duration: var(--duration-fast);
}

.hover\:text-brass:hover {
  color: var(--color-brass);
}

.hover\:text-moss:hover {
  color: var(--color-moss);
}

.hover\:border-moss:hover {
  border-color: var(--color-moss);
}

.focus-visible\:text-moss:focus-visible {
  color: var(--color-moss);
}

/* --- sm: 640px ------------------------------------------------------------- */
@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:gap-6 {
    gap: var(--spacing-6);
  }

  .sm\:gap-x-8 {
    column-gap: var(--spacing-8);
  }

  .sm\:gap-y-4 {
    row-gap: var(--spacing-4);
  }

  .sm\:grid-cols-\[112px_1fr\] {
    grid-template-columns: 112px 1fr;
  }
}

/* --- lg: 1024px ------------------------------------------------------------ */
@media (min-width: 1024px) {
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-start-8 {
    grid-column-start: 8;
  }

  .lg\:col-end-13 {
    grid-column-end: 13;
  }

  .lg\:gap-x-8 {
    column-gap: var(--spacing-8);
  }

  .lg\:-mr-12 {
    margin-right: calc(var(--spacing-12) * -1);
  }

  .lg\:min-h-105 {
    min-height: calc(var(--spacing-1) * 105);
  }

  .lg\:top-\[8\%\] {
    top: 8%;
  }

  .lg\:right-\[-32\%\] {
    right: -32%;
  }

  .lg\:w-\[132\%\] {
    width: 132%;
  }
}