/* A notebook's face (components/notebook/cover-face.tsx) on the public reader and the invitation pages: a tinted ruled page with a spine and the name on it. */

/* ---- The cover face ---- */
.cover-face { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; box-sizing: border-box; border-radius: 3px 10px 10px 3px; color: var(--nf-pencil);
  background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--nf-cover-rule) 27px 28px), color-mix(in srgb, var(--cover-tint, var(--nf-pencil-yellow)) 34%, var(--nf-sheet));
  box-shadow: var(--nf-shadow-menu); }
/* The spine: a hairline and a soft band down the left edge. */
.cover-face::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 14px; background: linear-gradient(to right, var(--nf-cover-spine), transparent); border-left: 1px solid var(--nf-cover-spine-edge); pointer-events: none; }
.cover-title { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 0 20px 20px 26px; font: 500 clamp(22px, 2.6vw, 34px) / 1.1 var(--nf-font-display); letter-spacing: -.01em;
  overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

@media (max-width: 640px) {
  .cover-face { aspect-ratio: 3 / 4; }
  .cover-title { padding: 0 12px 14px 18px; font-size: clamp(18px, 6vw, 22px); -webkit-line-clamp: 5; line-clamp: 5; }
}