/* Soft-open ship build (tools/build_soft_open.py). Nav tag, content pages (about, contact) and the
   under-construction state. Dark luxury tokens from styles.css. */
.nav-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(201, 169, 98, .45);
  color: var(--lux-gold, #C9A962); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; line-height: 1.4; white-space: nowrap; }

/* Content pages in the lux theme */
.so-page { background: var(--lux-bg, #08080A); color: var(--lux-cream, #F5F2EB); min-height: 70vh; }
.so-hero { padding: clamp(72px, 10vw, 128px) 0 clamp(24px, 4vw, 40px);
  background: radial-gradient(90% 70% at 80% 0%, rgba(201, 169, 98, .09), transparent 60%); }
.so-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; margin: 10px 0 18px; color: var(--lux-cream, #F5F2EB); }
.so-hero .so-lead { max-width: 40rem; font-size: 1.15rem; line-height: 1.7; color: rgba(245, 242, 235, .86); margin: 0; }
.so-body { padding: clamp(24px, 4vw, 48px) 0 clamp(72px, 9vw, 120px); }
.so-body .so-col { max-width: 44rem; }
.so-body h2 { font-family: var(--font-display); font-weight: 600; color: var(--lux-cream, #F5F2EB); font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 14px; }
.so-body p { color: rgba(245, 242, 235, .8); line-height: 1.75; font-size: 1.04rem; }
.so-body a:not(.lux-btn-fill):not(.lux-btn-ghost) { color: var(--lux-gold, #C9A962); }
.so-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lux-btn-ghost.so-btn, .so-btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 999px; border: 1px solid rgba(201, 169, 98, .55);
  color: var(--lux-cream, #F5F2EB) !important; text-decoration: none !important; font-weight: 600; font-size: .98rem; transition: border-color .2s ease, background .2s ease; min-height: 44px; }
.so-btn-ghost:hover { border-color: var(--lux-gold, #C9A962); background: rgba(201, 169, 98, .08); }
.so-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 8px; }
.so-card__item { background: var(--lux-panel, #12141A); border: 1px solid rgba(201, 169, 98, .18); border-radius: 14px; padding: 26px 24px; }
.so-card__item h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; color: var(--lux-cream, #F5F2EB); font-size: 1.35rem; }
.so-card__item p { margin: 0 0 16px; color: var(--lux-muted, #A09B94); font-size: .96rem; }
.so-card__item a.so-big { font-size: 1.15rem; font-weight: 600; color: var(--lux-gold, #C9A962); text-decoration: none; word-break: break-word; }

/* Under construction */
.uc { position: relative; overflow: hidden; background: var(--lux-bg, #08080A); min-height: calc(100vh - 90px); display: grid; align-items: center; }
.uc::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 30%, rgba(201, 169, 98, .10), transparent 70%), radial-gradient(40% 40% at 85% 90%, rgba(201, 169, 98, .05), transparent 70%); }
.uc-panel { position: relative; max-width: 38rem; margin: 0 auto; text-align: center; padding: clamp(72px, 10vw, 120px) 22px; }
.uc-panel .lux-overline { margin: 0 0 14px; }
.uc-panel h1 { font-family: var(--font-display); font-weight: 600; color: var(--lux-cream, #F5F2EB); font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.05; margin: 0 0 18px; }
.uc-swap { color: var(--lux-cream, #F5F2EB); font-size: 1.14rem; line-height: 1.6; margin: 0 0 10px; }
.uc-body { color: rgba(245, 242, 235, .76); font-size: 1.04rem; line-height: 1.7; margin: 0 auto; max-width: 32rem; }
.uc-panel .turnaround-note { margin: 18px 0 0; }
.uc-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 30px 0 22px; }
.uc-ctas .lux-btn-fill, .uc-ctas .so-btn-ghost { min-height: 48px; }
.uc-contact { color: var(--lux-muted, #A09B94); font-size: .92rem; margin: 0; }
.uc-contact a { color: var(--lux-gold, #C9A962); }
.uc-line { width: 72px; height: 1px; margin: 0 auto 22px; background: linear-gradient(90deg, transparent, var(--lux-gold, #C9A962), transparent); animation: uc-shimmer 4.5s ease-in-out infinite; }
@keyframes uc-shimmer { 0%, 100% { opacity: .35; transform: scaleX(.7); } 50% { opacity: 1; transform: scaleX(1); } }

/* Market: the gate is closed (CSS only, no world, no canvas) */
.uc-gate { position: relative; width: min(360px, 78vw); height: 190px; margin: 0 auto 30px; }
.uc-gate__arch { position: absolute; left: 10%; right: 10%; top: 26px; bottom: 0; border: 1px solid rgba(201, 169, 98, .55); border-bottom: 0; border-radius: 140px 140px 0 0; }
.uc-gate__door { position: absolute; bottom: 0; width: 38%; height: 128px; border: 1px solid rgba(201, 169, 98, .45);
  background: repeating-linear-gradient(90deg, rgba(201, 169, 98, .22) 0 1px, transparent 1px 14px), linear-gradient(180deg, #14151b, #0c0c10); }
.uc-gate__door--l { right: 50%; border-right-width: 0; border-radius: 60px 0 0 0; }
.uc-gate__door--r { left: 50%; border-radius: 0 60px 0 0; }
.uc-gate__plaque { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); padding: 5px 12px; border: 1px solid rgba(201, 169, 98, .6); border-radius: 4px;
  background: #0c0c10; color: var(--lux-gold, #C9A962); font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.uc-gate__lantern { position: absolute; top: 58px; width: 12px; height: 18px; border-radius: 4px; background: #f3c56b;
  box-shadow: 0 0 14px 6px rgba(243, 197, 107, .45), 0 0 44px 18px rgba(243, 197, 107, .16); animation: uc-flicker 3.2s ease-in-out infinite; }
.uc-gate__lantern::before { content: ""; position: absolute; left: 50%; top: -16px; width: 1px; height: 16px; background: rgba(201, 169, 98, .6); }
.uc-gate__lantern--l { left: 2%; } .uc-gate__lantern--r { right: 2%; animation-delay: -1.3s; }
@keyframes uc-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .82; } 47% { opacity: .95; } 60% { opacity: .78; } 70% { opacity: 1; } }

@media (max-width: 760px) {
  .nav-tag { font-size: .58rem; }
  .uc-panel { padding: 56px 20px 72px; }
  .uc-ctas { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .uc-line, .uc-gate__lantern { animation: none; } }

/* Home 'Build your brand' CTA was invisible (home-full lacks the color vars) */
.page-home .lux-btn-fill { background: #C9A962; border-color: #C9A962; color: #08080A; }
