/* ==================================================== a designed cover
   The front of a binder as its owner designed it in the Cover Studio
   (web/js/cover-design.js coverFace): binder.css draws the board and the
   classic cover; this is everything a design adds or changes. Every place is
   a percentage of the board and every size comes from its --cover-w /
   --cover-h, so the binder's own page, a shelf tile, Home and the Studio's
   preview all show the same cover, only bigger or smaller. */

.bcover.is-designed { --cd-ink: var(--cover-accent, #d8b160); overflow: visible; }
/* the grain is the leatherette's; any other material brings its own texture */
.bcover.is-designed:not([data-material="leatherette"]) { --grain: none; }
.bcover.is-designed > :is(.cd-tone, .cd-material, .cd-pattern, .cd-img.is-fill) {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
}

/* ---- the second colour */
.cd-tone.is-gradient { background: linear-gradient(165deg, transparent 8%, var(--cd-tone2) 100%); }
.cd-tone.is-split { background: linear-gradient(128deg, transparent 49.6%, var(--cd-tone2) 50.4%); }
.cd-tone.is-band {
  background:
    linear-gradient(90deg, var(--cd-tone2) 0 24%, color-mix(in srgb, var(--cover-accent, #d8b160) 80%, #000) 24% calc(24% + 2px), transparent calc(24% + 2px)),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 22%);
}
.cd-tone.is-glow { background: radial-gradient(70% 55% at 50% 42%, var(--cd-tone2), transparent 72%); }

/* ---- materials: a texture laid over the colour */
.cd-material.is-linen {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px);
}
.cd-material.is-canvas {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, rgba(255,255,255,.04) 2px 4px, transparent 4px 5px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 2px, rgba(255,255,255,.05) 2px 4px, transparent 4px 5px);
}
.cd-material.is-carbon {
  background:
    linear-gradient(27deg, rgba(0,0,0,.34) 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, rgba(0,0,0,.34) 5px, transparent 5px) 10px 0,
    linear-gradient(27deg, rgba(255,255,255,.07) 5px, transparent 5px) 0 10px,
    linear-gradient(207deg, rgba(255,255,255,.07) 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, rgba(0,0,0,.2) 10px, transparent 10px),
    linear-gradient(rgba(0,0,0,.24) 25%, rgba(0,0,0,.18) 25%, rgba(0,0,0,.18) 50%, transparent 50%, transparent 75%, rgba(255,255,255,.03) 75%);
  background-size: 20px 20px;
}
.cd-material.is-quilted {
  --q: calc(var(--cover-w, 420px) * .11);
  background:
    repeating-linear-gradient(45deg, transparent 0 calc(var(--q) - 2px), rgba(0,0,0,.32) calc(var(--q) - 2px) calc(var(--q) - 1px), rgba(255,255,255,.14) calc(var(--q) - 1px) var(--q)),
    repeating-linear-gradient(-45deg, transparent 0 calc(var(--q) - 2px), rgba(0,0,0,.32) calc(var(--q) - 2px) calc(var(--q) - 1px), rgba(255,255,255,.14) calc(var(--q) - 1px) var(--q));
}
.cd-material.is-croc {
  background:
    radial-gradient(ellipse 46% 40% at 50% 50%, rgba(255,255,255,.1), rgba(0,0,0,.28) 92%, rgba(0,0,0,.45) 100%);
  background-size: 15px 11px;
}
.cd-material.is-velvet {
  background:
    radial-gradient(90% 70% at 28% 18%, rgba(255,255,255,.2), transparent 60%),
    radial-gradient(70% 60% at 80% 100%, rgba(0,0,0,.35), transparent 70%),
    repeating-linear-gradient(100deg, rgba(255,255,255,.025) 0 1px, transparent 1px 2px);
}
.cd-material.is-denim {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.08), rgba(0,0,0,.18));
}
.cd-material.is-wood {
  background:
    repeating-radial-gradient(ellipse 140% 34% at 18% -30%, rgba(0,0,0,.16) 0 2px, transparent 2px 7px, rgba(255,255,255,.05) 7px 8px, transparent 8px 13px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 9px);
}

.cd-pattern { background-repeat: repeat; }

/* ---- pictures on the cover */
.cd-img {
  position: absolute; z-index: 1; pointer-events: none;
  aspect-ratio: var(--cd-ratio, 1);
  transform: translate(-50%, -50%) rotate(var(--cd-rot, 0deg));
}
.cd-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cd-img.is-fill { transform: none; aspect-ratio: auto; }
.cd-img.is-fill > img { border-radius: inherit; }
.cd-img.is-rect > img { border-radius: 2px; }
.cd-img.is-rounded > img { border-radius: calc(var(--cover-w, 420px) * .035); }
.cd-img.is-circle > img { border-radius: 50%; }
.cd-img.is-arch > img { border-radius: 50% 50% 6% 6% / 34% 34% 4% 4%; }
.cd-img.is-polaroid {
  padding: 5% 5% 18%; background: #f6f3ec; border-radius: 2px;
  aspect-ratio: auto;
}
.cd-img.is-polaroid > img { height: auto; aspect-ratio: var(--cd-ratio, 1); }
.cd-img.is-stamp {
  padding: 4.5%; aspect-ratio: auto;
  background: radial-gradient(circle at 50% 50%, #f4efe4 58%, transparent 61%) 0 0 / 9% 9% repeat, #f4efe4;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 38%, #000 41%) 0 0 / calc(100% / 11) calc(100% / 11) round;
  mask: radial-gradient(circle at 50% 50%, transparent 38%, #000 41%) 0 0 / calc(100% / 11) calc(100% / 11) round;
}
.cd-img.is-stamp > img { height: auto; aspect-ratio: var(--cd-ratio, 1); }
.cd-img.has-shadow { filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }

/* ---- edging */
.cd-edge {
  position: absolute; z-index: 2; pointer-events: none;
  --cd-e: var(--cd-edge, color-mix(in srgb, var(--cover-accent, #d8b160) 70%, #fff));
  border-radius: calc(var(--radius-lg) - 2px);
}
.cd-edge.is-stitch { inset: 3.2% 3.2% 3.2% 5.5%; border: 1.5px dashed var(--cd-e); opacity: .8; }
.cd-edge.is-double {
  inset: 3% 3% 3% 5.5%; border: 1.5px dashed var(--cd-e); opacity: .8;
  outline: 1.5px dashed var(--cd-e); outline-offset: calc(var(--cover-w, 420px) * -.018);
}
.cd-edge.is-piping {
  inset: 1.4% 1.4% 1.4% 4%;
  border: calc(var(--cover-w, 420px) * .013) solid var(--cd-edge, color-mix(in srgb, var(--cover, #2f6f4f) 62%, #000));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.25), 0 1px 2px rgba(255,255,255,.18), inset 0 -2px 3px rgba(0,0,0,.35);
  border-radius: calc(var(--radius-lg) - 1px);
}
.cd-edge.is-gilt {
  inset: 4.2% 4.2% 4.2% 6.5%; border: 1px solid var(--cd-e); opacity: .9;
  outline: 1px solid color-mix(in srgb, var(--cd-e) 70%, transparent); outline-offset: calc(var(--cover-w, 420px) * -.016);
}

/* ---- corners */
.bcover.is-designed .cover-corner { z-index: 3; }
.bcover[data-corners="rounded"] .cover-corner { clip-path: none; width: clamp(12px, calc(var(--cover-w, 420px) * .08), 40px); }
.bcover[data-corners="rounded"] .cover-corner.is-top { border-bottom-left-radius: 100%; }
.bcover[data-corners="rounded"] .cover-corner.is-bot { border-top-left-radius: 100%; }
.bcover[data-corners="leather"] .cover-corner {
  width: clamp(16px, calc(var(--cover-w, 420px) * .12), 54px); opacity: 1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cover, #2f6f4f) 50%, #000), color-mix(in srgb, var(--cover, #2f6f4f) 30%, #000));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.bcover[data-corners="filigree"] .cover-corner {
  width: clamp(18px, calc(var(--cover-w, 420px) * .15), 64px); clip-path: none; opacity: .95;
  background: none;
  border: 2px solid var(--cover-accent, #d8b160);
  border-left: 0; border-bottom: 0;
  margin: calc(var(--cover-w, 420px) * .022);
  box-shadow: inset -3px 3px 0 -1px color-mix(in srgb, var(--cover, #2f6f4f) 60%, #000), inset -5px 5px 0 -1px var(--cover-accent, #d8b160);
}
.bcover[data-corners="filigree"] .cover-corner.is-bot { border-top: 0; border-bottom: 2px solid var(--cover-accent, #d8b160); box-shadow: inset -3px -3px 0 -1px color-mix(in srgb, var(--cover, #2f6f4f) 60%, #000), inset -5px -5px 0 -1px var(--cover-accent, #d8b160); }
.bcover[data-corners="filigree"] .cover-corner::after {
  content: ""; position: absolute; right: 22%; top: 22%; width: 18%; aspect-ratio: 1; transform: rotate(45deg);
  background: var(--cover-accent, #d8b160);
}
.bcover[data-corners="filigree"] .cover-corner.is-bot::after { top: auto; bottom: 22%; }

/* ---- the window: one to three cards, any size and shape, anywhere */
.cd-windows {
  position: absolute; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  --cd-r: .714;
  --cd-h: calc(var(--cover-h, 620px) * var(--cd-ws, .46));
  gap: calc(var(--cd-h) * .06);
  transform: translate(-50%, -50%) rotate(var(--cd-tilt, 0deg));
}
.cd-windows[data-shape="circle"] { --cd-r: 1; --cd-h: calc(var(--cover-h, 620px) * var(--cd-ws, .46) * .74); }
.cd-windows[data-shape="oval"] { --cd-r: .78; }
.cd-windows[data-shape="hex"] { --cd-r: .866; --cd-h: calc(var(--cover-h, 620px) * var(--cd-ws, .46) * .86); }
.bcover.is-designed .cd-windows > .cover-window {
  width: calc(var(--cd-h) * var(--cd-r)); flex: none;
  --card-ratio: var(--cd-r);
}
.cd-windows.is-fan > .cover-window {
  margin: 0 calc(var(--cd-h) * -.2);
  transform: rotate(calc(var(--cd-i) * 11deg)) translateY(calc(var(--cd-i) * var(--cd-i) * var(--cd-h) * .05));
}
.cd-windows.is-fan > .cover-window:nth-child(1) { z-index: 1; }
.cd-windows.is-fan[data-count="3"] > .cover-window:nth-child(2) { z-index: 2; }
.cd-windows.is-stack > .cover-window { margin: 0 calc(var(--cd-h) * -.3); transform: translateY(calc(var(--cd-i) * var(--cd-h) * -.05)) rotate(calc(var(--cd-i) * 4deg)); }
.cd-windows.is-stack > .cover-window:nth-child(1) { z-index: 3; }
.cd-windows.is-stack > .cover-window:nth-child(2) { z-index: 2; }

/* shapes */
.cd-windows[data-shape="rounded"] :is(.cover-window, .cover-art, .cover-glass, .cover-emblem) { border-radius: 14% / 10%; }
.cd-windows[data-shape="circle"] :is(.cover-window, .cover-art, .cover-glass, .cover-emblem),
.cd-windows[data-shape="oval"] :is(.cover-window, .cover-art, .cover-glass, .cover-emblem) { border-radius: 50%; }
.cd-windows[data-shape="circle"] .cover-window::before,
.cd-windows[data-shape="oval"] .cover-window::before { border-radius: 50%; }
.cd-windows[data-shape="arch"] :is(.cover-window, .cover-art, .cover-glass, .cover-emblem) { border-radius: 50% 50% 7% 7% / 36% 36% 5% 5%; }
.cd-windows[data-shape="arch"] .cover-window::before { border-radius: 50% 50% 9% 9% / 36% 36% 6% 6%; }
.cd-windows[data-shape="hex"] .cover-window { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.cd-windows[data-shape="hex"] :is(.cover-art, .cover-glass, .cover-emblem) { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border-radius: 0; }
.cd-windows:is([data-shape="circle"], [data-shape="oval"], [data-shape="hex"]) .cover-card { object-position: 50% 26%; }

/* frames */
.cd-windows[data-frame="plain"] .cover-window::before { content: none; }
.cd-windows[data-frame="metal"] .cover-window {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--cover-accent, #d8b160) 55%, #fff),
    var(--cover-accent, #d8b160) 45%,
    color-mix(in srgb, var(--cover-accent, #d8b160) 50%, #000));
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
}
.cd-windows[data-frame="metal"] .cover-window::before { content: none; }
.cd-windows[data-frame="gilded"] .cover-window {
  background: color-mix(in srgb, var(--cover, #2f6f4f) 40%, #000);
  box-shadow:
    0 0 0 calc(var(--cd-h) * .012) var(--cover-accent, #d8b160),
    0 0 0 calc(var(--cd-h) * .024) color-mix(in srgb, var(--cover, #2f6f4f) 55%, #000),
    0 0 0 calc(var(--cd-h) * .032) var(--cover-accent, #d8b160),
    0 4px 12px calc(var(--cd-h) * .03) rgba(0,0,0,.45);
}
.cd-windows[data-frame="gilded"] .cover-window::before { border-style: dotted; border-color: var(--cover-accent, #d8b160); border-width: 2px; }
.cd-windows[data-frame="none"] .cover-window { padding: 0; background: none; box-shadow: none; }
.cd-windows[data-frame="none"] .cover-window::before { content: none; }
.cd-windows[data-frame="none"] .cover-glass { inset: 0; }
.cd-windows[data-frame="none"] .cover-art { box-shadow: 0 6px 14px rgba(0,0,0,.55); }

/* ---- the lettering, wherever it was put */
.bcover.is-designed .cd-title {
  position: absolute; z-index: 3; pointer-events: none;
  width: max-content; max-width: 90%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--cover-w, 420px) * .026 * var(--cd-ts, 1));
  letter-spacing: var(--cd-spacing, 0);
  --cover-accent: var(--cd-ink);
}
.bcover.is-designed .cd-title[data-align="left"] { transform: translate(0, -50%); align-items: flex-start; text-align: left; }
.bcover.is-designed .cd-title[data-align="right"] { transform: translate(-100%, -50%); align-items: flex-end; text-align: right; }
.bcover.is-designed .cd-title .cover-name { font-size: calc(var(--cover-w, 420px) * .076 * var(--cd-ts, 1)); letter-spacing: inherit; }
.bcover.is-designed .cd-title .cover-name.is-long { font-size: calc(var(--cover-w, 420px) * .062 * var(--cd-ts, 1)); }
.bcover.is-designed .cd-title .cover-name.is-longer { font-size: calc(var(--cover-w, 420px) * .05 * var(--cd-ts, 1)); }
.bcover.is-designed .cd-title .cover-meta { letter-spacing: .15em; }
.bcover.is-designed.has-art .cd-title[data-panel="none"],
.bcover.is-designed .cd-title[data-panel="none"] { padding: 0; background: none; box-shadow: none; }
.bcover.is-designed .cd-title[data-panel="dark"] {
  padding: 1em 1.6em; border-radius: 12px; background: rgba(8,9,14,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.bcover.is-designed .cd-title[data-panel="light"] {
  padding: 1em 1.6em; border-radius: 12px; background: rgba(250,248,242,.82); box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.bcover.is-designed .cd-title[data-panel="light"] .cover-meta { color: rgba(20,22,28,.7); text-shadow: none; }
.bcover.is-designed .cd-title[data-panel="plate"] {
  padding: .9em 1.8em; border-radius: 6px;
  background:
    radial-gradient(circle .32em at .9em 50%, rgba(0,0,0,.45) 40%, color-mix(in srgb, var(--cover-accent) 50%, #fff) 52%, transparent 60%),
    radial-gradient(circle .32em at calc(100% - .9em) 50%, rgba(0,0,0,.45) 40%, color-mix(in srgb, var(--cover-accent) 50%, #fff) 52%, transparent 60%),
    linear-gradient(170deg, color-mix(in srgb, var(--cover-accent) 60%, #fff), var(--cover-accent) 50%, color-mix(in srgb, var(--cover-accent) 60%, #000));
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.55);
  --cover-accent: color-mix(in srgb, var(--cd-ink) 35%, #000);
}
.bcover.is-designed .cd-title[data-panel="plate"] .cover-meta { color: rgba(0,0,0,.6); text-shadow: 0 1px 0 rgba(255,255,255,.3); }

/* typefaces: the web font when it has come (cover-design.js ensureFonts), a near one when not */
.cd-title[data-font="serif"] .cover-name { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
.cd-title[data-font="engraved"] .cover-name { font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; letter-spacing: .04em; }
.cd-title[data-font="script"] .cover-name { font-family: 'Pacifico', 'Brush Script MT', 'Segoe Script', cursive; font-weight: 400; padding: .1em .2em .25em; }
.cd-title[data-font="display"] .cover-name { font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: .03em; font-size: calc(var(--cover-w, 420px) * .1 * var(--cd-ts, 1)) !important; }
.cd-title[data-font="pixel"] .cover-name { font-family: 'Press Start 2P', ui-monospace, monospace; font-weight: 400; line-height: 1.5; font-size: calc(var(--cover-w, 420px) * .052 * var(--cd-ts, 1)) !important; }
.cd-title[data-font="gothic"] .cover-name { font-family: 'UnifrakturMaguntia', 'Old English Text MT', Georgia, serif; font-weight: 400; }
.cd-title[data-font="marker"] .cover-name { font-family: 'Permanent Marker', 'Comic Sans MS', cursive; font-weight: 400; }
.cd-title[data-font="scifi"] .cover-name { font-family: 'Orbitron', 'Eurostile', 'Arial Black', sans-serif; letter-spacing: .05em; }
.cd-title[data-font="rounded"] .cover-name { font-family: 'Baloo 2', ui-rounded, 'Nunito', system-ui, sans-serif; }
.cd-title[data-font="mono"] .cover-name { font-family: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; }

/* lettering styles (foil is binder.css's own, in the chosen colour) */
.cd-title:not([data-style="foil"]) .cover-name {
  background: none; -webkit-text-fill-color: currentColor; filter: none;
}
.cd-title[data-style="emboss"] .cover-name {
  color: color-mix(in srgb, var(--cover, #2f6f4f) 72%, #fff);
  text-shadow: 0 -1px 0 rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.35), 0 2px 3px rgba(0,0,0,.3);
}
.cd-title[data-style="deboss"] .cover-name {
  color: color-mix(in srgb, var(--cover, #2f6f4f) 62%, #000);
  text-shadow: 0 1px 0 rgba(255,255,255,.2), 0 -1px 1px rgba(0,0,0,.65);
}
.cd-title[data-style="plain"] .cover-name { color: var(--cd-ink); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.cd-title[data-style="outline"] .cover-name {
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1px, .035em) var(--cd-ink);
}
.cd-title[data-style="neon"] .cover-name {
  color: color-mix(in srgb, var(--cd-ink) 35%, #fff);
  text-shadow: 0 0 .08em #fff, 0 0 .2em var(--cd-ink), 0 0 .5em var(--cd-ink), 0 0 1em var(--cd-ink);
}
.cd-title[data-style="neon"] .cover-rule { box-shadow: 0 0 6px var(--cd-ink); }
.cd-title[data-style="shadow"] .cover-name {
  color: var(--cd-ink);
  text-shadow: .06em .06em 0 color-mix(in srgb, var(--cover, #2f6f4f) 40%, #000), .1em .1em .12em rgba(0,0,0,.35);
}

/* ---- stickers: a few characters, die-cut with a white edge */
.cd-sticker {
  position: absolute; z-index: 4; pointer-events: none;
  font-size: calc(var(--cover-w, 420px) * var(--cd-size, .14));
  line-height: 1; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(var(--cd-rot, 0deg));
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.cd-sticker.has-outline {
  --o: max(1px, calc(var(--cover-w, 420px) * var(--cd-size, .14) * .045));
  filter:
    drop-shadow(var(--o) 0 0 #fff) drop-shadow(calc(var(--o) * -1) 0 0 #fff)
    drop-shadow(0 var(--o) 0 #fff) drop-shadow(0 calc(var(--o) * -1) 0 #fff)
    drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

/* ---- finishes: a light over the whole cover */
.cd-finish { position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; }
.cd-finish.is-matte { background: rgba(0,0,0,.1); mix-blend-mode: multiply; }
.cd-finish.is-gloss {
  background: linear-gradient(118deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 72%, rgba(255,255,255,.1) 86%, rgba(255,255,255,0) 100%);
}
.cd-finish.is-holo {
  background: linear-gradient(115deg, #ff4d6d, #ffd166 18%, #06d6a0 36%, #4cc9f0 54%, #b5179e 72%, #ff4d6d 90%);
  background-size: 260% 260%;
  background-position: var(--sx, 30%) 40%;
  mix-blend-mode: color-dodge; opacity: .3;
}
.cd-finish.is-pearl {
  background: linear-gradient(135deg, rgba(255,226,248,.3), rgba(206,240,255,.25) 40%, rgba(255,250,222,.3) 70%, rgba(230,214,255,.28));
  mix-blend-mode: soft-light;
}
.cd-finish.is-glitter {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 .6px, transparent 1.2px) 0 0 / 13px 11px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) 0 .5px, transparent 1px) 0 0 / 9px 14px,
    radial-gradient(circle at 40% 80%, color-mix(in srgb, var(--cover-accent, #d8b160) 80%, #fff) 0 .7px, transparent 1.3px) 0 0 / 17px 15px;
  mix-blend-mode: screen; opacity: .75;
}

/* ---- straps and closures */
.cd-strap { position: absolute; z-index: 5; pointer-events: none; --s: var(--cd-strap, #1b1d22); }
.cd-strap.is-elastic {
  top: -1px; bottom: -1px; right: 9%; width: 5.5%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.1) 0 2px, rgba(0,0,0,.12) 2px 4px),
    linear-gradient(90deg, color-mix(in srgb, var(--s) 70%, #000), var(--s) 30%, color-mix(in srgb, var(--s) 85%, #fff) 55%, color-mix(in srgb, var(--s) 70%, #000));
  box-shadow: -2px 0 4px rgba(0,0,0,.35), 2px 0 4px rgba(0,0,0,.25);
}
.cd-strap.is-snap, .cd-strap.is-buckle {
  right: -1%; top: 50%; transform: translateY(-50%);
  height: 11%; width: 17%;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--s) 85%, #fff), var(--s) 45%, color-mix(in srgb, var(--s) 65%, #000));
  box-shadow: -2px 3px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.cd-strap.is-snap > i {
  position: absolute; left: 22%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c9ced6 30%, #6b717c 70%, #3c4048);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.cd-strap.is-buckle { width: 30%; border-radius: 3px 0 0 3px; height: 9%; }
.cd-strap.is-buckle > i {
  position: absolute; left: 14%; top: 50%; width: 22%; height: 150%; transform: translateY(-50%);
  border: calc(var(--cover-w, 420px) * .011) solid var(--cover-accent, #d8b160); border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.2);
}
.cd-strap.is-zip {
  inset: 2.4% 2.4% 2.4% 4.8%;
  border: calc(var(--cover-w, 420px) * .014) dashed color-mix(in srgb, var(--s) 30%, #c9ced6);
  border-left: 0; border-radius: 0 calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0;
  box-shadow: 0 0 0 calc(var(--cover-w, 420px) * .01) var(--s), inset 0 0 0 calc(var(--cover-w, 420px) * .01) var(--s);
}
.cd-zip-pull {
  position: absolute; right: calc(var(--cover-w, 420px) * -.03); top: 10%;
  width: calc(var(--cover-w, 420px) * .04); height: calc(var(--cover-w, 420px) * .09);
  border-radius: 3px 3px 40% 40%;
  background: linear-gradient(90deg, #6b717c, #e6e9ee 45%, #8a909a);
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}

/* ---- a ribbon or a tassel, out under the bottom edge */
.cd-ribbon { position: absolute; z-index: -1; pointer-events: none; --r: var(--cd-ribbon, #b3263a); }
.cd-ribbon.is-ribbon {
  left: 74%; bottom: -7%; width: 5%; height: 12%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--r) 70%, #000), var(--r) 40%, color-mix(in srgb, var(--r) 80%, #fff) 60%, color-mix(in srgb, var(--r) 70%, #000));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.cd-ribbon.is-tassel {
  left: 10%; bottom: -10%; width: 1.2%; height: 6%;
  background: color-mix(in srgb, var(--r) 70%, #000);
}
.cd-ribbon.is-tassel > i {
  position: absolute; left: 50%; top: 92%; transform: translateX(-50%);
  width: calc(var(--cover-w, 420px) * .055); height: calc(var(--cover-w, 420px) * .1);
  border-radius: 40% 40% 12% 12% / 30% 30% 8% 8%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, color-mix(in srgb, var(--cover-accent, #d8b160) 80%, #fff) 0 16%, var(--r) 16%);
}

/* ---- charms, hanging off the top of the cover on a short chain */
.cd-charm {
  position: absolute; z-index: 8; top: -.4%;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(-50%); transform-origin: 50% 0;
  pointer-events: none;
}
.cd-charm-loop {
  width: calc(var(--cover-w, 420px) * .03); aspect-ratio: 1; border-radius: 50%;
  border: calc(var(--cover-w, 420px) * .006 + .5px) solid #c9ced6;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.cd-charm-chain {
  margin-top: -1px;
  width: calc(var(--cover-w, 420px) * .009 + 1px);
  height: calc(var(--cover-h, 620px) * var(--cd-drop, .12));
  background: repeating-linear-gradient(180deg, #e6e9ee 0 3px, #6b717c 3px 4px, #b5bac3 4px 6px);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.cd-charm-art {
  margin-top: -2px;
  width: calc(var(--cover-w, 420px) * var(--cd-size, .12)); height: auto; aspect-ratio: 1;
  fill: currentColor; stroke: color-mix(in srgb, currentColor 45%, #000); stroke-width: .7;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.45));
  overflow: visible;
}
.cd-charm-art .ch-dark { fill: color-mix(in srgb, currentColor 40%, #000); stroke: none; }
.cd-charm-art .ch-light { fill: #f5f3ee; stroke: none; }
.cd-charm-art .ch-line { stroke: color-mix(in srgb, currentColor 50%, #000); stroke-width: .9; }
.cd-charm-art .ch-glint { fill: #fff; stroke: none; opacity: .55; }
:root[data-motion="full"] .bcover:hover .cd-charm,
:root[data-motion="full"] .bcard:hover .cd-charm { animation: cd-swing 1.8s ease-in-out infinite; }
@keyframes cd-swing { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }

/* designed covers keep their own words where they were put: no hint unless asked for */
.bcover.is-designed .cover-hint { z-index: 6; }