/* Stone Grove — Lucent MVP. Coral is reserved for payment and session start. */
:root {
  --paper: #F4F1EC;
  --sage: #6F7D63;
  --stone: #E7E4DF;
  --ink: #2C2F2D;
  --coral: #C45C4A;
  --slate: #6B7C8A;
}

html, body, .lucent-boot, .lucent-root {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  overflow-x: hidden;
  max-width: 100%;
}

.lucent-root .x-panel-body,
.lucent-root .x-container,
.lucent-root .x-body,
.lucent-root .x-form-item,
.x-viewport,
.x-panel,
.x-container-outer,
.x-unsized {
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Sans 3", "Source Sans Pro", "Segoe UI", sans-serif;
}

.lucent-wordmark {
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}

.lucent-kicker {
  color: var(--sage);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.lucent-headline {
  font-family: "Iowan Old Style", Palatino, serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--ink);
}

.lucent-lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 36em;
}

.lucent-muted {
  color: var(--slate);
  font-size: 14px;
}

.lucent-chip {
  display: inline-block;
  border: 1px solid var(--stone);
  color: var(--sage);
  padding: 2px 8px;
  font-size: 12px;
  margin-right: 6px;
}

.lucent-hairline {
  border: 0;
  border-top: 1px solid var(--stone);
  margin: 24px 0;
}

.lucent-screen {
  max-width: 960px;
  padding: 32px 24px 64px;
}

.lucent-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.lucent-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lucent-notice {
  padding: 12px 16px;
  border: 1px solid var(--stone);
  margin: 0 24px 8px;
  color: var(--ink);
}
.lucent-notice.error { border-color: var(--coral); color: var(--ink); }
.lucent-notice.ok { border-color: var(--sage); }

/* Primary coral — payment and join only */
.lucent-coral.x-btn,
.lucent-coral.x-button,
a.lucent-coral,
button.lucent-coral {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #fff !important;
  background-image: none !important;
}
.lucent-coral.x-btn .x-btn-inner,
.lucent-coral .x-button-label {
  color: #fff !important;
  font-weight: 600;
}

.lucent-quiet.x-btn,
.lucent-quiet.x-button {
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  color: var(--ink) !important;
  background-image: none !important;
}

.lucent-nav-btn.x-btn {
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
  background-image: none !important;
}
.lucent-nav-btn .x-btn-inner {
  color: var(--ink);
  text-align: left;
}

.lucent-header {
  border-bottom: 1px solid var(--stone);
  padding: 16px 24px;
}

.lucent-two {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}
.lucent-two > *,
.lucent-book-col { flex: 1; min-width: 0; max-width: 100%; }
@media (max-width: 720px) {
  .lucent-two { flex-direction: column; }
  .lucent-headline { font-size: 28px; }
  .lucent-screen { padding: 20px 16px 48px; }
}

.lucent-slot {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--stone);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 12px;
  margin: 0 0 8px;
  cursor: pointer;
}
.lucent-slot.is-on {
  border-color: var(--ink);
}

.lucent-item {
  border-top: 1px solid var(--stone);
  padding: 16px 0;
}

.lucent-note {
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--stone);
  background: var(--paper);
  color: var(--ink);
  padding: 8px;
  font: inherit;
}

button.lucent-quiet-link,
.lucent-quiet-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font: inherit;
}

.lucent-photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 2px;
}

.lucent-input {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--stone);
  background: var(--paper);
  color: var(--ink);
  padding: 8px;
  font: inherit;
}

@media (max-width: 390px) {
  .lucent-headline { font-size: 26px; }
  .lucent-screen, .lucent-header { padding-left: 12px; padding-right: 12px; }
  .lucent-slot, .lucent-two, .lucent-book-col, .lucent-actions { max-width: 100%; }
  .lucent-two { flex-direction: column; gap: 16px; }
}

.x-form-item-label,
.x-form-item-label-inner,
.x-label-el {
  color: var(--sage) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.x-form-field, .x-form-text, input, textarea, select {
  color: var(--ink);
}

.lucent-west {
  border-right: 1px solid var(--stone) !important;
  background: var(--paper) !important;
}