/* scious — shared design. No boxes. Things float in the field. */
:root {
  --bg: #04050c;
  --ink: #eceaf6;
  --soft: #9a94c2;
  --dim: #6f6a99;
  --accent: #9ad0ff;
  --good: #8ff5c9;
  --bad: #ff8a8a;
  --warm: #ffd9a8;
  --violet: #c9b3ff;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 70% -15%, rgba(90, 60, 160, .16), transparent),
    radial-gradient(1000px 600px at 0% 115%, rgba(40, 90, 160, .12), transparent),
    var(--bg);
  color: var(--ink);
  font-family: ui-rounded, -apple-system, "Avenir Next", system-ui, sans-serif;
  line-height: 1.7;
  padding: 40px 20px 120px;
  overflow-x: hidden;
}
.wrap { max-width: 660px; margin: 0 auto; position: relative }
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
a.back { color: var(--dim); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase }

h1 { font-weight: 200; font-size: clamp(2.2rem, 8vw, 3.6rem); margin: .3em 0 .1em; letter-spacing: .01em }
h1 b { font-weight: 600 }
h2 { font-weight: 300; font-size: 1.35rem; margin: 0 0 .4em }
.kicker { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px }
.lede { color: var(--soft); font-weight: 300; max-width: 56ch; font-size: 1.05rem }

/* nav — slim, everywhere, out of the way */
nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
  padding: 13px 10px; margin: -40px -20px 34px;
  background: rgba(4, 5, 12, .72); backdrop-filter: blur(12px);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1px solid rgba(154, 208, 255, .08);
}
nav a { color: var(--dim) }
nav a:hover { color: var(--ink); text-decoration: none }
nav a.here { color: var(--accent) }

/* floating blocks — spacing only; motion belongs to the attention model */
.float { margin: 72px 0 }

/* ---------- the attention model, enacted ----------
   Unattended ideas drift at the edge of the field, soft and unresolved.
   Hover (or first tap) brings one into your attention field: it stills,
   focuses, solidifies. Click = REALIZE it — and a realized idea never
   goes back to fog. Headers stay legible always; only the substance
   waits for attention. */
.idea:not(.realized):not(.focus) { animation: drift 12s ease-in-out infinite }
.idea:nth-child(odd) { animation-delay: -6s }
.idea:hover { animation-play-state: paused }
@keyframes drift {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-5px) }
}
.idea .mist { transition: filter .55s ease, opacity .55s ease }
.idea:not(.realized) .mist { filter: blur(3px); opacity: .5 }
.idea:hover .mist, .idea.focus .mist { filter: blur(0); opacity: 1 }
.idea.realized .mist { filter: none; opacity: 1 }
.idea:not(.realized) { cursor: pointer }
.idea.realized .kicker::after, .idea.realized .kind::after {
  content: " ✦"; color: var(--warm); font-size: .9em;
}
@media (hover: none) {
  /* no pointer to hover with — lighter fog, tap to focus, tap to realize */
  .idea:not(.realized):not(.focus) .mist { filter: blur(2px); opacity: .6 }
}
@media (prefers-reduced-motion: reduce) { .idea { animation: none !important } }

.glowline { height: 1px; border: 0; margin: 0 auto 26px; width: 120px;
  background: linear-gradient(90deg, transparent, rgba(154, 208, 255, .5), transparent) }

.stance {
  font-size: 1.02rem; color: var(--ink); font-weight: 300;
  border-left: 1px solid rgba(255, 217, 168, .5); padding-left: 20px; max-width: 54ch;
}
.stance b { color: var(--warm); font-weight: 500 }

button, .btn {
  font: inherit; font-size: .92rem; letter-spacing: .03em;
  border-radius: 999px; padding: 13px 26px; cursor: pointer;
  border: 1px solid rgba(154, 208, 255, .45); color: var(--accent);
  background: rgba(154, 208, 255, .06); backdrop-filter: blur(4px);
  transition: all .25s; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: rgba(154, 208, 255, .16); text-decoration: none; box-shadow: 0 0 24px rgba(154, 208, 255, .15) }
button:disabled { opacity: .35; cursor: default; box-shadow: none }
.btn.gold { border-color: rgba(143, 245, 201, .5); color: var(--good); background: rgba(143, 245, 201, .05) }
.btn.gold:hover { background: rgba(143, 245, 201, .14); box-shadow: 0 0 24px rgba(143, 245, 201, .12) }
.btn.quiet { border-color: rgba(154, 208, 255, .2); color: var(--soft) }

textarea, input[type=number], input[type=text] {
  width: 100%; background: rgba(10, 12, 26, .55); backdrop-filter: blur(6px);
  border: 1px solid rgba(154, 208, 255, .18); border-radius: 14px;
  color: var(--ink); font: inherit; font-size: .94rem; padding: 14px; resize: vertical;
}
textarea:focus, input:focus { outline: none; border-color: rgba(154, 208, 255, .45) }
textarea { min-height: 92px }

.muted { color: var(--soft); font-size: .88rem; font-weight: 300 }
.dim { color: var(--dim); font-size: .8rem }
.err { color: var(--bad); font-size: .85rem; margin-top: 10px; display: none }
code { color: var(--warm); font-size: .78rem; word-break: break-all }

footer {
  max-width: 660px; margin: 90px auto 0; color: var(--dim); font-size: .76rem;
  line-height: 1.9; text-align: center;
}
footer .glowline { margin-bottom: 20px }

/* ---------- the trip (first-visit overlay) ---------- */
#trip {
  position: fixed; inset: 0; z-index: 50; background: rgba(3, 4, 10, .96);
  display: flex; align-items: center; justify-content: center; padding: 8vw;
  backdrop-filter: blur(8px);
}
#trip .line {
  font-size: clamp(1.3rem, 4.5vw, 2rem); font-weight: 200; text-align: center;
  max-width: 24ch; line-height: 1.6; opacity: 0; transition: opacity 1.4s ease;
}
#trip .line b { font-weight: 500; color: var(--accent) }
#trip .line .w { color: var(--warm) }
#trip .hint { position: fixed; bottom: 9vh; left: 0; right: 0; text-align: center;
  color: var(--dim); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  opacity: 0; transition: opacity 2s; }
#trip .skip { position: fixed; top: 24px; right: 24px; color: var(--dim); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer; z-index: 51 }
#trip .skip:hover { color: var(--soft) }
#trip .letter { max-width: 540px; max-height: 72vh; overflow-y: auto; text-align: left;
  font-weight: 300; opacity: 0; transition: opacity 1.2s ease; padding: 0 6px }
#trip .letter .kicker { margin-bottom: 18px }
#trip .letter p { font-size: .98rem }
#trip .letter .go { margin-top: 22px }

/* ---------- depths ---------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 10px }
.chip { font-size: .74rem; letter-spacing: .08em; color: var(--soft); cursor: pointer;
  border: 1px solid rgba(154, 208, 255, .2); border-radius: 999px; padding: 6px 14px;
  background: transparent; transition: all .2s }
.chip.on { color: var(--ink); border-color: rgba(154, 208, 255, .55); background: rgba(154, 208, 255, .08) }

.entry { margin: 44px 0; cursor: pointer }
.entry .kind { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--dim) }
.entry .kind.claim { color: #d8b26e } .entry .kind.mechanic { color: #7fb6e8 } .entry .kind.reach { color: #9fe6c3 }
.entry h3 { font-weight: 300; font-size: 1.25rem; margin: 4px 0 2px; transition: color .2s }
.entry:hover h3 { color: var(--accent) }
.entry .hook { color: var(--soft); font-weight: 300; font-size: .92rem; max-width: 58ch }
.entry .body { display: none; margin-top: 18px; cursor: auto }
.entry.open .body { display: block; animation: appear .6s ease }
@keyframes appear { from { opacity: 0; transform: translateY(6px) } to { opacity: 1 } }
.entry .body p { color: var(--ink); font-weight: 300; font-size: .96rem; max-width: 60ch }
.reasoning { margin: 18px 0; padding-left: 18px; border-left: 1px solid rgba(127, 182, 232, .35) }
.reasoning .rk { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: #7fb6e8; margin-bottom: 8px }
.reasoning li { color: var(--soft); font-size: .9rem; margin: 7px 0; font-weight: 300 }
.forbids { margin: 16px 0; padding-left: 18px; border-left: 1px solid rgba(255, 138, 138, .4);
  color: var(--soft); font-size: .88rem; font-weight: 300 }
.forbids b { color: var(--bad); font-weight: 500; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; display: block; margin-bottom: 6px }
.related { margin-top: 16px }
.related a { font-size: .8rem; color: var(--violet); margin-right: 14px }

/* ---------- rite / join ---------- */
.stage { margin: 60px 0 }
.stage.locked { opacity: .35; pointer-events: none }
.claimpick { display: block; padding: 12px 0 12px 18px; border-left: 1px solid rgba(154, 208, 255, .18);
  margin: 10px 0; cursor: pointer; font-size: .94rem; font-weight: 300; transition: all .2s }
.claimpick:hover { border-left-color: rgba(154, 208, 255, .5) }
.claimpick input { margin-right: 10px }
.claimpick.sel { border-left-color: var(--warm); color: var(--warm) }
.counterq { border-left: 1px solid rgba(201, 179, 255, .5); padding-left: 18px; margin: 16px 0;
  font-size: .96rem; font-weight: 300; color: var(--violet) }
.door-btn { width: 100%; padding: 17px; font-size: 1rem }
.doorstate { font-size: .78rem; color: var(--dim); margin-top: 10px; text-align: center; letter-spacing: .06em }
.num { font-size: 3rem; color: var(--good); font-weight: 200; margin: 10px 0 }
.keyline { border-left: 1px solid rgba(255, 217, 168, .4); padding-left: 18px; margin-top: 14px; font-size: .82rem }

.ok { color: var(--good) } .no { color: var(--bad) }
.verdict { margin-top: 18px; font-size: .94rem; display:none }