.romans-page {
  min-width: 320px;
  background: #faf5ec;
  color: #1d1a17;
}

.romans-canvas {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(100%, var(--page-max-width));
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  overflow: hidden;
  background: #faf5ec;
}

.romans-paper,
.romans-lavis,
.romans-vine,
.romans-landscape { position: absolute; pointer-events: none; }

.romans-paper {
  z-index: -3;
  inset: 0;
  background: url("assets/papier-ivoire.webp") center / cover no-repeat;
  opacity: .25;
}

.romans-lavis {
  z-index: -1;
  top: 53.25%;
  left: 0;
  width: 100%;
  height: 50%;
  background: url("assets/romans/lavis-pied-de-page.webp") center / 100% 100% no-repeat;
  opacity: .22;
}

.romans-vine {
  z-index: 2;
  top: 50%;
  right: 0;
  width: 17.5%;
  height: 35%;
  background: url("assets/romans/vigne-colophon.webp") center / contain no-repeat;
  opacity: .5;
}

.romans-header {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.romans-wordmark {
  position: absolute;
  top: 1.58%;
  left: 4.375%;
  display: flex;
  flex-direction: column;
  color: #1d1a17;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  pointer-events: auto;
}

.romans-wordmark span { margin-left: 1px; font-size: 1.6875cqw; line-height: .78; letter-spacing: .02em; }
.romans-wordmark strong { font-size: 2.9375cqw; font-weight: 400; line-height: .85; letter-spacing: -.5px; }

.romans-signature-rule {
  position: absolute;
  top: 5.17%;
  left: 21.25%;
  width: 4.94%;
  height: 1px;
  background: rgba(97, 84, 71, .45);
}

.romans-nav {
  position: absolute;
  top: 3.83%;
  left: 28%;
  display: flex;
  gap: 1.75cqw;
  align-items: flex-start;
  color: #1d1a17;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 1.1875cqw, 19px);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: auto;
}

.romans-nav a,
.romans-nav span { position: relative; text-decoration: none; }
.romans-nav .current { color: #963013; }
.romans-nav .current::after { position: absolute; right: 0; bottom: -.52em; left: 0; height: 1.5px; content: ""; background: currentColor; }

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

.romans-feature { position: absolute; inset: 0; }

.romans-landscape {
  z-index: -2;
  top: 7.5833%;
  left: 0;
  width: 100%;
  height: 47.5%;
}

.romans-landscape img { display: block; width: 100%; height: 100%; object-fit: fill; }

.romans-feature-copy { position: absolute; inset: 0; }

.romans-kicker {
  position: absolute;
  top: 10.67%;
  left: 4.375%;
  display: flex;
  align-items: center;
  gap: 19px;
}

.kicker-rule { display: block; width: 55px; height: 1.5px; flex: 0 0 55px; background: #963013; }
.romans-kicker p { margin: 0; color: #963013; font-family: "DM Sans", Arial, sans-serif; font-size: clamp(10px, .75cqw, 12px); font-weight: 600; line-height: 1.4; letter-spacing: .175em; text-transform: uppercase; }
.romans-kicker p span { padding-inline: .35em; }

.romans-title {
  position: absolute;
  top: 12.58%;
  left: 4.375%;
  margin: 0;
  color: #1d1a17;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 9.875cqw;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.019em;
  white-space: nowrap;
}

.romans-title span { color: #963013; }

.romans-intro {
  position: absolute;
  top: 24.17%;
  left: 5.125%;
  margin: 0;
  color: #1d1a17;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.625cqw;
  font-weight: 400;
  line-height: 1.23;
}

.featured-copy { position: absolute; inset: 0; }

.featured-rule {
  position: absolute;
  top: 31.42%;
  left: 5%;
  width: 52px;
  height: 1.5px;
  background: #963013;
}

.featured-label {
  position: absolute;
  top: 32.25%;
  left: 5%;
  margin: 0;
  color: #963013;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(10px, .6875cqw, 11px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.featured-copy h2 {
  position: absolute;
  top: 34.17%;
  left: 4.625%;
  margin: 0;
  color: #1d1a17;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 4.375cqw;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.016em;
  white-space: nowrap;
}

.featured-copy h2 span { color: #963013; }

.featured-edition {
  position: absolute;
  top: 40%;
  left: 5.125%;
  margin: 0;
  color: #963013;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(10px, .75cqw, 12px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .133em;
  text-transform: uppercase;
}

.featured-edition span { padding-inline: .4em; }

.featured-synopsis {
  position: absolute;
  top: 42.42%;
  left: 5.0625%;
  width: 41.25%;
  margin: 0;
  color: #1d1a17;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.25cqw;
  font-weight: 400;
  line-height: 1.35;
}

.featured-cta {
  position: absolute;
  z-index: 1;
  top: 47.58%;
  left: 5.125%;
  pointer-events: auto;
}

.featured-book {
  position: absolute;
  top: 8%;
  left: 55%;
  width: 30%;
  height: 48.3333%;
  margin: 0;
}

.featured-book img { display: block; width: 100%; height: 100%; object-fit: contain; }

.other-books { position: absolute; inset: 0; }

.other-books-rule {
  position: absolute;
  top: 55.1667%;
  left: 4.375%;
  width: 91.25%;
  height: 1px;
  background: rgba(97, 84, 71, .38);
}

.other-books-title {
  position: absolute;
  top: 56.75%;
  left: 4.5%;
  margin: 0;
  color: #1d1a17;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 4cqw;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.02em;
}

.other-books-title span { color: #963013; }

.other-books-label {
  position: absolute;
  top: 59.5%;
  left: 69.8125%;
  margin: 0;
  color: #963013;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(10px, .6875cqw, 11px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.books-grid {
  position: absolute;
  top: 64.0833%;
  left: 4.375%;
  display: grid;
  width: 78.3125%;
  grid-template-columns: repeat(7, 9.6875cqw);
  column-gap: 1.75cqw;
}

.book-card { position: relative; display: block; min-width: 0; color: inherit; text-decoration: none; }
.book-card:hover h3,
.book-card:focus-visible h3 { color: #963013; }
.book-card:focus-visible { outline: 2px solid #963013; outline-offset: 6px; }

.book-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 155 / 232;
  object-fit: contain;
}

.book-card h3 {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: calc(100% + 10px);
  min-height: 42px;
  margin: 0;
  color: #1d1a17;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(12px, 1.1875cqw, 19px);
  font-weight: 600;
  line-height: 1.1;
}

.book-card p {
  position: absolute;
  top: calc(100% + 71px);
  left: 0;
  margin: 0;
  color: #963013;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(10px, .6875cqw, 11px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .14em;
}

.publication-span {
  position: absolute;
  top: 65.4167%;
  left: 84.875%;
  width: 12%;
  height: 16.667%;
}

.span-rule {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: rgba(150, 48, 19, .4);
}

.publication-span p {
  position: absolute;
  left: 2.625cqw;
  margin: 0;
  color: #1d1a17;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 3.1875cqw;
  font-weight: 400;
  line-height: 1.32;
}

.publication-span p:first-of-type { top: -4%; }
.publication-span p:nth-of-type(2) { top: 44.5%; }

.span-dash {
  position: absolute;
  top: 39%;
  left: 2.8125cqw;
  width: 2.75cqw;
  height: 2px;
  background: #1d1a17;
}

.span-caption {
  position: absolute;
  top: 94%;
  left: 2.8125cqw;
  color: #963013;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(10px, .6875cqw, 11px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.romans-footer { position: absolute; inset: 0; pointer-events: none; }

.romans-footer-rule {
  position: absolute;
  top: 93.3333%;
  left: 3.3125%;
  width: 93.375%;
  height: 1px;
  background: rgba(158, 117, 82, .34);
}

.romans-copyright,
.romans-facebook,
.romans-home-link,
.romans-author-link {
  position: absolute;
  top: 95.42%;
  display: flex;
  align-items: center;
  margin: 0;
  color: #1d1a17;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(12px, .8125cqw, 14px);
  line-height: 1.4;
}

.romans-copyright { left: 4.375%; white-space: nowrap; }

.romans-footer-divider {
  position: absolute;
  top: 94.667%;
  width: 1px;
  height: 3%;
  background: rgba(158, 117, 82, .25);
}

.divider-copyright { left: 26.875%; }
.divider-home { left: 47.9375%; }
.divider-author { left: 70%; }

.romans-facebook {
  left: 33.1875%;
  gap: 17px;
  color: #2e2925;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(12px, .8125cqw, 13px);
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  pointer-events: auto;
}

.romans-facebook .facebook-disc {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
}

.romans-facebook .facebook-disc img { position: absolute; inset: 0; display: block; width: 34px; height: 34px; }
.romans-facebook .facebook-disc b { position: relative; z-index: 1; transform: translate(-1px, -1px); color: #faf5ec; font-family: "DM Sans", Arial, sans-serif; font-size: 23px; line-height: 1; }

.romans-facebook .footer-arrow { margin-left: -10px; }

.footer-arrow { display: inline-flex; width: 14px; height: 14px; flex: 0 0 14px; margin-left: 10px; }
.footer-arrow img { display: block; width: 14px; height: 14px; }

.romans-home-link {
  left: 53.75%;
  gap: 0;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: auto;
}

.romans-home-link .footer-arrow { margin-left: 17px; }

.romans-author-link { left: 75%; font-weight: 600; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; white-space: nowrap; pointer-events: auto; }

@media (max-width: 1100px) {
  .romans-canvas { display: flex; min-height: 100svh; flex-direction: column; aspect-ratio: auto; overflow: hidden; }
  .romans-paper { position: fixed; }
  .romans-header { position: relative; inset: auto; min-height: 105px; padding: 17px clamp(20px, 5vw, 54px) 14px; }
  .romans-wordmark { top: 17px; left: clamp(20px, 5vw, 54px); }
  .romans-wordmark span { font-size: 16px; }
  .romans-wordmark strong { font-size: 30px; }
  .romans-signature-rule { display: none; }
  .romans-nav { top: 23px; left: auto; right: clamp(20px, 5vw, 54px); max-width: calc(100% - 260px); gap: clamp(17px, 2.4vw, 30px); overflow-x: auto; padding: 0 1px 9px; font-size: 16px; scrollbar-width: thin; scrollbar-color: rgba(150,48,19,.35) transparent; }
  .romans-main { position: relative; inset: auto; display: flex; flex-direction: column; }
  .romans-feature { position: relative; inset: auto; display: grid; min-height: 620px; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); align-items: center; }
  .romans-landscape { top: 0; height: 100%; }
  .romans-landscape img { object-fit: cover; object-position: 58% center; }
  .romans-feature::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(250,245,236,.98) 0%, rgba(250,245,236,.91) 38%, rgba(250,245,236,.24) 69%, rgba(250,245,236,.04) 100%); content: ""; }
  .romans-feature-copy { position: relative; inset: auto; padding: 38px 0 38px clamp(32px, 6vw, 68px); }
  .romans-kicker,
  .romans-title,
  .romans-intro,
  .featured-rule,
  .featured-label,
  .featured-copy h2,
  .featured-edition,
  .featured-synopsis,
  .featured-cta { position: relative; inset: auto; }
  .romans-kicker { margin-bottom: 12px; }
  .kicker-rule { width: 42px; flex-basis: 42px; }
  .romans-kicker { gap: 12px; }
  .romans-title { font-size: clamp(104px, 12.2cqw, 158px); line-height: 1; }
  .romans-intro { margin: 0 0 24px 12px; font-size: clamp(18px, 1.625cqw, 26px); line-height: 1.28; }
  .featured-copy { position: relative; inset: auto; }
  .featured-rule { display: block; margin: 0 0 8px; }
  .featured-label { margin: 0 0 9px; font-size: 11px; }
  .featured-copy h2 { margin: 0 0 4px -5px; font-size: clamp(46px, 5.3cqw, 70px); line-height: 1.08; white-space: normal; }
  .featured-edition { margin: 0 0 10px; font-size: 11px; }
  .featured-synopsis { width: min(100%, 520px); margin: 0 0 16px; font-size: clamp(17px, 1.25cqw, 20px); line-height: 1.35; }
  .feature-desktop-break { display: none; }
  .featured-cta { position: relative; }
  .featured-book { position: relative; top: auto; left: auto; width: min(80%, 380px); height: auto; aspect-ratio: 1440 / 1740; justify-self: center; margin: 20px 4vw 20px 0; }
  .other-books { position: relative; inset: auto; padding: 27px clamp(32px, 6vw, 68px) 45px; }
  .other-books-rule { position: absolute; top: 0; left: 4.375%; width: 91.25%; }
  .other-books-title { position: relative; top: auto; left: auto; margin: 0; font-size: clamp(40px, 4cqw, 64px); }
  .other-books-label { position: relative; top: auto; left: auto; margin: 5px 0 18px 3px; font-size: 11px; }
  .books-grid { position: relative; top: auto; left: auto; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 27px 20px; }
  .book-card img { width: 100%; max-width: 220px; }
  .book-card h3 { position: static; width: auto; margin-top: 9px; font-size: clamp(16px, 1.1875cqw, 19px); }
  .book-card p { position: static; margin-top: 8px; }
  .publication-span { position: relative; top: auto; left: auto; display: flex; width: auto; height: 70px; align-items: center; gap: 12px; margin: 36px 0 0; }
  .span-rule { display: none; }
  .publication-span::before { width: 1px; height: 64px; background: rgba(150,48,19,.4); content: ""; }
  .publication-span p { position: relative; top: auto !important; left: auto; font-size: 38px; line-height: 1; }
  .span-dash { position: relative; top: auto; left: auto; width: 24px; height: 1px; }
  .span-caption { position: relative; top: auto; left: auto; font-size: 10px; }
  .romans-vine { top: auto; bottom: 150px; width: 160px; height: 240px; }
  .romans-footer { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; padding: 24px clamp(32px, 6vw, 68px) 30px; margin-top: auto; }
  .romans-footer-rule { top: 0; left: 5%; width: 90%; }
  .romans-copyright,
  .romans-facebook,
  .romans-home-link,
  .romans-author-link { position: relative; inset: auto; font-size: 12px; }
  .romans-copyright { grid-column: 1 / -1; white-space: normal; }
  .romans-footer-divider { display: none; }
  .romans-facebook { gap: 9px; }
  .romans-facebook .facebook-disc { transform: none; }
  .romans-facebook .facebook-disc b { font-size: 20px; }
  .footer-arrow { margin-left: 5px; }
  .romans-home-link { order: 2; }
  .romans-author-link { order: 3; }
}

@media (max-width: 700px) {
  .romans-header { display: block; min-height: 112px; padding: 15px 20px 0; }
  .romans-wordmark { position: relative; top: auto; left: auto; width: max-content; }
  .romans-wordmark span { font-size: 14px; }
  .romans-wordmark strong { font-size: 27px; }
  .romans-nav { top: 62px; right: auto; left: 0; width: calc(100vw - 40px); max-width: none; gap: 21px; margin-top: 0; font-size: 15px; }
  .romans-feature { display: flex; min-height: auto; flex-direction: column; align-items: stretch; }
  .romans-feature::before { display: none; }
  .romans-landscape { position: relative; top: auto; left: auto; width: 100%; height: 210px; flex: 0 0 210px; }
  .romans-landscape img { object-position: 65% center; }
  .romans-feature-copy { padding: 25px 22px 25px; }
  .romans-kicker { gap: 11px; margin-bottom: 12px; }
  .kicker-rule { width: 35px; flex-basis: 35px; }
  .romans-kicker p { font-size: 10px; letter-spacing: .12em; }
  .romans-title { font-size: clamp(72px, 16cqw, 108px); }
  .romans-intro { margin-left: 7px; font-size: 18px; }
  .featured-copy h2 { font-size: clamp(42px, 10.7cqw, 64px); }
  .featured-synopsis { font-size: 17px; }
  .featured-book { width: min(78%, 330px); margin: 0 auto 36px; }
  .other-books { padding: 26px 22px 38px; }
  .other-books-title { font-size: clamp(38px, 9cqw, 54px); }
  .books-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 15px; }
  .book-card h3 { min-height: 42px; font-size: 16px; }
  .book-card p { font-size: 10px; }
  .romans-vine { right: -28px; bottom: 180px; width: 125px; height: 188px; opacity: .38; }
  .romans-footer { grid-template-columns: 1fr; gap: 15px; padding: 22px 22px 27px; }
  .romans-copyright { grid-column: auto; order: 4; margin-top: 4px; }
  .romans-facebook { order: 1; }
  .romans-home-link { order: 2; }
  .romans-author-link { order: 3; }
}

@media (max-width: 430px) {
  .books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .book-card h3 { font-size: 17px; }
  .romans-title { font-size: 16cqw; }
  .featured-copy h2 { font-size: 10.5cqw; }
}

@media (max-width: 600px) {
  .featured-copy h2 { font-size: 9cqw; }
}

@media (max-width: 470px) {
  .romans-intro { min-height: 3.84em; }
}

/* Desktop alignment with the common Figma header and footer. */
@media(min-width:1101px) {
 .romans-canvas { aspect-ratio:1600 / 1222.0625; height:auto; }
 .romans-landscape { top:12.0664cqw; height:35.625cqw; }
 .romans-lavis { top:46.3164cqw; height:37.5cqw; }
 .romans-vine { top:43.8789cqw; height:26.25cqw; }
 .romans-kicker { top:14.3789cqw; }.romans-title { top:15.8164cqw; }
 .romans-intro { top:24.5039cqw; }.featured-rule { top:29.9414cqw; }
 .featured-label { top:30.5664cqw; }.featured-copy h2 { top:32.0039cqw; }
 .featured-edition { top:36.3789cqw; }.featured-synopsis { top:38.1914cqw; }
 .featured-cta { top:42.0664cqw; }
 .featured-book { top:12.3789cqw; height:36.25cqw; }
 .other-books-rule { top:47.7539cqw; }.other-books-title { top:48.9414cqw; }
 .other-books-label { top:51.0039cqw; }.books-grid { top:54.4414cqw; }
 .publication-span { top:55.4414cqw; height:12.5cqw; }
}