/* ---------------------------------------------------------------------------
   site.css — hand-maintained supplement to the generated assets/css/style.css
   ---------------------------------------------------------------------------
   style.css is a Tailwind build artifact. It is currently STALE: cv.html and
   the case-study pages were added after the last `npm run build`, so the
   utilities they rely on were never generated. The rules below fill exactly
   those gaps, written in the same idiom Tailwind v4 emits.

   Once you can run `npm run build` again, Tailwind will regenerate all of
   these from the markup and this file becomes redundant — it is safe to keep
   (the rules are identical) or to delete at that point.

   Load order matters: this file must come AFTER style.css.
   --------------------------------------------------------------------------- */

/* Spacing ---------------------------------------------------------------- */
.pt-3 { padding-top: calc(var(--spacing) * 3); }

:where(.space-y-6 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}

/* Typography ------------------------------------------------------------- */
.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
}

.text-coastal-platinum\/72 { color: #132639b8; }
@supports (color: color-mix(in lab, red, red)) {
  .text-coastal-platinum\/72 {
    color: color-mix(in oklab, var(--color-coastal-platinum) 72%, transparent);
  }
}

/* Rings ------------------------------------------------------------------ */
.ring-white\/10 { --tw-ring-color: #ffffff1a; }
@supports (color: color-mix(in lab, red, red)) {
  .ring-white\/10 {
    --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  }
}

/* Responsive: md (48rem) -------------------------------------------------- */
@media (min-width: 48rem) {
  .md\:flex { display: flex; }
  .md\:items-start { align-items: flex-start; }
  .md\:items-end { align-items: flex-end; }
  .md\:text-right { text-align: right; }
}

/* Backgrounds ------------------------------------------------------------ */
.bg-coastal-lavender { background-color: var(--color-coastal-lavender); }
.bg-coastal-steel    { background-color: var(--color-coastal-steel); }

/* Gaps ------------------------------------------------------------------- */
.gap-x-3 { column-gap: calc(var(--spacing) * 3); }
.gap-y-2 { row-gap: calc(var(--spacing) * 2); }

/* Hover colours (matching this build's @media (hover:hover) wrapping) ------ */
@media (hover: hover) {
  .hover\:text-coastal-strawberry:hover { color: var(--color-coastal-strawberry); }
  .hover\:text-coastal-flag:hover       { color: var(--color-coastal-flag); }
}

/* Responsive: lg (64rem) -------------------------------------------------- */
@media (min-width: 64rem) {
  .lg\:grid-cols-\[1\.25fr_\.75fr\] { grid-template-columns: 1.25fr .75fr; }
  .lg\:grid-cols-\[1\.15fr_\.85fr\] { grid-template-columns: 1.15fr .85fr; }
  .lg\:grid-cols-\[1\.05fr_\.95fr\] { grid-template-columns: 1.05fr .95fr; }
}