@font-face {
  font-family: "CGCoverRegular";
  src: url("assets/fonts/cormorant-garamond-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "CGCoverBold";
  src: url("assets/fonts/cormorant-garamond-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "CGCardsRegular";
  src: url("assets/fonts/cormorant-garamond-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "CGCardsBold";
  src: url("assets/fonts/cormorant-garamond-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "RalewayPDF";
  src: url("assets/fonts/raleway-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "RalewayPDF";
  src: url("assets/fonts/raleway-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "RalewayPDF";
  src: url("assets/fonts/raleway-500-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

:root {
  --paper: #eddcc9;
  --ink-strong: #2f4762;
  --ink-body: #3e3d3c;
  --card-border: #b3a188;
  --page-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.26);
  --font-display: "CGCardsBold", "Times New Roman", serif;
  --font-body: "RalewayPDF", "Arial", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 2rem 1rem 3rem;
  background: linear-gradient(180deg, #c2b39d 0%, #ac9d86 100%);
}

.template-stack {
  width: min(100%, 56rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.sheet {
  position: relative;
  width: min(874px, 100%);
  aspect-ratio: 874 / 1241;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--page-shadow);
  container-type: inline-size;
}

@supports not (aspect-ratio: 1 / 1) {
  .sheet {
    width: 874px;
    height: 1241px;
    max-width: 100%;
  }
}

.cover-rule {
  position: absolute;
  left: 34%;
  top: 49.72%;
  width: 31.92%;
  border-top: 4px solid #070707;
  border-top: 0.62cqi solid #070707;
}

.cover-title {
  position: absolute;
  inset: 0;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.05cqi;
  color: var(--ink-strong);
  font-family: "CGCoverBold", "Times New Roman", serif;
  font-weight: 700;
  font-size: 74px;
  font-size: 8.58cqi;
  line-height: 0.89;
}

.cover-title span {
  position: absolute;
  display: block;
  white-space: nowrap;
  width: max-content;
  left: 50%;
  transform: translateX(-50%);
}

.cover-title .line-1 {
  top: 52.81%;
}

.cover-title .line-2 {
  top: 58.2%;
}

.cover-main {
  position: absolute;
  inset: 0;
}

.cover-copy {
  position: absolute;
  left: 9.84%;
  top: 0;
  width: 40.61%;
  height: 100%;
  overflow: hidden;
}

.cover-copy p {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  color: var(--ink-strong);
  font-family: "CGCoverRegular", "Times New Roman", serif;
  font-size: 22px;
  font-size: 2.52cqi;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.012em;
}

.cover-copy strong {
  font-family: "CGCoverBold", "Times New Roman", serif;
  font-weight: 700;
}

.cover-copy .intro {
  top: 68.53%;
  font-family: "CGCoverBold", "Times New Roman", serif;
  font-weight: 700;
}

.cover-copy .character {
  top: 76.04%;
}

.cover-copy .warning {
  top: 85.33%;
  text-transform: uppercase;
}

.cover-portrait {
  position: absolute;
  left: 53.66%;
  top: 67.24%;
  width: 41.53%;
  margin: 0;
  aspect-ratio: 261 / 218;
}

.cover-portrait::before {
  content: "";
  position: absolute;
  left: 7.3%;
  top: 16.5%;
  width: 92.7%;
  height: 73.9%;
  background: #e8dbc8;
}

.cover-portrait-art {
  position: absolute;
  left: 7.3%;
  top: 16.5%;
  width: 92.7%;
  height: 73.9%;
  object-fit: cover;
  filter: sepia(0.16) saturate(0.62) brightness(0.99);
}

.cover-portrait-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.character-page {
  background: var(--paper);
}

.sheet-border {
  position: absolute;
  left: -3.82%;
  top: -1.12%;
  width: 108.5%;
  height: 108.1%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.character-content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 16.4% 9% 4.2% 8.5%;
  display: flex;
  flex-direction: column;
}

.character-header {
  text-align: center;
}

.character-header h2 {
  margin: 0;
  color: var(--ink-strong);
  text-transform: uppercase;
  letter-spacing: -0.04cqi;
  line-height: 0.96;
  font-family: "CGCardsBold", "Times New Roman", serif;
  font-size: 42px;
  font-size: 4.8cqi;
  font-weight: 700;
}

.character-header p {
  margin: 0.9cqi 0 0;
  color: var(--ink-strong);
  font-family: "CGCardsRegular", "Times New Roman", serif;
  font-size: 26px;
  font-size: 3.02cqi;
  line-height: 1;
}

.cards-grid {
  margin-top: 4.25cqi;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.9cqi 6.5cqi;
}

.ornate-card {
  --corner-cut: 2.3cqi;
  --bw: 0.18cqi;
  --join-overlap: calc(var(--bw) * 0.32);
  position: relative;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--card-border), var(--card-border)) calc(var(--corner-cut) - var(--join-overlap)) 0 / calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) var(--bw) no-repeat,
    linear-gradient(var(--card-border), var(--card-border)) calc(var(--corner-cut) - var(--join-overlap)) 100% / calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) var(--bw) no-repeat,
    linear-gradient(var(--card-border), var(--card-border)) 0 calc(var(--corner-cut) - var(--join-overlap)) / var(--bw) calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) no-repeat,
    linear-gradient(var(--card-border), var(--card-border)) 100% calc(var(--corner-cut) - var(--join-overlap)) / var(--bw) calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) no-repeat,
    radial-gradient(
      circle at top left,
      var(--paper) 0 calc(var(--corner-cut) - var(--bw)),
      var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut),
      transparent var(--corner-cut)
    ) top left / var(--corner-cut) var(--corner-cut) no-repeat,
    radial-gradient(
      circle at top right,
      var(--paper) 0 calc(var(--corner-cut) - var(--bw)),
      var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut),
      transparent var(--corner-cut)
    ) top right / var(--corner-cut) var(--corner-cut) no-repeat,
    radial-gradient(
      circle at bottom left,
      var(--paper) 0 calc(var(--corner-cut) - var(--bw)),
      var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut),
      transparent var(--corner-cut)
    ) bottom left / var(--corner-cut) var(--corner-cut) no-repeat,
    radial-gradient(
      circle at bottom right,
      var(--paper) 0 calc(var(--corner-cut) - var(--bw)),
      var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut),
      transparent var(--corner-cut)
    ) bottom right / var(--corner-cut) var(--corner-cut) no-repeat,
    rgba(233, 220, 202, 0.88);
  padding: 2.35cqi 2.8cqi 2.45cqi;
}

.ornate-card::before {
  content: none;
}

.ornate-card::after {
  content: none;
}

.ornate-card.tall {
  min-height: 40cqi;
}

.ornate-card.medium {
  min-height: 21.2cqi;
}

.ornate-card.short {
  min-height: 19.6cqi;
}

.ornate-card h3 {
  margin: 0 0 1.1cqi;
  text-align: center;
  color: #1d1e22;
  font-family: "CGCardsBold", "Times New Roman", serif;
  font-size: 26px;
  font-size: 3.02cqi;
  line-height: 0.97;
  font-weight: 700;
}

.ornate-card p,
.ornate-card li {
  margin: 0 0 1.3cqi;
  color: var(--ink-body);
  font-family: "RalewayPDF", "Arial", sans-serif;
  font-size: 14px;
  font-size: 1.6cqi;
  line-height: 1.58;
  font-weight: 400;
}

.ornate-card p:last-child,
.ornate-card li:last-child {
  margin-bottom: 0;
}

.ornate-card ul {
  margin: 0;
  padding: 0 0 0 2.2cqi;
}

.footer-flourish {
  position: relative;
  margin-top: 5.2cqi;
  align-self: center;
  width: 175px;
  width: 20cqi;
  text-align: center;
  color: #4f5563;
  font-family: "RalewayPDF", "Arial", sans-serif;
  font-size: 36px;
  font-size: 4.1cqi;
  line-height: 1;
}

.ornate-card em {
  font-family: "RalewayPDF", "Arial", sans-serif;
  font-style: italic;
  font-weight: 500;
}

.footer-flourish::before,
.footer-flourish::after {
  content: "";
  position: absolute;
  top: 53%;
  width: 66px;
  width: 7.5cqi;
  height: 2px;
  height: 0.2cqi;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.7;
}

.footer-flourish::before {
  left: 0;
}

.footer-flourish::after {
  right: 0;
}

@media (max-width: 680px) {
  body {
    padding: 0.9rem 0.35rem 1.2rem;
  }

  .template-stack {
    gap: 1rem;
  }

  .sheet {
    box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.2);
  }

  .cards-grid {
    gap: 3.6cqi;
    grid-template-columns: 1fr;
  }

  .ornate-card.tall,
  .ornate-card.medium,
  .ornate-card.short {
    min-height: auto;
  }
}

@media print {
  @page {
    size: 419.25pt 595.5pt;
    margin: 0;
  }

  body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .template-stack {
    width: auto;
    margin: 0;
    gap: 0;
  }

  .sheet {
    width: 419.25pt;
    height: 595.5pt;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  .sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}