/* =========================================================================
   MYTHICA READER — the written record, as a place to read.

   Scoped entirely under `.mr`, because this runs inside whatever page the
   shortcode was dropped on: no bare element selectors, nothing on :root, and
   no variable names that could collide with the skin, the lens or the River.
   That collision has already cost this suite one afternoon.
   ========================================================================= */

.mr{
	--mr-gold:#e8c47a; --mr-gold2:#f2d79a; --mr-gold-deep:#9d7f4a;
	--mr-ink:#eef2ff; --mr-dim:#b9c6ee; --mr-quiet:rgba(185,198,238,.55);
	--mr-edge:rgba(232,196,122,.26); --mr-net:rgba(140,170,235,.16);
	--mr-glass:rgba(12,15,34,.52); --mr-glass2:rgba(12,15,34,.7);
	--mr-serif:Cormorant,"Cormorant Garamond",Georgia,serif;
	--mr-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
	position:relative;
	font-family:var(--mr-serif);
	color:var(--mr-ink);
}
.mr *{box-sizing:border-box}

/* -- the ground ---------------------------------------------------------- */
/* ONE FIELD PER PAGE.
 *
 * Five surfaces in this suite paint a full-page ground and every one invented
 * its own way to do it — the skin on `body::before`, the River on `.riv-ground`,
 * the timeline on `.myth-arc-world`, the natal chart in its own square, and now
 * this. They have already collided once: the timeline and the skin both used
 * `body::before`, the skin's two-class selector won, and the timeline's grounds
 * silently disappeared.
 *
 * So this one does not compete. Two rules:
 *
 *   1. It reads `--mysk-field` first. Where the skin is present, a member who
 *      has attuned to Water gets a Water ground here too, for free, because the
 *      ground is the skin's variable and not a copy of it.
 *   2. Where the skin is actually ON, it does not paint AT ALL — the skin is
 *      already painting the same field behind everything, and two translucent
 *      fields stacked is just a darker one nobody chose.
 *
 * The fallback below is for a site with no skin: this must still look like
 * itself standing alone.
 */
.mr-field{
	position:fixed;inset:0;z-index:0;pointer-events:none;
	background:var(--mysk-field,
		radial-gradient(1300px 760px at 16% 4%, rgba(34,52,92,.5), rgba(3,5,12,0) 62%),
		radial-gradient(1000px 780px at 88% 66%, rgba(48,38,74,.38), rgba(3,5,12,0) 58%),
		radial-gradient(700px 500px at 62% 108%, rgba(24,58,66,.3), rgba(3,5,12,0) 60%),
		linear-gradient(180deg,#050810,#02030a));
	background-size:cover;background-position:center;
}
/* the skin already has this page's ground */
body.mythica-skin-on .mr-field{display:none}

/* A GROUND CHOSEN FOR THIS PAGE beats both — set it with the
   `mythica_reader_ground` filter and it shows even under the skin, because at
   that point somebody has deliberately said what this page stands on. It gets a
   scrim, since a beautiful background is still a background and the writing has
   to stay readable over it. */
.mr-field.has-art{display:block!important;background-size:cover;background-position:center}
.mr-field.has-art::before{content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(4,6,14,.66) 0%,rgba(4,6,14,.8) 55%,rgba(1,3,8,.93) 100%)}

.mr-field::after{
	content:"";position:absolute;inset:-10%;
	background-image:
		radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),
		radial-gradient(1.1px 1.1px at 34% 68%,#cfe0ff,transparent),
		radial-gradient(1.6px 1.6px at 72% 32%,#fff,transparent),
		radial-gradient(1.2px 1.2px at 86% 74%,#fff,transparent),
		radial-gradient(1.2px 1.2px at 48% 88%,#fff,transparent),
		radial-gradient(1px 1px at 62% 12%,#fff,transparent),
		radial-gradient(1.3px 1.3px at 24% 52%,#fff,transparent);
	animation:mr-drift 140s linear infinite;
}
/* stars over a photograph is one texture too many */
.mr-field.has-art::after{display:none}
@keyframes mr-drift{to{transform:translate3d(-2.5%,-2%,0)}}
@media (prefers-reduced-motion:reduce){.mr-field::after{animation:none}}

.mr-wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:26px 4px 90px}

/* -- the head ------------------------------------------------------------ */
.mr-mark{font-size:13px;color:var(--mr-gold);letter-spacing:.3em;opacity:.75}
.mr-title{font-size:clamp(32px,4.4vw,52px);font-weight:400;letter-spacing:.012em;
	color:var(--mr-gold);margin:6px 0 3px;line-height:1.05;font-family:var(--mr-serif)}
.mr-sub{font-family:var(--mr-ui);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
	color:var(--mr-quiet);margin-bottom:20px}

/* THE CURRENT — a scroller with momentum, not a carousel with dots. A slider
   hides most of its content behind a control nobody presses; a row you can push
   shows there is more BY being more. */
.mr-current{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
	padding:2px 2px 12px;margin-bottom:6px;
	scrollbar-width:thin;scrollbar-color:rgba(232,196,122,.35) transparent}
.mr-plate{flex:0 0 clamp(260px,31vw,420px);scroll-snap-align:start;aspect-ratio:16/9;
	border-radius:15px;overflow:hidden;position:relative;border:1px solid var(--mr-edge);
	background-size:cover;background-position:center;text-decoration:none;display:block;
	box-shadow:0 16px 44px rgba(0,0,0,.45);
	transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.mr-plate:hover{transform:translateY(-3px)}
.mr-plate-cap{position:absolute;inset:auto 0 0 0;padding:32px 15px 13px;font-size:19px;
	color:var(--mr-gold2);line-height:1.2;
	background:linear-gradient(180deg,rgba(3,5,12,0),rgba(3,5,12,.9))}
.mr-plate-cap em{display:block;font-style:normal;font-family:var(--mr-ui);font-size:9.5px;
	letter-spacing:.2em;text-transform:uppercase;color:var(--mr-quiet);margin-bottom:3px}

.mr-cats{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 26px}
.mr-cat{font-family:var(--mr-ui);font-size:11.5px;letter-spacing:.05em;padding:6px 13px;
	border-radius:999px;text-decoration:none;color:var(--mr-dim);
	background:rgba(140,170,235,.07);border:1px solid var(--mr-net);
	transition:color .2s,border-color .2s,background .2s}
.mr-cat:hover{color:var(--mr-gold2);border-color:var(--mr-edge)}
.mr-cat.is-on{background:var(--mr-gold);color:#0e0b16;border-color:var(--mr-gold);font-weight:600}
.mr-cat i{font-style:normal;opacity:.55;margin-left:5px;font-size:10px}

/* -- the two channels ---------------------------------------------------- */
.mr-body{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
@media (max-width:940px){.mr-body{grid-template-columns:1fr}}

.mr-laneh{display:flex;align-items:baseline;gap:10px;margin:0 0 15px}
.mr-laneh b{font-family:var(--mr-ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
	color:var(--mr-gold);font-weight:600}
.mr-laneh span{font-size:14px;color:var(--mr-quiet)}

.mr-post{border:1px solid var(--mr-edge);border-radius:16px;overflow:hidden;
	background:var(--mr-glass);
	-webkit-backdrop-filter:blur(13px) saturate(1.14);backdrop-filter:blur(13px) saturate(1.14);
	margin-bottom:20px;position:relative;
	box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
	transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .3s,opacity .3s}
.mr-post.is-lead{display:grid;grid-template-columns:1.02fr .98fr}
@media (max-width:700px){.mr-post.is-lead{grid-template-columns:1fr}}
.mr-art{min-height:290px;background-size:cover;background-position:center;display:block}
.mr-in{padding:22px 25px}
.mr-post h2{font-size:clamp(21px,2.2vw,30px);font-weight:400;line-height:1.14;margin:0 0 9px;
	font-family:var(--mr-serif)}
.mr-post h2 a{color:var(--mr-gold2);text-decoration:none}
.mr-post h2 a:hover{color:var(--mr-gold)}
.mr-post p{font-size:16px;line-height:1.63;color:var(--mr-dim);margin:0 0 13px}
.mr-meta{font-family:var(--mr-ui);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
	color:rgba(185,198,238,.45)}
.mr-meta em{font-style:normal;color:var(--mr-gold-deep)}

/* the terms a piece declares — the weave, named */
.mr-terms{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px}
.mr-term{font-family:var(--mr-ui);font-size:10.5px;letter-spacing:.04em;padding:3px 9px;
	border-radius:999px;text-decoration:none;color:var(--mr-dim);
	background:rgba(140,170,235,.09);border:1px solid var(--mr-net);transition:all .2s}
.mr-term:hover{color:var(--mr-gold2);border-color:var(--mr-edge)}
/* each kind carries its own light, so the eye learns them without a legend */
.mr-term.is-figure{color:#e8c47a;border-color:rgba(232,196,122,.3);background:rgba(232,196,122,.08)}
.mr-term.is-place{color:#9fd6c8;border-color:rgba(159,214,200,.28);background:rgba(159,214,200,.07)}
.mr-term.is-aka{color:#c8b4ea;border-color:rgba(200,180,234,.28);background:rgba(200,180,234,.07)}
.mr-term.is-arc{color:#e8a26a;border-color:rgba(232,162,106,.28);background:rgba(232,162,106,.07)}

/* -- THE WEAVE: hover one, light its kin ---------------------------------- */
.mr.is-weaving .mr-post:not(.is-lit){opacity:.3}
.mr.is-weaving .mr-plateM:not(.is-lit){opacity:.26}
.mr-post.is-lit{border-color:rgba(232,196,122,.72);transform:translateY(-2px);
	box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 0 1px rgba(232,196,122,.32),
		inset 0 1px 0 rgba(255,255,255,.09)}
.mr-plateM.is-lit{border-color:rgba(232,196,122,.85);box-shadow:0 0 22px rgba(232,196,122,.3)}
.mr-tie{position:absolute;top:11px;right:13px;font-family:var(--mr-ui);font-size:9.5px;
	letter-spacing:.16em;text-transform:uppercase;color:var(--mr-gold);opacity:0;
	transition:opacity .3s;pointer-events:none;z-index:2}
.mr-post.is-lit .mr-tie{opacity:.9}

/* -- the seen ------------------------------------------------------------ */
.mr-col{display:flex;flex-direction:column;gap:12px}
.mr-plateM{border-radius:12px;overflow:hidden;border:1px solid var(--mr-edge);position:relative;
	background-size:cover;background-position:center;background-color:#080c18;
	display:block;width:100%;padding:0;cursor:pointer;text-decoration:none;
	transition:opacity .3s,box-shadow .3s,border-color .3s}
.mr-cap{position:absolute;inset:auto 0 0 0;padding:24px 11px 9px;font-size:13.5px;
	font-family:var(--mr-serif);color:rgba(242,215,154,.92);text-align:left;
	background:linear-gradient(180deg,rgba(3,5,12,0),rgba(3,5,12,.88))}
/* a film says so before it is clicked */
.mr-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:46px;height:46px;border-radius:50%;background:rgba(232,196,122,.92);
	box-shadow:0 4px 18px rgba(0,0,0,.5)}
.mr-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
	border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #12100a}
.mr-plateM.is-film:hover .mr-play{background:#f2d79a}

/* -- Akashi -------------------------------------------------------------- */
.mr-akashi{border:1px solid var(--mr-edge);border-radius:16px;background:var(--mr-glass2);
	-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
	padding:18px 19px;margin-bottom:20px;
	box-shadow:0 18px 46px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07)}
.mr-who{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.mr-orb{width:26px;height:26px;border-radius:50%;flex:0 0 26px;display:grid;place-items:center;
	font-size:12px;color:#120d05;
	background:radial-gradient(circle at 34% 30%,#fbe6b6,#e8c47a 52%,#9d7f4a);
	box-shadow:0 0 16px rgba(232,196,122,.5)}
.mr-who b{font-family:var(--mr-ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
	color:var(--mr-gold);font-weight:600}
.mr-said{font-size:15.5px;line-height:1.6;margin:0 0 13px;font-style:italic;color:var(--mr-ink)}
.mr-thread{display:block;font-family:var(--mr-serif);font-size:14.5px;text-decoration:none;
	color:var(--mr-gold2);background:rgba(232,196,122,.07);
	border:1px solid rgba(232,196,122,.22);border-radius:10px;padding:9px 12px;margin-bottom:7px;
	transition:background .2s,transform .2s}
.mr-thread:hover{background:rgba(232,196,122,.15);transform:translateX(2px)}
.mr-thread small{display:block;font-family:var(--mr-ui);font-size:9.5px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--mr-quiet);margin-top:3px}
.mr-ask{display:flex;gap:7px;margin-top:11px}
.mr-ask input{flex:1;min-width:0;background:rgba(6,9,20,.7);border:1px solid var(--mr-net);
	border-radius:999px;padding:9px 14px;color:var(--mr-ink);
	font-family:var(--mr-serif);font-size:14.5px;outline:none}
.mr-ask input:focus{border-color:var(--mr-edge)}
.mr-ask button{border-radius:999px;border:0;background:var(--mr-gold);color:#0e0b16;
	font-family:var(--mr-ui);font-weight:600;font-size:12px;padding:0 15px;cursor:pointer}

.mr-empty{font-style:italic;color:var(--mr-quiet);padding:30px 0}
.mr-more{display:flex;align-items:center;gap:18px;padding:14px 2px 0;
	font-family:var(--mr-ui);font-size:12px;letter-spacing:.08em}
.mr-more a{color:var(--mr-gold2);text-decoration:none}
.mr-more span{color:var(--mr-quiet)}

/* -- the film lightbox --------------------------------------------------- */
/* Only used when mythica-media's own lightbox is absent — see reader.js. One
   viewer is better than two, so this is the fallback, not the default. */
.mr-lb{position:fixed;inset:0;z-index:99999;background:rgba(3,5,12,.94);
	display:flex;align-items:center;justify-content:center;padding:24px}
.mr-lb-in{width:min(1100px,94vw);aspect-ratio:16/9;position:relative}
.mr-lb-in iframe,.mr-lb-in video{width:100%;height:100%;border:0;border-radius:12px;
	background:#000;display:block}
.mr-lb-x{position:absolute;top:-42px;right:0;background:none;border:0;color:var(--mr-gold);
	font-size:26px;cursor:pointer;line-height:1}