/* ═══════════════════════════════════════════════════════════════
   Optima Homes — stylesheet entry

   Layer order is declared once here so nothing later can win by
   accident. Anything unlayered would outrank all of these, which is
   why every partial opens with @layer.
   ═══════════════════════════════════════════════════════════════ */

@layer tokens, base, layout, components, pages, utilities;

@import url('/styles/fonts.css') layer(tokens);
@import url('/styles/tokens.css');
@import url('/styles/base.css');
@import url('/styles/layout.css');
@import url('/styles/components.css');
@import url('/styles/pages/home.css');
@import url('/styles/pages/interior.css');

@layer utilities {
  .u-beige {
    color: var(--beige);
  }
  .u-green {
    color: var(--green-800);
  }
  .u-dim {
    opacity: 0.66;
  }
  /* Centring a block needs more than text-align: the lede and button
     row both have their own max-width / flex layout, which left them
     hugging the start edge inside a centred section. */
  .u-center {
    text-align: center;
  }
  .u-center .lede,
  .u-center .section__body,
  .u-center p {
    margin-inline: auto;
  }
  /* Widen when centred: a 34ch measure that reads fine ranged left
     becomes a tall narrow ribbon once it is centred. */
  .u-center .lede,
  .u-center .section__body {
    max-inline-size: 52ch;
  }
  .u-center .btn-row,
  .u-center .cta-band__inner {
    justify-content: center;
  }
  .u-center .display,
  .u-center .section__title {
    margin-inline: auto;
  }
  .u-nowrap {
    white-space: nowrap;
  }
  .u-mt-0 {
    margin-block-start: 0;
  }
  .u-mt-sm {
    margin-block-start: 0.75rem;
  }
  .u-mt {
    margin-block-start: 1.5rem;
  }
  .u-mt-lg {
    margin-block-start: clamp(2rem, 4vw, 3rem);
  }
  .u-max-prose {
    max-width: var(--max-prose);
  }

  @media (max-width: 47.99rem) {
    .u-hide-sm {
      display: none;
    }
  }

  /* Hidden until the desktop nav appears, so the header never crowds. */
  @media (max-width: 71.99rem) {
    .u-hide-nav {
      display: none;
    }
  }
}