@font-face {font-family:"Editorial Serif";src:url("editorial-serif.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face {font-family:"Editorial Serif";src:url("editorial-italic.woff") format("woff");font-style:italic;font-weight:400;font-display:swap}
@font-face {font-family:"Editorial Gothic";src:url("editorial-gothic.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face {font-family:"Editorial Gothic";src:url("editorial-gothic-demi.woff") format("woff");font-style:normal;font-weight:600;font-display:swap}

:root {
  color-scheme: light;
  --paper: #e8d2bb;
  --ink: #1d140e;
  --umber: #632b0a;
  --line: #884e2b;
  --sans: "Editorial Gothic", "Century Gothic", sans-serif;
  --serif: "Editorial Serif", "Times New Roman", serif;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 28% 6%, #f4e4d5, transparent 72%), var(--paper);
  color: var(--ink);
}
.cover {
  width: 100%;
  max-width: 1086px;
  margin-inline: auto;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  background: #e7cbb1;
}
.cover__scene { display: block; width: 100%; height: auto; }
.cover__layout { position: absolute; inset: 0; }
.cover__brand {
  position: absolute;
  inset-block-start: 2.88%;
  inset-inline-start: 7.46%;
  display: grid;
  grid-template-columns: 20.4cqw 8.2cqw max-content;
  column-gap: 1.45cqw;
  align-items: center;
  font-family: var(--sans);
  line-height: 1;
  white-space: nowrap;
}
.cover__name {
  width: max-content;
  font-size: 2.64cqw;
  letter-spacing: .067em;
  transform: scaleX(1.26);
  transform-origin: left center;
}
.cover__brand-rule {
  width: 100%;
  border-block-start: 1px solid #945e3b9c;
}
.cover__series {
  color: var(--umber);
  font-size: 2.05cqw;
  font-weight: 600;
  letter-spacing: .14em;
}
.cover__title {
  position: absolute;
  inset-block-start: 10.43%;
  inset-inline-start: 7.27%;
  margin: 0;
  color: var(--umber);
  font: 400 9.5cqw / .823 var(--serif);
  letter-spacing: -.012em;
}
.cover__title span,
.cover__description span { display: block; }
.cover__description {
  position: absolute;
  inset-block-start: 31.05%;
  inset-inline-start: 8.63%;
  margin: 0;
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 3.1cqw;
  font: 400 2.46cqw / 1.165 var(--sans);
}

@media (min-width: 768px) {
  .cover { width: min(100%, max(660px, 75svh)); }
}

@media (max-width: 540px) {
  .cover__brand {
    inset-block-start: 3.2%;
    grid-template-columns: max-content minmax(14px, 7.5cqw) max-content;
    column-gap: 2.1cqw;
  }
  .cover__name { font-size: max(10px, 2.64cqw); transform: none; }
  .cover__series { font-size: max(9px, 2.05cqw); }
  .cover__description {
    inset-block-start: 30.15%;
    font-size: clamp(11.5px, 3.2cqw, 13px);
    line-height: 1.12;
  }
}
