/* Utilities. Deliberately small. See kit/README.md for what qualifies. */
/* Text --------------------------------------------------------------------- */
.cp-u-text-center    { text-align: center; }
.cp-u-text-start     { text-align: start; }
.cp-u-text-balance   { text-wrap: balance; }
.cp-u-text-muted     { color: var(--cp-color-text-muted); }
.cp-u-text-secondary { color: var(--cp-color-text-secondary); }
.cp-u-text-accent    { color: var(--cp-color-text-accent); }

/* Visibility --------------------------------------------------------------- */
.cp-u-hidden { display: none !important; }

@media (max-width: 575.98px)  { .cp-u-hide-mobile  { display: none !important; } }
@media (min-width: 576px)     { .cp-u-hide-desktop { display: none !important; } }

/* Flow --------------------------------------------------------------------- */
.cp-u-mbs-0  { margin-block-start: 0; }
.cp-u-mbe-0  { margin-block-end: 0; }
.cp-u-mbe-4  { margin-block-end: var(--cp-space-4); }
.cp-u-mbe-6  { margin-block-end: var(--cp-space-6); }
.cp-u-mbe-7  { margin-block-end: var(--cp-space-7); }

/* Padding ------------------------------------------------------------------ */
.cp-u-pbe-16 { padding-block-end: var(--cp-space-16); }

/* Full bleed --------------------------------------------------------------- */
.cp-u-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.cp-u-bleed-end { margin-inline-end: calc(50% - 50vw); padding-inline-end: calc(50vw - 50%); }

/* Cut ---------------------------------------------------------------------- */
.cp-u-cut-end,
.cp-u-cut-start { position: relative; }
.cp-u-cut-end::after,
.cp-u-cut-start::before {
  content: ""; position: absolute; inset-inline: 0; z-index: 1; block-size: var(--cp-cut-depth);
  background: var(--cp-color-bg-page); pointer-events: none;
}
.cp-u-cut-end::after    { inset-block-end: -1px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.cp-u-cut-start::before { inset-block-start: -1px; clip-path: polygon(0 0, 100% 0, 0 100%); }

/* Texture ------------------------------------------------------------------ */
.cp-u-texture::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0 1'/%3E%3CfeFuncG type='discrete' tableValues='0 1'/%3E%3CfeFuncB type='discrete' tableValues='0 1'/%3E%3CfeFuncA type='discrete' tableValues='0.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; opacity: 0.15;
}