/**
 * Cover face — one file for the app, Elementor, blank HTML, and admin preview.
 * Paint at 480px. Type is em. Scale the whole graphic down to the slot.
 * Do not copy these rules into styles.css or inline PHP.
 */

.sr-styled[data-theme="forest"] {
  --board: #2a322a;
  --board-deep: #1c201c;
  --bind: #141814;
  --wrap: #6e3d32;
  --label: #1c201c;
  --foil: #c9a227;
  --accent: #b2563a;
  --type: #f3ead6;
  --muted: rgba(243, 234, 214, .72);
}

.sr-styled[data-theme="russet"] {
  --board: #6e3d32;
  --board-deep: #4a2c26;
  --bind: #2a1c18;
  --wrap: #3e4a3c;
  --label: #2a1c18;
  --foil: #d4b06a;
  --accent: #c9a227;
  --type: #f3ead6;
  --muted: rgba(243, 234, 214, .72);
}

.sr-styled[data-theme="calf"] {
  --board: #3a2418;
  --board-deep: #241610;
  --bind: #16100c;
  --wrap: #4a5848;
  --label: #16100c;
  --foil: #c9a227;
  --accent: #b2563a;
  --type: #ead9c0;
  --muted: rgba(234, 217, 192, .7);
}

.sr-styled[data-theme="ink"] {
  --board: #1b1713;
  --board-deep: #100e0c;
  --bind: #0a0908;
  --wrap: #4a5848;
  --label: #100e0c;
  --foil: #c9a227;
  --accent: #b2563a;
  --type: #ead9c0;
  --muted: rgba(234, 217, 192, .7);
}

.sr-styled[data-theme="navy"] {
  --board: #1e2a3a;
  --board-deep: #15202c;
  --bind: #0e141c;
  --wrap: #8a4a38;
  --label: #0e141c;
  --foil: #c4a86a;
  --accent: #b2563a;
  --type: #f3ead6;
  --muted: rgba(243, 234, 214, .72);
}

.sr-blank,
.sr-cover-paint {
  --sr-cover: 480px;
  --foil: var(--foil, #c9a227);
  --accent: var(--accent, #b2563a);
  --bind: var(--bind, #4a5848);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: var(--sr-cover);
  height: calc(var(--sr-cover) * 3 / 2);
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: calc(var(--sr-cover) / 11);
  color: inherit;
  text-decoration: none;
  transform: scale(var(--sr-scale, calc(100cqw / var(--sr-cover))));
  transform-origin: 0 0;
}

.sr-cover-paint .sr-cover-art,
.sr-cover-paint .sr-open-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.sr-blank {
  display: block;
  color: var(--type);
  background: var(--board-deep);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset;
}

.sr-blank-spine,
.sr-cover-paint::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.3125em;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, var(--foil, #c9a227), var(--accent, #b2563a) 70%, var(--bind, #4a5848));
}

.sr-blank-art,
.sr-cover.is-blank .sr-cover-art,
.sr-open-cover.is-blank .sr-cover-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sr-blank-face,
.sr-cover.is-blank .sr-cover-face,
.sr-open-cover.is-blank .sr-cover-face {
  position: absolute;
  right: 0.85em;
  bottom: 1.05em;
  left: 1.05em;
  z-index: 2;
  padding: 0;
  color: var(--type, var(--cover-ink));
}

.sr-blank.has-info .sr-blank-face,
.sr-blank-slot.has-info .sr-blank-face,
.sr-cover.is-blank:has(.sr-cover-info) .sr-cover-face,
.sr-cover.is-blank:has(.sr-cover-meter) .sr-cover-face,
.sr-cover.is-blank:has(.sr-cover-mark) .sr-cover-face {
  bottom: 3.4em;
  right: 2.6em;
}

.sr-cover:not(.is-blank) .sr-cover-face,
.sr-open-cover:not(.is-blank) .sr-open-face,
.sr-el-face {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.12rem;
  margin: 0;
  padding: 0 0.85rem 0.85rem 1.05rem;
  color: var(--cover-ink, #f4ead8);
  pointer-events: none;
}

.sr-cover:not(.is-blank):has(.sr-cover-info) .sr-cover-face,
.sr-cover:not(.is-blank):has(.sr-cover-meter) .sr-cover-face,
.sr-cover:not(.is-blank):has(.sr-cover-mark) .sr-cover-face,
.sr-el-open.has-info .sr-el-face {
  padding-right: 2.35rem;
  padding-bottom: 2.2rem;
}

.sr-cover:not(.is-blank) .sr-cover-art,
.sr-open-cover:not(.is-blank) .sr-open-art,
.sr-el-open:not(.sr-el-blank) .sr-cover-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.sr-cover-spine,
.sr-el-spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, var(--foil, #c9a227), var(--accent, #b2563a) 70%, var(--bind, #4a5848));
}

.sr-cover-shade,
.sr-open-shade,
.sr-el-shade {
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  bottom: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(16, 11, 8, .55) 42%, rgba(12, 8, 6, .92));
}

.sr-cover.is-blank .sr-cover-shade {
  display: none;
}

.sr-cover-pair {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 0.5em 0.75em 0.35em 1.05em;
  color: var(--muted, var(--cover-mute));
  font-family: "Source Sans 3", "Helvetica Neue", sans-serif;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(8, 5, 3, .5);
  pointer-events: none;
}

.sr-blank-kicker,
.sr-cover-kicker,
.sr-el-kicker {
  display: block;
  margin: 0 0 0.2em;
  color: var(--muted, var(--cover-mute));
  font-family: "Source Sans 3", "Helvetica Neue", sans-serif;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sr-cover:not(.is-blank) .sr-cover-kicker,
.sr-el-kicker {
  margin: 0 0 0.08rem;
  font-size: 0.68rem;
}

.sr-blank-title,
.sr-cover.is-blank .sr-cover-face h2,
.sr-open-cover.is-blank .sr-cover-face h2 {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  font-family: "Fraunces", "Iowan Old Style", Palatino, serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(0.88em * var(--sr-title-scale, 1));
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-align: inherit;
  text-decoration: none;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: none;
}

.sr-cover:not(.is-blank) .sr-cover-face h2,
.sr-el-title,
.sr-open-face h1 {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  font-family: "Fraunces", "Iowan Old Style", Palatino, serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(1.18rem * var(--sr-title-scale, 1));
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-align: left;
  text-decoration: none;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 1px 10px rgba(8, 5, 3, .45);
}

.sr-blank-by,
.sr-cover.is-blank .sr-cover-author,
.sr-open-cover.is-blank .sr-cover-author {
  display: block;
  margin: 0.12em 0 0;
  padding: 0;
  overflow: hidden;
  color: var(--muted, var(--cover-mute));
  font-family: "Fraunces", "Iowan Old Style", Palatino, serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(0.66em * var(--sr-author-scale, 1));
  line-height: 1.15;
  text-decoration: none;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
  max-height: 2.3em;
}

.sr-cover:not(.is-blank) .sr-cover-author,
.sr-el-author,
.sr-open-face p {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--cover-mute, rgba(244, 234, 216, .78));
  font-family: "Fraunces", "Iowan Old Style", Palatino, serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(0.88rem * var(--sr-author-scale, 1));
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-cover:not(.is-blank) .sr-cover-pair {
  font-size: 0.68rem;
  padding: 0.5rem 0.75rem 0.35rem 1.05rem;
  text-shadow: 0 1px 8px rgba(8, 5, 3, .5);
}

.sr-cover.is-blank.sr-styled,
.sr-open-cover.is-blank.sr-styled {
  --cover-ink: var(--type);
  --cover-mute: var(--muted);
  color: var(--type);
  background: var(--board-deep);
}

.sr-styled[data-layout="cloth"],
.sr-styled[data-layout="leaf"],
.sr-styled[data-layout="cloth"] .sr-cover-paint,
.sr-styled[data-layout="leaf"] .sr-cover-paint {
  background:
    radial-gradient(ellipse at 70% 0%, color-mix(in srgb, var(--foil) 18%, transparent), transparent 42%),
    linear-gradient(160deg, var(--board), var(--board-deep) 55%, var(--bind));
}

.sr-styled[data-layout="cloth"] .sr-blank-art,
.sr-styled[data-layout="leaf"] .sr-blank-art,
.sr-styled[data-layout="calf"] .sr-blank-art,
.sr-styled[data-layout="cloth"] .sr-cover-art,
.sr-styled[data-layout="leaf"] .sr-cover-art,
.sr-styled[data-layout="calf"] .sr-cover-art {
  display: none;
}

.sr-styled[data-layout="board"],
.sr-styled[data-layout="label"],
.sr-styled[data-layout="board"] .sr-cover-paint,
.sr-styled[data-layout="label"] .sr-cover-paint {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--board), var(--board-deep));
}

.sr-styled[data-layout="label"] .sr-blank-spine,
.sr-styled[data-layout="label"] .sr-cover-paint::after {
  display: none;
}

.sr-styled[data-layout="board"] .sr-blank-face,
.sr-styled[data-layout="label"] .sr-blank-face,
.sr-styled[data-layout="board"] .sr-cover-face,
.sr-styled[data-layout="label"] .sr-cover-face {
  top: 28%;
  right: calc((100% - 0.3125em) * 0.12);
  bottom: auto;
  left: calc(0.3125em + (100% - 0.3125em) * 0.12);
  padding: 0.85em 0.65em;
  text-align: center;
  background: var(--label);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--foil) 40%, transparent),
    0 0.5em 1.125em rgba(20, 16, 10, .28);
}

.sr-styled[data-layout="stamp"],
.sr-styled[data-layout="stamp"] .sr-cover-paint {
  background:
    radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--foil) 14%, transparent), transparent 46%),
    var(--board-deep);
}

.sr-styled[data-layout="stamp"] .sr-blank-art,
.sr-styled[data-layout="stamp"] .sr-cover-art {
  inset: 0.7em 0.7em 0.7em 0.9em;
  width: auto;
  height: auto;
  display: block;
  border: 1px solid color-mix(in srgb, var(--foil) 42%, transparent);
  box-shadow:
    inset 0 0 0 0.25em var(--board-deep),
    inset 0 0 0 0.3125em color-mix(in srgb, var(--foil) 28%, transparent);
}

.sr-styled[data-layout="stamp"] .sr-blank-face,
.sr-styled[data-layout="stamp"] .sr-cover-face {
  right: 1.3em;
  bottom: 1.45em;
  left: 1.5em;
  text-align: center;
}

.sr-styled[data-layout="quarter"],
.sr-styled[data-layout="quarter"] .sr-cover-paint {
  background: linear-gradient(180deg, var(--board), var(--board-deep));
}

.sr-styled[data-layout="quarter"] .sr-blank-art,
.sr-styled[data-layout="quarter"] .sr-cover-art {
  display: block;
  right: auto;
  width: 27%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 18%, transparent 82%, rgba(0, 0, 0, .18)),
    linear-gradient(180deg, var(--board-deep), var(--bind));
  box-shadow: 0.375em 0 1em rgba(20, 16, 12, .22);
}

.sr-styled[data-layout="quarter"] .sr-blank-face,
.sr-styled[data-layout="quarter"] .sr-cover-face {
  left: calc(27% + 0.28em);
  right: 0.85em;
  padding-left: 0;
}

.sr-styled[data-layout="quarter"] .sr-cover-pair {
  padding-left: calc(27% + 0.28em);
}

.sr-styled[data-layout="calf"],
.sr-styled[data-layout="calf"] .sr-cover-paint {
  background:
    radial-gradient(ellipse at 28% 22%, color-mix(in srgb, var(--foil) 10%, transparent), transparent 36%),
    var(--board);
}

.sr-styled[data-layout="calf"] .sr-blank-face,
.sr-styled[data-layout="calf"] .sr-cover-face {
  right: 1.05em;
  left: 1.1em;
  padding: 0.65em 0.6em 0.7em;
  border: 1px solid color-mix(in srgb, var(--foil) 55%, transparent);
  text-align: center;
}

.sr-styled[data-layout="jacket"],
.sr-styled[data-layout="jacket"] .sr-cover-paint {
  background: var(--board-deep);
}

.sr-styled[data-layout="jacket"] .sr-blank-art,
.sr-styled[data-layout="jacket"] .sr-cover-art {
  display: block;
  top: auto;
  height: 46%;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .08), transparent 50%),
    var(--wrap);
}

.elementor-widget-spreadread-book .sr-el-title {
  font-size: calc(1.18rem * var(--sr-title-scale, 1)) !important;
  line-height: 1.18 !important;
  overflow-wrap: break-word !important;
}

.elementor-widget-spreadread-book .sr-blank-title {
  font-size: calc(0.88em * var(--sr-title-scale, 1)) !important;
  line-height: 1.12 !important;
  overflow-wrap: break-word !important;
}

.elementor-widget-spreadread-book .sr-el-author {
  font-size: calc(0.88rem * var(--sr-author-scale, 1)) !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.elementor-widget-spreadread-book .sr-blank-by {
  font-size: calc(0.66em * var(--sr-author-scale, 1)) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
  max-height: 2.3em;
}

/* Chrome sits on the slot. These win over layout insets so type clears the info button. */
.sr-blank.has-info .sr-blank-face,
.sr-blank-slot.has-info .sr-blank-face,
.sr-cover.is-blank:has(.sr-cover-info) .sr-cover-face,
.sr-cover.is-blank:has(.sr-cover-meter) .sr-cover-face,
.sr-cover.is-blank:has(.sr-cover-mark) .sr-cover-face {
  bottom: 3.4em;
  right: 2.6em;
}

.sr-blank.has-info[data-layout="quarter"] .sr-blank-face,
.sr-blank-slot.has-info [data-layout="quarter"] .sr-blank-face,
.sr-cover.is-blank[data-layout="quarter"]:has(.sr-cover-info) .sr-cover-face,
.sr-cover.is-blank[data-layout="quarter"]:has(.sr-cover-meter) .sr-cover-face,
.sr-cover.is-blank[data-layout="quarter"]:has(.sr-cover-mark) .sr-cover-face {
  right: 0.85em;
}

.sr-blank.has-info[data-layout="stamp"] .sr-blank-face,
.sr-blank-slot.has-info [data-layout="stamp"] .sr-blank-face,
.sr-cover.is-blank[data-layout="stamp"]:has(.sr-cover-info) .sr-cover-face,
.sr-cover.is-blank[data-layout="stamp"]:has(.sr-cover-meter) .sr-cover-face,
.sr-cover.is-blank[data-layout="stamp"]:has(.sr-cover-mark) .sr-cover-face {
  left: 1.5em;
  right: 1.3em;
}

.sr-blank.has-info[data-layout="board"] .sr-blank-face,
.sr-blank.has-info[data-layout="label"] .sr-blank-face,
.sr-blank-slot.has-info [data-layout="board"] .sr-blank-face,
.sr-blank-slot.has-info [data-layout="label"] .sr-blank-face,
.sr-cover.is-blank[data-layout="board"]:has(.sr-cover-info) .sr-cover-face,
.sr-cover.is-blank[data-layout="label"]:has(.sr-cover-info) .sr-cover-face,
.sr-cover.is-blank[data-layout="board"]:has(.sr-cover-meter) .sr-cover-face,
.sr-cover.is-blank[data-layout="label"]:has(.sr-cover-meter) .sr-cover-face,
.sr-cover.is-blank[data-layout="board"]:has(.sr-cover-mark) .sr-cover-face,
.sr-cover.is-blank[data-layout="label"]:has(.sr-cover-mark) .sr-cover-face {
  left: calc(0.3125em + (100% - 0.3125em) * 0.12);
  right: calc((100% - 0.3125em) * 0.12);
}