/* =========================================================================
   THE RIVER OF MYTH — the channel's own surface.

   This is not the feed restyled. It is our markup, so there is no theme to
   out-specify and nothing to armour against; the rules below are ordinary
   CSS doing ordinary work, which is the whole point of not skinning
   BuddyBoss.

   THE FIELD IS STILL THE GROUND. The skin's standing invariant applies here
   too: frames are translucent and the ground shows through. Ornament is
   density — this is the surface a stranger meets, so it runs at full
   ornament, and nothing is opaque enough to hide the field behind it.
   ========================================================================= */

/* THE PALETTE IS MEASURED, NOT CHOSEN.
   Sampled from the reference boards Peter loves (_incoming/). The gilt in those
   images is far SOFTER than the gold this suite had been using — #907858 rather
   than #c9a227 — an antique, dusty brass rather than a bright metal, and the
   ground is nearly pure black with only a blue lift. Bright gold on near-black
   is the look of a crypto landing page; muted brass on black is a lit
   manuscript, and the difference is almost entirely saturation. */
.mythica-river {
	--riv-gold: #907858;         /* the gilt, at rest */
	--riv-gold-lit: #c8ac84;     /* where light catches it */
	--riv-gold-deep: #6b5540;    /* the shadowed side of an ornament */
	--riv-ink: #e8d8b0;          /* headings — warm, parchment, not white */
	--riv-body: #b0a898;         /* running text */
	--riv-quiet: rgba(176, 168, 152, .62);
	--riv-rule: rgba(144, 120, 88, .32);
	--riv-ground: #04060c;

	position: relative;
	max-width: 780px;
	margin: 0 auto;
	padding: 40px 20px 120px;
	font-family: Cormorant, Georgia, "Times New Roman", serif;
	color: var(--riv-body);
}

/* The ground drifts; the frames scroll over it. Fixed, behind, and untouchable
   — an ambient register that never interferes with a single frame. */
.riv-ground {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(1200px 680px at 18% 6%, rgba(28, 44, 78, .5) 0%, rgba(4, 6, 12, 0) 60%),
		radial-gradient(900px 700px at 86% 74%, rgba(40, 34, 62, .34) 0%, rgba(4, 6, 12, 0) 58%),
		linear-gradient(180deg, #04060c, #000308);
	opacity: 1;
	/* No transform, and no transition on one. A fixed ground that eases into a
	   new position after the page has already moved reads as the browser
	   struggling rather than as depth — see river.js. */
}

/* -- a moment, shaped like a feed post ------------------------------------ */
/*
   IT WAS SHAPED LIKE A MANUSCRIPT AND IT SHOULD BE SHAPED LIKE A FEED.
   The first version gave each moment a hairline rule down its left side, a very
   large serif title and a wide measure — the anatomy of a printed page. That
   reads as an archive of finished pieces. A feed reads as people, now: a face, a
   name, how long ago, what they said, what they showed.

   The palette does not change. Nothing about the Mythica voice is given up here
   — this is the same brass and parchment on the same painted ground. What
   changes is the ANATOMY, because a stranger arriving should recognise the shape
   before they read a word of it, and everyone alive already knows this shape.
   ========================================================================= */

.mythica-river { max-width: 640px; }   /* a feed column, not a page measure */

.riv-frame {
	position: relative;
	z-index: 1;
	margin: 0 0 18px;
	opacity: 1;
	transform: none;
}
.mythica-river.is-live .riv-frame {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.mythica-river.is-live .riv-frame.is-in { opacity: 1; transform: none; }

/* THE CARD. Translucent, so the painted ground still shows through — the
   standing invariant of this whole suite. A feed post, in our own light. */
.riv-inner {
	border: 1px solid var(--riv-rule);
	border-radius: 16px;
	background: rgba(10, 8, 14, .58);
	-webkit-backdrop-filter: blur(12px) saturate(1.1);
	backdrop-filter: blur(12px) saturate(1.1);
	padding: 15px 17px 16px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* -- who, and when -------------------------------------------------------- */
.riv-by { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.riv-face img {
	width: 42px; height: 42px; border-radius: 50%; display: block;
	border: 1px solid var(--riv-rule);
}
.riv-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.riv-who b {
	font-family: inherit; font-weight: 400; font-size: 17.5px;
	color: var(--riv-ink); letter-spacing: .01em;
}
.riv-who time {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(176, 168, 152, .5);
}

/* The title is now a line INSIDE a post, not the head of a page. */
.riv-title {
	font-family: inherit;
	font-weight: 400;
	font-size: clamp(19px, 2.4vw, 24px);
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--riv-ink);
	margin: 0 0 7px;
}

.riv-prose {
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--riv-body);
	margin-bottom: 13px;
}
.riv-prose p { margin: 0 0 .7em; }
.riv-prose p:last-child { margin-bottom: 0; }
.riv-prose a { color: var(--riv-gold-lit); text-decoration: none; border-bottom: 1px solid var(--riv-rule); }
.riv-prose a:hover { border-bottom-color: var(--riv-gold-lit); }

/* -- what the moment carries --------------------------------------------- */

.riv-film { margin: 0 -17px 12px; }
.riv-film .mm-embed { margin: 0; }

.riv-plates { display: grid; gap: 4px; margin: 0 -17px -16px; overflow: hidden;
	border-radius: 0 0 15px 15px; }
.riv-plates--2 { grid-template-columns: 1fr 1fr; }
.riv-plates--3,
.riv-plates--many { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.riv-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The plate is now a button. Strip everything a browser gives a button, or a
   photograph arrives with a grey chrome border around it. */
.riv-open {
	display: block; width: 100%; padding: 0; margin: 0; border: 0;
	background: none; cursor: zoom-in; line-height: 0; border-radius: 0;
	-webkit-appearance: none; appearance: none;
}
.riv-open:focus-visible { outline: 2px solid var(--riv-gold-lit); outline-offset: 3px; }

.riv-plate { margin: 0; overflow: hidden; border-radius: 0; border: 0; }
.riv-plate img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	/* A slow settle as it arrives — the drift, at the scale of one picture. */
	transform: scale(1.04);
	transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}
.riv-frame.is-in .riv-plate img { transform: scale(1); }
.riv-plate img:hover { transform: scale(1.02); }

/* A single plate is the hero; it gets the full width and its own height. */
.riv-plates--1 .riv-plate img { max-height: 78vh; object-fit: cover; background: rgba(0, 0, 0, .35); }

.riv-reading { margin: 4px 0 0; }

.riv-empty {
	font-style: italic;
	color: var(--riv-quiet);
	text-align: center;
	padding: 60px 0;
}

/* -- someone who asked for less motion gets the destination -------------- */
@media (prefers-reduced-motion: reduce) {
	.mythica-river.is-live .riv-frame { opacity: 1; transform: none; transition: none; }
	.riv-ground { transition: none; }
	.riv-plate img { transition: none; transform: none; }
}

@media (max-width: 620px) {
	.mythica-river { padding: 16px 10px 70px; }
	.riv-frame { margin-bottom: 14px; }
	.riv-inner { padding: 13px 14px 14px; border-radius: 14px; }
	.riv-plates { margin: 0 -14px -14px; }
	.riv-film { margin: 0 -14px 11px; }
}

/* A composition sits in the frame at the shape it was drawn at. */
.riv-page { margin: 0 0 18px; }
.riv-page .myth-page-wrap { border-radius: 6px; overflow: hidden; border: 1px solid rgba(144,120,88,.26); }

/* -- AKASHI, PRESENT ------------------------------------------------------ */
/* She is the guide. A guide who only speaks when spoken to, from inside a
   container, is not guiding — so she stands in the column, under the world,
   offering a way in rather than waiting to be found. */
.riv-akashi {
	margin-top: 16px; padding-top: 15px;
	border-top: 1px solid var(--riv-rule);
}
.riv-ak-who { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.riv-ak-orb {
	width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
	display: grid; place-items: center; font-size: 12px; color: #170f05;
	background: radial-gradient(circle at 34% 30%, #f4dcac, #c98a3e 54%, #7d5a2c);
	box-shadow: 0 0 15px rgba(201, 138, 62, .45);
}
.riv-ak-who b {
	font-family: "Avenir Next", system-ui, sans-serif; font-weight: 600;
	font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--riv-gold-lit);
}
.riv-ak-say { font-size: 15px; line-height: 1.55; font-style: italic;
	color: var(--riv-body); margin: 0 0 11px; }
.riv-ak-form { display: flex; gap: 6px; }
.riv-ak-form input {
	flex: 1; min-width: 0; background: rgba(4, 6, 12, .66);
	border: 1px solid var(--riv-rule); border-radius: 999px;
	padding: 8px 13px; color: var(--riv-ink);
	font-family: inherit; font-size: 14.5px; outline: none;
}
.riv-ak-form input:focus { border-color: var(--riv-gold-lit); }
.riv-ak-form button {
	border: 0; border-radius: 999px; background: var(--riv-gold);
	color: #12100a; font-family: "Avenir Next", system-ui, sans-serif;
	font-weight: 600; font-size: 11.5px; padding: 0 14px; cursor: pointer;
}
.riv-ak-form button:hover { background: var(--riv-gold-lit); }

/* -- the painted ground -------------------------------------------------- */
/* The kit's landscape sits under the sky. A SCRIM over it, because a beautiful
   background is still a background: unveiled, that nebula competes with the
   prose and the reading becomes work. The picture carries the mood; the scrim
   makes it possible to read on. */
.riv-ground[data-ground]::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(4,6,12,.62) 0%, rgba(4,6,12,.80) 55%, rgba(0,3,8,.93) 100%);
}
@media (max-width: 620px) {
	/* the small plate on a small screen — the big one is 236KB of detail nobody
	   can see at 375px wide */
	.riv-ground[data-ground] { background-image: var(--riv-ground-img-sm, none) !important; }
}

/* -- the gilt ------------------------------------------------------------ */
/* Opt-in per River (`[mythica_river frame="gilt"]`). Painted art wears it well;
   a photograph usually does not, which is exactly why this is a switch. */
.riv-gilt .riv-plate {
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: none;
}
.riv-gilt .riv-plate .riv-open {
	border-style: solid;
	border-width: 34px 44px 41px 43px;
	border-image: var(--riv-frame-gilt) 67 87 82 86 fill stretch;
	background-clip: padding-box;
}
.riv-gilt .riv-plate img { border-radius: 0; }
@media (max-width: 620px) {
	.riv-gilt .riv-plate .riv-open { border-width: 20px 26px 24px 25px; }
}

/* =========================================================================
   THE WORLD COLUMN — what you are looking at, beside what you are looking at.

   The sidebars this replaces were membership utility. To a stranger they are a
   list of things they cannot do; this is the world itself, assembling as they
   scroll. Nobody is taught a cosmology — by the fifth moment they have one.

   ON A PHONE it becomes part of the post instead of a column, because a
   sidebar on a 375px screen is just a thing below the thing.
   ========================================================================= */

@media (min-width: 1080px) {
	/* The river column stays a feed measure; the world sits beside it. */
	/* THE FEED IS CENTRED, and the world sits beside it.
	   A two-column grid pushes the reading column left and the page reads as
	   off-balance — the eye centres on the whole grid, not on the thing being
	   read. So there are THREE columns and the first is empty: the feed lands in
	   the middle of the viewport, and the world occupies the right gutter that
	   was going to exist either way. */
	.mythica-river { max-width: 1280px; }
	.mythica-river.has-world {
		display: grid;
		grid-template-columns: 1fr 640px 1fr;
		column-gap: 28px;
		align-items: start;
	}
	.mythica-river.has-world .riv-frame { grid-column: 2; }

	/* Every world panel occupies the SAME cell, stacked; only the one whose
	   moment is in view is shown. One sticky pane, not a column of panes —
	   a column of them would just be a second feed. */
	.mythica-river.has-world .riv-world {
		grid-column: 3;
		max-width: 340px;
		grid-row: 1 / -1;
		position: sticky;
		top: 90px;
		align-self: start;
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
		pointer-events: none;
	}
	.mythica-river.has-world .riv-world.is-here {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}
}

/* Below that width it rides inside the moment it belongs to. */
@media (max-width: 1079px) {
	.riv-world {
		margin: -4px 0 18px;
		border: 1px solid var(--riv-rule);
		border-radius: 14px;
		padding: 14px 15px;
		background: rgba(10, 8, 14, .5);
	}
}

.riv-world { font-size: 14.5px; color: var(--riv-body); }
.riv-globe { display: flex; justify-content: center; margin-bottom: 12px; }
.riv-globe svg { width: 132px; height: 132px; }

.riv-ask {
	font-size: 17px; line-height: 1.4; font-style: italic;
	color: var(--riv-ink); margin: 0 0 14px; text-align: center;
}

.riv-chronos {
	display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
	margin: 0 0 16px; padding-bottom: 14px;
	border-bottom: 1px solid var(--riv-rule);
}
.riv-chronos dt {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(176, 168, 152, .5); align-self: center;
}
.riv-chronos dd { margin: 0; color: var(--riv-ink); font-size: 15.5px; }

.riv-drawn h4 {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--riv-gold); font-weight: 600; margin: 0 0 10px;
}
.riv-card { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; }
.riv-card-art {
	flex: 0 0 46px; width: 46px; height: 62px; border-radius: 5px;
	background-size: cover; background-position: center;
	border: 1px solid var(--riv-rule);
}
.riv-card-t { display: flex; flex-direction: column; min-width: 0; }
.riv-card-t b {
	font-weight: 400; font-size: 16px; color: var(--riv-ink); line-height: 1.2;
}
.riv-card-t em {
	font-style: italic; font-size: 13px; line-height: 1.45;
	color: rgba(176, 168, 152, .62); margin-top: 3px;
}