web/style.css

/* GODSEED — liturgical-modern. Deep-space black, ivory text, gold + violet
   accents. Hairlines, letterspace, restraint. Like a Kinfolk issue about a
   small god — never the generic AI-gradient card. */

:root {
  --bg: #040508;
  --ivory: #ece5d8;
  --ivory-dim: rgba(236, 229, 216, 0.55);
  --ivory-faint: rgba(236, 229, 216, 0.34);
  --gold: #d9b36c;
  --gold-bright: #f0cd8e;
  --violet: #9d86e8;
  --hairline: rgba(217, 179, 108, 0.28);
  --hairline-dim: rgba(217, 179, 108, 0.14);
  --panel: rgba(7, 8, 14, 0.55);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#scene:active { cursor: grabbing; }

/* ---------- cinematic overlays ---------- */
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(120% 95% at 50% 42%, transparent 55%, rgba(2, 3, 6, 0.5) 100%),
    linear-gradient(to bottom, rgba(2, 3, 6, 0.35), transparent 18%, transparent 80%, rgba(2, 3, 6, 0.45));
}
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 3; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  animation: grain 1.6s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1.4%); }
  50% { transform: translate(1.6%, -1%); }
  75% { transform: translate(-1%, -1.8%); }
  100% { transform: translate(0, 0); }
}

/* ---------- wordmark ---------- */
.brand {
  position: fixed; top: 34px; left: 0; right: 0; z-index: 10;
  text-align: center; pointer-events: none;
}
.brand__mark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: 0.46em;
  text-indent: 0.46em; /* optically center the letterspacing */
  color: var(--ivory);
  text-shadow: 0 0 28px rgba(217, 179, 108, 0.35);
}
.brand__tag {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}

/* ---------- epoch + log link ---------- */
.almanac {
  position: fixed; top: 38px; right: 42px; z-index: 11;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
}
.almanac__epoch {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.almanac__log {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}
.almanac__log:hover { color: var(--gold-bright); border-color: var(--gold); }

/* behold the world ↕ — the close-town ⇄ whole-planet toggle */
.behold {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 14px;
  padding: 7px 15px;
  font-family: var(--sans);
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ivory-dim);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.behold:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(217, 179, 108, 0.14);
}
.behold__label { line-height: 1; }
.behold__sigil {
  font-size: 12px; line-height: 1; color: var(--gold);
  transition: transform 0.4s ease;
}
/* while beholding the world the control offers the way back — flip the sigil */
.behold.is-world {
  color: var(--gold);
  border-color: var(--gold);
}
.behold.is-world .behold__sigil { transform: rotate(180deg); }

/* ---------- the god speaks ---------- */
.voice {
  position: fixed; left: 42px; bottom: 42px; z-index: 10;
  width: min(440px, calc(100vw - 84px));
  border-left: 1px solid var(--hairline);
  padding: 16px 20px 16px 20px;
  pointer-events: none;
  /* a subtle dark scrim so the god's voice reads over the bright planet rim —
     the ticker is the second-largest text while granting and must not wash out */
  background: linear-gradient(105deg, rgba(4, 5, 9, 0.72), rgba(4, 5, 9, 0.32) 72%, transparent);
  border-radius: 2px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.voice__head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ivory-faint);
  margin-bottom: 10px;
}
.voice__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--violet); align-self: center;
  box-shadow: 0 0 8px var(--violet);
  opacity: 0.4;
  transition: opacity 0.4s;
}
.voice__dot.is-live { opacity: 1; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 14px var(--violet); } }
.voice__wish {
  font-family: var(--serif); font-style: italic; text-transform: none;
  letter-spacing: 0.02em; font-size: 14px; color: var(--ivory-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 230px;
}
.voice__stream {
  font-family: var(--mono);
  /* second-largest text while granting — readable on the live screenshots */
  font-size: 18px;
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: rgba(236, 229, 216, 0.78);
  max-height: 232px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 1px 10px rgba(2, 3, 6, 0.65);
  mask-image: linear-gradient(to bottom, transparent, black 28%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 28%);
}
.voice__innertext { display: inline-block; white-space: pre-wrap; }
.voice__stream .tone-reading { color: var(--ivory); }
.voice__stream .tone-call { color: var(--gold-bright); font-weight: 400; }
.voice__stream .tone-obs { color: var(--violet); opacity: 0.92; }
.voice__caret {
  display: inline-block; width: 8px; height: 17px;
  background: var(--gold); vertical-align: -3px; margin-left: 2px;
  animation: caret 1.1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- epitaph flourish ---------- */
.epitaph {
  position: fixed; left: 50%; top: 26%; z-index: 12;
  transform: translateX(-50%) translateY(8px);
  width: min(620px, 86vw);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.epitaph.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }
.epitaph__rule {
  width: 56px; height: 1px; margin: 0 auto 18px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.epitaph__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.35;
  color: var(--ivory);
  text-shadow: 0 0 34px rgba(217, 179, 108, 0.4);
}
.epitaph__label {
  margin-top: 16px;
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold);
}
.epitaph__descend[hidden] { display: none; }
.epitaph__descend {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.05em;
  color: var(--gold);
  background: rgba(7, 8, 14, 0.5);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.epitaph__descend:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(217, 179, 108, 0.18);
  transform: translateY(-1px);
}

/* ---------- altar (wish input) ---------- */
.altar {
  position: fixed; left: 50%; bottom: 40px; z-index: 11;
  transform: translateX(-50%);
  width: min(460px, calc(100vw - 48px));
  text-align: center;
}
.altar__chip[hidden] { display: none; }
.altar__chip {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 16px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel);
  backdrop-filter: blur(8px);
}
.altar__form {
  display: flex; align-items: stretch;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.altar__form:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 30px rgba(217, 179, 108, 0.14);
}
.altar__input {
  flex: 1;
  background: none; border: none; outline: none;
  padding: 15px 8px 15px 24px;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ivory);
  caret-color: var(--gold);
}
.altar__input::placeholder { color: var(--ivory-faint); }
.altar__send {
  background: none; border: none; cursor: pointer;
  padding: 0 20px;
  color: var(--gold);
  font-size: 16px;
  transition: color 0.25s, transform 0.25s;
}
.altar__send:hover { color: var(--gold-bright); }
.altar__send:disabled { color: var(--ivory-faint); cursor: default; }
.altar__sigil { display: inline-block; transition: transform 0.4s; }
.altar__send:hover .altar__sigil { transform: rotate(90deg) scale(1.15); }
.altar__hint {
  margin-top: 11px;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ivory-faint);
}
.altar__hint.is-warn { color: #d98a7a; }

/* ---------- status ---------- */
.status {
  position: fixed; right: 42px; bottom: 42px; z-index: 10;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(236, 229, 216, 0.22);
  text-align: right;
}

/* =====================================================================
   GENESIS LOG (book.html)
   ===================================================================== */
.book-brand {
  position: fixed; top: 34px; left: 42px; z-index: 10; pointer-events: auto;
}
.book-brand__mark {
  font-family: var(--serif); font-weight: 500;
  font-size: 17px; letter-spacing: 0.42em;
  color: var(--ivory-dim);
  text-decoration: none;
}
.book-brand__mark:hover { color: var(--ivory); }
.book-brand__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.18em;
  color: var(--ivory);
  text-shadow: 0 0 28px rgba(217, 179, 108, 0.3);
}
.book-brand__sub {
  margin-top: 8px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ivory-faint);
}

/* a left-side dark gradient scrim so the log column reads over the bright
   planet rim + gold trail — sits behind the entries, fades to clear on the
   right so the planet still breathes. */
.ledger-scrim {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 9;
  width: min(560px, 56vw);
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(3, 4, 8, 0.82) 0%,
    rgba(3, 4, 8, 0.66) 34%,
    rgba(3, 4, 8, 0.34) 62%,
    transparent 100%);
}
.ledger {
  position: fixed; top: 168px; bottom: 36px; left: 42px; z-index: 10;
  width: min(360px, calc(100vw - 64px));
  overflow-y: auto;
  padding-right: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-dim) transparent;
  mask-image: linear-gradient(to bottom, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent);
}
.ledger__entry {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  border-top: 1px solid var(--hairline-dim);
  padding: 16px 10px 16px 4px;
  color: inherit;
  font-family: inherit;
  transition: background 0.25s, border-color 0.25s;
}
.ledger__entry:hover { background: rgba(217, 179, 108, 0.05); }
.ledger__entry.is-active {
  background: rgba(217, 179, 108, 0.08);
  border-top-color: var(--hairline);
}
.ledger__epoch {
  font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold);
}
.ledger__wish {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--ivory);
}
.ledger__epitaph {
  margin-top: 5px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ivory-dim);
}
.ledger__empty {
  padding: 22px 4px;
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--ivory-dim);
  border-top: 1px solid var(--hairline-dim);
}

.book-voice { left: auto; right: 42px; bottom: 42px; border-left: none; border-right: 1px solid var(--hairline); padding-left: 0; padding-right: 20px; text-align: right; }
.book-voice .voice__head { justify-content: flex-end; }

.replay-hint {
  position: fixed; right: 42px; top: 38px; z-index: 10;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ivory-faint);
  text-align: right;
}
.replay-hint a { color: var(--gold); text-decoration: none; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .almanac { right: 20px; top: 28px; }
  .voice { left: 20px; bottom: 130px; width: calc(100vw - 40px); max-width: none; }
  .voice__stream { max-height: 118px; font-size: 15px; line-height: 1.5; }
  .ledger-scrim { width: 100vw; }
  .altar { bottom: 18px; }
  .status { display: none; }
  .brand { top: 22px; }
  .ledger { top: 150px; width: calc(100vw - 56px); }
  .book-brand { left: 20px; }
  .book-voice { right: 20px; }
  .replay-hint { display: none; }
}