/* PLUSH EXPLORER — brand tokens, type, marks, frames. GENERATED by tools/build-plushexplorer-brand.mjs from data/brand.json.
   Load https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Cinzel:wght@400;500;600&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&display=swap for the faces. The register is the Society's laboratory: cream and vellum, mahogany, green leather,
   oxblood, brass; the worlds are the only saturated colour and always sit behind glass. */
:root {
  --pe-cream: #f3ead6;
  --pe-cream-deep: #e7d9bb;
  --pe-vellum: #faf4e6;
  --pe-mahogany: #4b2a1b;
  --pe-mahogany-deep: #2f1a11;
  --pe-mahogany-light: #6e4028;
  --pe-green: #1f3d33;
  --pe-green-deep: #13281f;
  --pe-green-light: #2d5547;
  --pe-oxblood: #6e2222;
  --pe-oxblood-light: #8c2f2f;
  --pe-brass: #b8903c;
  --pe-brass-light: #dcbd6a;
  --pe-brass-deep: #7a5a1e;
  --pe-crystal: #cfe9ec;
  --pe-gaslight: #f2c56b;
  --pe-ink: #241c16;
  --pe-ink-soft: #5a4c40;
  --pe-lagoon: #2aa7b8;
  --pe-lagoon-light: #8fe3e8;
  --pe-lagoon-deep: #0f6474;
  --pe-coral: #ef7a5c;
  --pe-violet: #6f58c9;
  --pe-violet-deep: #3b2b73;
  --pe-sun: #f6c457;
  --pe-sand: #e9b968;
  --pe-dusk: #e8864a;
  --pe-night: #1b2140;
  --pe-plate-sky: #dfeef0;
  --pe-plate-moss: #e6ecd6;
  --pe-plate-lilac: #e4dff0;
  --pe-plate-rose: #f1e0dc;
  --pe-plate-sand: #f1e8cf;
  --pe-rule: rgba(36, 28, 22, .18);
  --pe-display: "Playfair Display", Georgia, 'Times New Roman', serif;
  --pe-caps: "Cinzel", Georgia, serif;
  --pe-body: "Crimson Pro", Georgia, serif;
}
/* the name, headings, and the italic Latin names */
.pe-display { font-family: var(--pe-display); font-weight: 500; letter-spacing: 0; line-height: 1.08; }
.pe-latin { font-family: var(--pe-display); font-style: italic; font-weight: 400; }
/* engraved capitals: kickers, nav, buttons, plate numbers — never a sentence */
.pe-caps { font-family: var(--pe-caps); font-weight: 500; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; font-size: .72rem; }
.pe-body { font-family: var(--pe-body); font-weight: 400; line-height: 1.55; }
/* the marks draw in currentColor: set color on the container and the mark follows */
.pe-mark { color: var(--pe-brass); display: inline-block; line-height: 0; }
.pe-mark svg { display: block; width: 100%; height: auto; }
.pe-mark--ink { color: var(--pe-ink); }
.pe-mark--cream { color: var(--pe-cream); }
.pe-favicon { color: var(--pe-mahogany); } .pe-favicon .face { color: var(--pe-cream); }
/* the room's surfaces */
.pe-on-mahogany { background: linear-gradient(180deg, var(--pe-mahogany-light), var(--pe-mahogany) 40%, var(--pe-mahogany-deep)); color: var(--pe-cream); }
.pe-on-green { background: var(--pe-green); color: var(--pe-cream); }
.pe-on-vellum { background: var(--pe-vellum); color: var(--pe-ink); }
.pe-gaslight { background-image: radial-gradient(60% 70% at 72% 40%, rgba(242, 197, 107, .28), transparent 60%); }
/* frames: brass over mahogany, an inner brass rule — the one frame every panel shares */
.pe-frame { border: 1px solid var(--pe-brass-deep); box-shadow: inset 0 0 0 5px var(--pe-mahogany), inset 0 0 0 6px var(--pe-brass); }
.pe-frame--room { border: 3px solid var(--pe-brass); box-shadow: 0 0 0 1px var(--pe-mahogany-deep), 0 0 0 10px var(--pe-mahogany), 0 0 0 11px var(--pe-brass-deep), 0 30px 50px rgba(0, 0, 0, .25); }
/* the crystal dome: a world behind glass. --pe-glow is the world's own colour (brand.json palette.worlds) */
.pe-dome { position: relative; overflow: hidden; border-radius: 50% 50% 6px 6px / 36% 36% 6px 6px; border: 6px solid var(--pe-brass);
  box-shadow: 0 0 0 2px var(--pe-mahogany-deep), 0 0 44px var(--pe-glow, rgba(143, 227, 232, .5)), 0 16px 24px rgba(0, 0, 0, .4); }
.pe-dome::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .35) 0 16%, transparent 22% 62%, rgba(255, 255, 255, .12) 68%, transparent 74%); }
.pe-dome__plinth { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; text-align: center; padding: .55rem .4rem; color: var(--pe-mahogany-deep);
  background: linear-gradient(var(--pe-brass-light), var(--pe-brass) 55%, var(--pe-brass-deep)); border-top: 2px solid var(--pe-mahogany-deep); }
/* the vellum plate: the bestiary's engraved plate */
.pe-plate { background: var(--pe-vellum); border: 1px solid var(--pe-ink); box-shadow: inset 0 0 0 5px var(--pe-vellum), inset 0 0 0 6px var(--pe-brass); }
/* the portrait oval on the wall */
.pe-portrait { border-radius: 50%; border: 6px solid var(--pe-brass); background: radial-gradient(circle at 50% 35%, var(--pe-vellum), var(--pe-cream-deep) 75%);
  box-shadow: 0 0 0 3px var(--pe-mahogany-deep), 0 0 0 5px var(--pe-brass-deep), 0 12px 20px rgba(0, 0, 0, .4); overflow: hidden; }
/* buttons: engraved capitals on leather, a brass inner rule */
.pe-btn { display: inline-block; padding: .75rem 1.5rem; font-family: var(--pe-caps); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--pe-brass); color: var(--pe-cream); background: var(--pe-green); box-shadow: inset 0 0 0 2px var(--pe-green), inset 0 0 0 3px var(--pe-brass-light); }
.pe-btn--oxblood { background: var(--pe-oxblood); box-shadow: inset 0 0 0 2px var(--pe-oxblood), inset 0 0 0 3px var(--pe-brass-light); }
/* the one motion: the dial turns, very slowly — compiled CSS, no JS; reduced motion stops it */
.pe-dial--turning { animation: pe-dial-turn 90s linear infinite; transform-origin: 50% 50%; }
@keyframes pe-dial-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pe-dial--turning { animation: none; } }