/* ============================================================
   BASE — reset, type, layout primitives, accessibility floor
   Uses logical properties throughout → RTL is free.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--obsidian);
  color: var(--ivory-70);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--graphite); } /* graceful lazy-load placeholder */

/* ---- Typography ---- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  color: var(--ivory);
  line-height: var(--leading-tight);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4, h5, h6 { color: var(--ivory); font-size: var(--text-base); }

p + p { margin-block-start: var(--s-4); }

a { color: var(--ivory); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--gold-bright); }

.eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: var(--s-3);
}
html[dir="rtl"] .eyebrow { text-transform: none; }

.price {
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
  font-weight: 600;
}

/* ---- Layout primitives ---- */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.section { padding-block: var(--s-10); }
@media (min-width: 768px) { .section { padding-block: var(--s-12); } }

.grid { display: grid; gap: var(--s-4); }
.grid--products { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .grid--products { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (min-width: 1024px) { .grid--products { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
@media (min-width: 1280px) { .grid--products { grid-template-columns: repeat(4, 1fr); } }

.flow > * + * { margin-block-start: var(--s-4); }

/* ---- Hairline divider (structure, not decoration) ---- */
.rule {
  border: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--smoke-line) 20%, var(--smoke-line) 80%, transparent);
}

/* ---- Accessibility floor ---- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute; inset-inline-start: -9999px;
  z-index: var(--z-modal);
  background: var(--gold); color: var(--ink-on-gold);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius-sm);
}
.skip-link:focus { inset-inline-start: var(--s-4); inset-block-start: var(--s-4); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- Scroll-reveal (JS adds .is-inview) ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Stagger children */
.reveal-group > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-group > .reveal:nth-child(4) { transition-delay: 240ms; }