/* ── The cover ──
   How a Rowen Hollow cover is laid out: the questionnaire's live preview and
   the parlor's little book both draw it, so the rules live here once. Every
   size is in em off the cover's own font-size, so the same rules work at any
   width. The sizing of each page's cover (and anything tied to where it sits)
   stays with that page. Linked before styles.css, where these rules used to
   sit, so the cascade on the questionnaire is unchanged. */
/* Stacking, explicitly. The ground div comes after the canvas in the DOM, so
   without this it paints straight over the wash and the artwork never shows. */
.cv .bgc { position: absolute; inset: 0; z-index: 0; }
.cv .cv-wash { position: absolute; left: 0; top: 0; width: 100%; height: 64%; z-index: 1; }
.cv .shapes { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.cv .shapes i { position: absolute; display: block; }
.cv > *:not(.cv-wash):not(.bgc):not(.shapes) { position: relative; z-index: 2; }

.cv .mk {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.62em; font-weight: 500; letter-spacing: 0.15em;
  text-transform: lowercase; padding: 7% 8% 0;
}
.cv .mid {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 2% 8%;
}
.cv .mid svg { width: 52%; height: auto; }
.cv .ft { padding: 0 8% 9%; text-align: center; }
.cv .t-serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300; font-style: normal; letter-spacing: 0.16em;
  text-transform: uppercase; font-size: 1.15em; line-height: 1.2; margin: 0;
}
.cv .t-huge {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600; font-style: normal; letter-spacing: -0.01em;
  text-transform: uppercase; font-size: 3.1em; line-height: 0.86; margin: 0;
  transform: scaleX(0.82); transform-origin: center;
}
.cv .t-sans {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800; font-style: normal; letter-spacing: -0.02em;
  font-size: 1.7em; line-height: 1.02; margin: 0; text-align: left;
}
.cv .byl {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.5em; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; margin: 0.7em 0 0; opacity: 0.7;
}
.cv .rule { height: 1px; width: 38%; margin: 0.8em auto; opacity: 0.5; }

/* "Mystery Title: Coming Soon" is a stand-in, so it sits lighter and smaller
   than a title someone actually picked - and never at the huge display size,
   which would make a placeholder the loudest thing on the cover. */
.cv .is-tbc { opacity: 0.55; font-style: italic; letter-spacing: 0.1em; }
.cv .t-huge.is-tbc { font-size: 1.5em; line-height: 1.15; transform: none; }
.cv .t-sans.is-tbc { font-size: 1.05em; }
.cv.quiet .t-serif.is-tbc { font-size: 0.66em; letter-spacing: 0.18em; }

/* Colour cannot separate the four vibes - each palette is four shades of one
   hue - so the layouts carry it, each pushed to its own extreme. */
.cv.flip .ft  { order: 1; padding-top: 14%; }
.cv.flip .mid { order: 2; align-items: flex-end; padding-bottom: 9%; }
.cv.flip .mk  { order: 0; }

.cv.quiet .mid svg { width: 26%; opacity: 0.62; }
.cv.quiet .t-serif { font-size: 0.74em; letter-spacing: 0.34em; }
.cv.quiet .byl     { font-size: 0.42em; opacity: 0.5; }
.cv.quiet .rule    { width: 16%; }
.cv.quiet .mk      { opacity: 0.45; }

.cv.painted .mid     { padding: 0; align-items: center; }
.cv.painted .mid svg { width: 40%; opacity: 0.9; }
.cv.painted .t-serif { font-size: 1.3em; letter-spacing: 0.2em; }

.cv.bold .mid { display: none; }
.cv.bold .ft  { padding: 0 6% 8%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }

.cv.play .mid { display: none; }
.cv.play .ft  { padding: 0 8% 10%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }