/* Haven — glass on the field, gold for the sacred, Cormorant for the voice (the Mythica's own language). */
:root {
  /* Haven paints with the Grove's look (/grove/look.css, 2026-10-16): these are its own names for it */
  --night: var(--gl-night); --soil: #1a140e; --glass: var(--gl-glass); --glass-strong: var(--gl-glass-strong); --line: var(--gl-line);
  --gold: var(--gl-gold); --gold-soft: var(--gl-gold-soft); --text: var(--gl-ink); --muted: var(--gl-ink-dim); --faint: var(--gl-ink-faint);
  --panel: var(--gl-panel); --teal: #6fd6c8; --moss: #9ccf8c;
  --serif: var(--gl-serif); --sans: var(--gl-sans); --field: var(--gl-ground);
  color-scheme: var(--gl-scheme);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--night); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
/* the field: the Aethersphere behind everything, the content glass upon it ("glass, not gray") */
body::before { content: ""; position: fixed; inset: 0; z-index: -3; background: radial-gradient(1100px 700px at 75% -10%, rgba(52,60,130,.20), transparent 70%), radial-gradient(900px 700px at 0% 110%, rgba(84,46,120,.14), transparent 70%), #05070f; }
/* a starry darkness (Peter, 2026-10-20: "it overwhelms the panels & frames. let's just use a starry darkness"): Ergos's own night
   sky — the Milky Way's band, its dust and its stars — painted behind Haven (sky.js); the plain dark beneath it if it can't be drawn */
canvas.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
/* no veil over the ground, as on Into the Mythica; the glass carries the words */
body::after { content: none; }   /* no veil: the night itself is dark enough   /* the look's veil over its ground (Mythica has none) */
a { color: var(--gold); }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

.glass { background: var(--glass); border: 1px solid var(--line); backdrop-filter: var(--gl-blur, blur(14px)); -webkit-backdrop-filter: var(--gl-blur, blur(14px)); border-radius: var(--gl-radius, 16px); box-shadow: var(--gl-shadow, none); }
/* a section's name, lettered as Into the Mythica letters them: gold Cormorant, upright, a touch tight */
.label { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; color: var(--gold); }
/* a section's name standing on the ground sits on its own glass, as the site's do */
.stack > .label, .river-top > .label { align-self: flex-start; display: inline-block; padding: 4px 16px 5px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); backdrop-filter: var(--gl-blur, blur(12px)); -webkit-backdrop-filter: var(--gl-blur, blur(12px)); }
.serif { font-family: var(--serif); }

/* the top */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 14px clamp(16px, 3vw, 40px); background: linear-gradient(180deg, color-mix(in srgb, var(--night) 92%, transparent), color-mix(in srgb, var(--night) 60%, transparent)); backdrop-filter: blur(10px); }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--text); }
.mark { color: var(--gold); font-size: 20px; }
.name { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: 0.04em; }
.sub { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.modes { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.modes a { padding: 10px 14px; border-radius: 999px; color: var(--text); text-decoration: none; font-size: 14px; min-height: 40px; display: flex; align-items: center; white-space: nowrap; }
.modes a[aria-current="page"] { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-soft); }
.me { padding: 0; overflow: hidden; width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: var(--panel); color: var(--gold); font-family: var(--serif); font-size: 18px; cursor: pointer; }
.filter { display: flex; align-items: center; gap: 10px; padding: 0 clamp(16px, 3vw, 40px) 10px; font-size: 14px; color: var(--muted); }
.filter b { color: var(--gold-soft); font-weight: 500; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 13px; min-height: 36px; }
.chip.on { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-soft); }

main { padding: 8px clamp(16px, 3vw, 40px) 80px; max-width: 1440px; margin: 0 auto; }
.quietly { color: var(--muted); padding: 60px 0; text-align: center; font-family: var(--serif); font-size: 22px; }

/* threshold */
.hero { position: relative; border-radius: 20px; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; border: 1px solid var(--line); cursor: pointer; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--night) 10%, transparent) 30%, color-mix(in srgb, var(--night) 92%, transparent)); }
.hero .words { position: relative; z-index: 1; padding: 28px 32px; display: flex; flex-direction: column; gap: 8px; max-width: 780px; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5vw, 58px); line-height: 1.05; }
.sky { text-align: center; padding: 30px 0 26px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sky .when { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--teal); }
.sky h2 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(28px, 4vw, 44px); max-width: 860px; line-height: 1.1; }
.row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-top: 26px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.braid { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; width: 100%; min-height: 44px; }
.braid span:first-child { font-family: var(--serif); font-size: 20px; }
.braid span:last-child { font-size: 12px; color: var(--muted); }
.faces { display: flex; flex-wrap: wrap; gap: 10px; }

/* a story tile */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 14px; }
.tile { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); background: var(--panel); cursor: pointer; padding: 0; text-align: left; }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile.tall { grid-row: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.04); }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--night) 90%, transparent)); display: flex; flex-direction: column; gap: 2px; }
.tile .kind { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); }
.tile .t { font-family: var(--serif); font-size: 20px; line-height: 1.15; }
.tile.noimg { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, var(--panel), var(--panel)); }
.tile.noimg .glyph { color: var(--gold); font-size: 30px; opacity: 0.7; }

/* the scroll */
.scroll { position: relative; max-width: 980px; margin: 0 auto; padding-left: 70px; }
.scroll::before { content: ""; position: absolute; left: 29px; top: 10px; bottom: 0; width: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 90%, transparent), color-mix(in srgb, var(--gold) 12%, transparent)); }
.entry { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 0 40px; opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s ease; }
.entry.seen { opacity: 1; transform: none; }
.entry::before { content: ""; position: absolute; left: -48px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 80%, transparent); }
.entry h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; cursor: pointer; }
.entry img { width: 100%; max-height: 380px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; }
.entry .meta { font-size: 13px; color: var(--muted); }
.more { display: block; margin: 10px auto 0; }

/* people */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.person { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px; border-radius: 16px; background: none; border: 1px solid transparent; cursor: pointer; text-align: center; }
.person:hover, .person:focus-visible { border-color: var(--line); background: var(--glass); }
.face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 35%, transparent); background: var(--panel); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 34px; color: var(--gold); }
.face.small { width: 44px; height: 44px; font-size: 18px; border-width: 1px; }
.person .n { font-family: var(--serif); font-size: 19px; line-height: 1.15; }
.person .c { font-size: 12px; color: var(--muted); }

/* the globe */
.globe { height: calc(100vh - 150px); min-height: 480px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.globe-frame { width: 100%; height: 100%; border: 0; }
.globe-note { position: absolute; left: 20px; bottom: 20px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--glass); }

/* a story, opened */
.sheet { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: min(560px, 100%); overflow-y: auto; background: color-mix(in srgb, var(--night) 94%, transparent); border-left: 1px solid var(--line); backdrop-filter: blur(16px); padding: 0 0 40px; box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); }
.sheet .pic { width: 100%; height: 300px; object-fit: cover; }
.sheet .body { padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; }
.sheet h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 38px; line-height: 1.08; }
.sheet .words { font-family: var(--serif); font-size: 20px; line-height: 1.6; color: var(--text); white-space: pre-line; }
.sheet .close { position: sticky; top: 12px; float: right; margin: 12px 12px -56px 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--night) 80%, transparent); cursor: pointer; font-size: 20px; z-index: 2; }
.gold { padding: 11px 20px; border-radius: 999px; background: var(--gold); color: #1a1408; border: 0; text-decoration: none; font-weight: 500; cursor: pointer; display: inline-flex; min-height: 44px; align-items: center; }
.ghost { padding: 11px 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold-soft); background: none; text-decoration: none; cursor: pointer; display: inline-flex; min-height: 44px; align-items: center; }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* the door */
.door { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.door form { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: center; padding: 34px 28px; background: var(--glass); border: 1px solid var(--line); border-radius: 20px; backdrop-filter: blur(14px); }
.door h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 44px; }
.door p { margin: 0 0 8px; color: var(--muted); line-height: 1.55; }
.door .big { font-size: 34px; }
.door input { min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--night) 60%, transparent); color: var(--text); font: inherit; }
.door button[type="submit"] { min-height: 48px; border-radius: 999px; border: 0; background: var(--gold); color: #1a1408; font-weight: 500; cursor: pointer; }
.door .quiet { background: none; border: 0; color: var(--teal); cursor: pointer; min-height: 44px; }
.said { min-height: 20px; color: var(--text); font-size: 14px; }

@media (max-width: 860px) {
  .top { flex-wrap: wrap; }
  .modes { order: 3; width: 100%; flex-wrap: wrap; justify-content: center; }
  .fold-menu { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
  .sub { display: none; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .tile.big { grid-column: span 1; }
  .scroll { padding-left: 34px; }
  .scroll::before { left: 10px; }
  .entry::before { left: -30px; }
}
@media (prefers-reduced-motion: reduce) { .entry { opacity: 1; transform: none; transition: none; } .tile img { transition: none; } }

/* sharing */
.right { display: flex; align-items: center; gap: 10px; }
.share { padding: 10px 18px; }
.sheet textarea, .sheet input { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--night) 60%, transparent); color: var(--text); font: inherit; }
.sheet textarea { font-family: var(--serif); font-size: 20px; line-height: 1.5; resize: vertical; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; }
.pick { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--panel); cursor: pointer; aspect-ratio: 1; }
.pick img { width: 100%; height: 100%; object-fit: cover; }
.pick.on { border-color: var(--gold); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 60%, transparent); }
.strip { display: flex; gap: 8px; overflow-x: auto; }
.strip img { height: 120px; border-radius: 10px; border: 1px solid var(--line); }
.meta { font-size: 13px; color: var(--muted); margin: 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: all 0.3s ease; padding: 12px 18px; border-radius: 999px; background: color-mix(in srgb, var(--night) 95%, transparent); border: 1px solid var(--line); z-index: 40; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: var(--text); color: var(--text); }

/* by the sky */
.moons { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 6px 0 18px; }
.phase { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 104px; padding: 10px 4px; border-radius: 14px; background: none; border: 1px solid transparent; cursor: pointer; color: var(--faint); font-size: 12px; }
.phase.on { color: var(--gold-soft); border-color: var(--line); background: var(--glass); }
.moon { position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 40% 40%, var(--text), var(--text)); border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); }
.moon.big { width: 58px; height: 58px; border: 2px solid var(--gold); box-shadow: 0 0 28px color-mix(in srgb, var(--text) 55%, transparent); }
.moon .shade { position: absolute; top: 0; bottom: 0; background: var(--panel); }

/* today */
.day { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.hour { display: flex; align-items: center; gap: 12px; padding: 20px 4px 4px; }
.hour::before, .hour::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 60%, transparent), transparent); }
.hour span { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--gold-soft); }
.telling { padding: 18px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.telling .who { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.telling .tell { margin: 0; font-size: 21px; line-height: 1.5; color: var(--text); }
.telling img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px; }
.ending { margin: 30px 0 10px; padding: 34px 24px; border-radius: 22px; text-align: center; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold) 20%, transparent), color-mix(in srgb, var(--night) 65%, transparent) 70%); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ending .mark { font-size: 28px; }

/* constellation */
.constellation { position: relative; width: 100%; aspect-ratio: 5 / 3; min-height: 420px; border-radius: 20px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--night) 55%, transparent), color-mix(in srgb, var(--night) 80%, transparent)); overflow: hidden; }
.threads { position: absolute; inset: 0; width: 100%; height: 100%; }
.threads line { stroke: color-mix(in srgb, var(--gold) 50%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.star, .braid-star { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; padding: 0; color: var(--text); }
.star img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 50%, transparent); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.star:hover img, .star:focus-visible img { transform: scale(1.12); box-shadow: 0 0 30px color-mix(in srgb, var(--gold) 85%, transparent); }
.star span { font-size: 12px; max-width: 130px; text-align: center; line-height: 1.25; text-shadow: 0 1px 6px #000; }
.braid-star .core { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--text) 0%, var(--gold) 45%, #7a5a1e 100%); box-shadow: 0 0 34px 8px color-mix(in srgb, var(--gold) 55%, transparent); }
.braid-star .name { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--gold-soft); text-shadow: 0 1px 8px #000; white-space: nowrap; }
@media (max-width: 860px) { .star img { width: 48px; height: 48px; } .star span { display: none; } .phase { width: 76px; } .braid-star .name { font-size: 15px; } }

/* ── the feed and talk (2026-10-14): the site's Haven feel — frosted glass, a gold edge, teal light ── */
.feed { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.post { background: color-mix(in srgb, var(--night) 52%, transparent); backdrop-filter: blur(12px) saturate(1.12); -webkit-backdrop-filter: blur(12px) saturate(1.12); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38), inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.post .ph { display: flex; align-items: center; gap: 12px; padding: 16px 18px 4px; font-size: 14px; }
.post .ph b { color: var(--gold); font-weight: 500; }
.post .ph .meta { margin-top: 2px; }
.face.mark { color: var(--gold); font-size: 18px; }
.post .pb { padding: 6px 18px 2px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.post .pb h3 { margin: 4px 0 0; font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.12; color: var(--gold-soft); }
.post .tell { margin: 0; font-size: 19px; line-height: 1.55; color: var(--text); }
.pics { display: grid; gap: 6px; border-radius: 12px; overflow: hidden; margin-top: 4px; }
.pics.n2 { grid-template-columns: 1fr 1fr; } .pics.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.pics.n3 img:first-child { grid-row: span 2; }
.pics img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.pics.n1 img { max-height: 460px; }
.post .chips { padding: 10px 18px 0; }
.chip.strand { min-height: 30px; padding: 4px 12px; font-size: 12px; color: var(--text); border-color: rgba(111, 214, 200, 0.35); }
.chip.strand::before { content: "✦ "; color: var(--teal); }
.pf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; margin-top: 12px; border-top: 1px solid color-mix(in srgb, var(--gold) 14%, transparent); }
.rx-host { flex: 1; min-width: 0; }
.rx-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rx { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); background: none; color: var(--muted); font-size: 13px; cursor: pointer; }
.rx .g { font-size: 15px; color: var(--teal); }
.rx .n { min-width: 0; color: var(--text); }
.rx.on { border-color: rgba(111, 214, 200, 0.7); background: rgba(111, 214, 200, 0.14); color: var(--text); }
.rx-row.small .rx { min-height: 26px; padding: 0 8px; font-size: 12px; border-color: transparent; }
.rx-row.small .rx.on { border-color: rgba(111, 214, 200, 0.5); }
.replies-toggle { background: none; border: 0; color: var(--gold-soft); cursor: pointer; font-size: 14px; min-height: 34px; padding: 0 4px; }
.talk { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.sheet .talk { padding: 0; }
.replies { display: flex; flex-direction: column; gap: 12px; }
.reply { display: flex; gap: 10px; align-items: flex-start; }
.reply.child { margin-left: 46px; }
.reply .face.small { width: 34px; height: 34px; font-size: 15px; flex: none; }
.rbody { min-width: 0; flex: 1; }
.bubble { background: color-mix(in srgb, var(--night) 60%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); border-radius: 14px; padding: 9px 13px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.bubble b { color: var(--gold); font-weight: 500; }
.rmeta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--muted); }
.rmeta > button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 0; font-size: 12px; }
.rmeta > button:hover { color: var(--gold-soft); }
.write { display: flex; gap: 10px; align-items: flex-end; }
.write .face.small { width: 34px; height: 34px; font-size: 15px; flex: none; }
.write .field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.write textarea { width: 100%; min-height: 40px; resize: none; padding: 9px 13px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); background: color-mix(in srgb, var(--night) 55%, transparent); color: var(--text); font: inherit; font-size: 15px; line-height: 1.45; }
.sheet .write textarea { font-family: inherit; font-size: 15px; min-height: 40px; }
.answering { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--teal); }
.x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; }
.ghost.small { min-height: 40px; padding: 8px 16px; }
.quietline { padding: 4px 0; font-style: italic; }
.composer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; cursor: pointer; text-align: left; color: var(--muted); font-size: 15px; width: 100%; }
.talkwrap { border-top: 1px solid color-mix(in srgb, var(--gold) 14%, transparent); padding-top: 14px; }
.bell { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--night) 60%, transparent); color: var(--gold); cursor: pointer; font-size: 18px; }
.bell .dot { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--teal); color: var(--panel); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.inbox { position: fixed; z-index: 35; top: 76px; right: clamp(12px, 3vw, 40px); width: min(400px, calc(100vw - 24px)); max-height: min(70vh, 620px); overflow-y: auto; padding: 6px 0; background: color-mix(in srgb, var(--night) 88%, transparent); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.inbox .ihead { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 10px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 16%, transparent); font-size: 24px; color: var(--gold-soft); }
.notice { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px 16px; background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--gold) 8%, transparent); cursor: pointer; font-size: 14px; line-height: 1.45; }
.notice .face.small { width: 34px; height: 34px; font-size: 15px; flex: none; }
.notice b { color: var(--gold); font-weight: 500; }
.notice i { font-family: var(--serif); font-size: 16px; }
.notice.new { background: rgba(111, 214, 200, 0.08); }
.notice:hover, .notice:focus-visible { background: color-mix(in srgb, var(--gold) 8%, transparent); }
@media (max-width: 860px) { .inbox { top: 120px; } .reply.child { margin-left: 24px; } .rx .k { display: none; } }
/* nine ways of seeing need their own row before the bar runs out of room */
@media (max-width: 1180px) { .top { flex-wrap: wrap; } .modes { order: 3; width: 100%; flex-wrap: wrap; } }   /* five doors fit; a folded door's list must not be clipped */

/* ── the Bard's Hall: Haven's front door (2026-10-14) ── */
.hall-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; max-width: 1240px; margin: 0 auto; }
@media (max-width: 900px) { .hall-grid { grid-template-columns: minmax(0, 1fr); } }
.hall { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1 / 1; margin: 0 auto; }
.hall canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hall-hearth { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1 / 1; border-radius: 50%; border: 0; background: none; cursor: pointer; }
.alcove { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--text); cursor: pointer; padding: 6px; width: 124px; text-align: center; }
.alcove .seal { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--gold); background: color-mix(in srgb, var(--night) 60%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 24px color-mix(in srgb, var(--gold) 18%, transparent); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.alcove .n { font-family: var(--serif); font-size: 19px; line-height: 1.1; }
.alcove small { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.alcove:hover .seal, .alcove:focus-visible .seal { transform: scale(1.08); }
.alcove[aria-pressed="true"] .seal { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(111, 214, 200, 0.15), 0 0 34px rgba(111, 214, 200, 0.45); }
.hall-panel { padding: 24px; min-height: 440px; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: color-mix(in srgb, var(--night) 55%, transparent); backdrop-filter: blur(14px) saturate(1.12); -webkit-backdrop-filter: blur(14px) saturate(1.12); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent); }
.hall-panel .kind { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); }
.hall-panel h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 36px; line-height: 1.05; color: var(--gold-soft); }
.hall-panel .feel { margin: 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--muted); }
.hall-panel p { margin: 0; line-height: 1.6; }
.hall-say { font-family: var(--serif); font-size: 19px; background: color-mix(in srgb, var(--gold) 8%, transparent); border-radius: 12px; padding: 10px 14px; line-height: 1.45; }
.hall-say b { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.hall-doors { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.hall-go { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold-soft); background: none; text-decoration: none; cursor: pointer; font-size: 14px; }
.hall-go:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.hall-row { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); font-size: 20px; }
.hall-tell { display: flex; gap: 10px; align-items: center; text-align: left; background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); padding: 8px 0; cursor: pointer; width: 100%; }
.hall-tell .t { font-size: 19px; color: var(--gold-soft); line-height: 1.2; }
.hall-reel { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.hall-reel figure { margin: 0; flex: none; width: 150px; }
.hall-reel img, .hall-nofilm { width: 150px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.hall-nofilm { display: grid; place-items: center; color: var(--gold); background: var(--panel); }
.hall-reel figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.3; }
.hall-shelf { display: flex; gap: 6px; align-items: flex-end; height: 150px; }
.hall-shelf button { flex: 1; min-width: 0; border-radius: 4px 4px 2px 2px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: linear-gradient(180deg, #2a3150, var(--panel)); color: var(--text); cursor: pointer; padding: 6px 2px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.hall-shelf button:nth-child(3n+1) { background: linear-gradient(180deg, #3b2a4a, var(--panel)); }
.hall-shelf button:nth-child(3n+2) { background: linear-gradient(180deg, var(--panel), var(--panel)); }
.hall-shelf button span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; }
.hall-shelf button:hover { border-color: var(--teal); }
@media (max-width: 560px) { .alcove { width: 92px; } .alcove .seal { width: 46px; height: 46px; font-size: 19px; } .alcove .n { font-size: 15px; } .alcove small { display: none; } }
/* the hall, dressed as the Haven feed: the Akasha network ground, drawn medallions, a picture atop each alcove */
.hall-room { position: relative; }
.hall-ground { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; pointer-events: none; }
.alcove .seal { position: relative; width: 72px; height: 72px; padding: 0; overflow: hidden; background: none; }
.alcove .seal .seal-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.alcove .seal .glyph { position: relative; font-size: 20px; color: var(--text); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.hall-hero { display: block; width: calc(100% + 48px); max-width: none; margin: -24px -24px 6px; height: auto; aspect-ratio: 56 / 22; border-radius: 18px 18px 0 0; }
.hall-panel { overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); }
.hall-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1240px; margin: 28px auto 0; }
@media (max-width: 900px) { .hall-widgets { grid-template-columns: minmax(0, 1fr); } }
.hall-widget { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--night) 52%, transparent); backdrop-filter: blur(12px) saturate(1.12); -webkit-backdrop-filter: blur(12px) saturate(1.12); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38), inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent); min-width: 0; }
.hall-widget .hall-hero { width: 100%; margin: 0; aspect-ratio: 30 / 17; border-radius: 12px; }
.hall-widget .hall-hero.square { aspect-ratio: 1 / 1; max-width: 220px; margin: 0 auto; border-radius: 50%; }
.hall-widget .big { font-size: 22px; color: var(--gold-soft); }
@media (max-width: 560px) { .alcove .seal { width: 54px; height: 54px; } }
/* the Lens and its Globe, on the rail (Peter, 2026-10-14: "helps people orient more quickly") */
.modes .railgo { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(111, 214, 200, 0.45); color: var(--text); text-decoration: none; font-size: 14px; white-space: nowrap; }
.rail-sep { width: 1px; align-self: stretch; margin: 6px 4px; background: color-mix(in srgb, var(--gold) 25%, transparent); }
.modes .railgo span { color: var(--teal); font-size: 16px; }
.modes .railgo:hover, .modes .railgo:focus-visible { background: rgba(111, 214, 200, 0.14); }
@media (max-width: 560px) { .modes .railgo { padding: 0 12px; font-size: 13px; } }

/* the feed's two sides: inward (your thread) and outward (the living cosmos) — 2026-10-14 */
.feed-with-sides { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 680px) minmax(0, 270px); gap: 24px; justify-content: center; align-items: start; }
.feed-with-sides > .feed { max-width: none; margin: 0; }
.side { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 170px); overflow-y: auto; padding-bottom: 20px; scrollbar-width: thin; }
.side-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--night) 52%, transparent); backdrop-filter: blur(12px) saturate(1.12); -webkit-backdrop-filter: blur(12px) saturate(1.12); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent); }
.side-card .hall-hero { width: 100%; margin: 0; border-radius: 12px; aspect-ratio: 30 / 17; height: auto; }
.side-card .hall-hero.square { aspect-ratio: 1 / 1; max-width: 200px; margin: 0 auto; border-radius: 50%; }
.side-me { display: flex; gap: 12px; align-items: center; }
.side-me .face { width: 64px; height: 64px; font-size: 26px; }
.side-card .big { font-size: 22px; color: var(--gold-soft); }
.side-words { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--text); }
.side-question { margin: 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--gold-soft); line-height: 1.4; }
.side-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--gold) 10%, transparent); color: var(--text); text-decoration: none; font-size: 15px; }
.side-row span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-row small { color: var(--muted); font-size: 12px; }
.side-row .ring { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(111, 214, 200, 0.6); display: grid; place-items: center; color: var(--teal); font-family: var(--serif); flex: none; }
.side-thread, .side-word { display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--text); }
.side-thread img, .side-word img { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
.side-thread .serif, .side-word .serif { font-size: 20px; color: var(--gold-soft); line-height: 1.2; }
.side-thread small { color: var(--muted); font-size: 12px; }
.side-sky { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.side-sky .g { color: var(--gold); }
.side-globe { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; margin: 0 auto; display: block; }
.side .hall-go { align-self: flex-start; }
@media (max-width: 1300px) { .feed-with-sides { grid-template-columns: minmax(0, 680px) minmax(0, 270px); } .side-left { display: none; } }
@media (max-width: 1080px) { .feed-with-sides { grid-template-columns: minmax(0, 1fr); } .side-right { position: static; max-height: none; order: 2; } }
/* the Lens held in Haven, beneath the rail */
.lens-host { height: calc(100vh - 150px); min-height: 480px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.lens-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--panel); }
.modes .railgo[aria-current="page"] { background: rgba(111, 214, 200, 0.2); border-color: rgba(111, 214, 200, 0.8); }
@media (max-width: 1180px) { .lens-host { height: calc(100vh - 200px); } }

/* a person's page (2026-10-14) */
.profile { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.profile-head { position: relative; overflow: hidden; border-radius: 20px; }
.profile-banner { height: 220px; background-size: cover; background-position: center; filter: saturate(1.05); }
.profile-banner::after { content: ""; display: block; height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--night) 0%, transparent) 30%, color-mix(in srgb, var(--night) 90%, transparent)); }
.profile-banner.plain { background: radial-gradient(ellipse at 30% 30%, rgba(111, 214, 200, 0.25), transparent 60%), linear-gradient(160deg, var(--panel), var(--panel)); }
.profile-id { display: flex; align-items: flex-end; gap: 18px; padding: 0 24px; margin-top: -60px; position: relative; }
.profile-id .face { width: 120px; height: 120px; font-size: 44px; border-width: 3px; }
.profile-id h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; }
.profile-doors { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 24px 22px; }
.face-link { display: inline-flex; border-radius: 50%; text-decoration: none; }
.face-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Akashi, beside everything */
.akashi-orb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--night) 60%, transparent); color: var(--gold-soft); cursor: pointer; font-family: var(--serif); font-size: 18px; }
.orb { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--text) 0%, var(--gold) 38%, #6fd6c8 75%, var(--panel) 100%); box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 70%, transparent); animation: orb 5s ease-in-out infinite; }
@keyframes orb { 50% { box-shadow: 0 0 28px rgba(111, 214, 200, 0.8); } }
.akashi-orb[aria-expanded="true"] { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.akashi-drawer { position: fixed; z-index: 36; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: color-mix(in srgb, var(--night) 94%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid var(--line); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); }
.ad-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); font-size: 24px; color: var(--gold-soft); }
.ad-head .x { margin-left: auto; }
.ad-body { flex: 1; min-height: 0; }
.ad-frame { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .akashi-orb .n { display: none; } .akashi-orb { padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }
/* the Map beneath the Lens's own sky */
.globe { background: radial-gradient(ellipse 80% 70% at 50% 42%, #0e1b3d 0%, #081129 55%, #040818 100%); isolation: isolate; }   /* the night the globe hangs in: deep blue under the Lens's stars and mist (2026-10-16) */
.globe-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.globe-sky canvas { width: 100% !important; height: 100% !important; display: block; }
.globe > iframe, .globe .globe-frame { position: relative; z-index: 1; background: transparent; color-scheme: dark; }   /* the map page is dark-scheme; a frame whose scheme differs from its page is painted opaque, hiding the sky */

/* ── THE READER — an episode or entry opened whole, in the design Peter set on the website (2026-10-15) ── */
.reader { position: relative; padding: 4px 0 60px; }
.rd-ground { position: fixed; inset: 0; z-index: -1; background: var(--panel) center / cover no-repeat; pointer-events: none; }
.rd-ground.plain { background: radial-gradient(ellipse at 30% 10%, rgba(64, 48, 120, 0.4), transparent 60%), radial-gradient(ellipse at 75% 85%, rgba(30, 80, 110, 0.35), transparent 55%), var(--panel); }
.rd-wait { text-align: center; padding: 120px 20px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--text); }
.rd-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(700px, 100%); margin: 0 auto 12px; }
.rd-back { font: 500 13px Jost, sans-serif; letter-spacing: 0.06em; color: var(--text); background: color-mix(in srgb, var(--night) 72%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 999px; padding: 8px 16px; cursor: pointer; backdrop-filter: blur(10px); }
.rd-seen { font: 500 12px Jost, sans-serif; letter-spacing: 0.08em; color: var(--gold); background: color-mix(in srgb, var(--night) 72%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 999px; padding: 7px 14px; backdrop-filter: blur(10px); }
.rd-panel { width: min(700px, 100%); margin: 0 auto; box-sizing: border-box; }
.rd-panel a.lex { color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold); }
.rd-panel a.lex:hover { border-bottom-style: solid; }
.rd-body { display: flex; flex-direction: column; }
.rd-fig { margin: 0 0 28px; }
.rd-fig img, .rd-featured img { display: block; width: 100%; height: auto; }
.rd-film { margin: 18px 0; }
.rd-film-wait { font-style: italic; opacity: 0.7; margin: 0; }
.rd-film-player { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; display: block; }

/* the episode: its ground behind, the dark column, gold sans titles, Georgia words */
.kind-episode .rd-panel { background: var(--panel); padding: 30px 12px 35px; }
.kind-episode .rd-head, .kind-episode .rd-featured, .kind-episode .rd-body, .kind-episode .rd-woven, .kind-episode .rd-meta, .kind-episode .rd-near, .kind-episode .rd-talk { padding: 0 0; margin-left: 0; margin-right: 0; }
.kind-episode .rd-title, .kind-episode .rd-h { font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color: var(--gold); font-weight: 700; letter-spacing: -0.015em; white-space: pre-line; }
.kind-episode .rd-title { font-size: 32px; line-height: 1.2; margin: 0 0 25px; }
.kind-episode h1.rd-h { font-size: 32px; line-height: 1.2; margin: 18px 0 40px; }
.kind-episode h2.rd-h { font-size: 24px; line-height: 1.25; margin: 30px 0 18px; }
.kind-episode .rd-featured { margin: 0 0 30px; }
.kind-episode .rd-featured img { border-radius: 6px; }
.kind-episode .rd-p { font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.8; color: var(--text); margin: 0 0 28px; }

/* the Mythipedia: its ground behind, glass with a gold hairline, Cormorant */
.kind-entry .rd-panel { background: color-mix(in srgb, var(--night) 82%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 13%, transparent); border-radius: 10px; padding: 24px clamp(18px, 4vw, 34px) 32px; }
.kind-entry .rd-kind { font: 500 12px Jost, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.kind-entry .rd-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--text); margin: 0; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.kind-entry .rd-featured { margin: 22px 0; border: 1px solid color-mix(in srgb, var(--gold) 13%, transparent); border-radius: 6px; overflow: hidden; }
.kind-entry .rd-h { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; color: var(--text); font-size: 26px; margin: 26px 0 12px; }
.kind-entry .rd-p { font-family: "Cormorant Garamond", Georgia, serif; font-size: 19.5px; line-height: 1.68; color: var(--text); margin: 0 0 22px; }
.kind-entry .rd-fig img { border: 1px solid color-mix(in srgb, var(--gold) 13%, transparent); border-radius: 6px; }
.kind-entry .rd-panel a.lex { border-bottom: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }

/* woven with · who and where · before and after · talk */
.rd-woven { margin-top: 22px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--gold) 13%, transparent); }
.rd-woven-h { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 24px; color: var(--gold); margin: 0 0 14px; }
.rd-woven-h small { font: 400 13px Jost, sans-serif; color: var(--muted); margin-left: 8px; letter-spacing: 0.04em; }
.rd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rd-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); }
.rd-card-face { display: block; aspect-ratio: 3 / 2; border-radius: 6px; background: var(--panel) center / cover; border: 1px solid color-mix(in srgb, var(--gold) 13%, transparent); }
.rd-card-face.none { background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--gold) 25%, transparent), transparent 60%), var(--panel); }
.rd-card-t { font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; line-height: 1.2; }
.rd-meta { margin-top: 26px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--gold) 13%, transparent); display: flex; flex-direction: column; gap: 14px; }
.rd-meta-l { font: 500 11px Jost, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rd-people { display: flex; flex-wrap: wrap; gap: 12px; }
.rd-person { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; }
.rd-near { margin-top: 28px; }
.rd-near-label { font: 500 11px Jost, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.rd-near-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rd-near-card { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 15%, transparent); }
.rd-near-card.next { flex-direction: row-reverse; text-align: right; }
.rd-near-thumb { flex: none; width: 72px; height: 50px; border-radius: 6px; background: var(--panel) center / cover; }
.rd-near-thumb.none { background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--gold) 25%, transparent), transparent 60%), var(--panel); }
.rd-near-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-near-info small { font: 400 11px Jost, sans-serif; color: var(--muted); letter-spacing: 0.06em; }
.rd-near-info b { font: 500 17px/1.2 "Cormorant Garamond", Georgia, serif; color: var(--gold); overflow: hidden; text-overflow: ellipsis; }
.rd-talk { margin-top: 28px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--gold) 13%, transparent); }
body:has(.reader)::before, body:has(.reader)::after { opacity: 0; }   /* the episode's own ground, unveiled, as the website shows it */
@media (max-width: 640px) { .rd-bar { padding: 0 4px; } .rd-near-cards { grid-template-columns: 1fr; } .kind-episode .rd-panel { padding: 22px 14px 30px; } }

/* ── the River on a person's page: Mythos itself, held (2026-10-15) ── */
.profile-river { margin: 18px 0 8px; }
.river-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.river-seen { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--night) 55%, transparent); }
.river-seen-l { font: 500 11px Jost, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0 8px; }
.river-seen button { font: 500 13px Jost, sans-serif; color: var(--text); background: none; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.river-seen button[aria-pressed="true"] { color: var(--panel); background: var(--gold); }
.river-frame { display: block; width: 100%; height: min(82vh, 980px); border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }

/* the lightbox's look lives in lightbox.css, beside lightbox.js, which lays it in (2026-10-24) */
.rd-fig img, .rd-featured img { cursor: zoom-in; }

.me-face { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── a reading let rise, and the Compass's doors (2026-10-15) ── */
.draw-go { font: 500 14px Jost, sans-serif; color: var(--gold, var(--gold)); background: color-mix(in srgb, var(--night) 55%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.draw-go:hover { box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 35%, transparent); }
.composers { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.composer.draw { display: flex; align-items: center; gap: 10px; padding-inline: 18px; }
.composer.draw .rose { color: var(--gold); font-size: 20px; text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent); }
.reading-face h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 4px; }
.reading-face .sky { color: var(--gold); letter-spacing: .04em; }
.rfan { display: flex; justify-content: center; gap: 0; margin: 16px 0 6px; padding: 0 10px; }
.rfan figure { margin: 0 -10px; width: clamp(88px, 18%, 132px); transform: rotate(calc((var(--i) - 1) * 5deg)) translateY(calc(var(--i) * 0px)); transform-origin: 50% 120%; transition: transform .3s; }
.rfan figure:hover { transform: translateY(-8px) scale(1.04); z-index: 2; }
.rfan img, .rfan figure > span { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); background: var(--panel); }
.rfan figure > span { display: grid; place-items: center; font-family: var(--serif); padding: 6px; text-align: center; }
.rfan figcaption { margin-top: 6px; text-align: center; font-family: var(--serif); font-size: 14px; color: var(--text); }
.reading-face .her { border-left: 2px solid rgba(180, 140, 255, .5); padding-left: 12px; margin-top: 12px; }
@media (max-width: 640px) { .composers { grid-template-columns: 1fr; } }

/* a person's work in the Grove, with its doors (2026-10-16) */
.work-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.work-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; }
.work-t { display: flex; flex-direction: column; gap: 2px; }
.work-t b { font-family: var(--serif, Georgia, serif); font-size: 18px; font-weight: 500; }
.work-doors { display: flex; flex-wrap: wrap; gap: 8px; }
.work-doors .ghost { text-decoration: none; }

.look-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 24px 20px; }
/* the Mythipedia, quietly — one line under a piece */
.quiet-woven{margin:.4rem 0 0;font-size:12.5px;opacity:.7}.quiet-woven a{color:inherit;border-bottom:1px dotted currentColor;text-decoration:none}
.rd-lessons .rd-card small,.rd-yours .rd-card small{display:block;opacity:.7;font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* THE BAR'S FIVE DOORS (2026-10-16): a folded door and its kin */
.fold { position: relative; display: inline-flex; }
.fold-go { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--text); padding: 10px 14px; min-height: 40px; border-radius: 999px; white-space: nowrap; }
.fold-go[aria-current="page"] { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-soft); }
.fold-menu a { min-height: 0; }
.fold-caret { font-size: 10px; opacity: .7; }
.fold-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 240px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 16px; background: var(--glass-strong); }
.fold-menu a { display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--text); white-space: nowrap; }
.fold-menu a small { color: var(--faint); }
.fold-menu a:hover, .fold-menu a[aria-current="page"] { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.share-wrap { position: relative; }
.share-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: flex; flex-direction: column; min-width: 230px; padding: 8px; border-radius: 16px; background: var(--glass-strong); }
.share-menu button { text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; font: inherit; }
.share-menu button:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* THE TWO BUBBLES (2026-10-16): Akashi's orb above, the Messenger below */
.bubbles { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.b-akashi { width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; position: relative;
  background: radial-gradient(circle at 35% 30%, #fff 0, #d8f1ff 18%, #9c86d8 52%, #2f6f7a 80%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-soft) 70%, transparent), 0 0 26px rgba(159, 227, 214, .55), 0 0 60px rgba(156, 134, 216, .35); animation: b-breathe 6s ease-in-out infinite; }
.b-akashi::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold-soft) 50%, transparent); transform: rotate(-24deg) scaleY(.38); }
.b-akashi.on { box-shadow: 0 0 0 2px var(--gold-soft), 0 0 40px rgba(159, 227, 214, .8), 0 0 90px rgba(156, 134, 216, .5); }
@keyframes b-breathe { 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-soft) 70%, transparent), 0 0 36px rgba(159, 227, 214, .7), 0 0 80px rgba(156, 134, 216, .45); } }
@media (prefers-reduced-motion: reduce) { .b-akashi { animation: none; } }
.b-msg { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; color: var(--gold); cursor: pointer; padding: 0; }
.b-msg.on { outline: 2px solid var(--gold); }
.b-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--gold-soft); color: var(--night); font: 700 11px/20px var(--sans); }
.m-panel { position: fixed; right: max(90px, calc(env(safe-area-inset-right) + 90px)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 59; width: min(380px, calc(100vw - 110px)); height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--glass-strong); }
.m-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.m-head b { flex: 1; font-size: 21px; font-weight: 600; }
.m-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: none; color: var(--gold); cursor: pointer; text-decoration: none; font-size: 15px; }
.m-body { overflow: auto; flex: 1; }
.m-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.m-row:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.m-row.new b { color: var(--gold-soft); }
.m-row.pinned { background: linear-gradient(90deg, rgba(156, 134, 216, .16), rgba(159, 227, 214, .08)); }
.m-orb { width: 38px; height: 38px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff 0, #d8f1ff 20%, #9c86d8 55%, #2f6f7a 85%); box-shadow: 0 0 14px rgba(159, 227, 214, .5); }
.m-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-text small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-pin { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; }
.m-when { font-size: 11px; color: var(--faint); align-self: flex-start; white-space: nowrap; }
.m-dot { min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: var(--night); font: 700 10px/18px var(--sans); text-align: center; padding: 0 4px; }
.m-sect { padding: 10px 14px 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.m-quiet { padding: 6px 14px 12px; }
.m-frame { flex: 1; width: 100%; border: 0; background: transparent; color-scheme: dark; }
/* Akashi's space */
.ak-space { position: fixed; inset: 0; z-index: 58; display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  background: radial-gradient(ellipse at 40% 42%, rgba(156, 134, 216, .22), color-mix(in srgb, var(--night) 88%, transparent) 62%), color-mix(in srgb, var(--night) 55%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ak-main { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px clamp(16px, 4vw, 48px) 24px; min-height: 0; }
.ak-bar { align-self: stretch; display: flex; align-items: center; gap: 10px; }
.ak-bar b { flex: 1; font-size: 26px; font-weight: 600; color: var(--gold); }
.ak-orb { width: 140px; height: 140px; flex: none; border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 30%, #fff 0, #d8f1ff 16%, #9c86d8 50%, #2f6f7a 82%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-soft) 60%, transparent), 0 0 60px rgba(159, 227, 214, .55), 0 0 120px rgba(156, 134, 216, .45); animation: b-breathe 7s ease-in-out infinite; }
.ak-orb::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold-soft) 50%, transparent); transform: rotate(-24deg) scaleY(.36); }
.ak-talk { flex: 1; min-height: 0; width: min(760px, 100%); border-radius: 22px; overflow: hidden; display: flex; }
.ak-frame { flex: 1; width: 100%; border: 0; background: transparent; color-scheme: dark; }
.ak-rises { border-left: 1px solid var(--line); padding: 24px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; background: color-mix(in srgb, var(--night) 45%, transparent); }
.ak-thing { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ak-thing img, .ak-ph { width: 52px; height: 52px; border-radius: 10px; flex: none; object-fit: cover; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); }
.ak-thing b { display: block; font-family: var(--serif); font-weight: 600; font-size: 16px; }
.ak-thing small { color: var(--muted); }
body.with-space { overflow: hidden; }
@media (max-width: 860px) { .ak-space { grid-template-columns: 1fr; } .ak-rises { display: none; } .ak-orb { width: 90px; height: 90px; } .m-panel { right: 12px; left: 12px; width: auto; bottom: 150px; height: min(520px, calc(100vh - 220px)); } }

.gear { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--gold); font-size: 18px; cursor: pointer; }
.gear:hover { border-color: var(--gold); }

/* YOUR CHARACTER, in Haven's own glass (2026-10-18): the chart beside the sky now on a desktop; the readings as a dashboard;
   the path as one braid. Stacks on a phone. */
.character { display: flex; flex-direction: column; gap: 18px; }
.ch { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.ch-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ch-head h2 { margin: 0; font-size: 30px; font-weight: 600; color: var(--text); }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ch-rgrid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .ch-grid, .ch-rgrid { grid-template-columns: minmax(0, 1fr); } }
.ch-chart { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--night) 55%, transparent); border: 1px solid var(--line); }
.ch-wheel { width: 100%; max-width: 560px; height: auto; display: block; }
.ch-key { margin: 6px 0 0; font-size: 22px; font-weight: 600; color: var(--text); text-align: center; }
.ch-born { margin: 0; text-align: center; }
.ch-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ch-card { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: color-mix(in srgb, var(--night) 45%, transparent); min-width: 0; }
.ch-card > .label { margin-bottom: 10px; }
.ch-transit { display: flex; gap: 14px; align-items: center; }
.ch-tg { flex: none; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; align-content: center; line-height: 1; color: #f6e9c8; font-size: 22px; background: radial-gradient(circle, color-mix(in srgb, var(--c) 26%, transparent), transparent 72%); border: 1px solid color-mix(in srgb, var(--c) 65%, transparent); }
.ch-tg small { font-size: 13px; color: var(--c); margin: 2px 0; }
.ch-tline { margin: 0 0 4px; font-size: 21px; line-height: 1.2; color: var(--text); }
.ch-transit .meta { margin: 0; }
.ch-her { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(150,120,220,.14), rgba(90,170,170,.08)); border: 1px solid rgba(190,170,255,.22); }
.ch-her p { margin: 0; font-style: italic; font-size: 17px; line-height: 1.35; color: #efe9ff; }
.ch-orb { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9b6ff 40%, #5d8fa8 80%); box-shadow: 0 0 12px rgba(190,170,255,.55); }
.ch-station { display: inline-flex; margin-top: 12px; }
.ch-layer { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; }
.ch-rings { width: 140px; height: 140px; }
.ch-lname { margin: 0; font-size: 21px; font-weight: 600; }
.ch-layer .meta { margin: 2px 0 0; }
.ch-els > div, .ch-ecmp > div { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
.ch-els i, .ch-ecmp i { display: block; height: 6px; border-radius: 999px; }
.ch-els i { background: color-mix(in srgb, var(--text) 8%, transparent); } .ch-els i b { display: block; height: 100%; border-radius: 999px; }
.ch-ecmp > div > div { display: flex; flex-direction: column; gap: 3px; }
.ch-els em, .ch-ecmp em { font-style: normal; text-align: right; color: var(--text); }
.ch-q { margin: 0 0 12px; font-size: 21px; font-style: italic; line-height: 1.3; color: var(--text); }
.ch-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ch-cards figure { margin: 0; min-width: 0; }
.ch-cards img, .ch-blank { display: block; width: 100%; aspect-ratio: 2 / 3.2; object-fit: cover; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); box-shadow: 0 10px 24px rgba(0,0,0,.4); background: var(--panel); }
.ch-cards figcaption b { display: block; margin-top: 6px; font-size: 17px; line-height: 1.15; color: var(--text); }
.ch-cards figcaption small, .ch-fq small { font-size: 11.5px; color: var(--faint); }
.ch-words { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.ch-keeps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .ch-keeps { grid-template-columns: minmax(0, 1fr); } }
.ch-deck { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.ch-fq { display: grid; gap: 3px; margin-bottom: 9px; } .ch-fq b { font-size: 17px; font-weight: 500; color: var(--text); }
.ch-fq i { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); } .ch-fq u { display: block; height: 100%; border-radius: 999px; text-decoration: none; }
.ch-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 700px) { .ch-two { grid-template-columns: minmax(0, 1fr); } }
.ch-moon { display: flex; align-items: flex-end; gap: 4px; height: 104px; }
.ch-moon > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #e8e4ff; font-size: 14px; }
.ch-moon i { display: block; width: 100%; max-width: 18px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #d8d0ff, #5d5a9a); }
.ch-moon small { font-size: 11px; color: var(--faint); }
.ch-card .meta { margin: 8px 0 0; }
.ch-braid { display: block; width: 100%; height: 130px; }
.ch-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ch-course { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--night) 40%, transparent); color: var(--text); text-decoration: none; }
.ch-course:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.ch-course i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-top: 5px; box-shadow: 0 0 10px var(--c); }
.ch-course b { display: block; font-size: 18px; font-weight: 600; } .ch-course small { font-size: 12px; color: var(--faint); }

/* the Mythica, being drawn (2026-10-20): the frieze over the feed, and a moment shown as its comic */
.frieze { margin: 6px 0 22px; }
.fz-lintel { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gold); font: 500 12.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 12px; }
.fz-lintel::before, .fz-lintel::after { content: ""; height: 1px; width: 90px; background: linear-gradient(90deg, transparent, var(--gold)); }
.fz-lintel::after { transform: scaleX(-1); }
.fz-strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.fz-band { display: flex; gap: 14px; width: max-content; padding-block: 4px; animation: fz-drift 160s linear infinite; }
.fz-strip:hover .fz-band, .fz-strip:focus-within .fz-band { animation-play-state: paused; }
@keyframes fz-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fz-band { animation: none; } .fz-strip { overflow-x: auto; } }
.fz-panel { position: relative; flex: none; width: 280px; background: #0b0f20; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); box-shadow: 0 10px 28px -14px #000; text-decoration: none; }
.fz-panel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fz-panel:hover img { transform: scale(1.05); }
.fz-panel > span { position: absolute; inset: auto 0 0 0; padding: 22px 12px 8px; display: flex; gap: 7px; align-items: center; background: linear-gradient(transparent, rgba(6, 8, 20, .92)); color: #f2ecda; font: 500 15px/1.2 var(--serif); }
.glyph { width: 16px; height: 16px; flex: none; color: #ec97ab; }
.spread { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); }
.spread-page { width: 100%; display: block; }
.spread-ribbon { position: absolute; left: 10px; top: 10px; display: inline-flex; gap: 7px; align-items: center; max-width: calc(100% - 20px); padding: 5px 11px 5px 8px; border-radius: 999px; background: rgba(8, 10, 24, .8); border: 1px solid rgba(236, 151, 171, .45); color: #f3c3cf; font-size: 12px; text-decoration: none; }
.spread-ribbon span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spread-inset { position: absolute; right: 10px; bottom: 10px; width: 28%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--gold) 65%, transparent); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
.spread-inset img { width: 100%; height: 100%; object-fit: cover; }

/* Mythica Media — the gallery of the Bard's Hall (2026-10-20) */
.media-room { max-width: 1220px; margin: 0 auto; }
.mg { width: 20px; height: 20px; flex: none; } .mg-film { color: #f0b37a; } .mg-voice { color: #8fb2ea; } .mg-song { color: #74d6cb; } .mg-comic { color: #ec97ab; } .mg-move { color: #c79bf0; }
.m-arch { text-align: center; padding: 26px 0 8px; position: relative; }
.m-arch::before { content: ""; position: absolute; left: 50%; top: 4px; translate: -50% 0; width: min(460px, 90%); height: 110px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-bottom: 0; border-radius: 240px 240px 0 0; pointer-events: none; }
.m-glyphs { display: flex; justify-content: center; gap: 14px; margin: 24px 0 18px; } .m-glyphs .mg { width: 26px; height: 26px; }
.m-eyebrow { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } .m-eyebrow.film { color: #f0b37a; }
.m-arch h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 5vw, 56px); line-height: 1.02; margin: .15em 0 .2em; color: var(--text); }
.m-arch p { max-width: 62ch; margin: 0 auto; color: var(--muted); }
.m-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 16px 0 4px; font-size: 13px; color: var(--muted); }
.m-kinds > span { display: inline-flex; gap: 7px; align-items: center; }
.m-hearth { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: 24px; overflow: hidden; text-decoration: none; color: inherit; }
@media (max-width: 860px) { .m-hearth { grid-template-columns: 1fr; } }
.m-hpic { position: relative; min-height: 300px; background: #000 center / cover; }
.m-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 72px; height: 72px; border-radius: 50%; background: rgba(10, 13, 29, .6); border: 1.5px solid var(--gold); display: grid; place-items: center; }
.m-play::before { content: ""; border-left: 20px solid var(--gold); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.m-hwords { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.m-hwords h2 { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.05; margin: 0; color: var(--text); }
.m-hwords p { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 19px; line-height: 1.45; font-style: italic; }
.m-alcove { margin-top: 36px; }
.m-alcove header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.m-alcove h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; margin: 0; color: var(--gold); }
.m-alcove header span { color: var(--faint); font-size: 13.5px; }
.m-row { display: flex; align-items: stretch; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.m-card { position: relative; flex: none; width: 280px; scroll-snap-align: start; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .25s, border-color .25s; }
.m-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.m-card.comic { width: 240px; } .m-card.comic .m-pic { aspect-ratio: 3 / 2; }
.m-pic { position: relative; aspect-ratio: 16 / 9; background: #111 center / cover; }
.m-pic .mg { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; filter: drop-shadow(0 1px 4px #000); }
.m-t { font-family: var(--serif); font-size: 20px; line-height: 1.15; padding: 10px 14px 2px; color: var(--text); }
.m-w { color: var(--faint); font-size: 12.5px; line-height: 1.45; padding: 0 14px 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-place { position: absolute; right: 8px; top: 8px; max-width: 60%; font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line); background: rgba(8, 10, 24, .82); color: #ece6d6; opacity: 0; transition: opacity .2s; }
.m-card:hover .m-place, .m-place:focus, .m-track:hover .m-place { opacity: 1; }
.m-walls { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; }
@media (max-width: 860px) { .m-walls { grid-template-columns: 1fr; } }
.m-wall { padding: 18px 20px; }
.m-wall h3 { display: flex; gap: 10px; align-items: center; font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0 0 4px; color: var(--gold); }
.m-sub { color: var(--faint); font-size: 13px; margin: 0 0 10px; }
.m-track { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); }
.m-track button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; background: transparent; cursor: pointer; display: grid; place-items: center; color: #8fb2ea; }
.m-wall:last-child .m-track button { color: #74d6cb; }
.m-track button::before { content: ""; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.m-track button.on::before { border: 0; width: 10px; height: 12px; margin: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.m-tt b { font-weight: 500; font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.m-tt small { color: var(--faint); font-size: 12px; }
.m-track .m-place { top: 50%; translate: 0 -50%; }
.m-moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .m-moves { grid-template-columns: 1fr; } }
.m-move { padding: 16px 18px; text-decoration: none; color: inherit; }
.m-move b { font-family: var(--serif); font-weight: 500; font-size: 24px; display: block; line-height: 1.1; margin: 6px 0 4px; color: var(--text); }
.m-move span { font-size: 13px; color: var(--faint); }

/* the cast as faces (2026-10-21): each Character's face and name in a grid, their initials where no face is held yet */
.rd-cast { margin: 1.4em 0 1.6em; }
.rd-cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 14px; margin-top: 12px; }
.rd-cast-one { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--text); text-align: center; min-width: 0; }
.rd-cast-face { width: 96px; height: 96px; border-radius: 50%; background: #1a2140 center / cover no-repeat; border: 1px solid rgba(227, 194, 122, .35); box-shadow: 0 8px 24px -12px #000; transition: transform .25s, border-color .25s; display: grid; place-items: center; font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; letter-spacing: .04em; color: rgba(236, 230, 214, .78); }
.rd-cast-face.none { background: radial-gradient(circle at 35% 30%, #2b3160, #10142a); }
a.rd-cast-one:hover .rd-cast-face, a.rd-cast-one:focus-visible .rd-cast-face { transform: translateY(-2px); border-color: rgba(227, 194, 122, .85); }
.rd-cast-n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; }
.rd-cast-one.unknown .rd-cast-n { opacity: .8; }
@media (max-width: 560px) { .rd-cast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rd-cast-face { width: 76px; height: 76px; font-size: 24px; } }

/* a Character's page — who they are (2026-10-21): the bio in its sections, the parts still to fill, the invite */
.figure { gap: 14px; }
.fig-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fig-top .label { margin-right: auto; }
.fig-bio { padding: 22px 26px; display: grid; gap: 18px; max-width: 78ch; }
.fig-sec h3 { font-family: var(--serif); font-weight: 600; font-size: 21px; color: var(--gold); margin: 0 0 6px; }
.fig-sec p { margin: 0 0 8px; line-height: 1.6; color: var(--text); }
.fig-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fig-field { padding: 14px 16px; min-width: 0; }
.fig-field.empty { opacity: .72; border-style: dashed; }
.fig-fl { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.fig-fv p { margin: 0 0 6px; line-height: 1.5; }
.fig-works { display: flex; flex-wrap: wrap; gap: 6px; }
.fig-edit, .fig-invite { padding: 18px 20px; display: grid; gap: 8px; max-width: 78ch; }
.fig-edit textarea, .fig-edit input, .fig-invite input, .fig-invite select { font: inherit; font-size: 15px; color: var(--text); background: color-mix(in srgb, #000 30%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); border-radius: 10px; padding: 9px 12px; width: 100%; }
.fig-edit-secs { display: grid; gap: 12px; }
.fig-edit-sec { display: grid; gap: 6px; }
.fig-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fig-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 640px) { .fig-row { grid-template-columns: 1fr; } .fig-bio { padding: 16px 18px; } }
.fig-would p { margin: 4px 0; }
.fig-sign { color: var(--muted); margin: 0; }
.figure .quietly { padding: 0; text-align: left; font-size: 16px; margin: 0; }

/* Stars · Self · Soil, a Character's story on three tracks (2026-10-22) */
.sss-host { position: relative; background: #070812; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.profile-songline .sss-host { height: min(560px, 72vh); min-height: 420px; }

/* a picture's movement as the reader reaches it (2026-11-03) */
.rd-fig[data-motion]{overflow:hidden;border-radius:10px}
.rd-fig[data-motion="fade"] img{opacity:0;filter:brightness(.2)}.rd-fig[data-motion="fade"].in-view img{animation:rd-fade 2.2s ease forwards}@keyframes rd-fade{to{opacity:1;filter:brightness(1)}}
.rd-fig[data-motion="reveal"] img{clip-path:inset(50% 50% 50% 50%)}.rd-fig[data-motion="reveal"].in-view img{animation:rd-reveal 1.6s cubic-bezier(.2,.7,.2,1) forwards}@keyframes rd-reveal{to{clip-path:inset(0 0 0 0)}}
.rd-fig[data-motion="drift"].in-view img{animation:rd-drift 14s ease-in-out forwards}@keyframes rd-drift{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}

/* You, on the rail: the menu beneath your face */
#you-menu { position: fixed; z-index: 90; min-width: 230px; padding: .4rem; border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
#you-menu .you-name { font-family: var(--serif, Georgia, serif); font-size: 1.1rem; color: var(--gold); padding: .45rem .65rem .55rem; border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); margin-bottom: .25rem; }
#you-menu .you-head { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; padding: .6rem .65rem .2rem; }
#you-menu .you-item { text-align: left; font: inherit; font-size: .95rem; color: inherit; background: transparent; border: 0; border-radius: 8px; padding: .5rem .65rem; cursor: pointer; }
#you-menu .you-item:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }