/* MAISON LUMIÈRE Base: typography, layout primitives, utilities */

/* Containers */
.container {
 max-width: var(--maxw);
 margin-inline: auto;
 padding-inline: var(--gutter);
}

.container--narrow {
 max-width: var(--maxw-narrow);
}

/* Eyebrow */
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: var(--space-4);
 font-family: var(--font-body);
 font-size: var(--fs-eyebrow);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.22em;
 color: var(--rose-clay);
}

.eyebrow::before {
 content: "";
 display: block;
 width: 24px;
 height: 1px;
 background: var(--gold);
}

/* Section header */
.s-head {
 margin-bottom: var(--space-12);
}

.s-head__eyebrow {
 margin-bottom: var(--space-4);
}

.s-head__title {
 font-size: var(--fs-h2);
 max-width: 18ch;
}

.s-head__intro {
 margin-top: var(--space-4);
 font-size: var(--fs-lead);
 color: var(--ink-soft);
 max-width: 52ch;
}

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

.text-ink    { color: var(--ink); }
.text-ink-soft  { color: var(--ink-soft); }
.text-rose-clay { color: var(--rose-clay); }
.text-blush   { color: var(--blush); }

/* Background utilities */
.bg-porcelain { background: var(--porcelain); }
.bg-ivory   { background: var(--ivory); }
.bg-champagne { background: var(--champagne); }
.bg-shell   { background: var(--shell); }

/* Spacing utilities */
.py-section { padding-block: var(--section-y); }

/* Skip link */
.skip-link {
 position: absolute;
 top: -100%;
 left: var(--gutter);
 z-index: 9999;
 padding: var(--space-3) var(--space-6);
 background: var(--ink);
 color: var(--ivory);
 border-radius: var(--r-sm);
 font-weight: 600;
 font-size: var(--fs-small);
}

.skip-link:focus {
 top: var(--space-4);
}

/* Word split helper */
.w {
 overflow: hidden;
 display: inline-block;
 vertical-align: top;
}

.w-i {
 display: inline-block;
 transform: translateY(110%);
}

/* Reduced motion: instant reveal */
@media (prefers-reduced-motion: reduce) {
 .w-i {
  transform: translateY(0);
 }
}

/* Grain overlay */
.grain {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 9000;
 opacity: 0.06;
 mix-blend-mode: overlay;
 background-image: url('../texture-grain-1x1.webp');
 background-repeat: repeat;
 background-size: 256px;
}

@media (prefers-reduced-motion: reduce) {
 .grain {
  display: none;
 }
}