/* JewelryOS Base — archetype-agnostic foundation.
   Loaded BEFORE the per-archetype style pack. Owns: WP shell suppression,
   reset, reveal-on-scroll, header sticky behavior, generic grid helpers.
   Per-archetype CSS owns: typography, palette, density, layout personality. */

/* ---------- suppress WP shell (full-bleed) ---------- */
.wp-site-blocks > main,
.wp-site-blocks > main > .wp-block-post-content,
.wp-site-blocks main .entry-content {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}
.wp-block-post-content.is-layout-constrained > *,
main.is-layout-constrained > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.page > main h1.wp-block-post-title { display: none; }
body { margin: 0; }

/* ---------- stage reset ---------- */
.jos-stage { color: inherit; line-height: 1.6; }
.jos-stage *, .jos-stage *::before, .jos-stage *::after { box-sizing: border-box; }
.jos-stage img { max-width: 100%; display: block; }
.jos-stage a { color: inherit; text-decoration: none; }
.jos-stage p { margin: 0; }
.jos-stage button { font: inherit; cursor: pointer; }
.jos-stage h1, .jos-stage h2, .jos-stage h3 { margin: 0; font-weight: 500; }

/* ---------- reveal-on-scroll ---------- */
.jos-reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 800ms cubic-bezier(.2,.7,.2,1); }
.jos-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .jos-hero__photo { animation: none !important; }
  .jos-reveal { opacity: 1; transform: none; transition: none; }
  .jos-mini__img { transition: none; }
}

/* ---------- accessibility helpers ---------- */
.jos-stage a:focus-visible,
.jos-stage button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ====================================================================
   Coming-Soon banner (Gap #1). Uses tokenized BuildPlan colors so the
   pre-launch landing inherits the brand palette automatically.
   ==================================================================== */
.jos-coming-soon {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px;
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--jos-gold, #C9A674) 18%, transparent) 0%, transparent 60%),
    var(--jos-paper, #F5F0E8);
  color: var(--jos-ink, #1A1A1A);
  text-align: center;
}
.jos-coming-soon__inner {
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.jos-coming-soon__headline {
  font-family: var(--jos-font-headline, serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 6px 0 4px;
  letter-spacing: -0.01em;
}
.jos-coming-soon__lead {
  font-family: var(--jos-font-body, system-ui, sans-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--jos-muted, #5C5045);
  max-width: 460px;
  margin: 0;
}
.jos-coming-soon__form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  max-width: 460px;
  margin-top: 14px;
}
.jos-coming-soon__form input[type="email"] {
  font: inherit;
  padding: 14px 18px;
  border: 1px solid var(--jos-line, rgba(0,0,0,0.18));
  background: var(--jos-shell, #FFF);
  color: var(--jos-ink, #1A1A1A);
  border-radius: 0;
}
.jos-coming-soon__form input[type="email"]:focus {
  outline: 2px solid var(--jos-gold, #C9A674);
  outline-offset: 1px;
}
.jos-coming-soon__form button {
  font: inherit;
  padding: 14px 28px;
  border: 0;
  background: var(--jos-gold, #C9A674);
  color: var(--jos-paper, #F5F0E8);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
}
.jos-coming-soon__form button:hover { background: var(--jos-gold-deep, #A88A50); }
.jos-coming-soon__legal {
  font-size: 0.78rem;
  color: var(--jos-muted, #888);
  margin: 4px 0 0;
  letter-spacing: 0.02em;
}
@media (max-width: 540px) {
  .jos-coming-soon__form { grid-template-columns: 1fr; }
}