:root {
  --read-ink: #141a2b;
  --read-night: #171427;
  --read-plum: #4a1838;
  --read-red: #b93a35;
  --read-gold: #e0ad4f;
  --read-cream: #f3e6c5;
  --read-paper: #e9d5a7;
  --read-green: #335c50;
  --read-blue: #234766;
}

.read-page {
  color: var(--read-ink);
  background: var(--read-paper);
}

.read-header {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  width: min(1380px, calc(100% - 2rem));
  color: white;
  background: transparent;
}

.read-header .brand,
.read-header .main-nav a {
  color: white;
}

.reading-room-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: 100svh;
  padding: clamp(7rem, 12vw, 11rem) clamp(1.2rem, 8vw, 8rem) clamp(5rem, 9vw, 8rem);
  color: var(--read-cream);
  background: var(--read-night);
  border-bottom: 8px solid var(--read-gold);
}

.reading-room-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,9,20,.95) 0%, rgba(16,11,27,.8) 42%, rgba(23,20,39,.12) 76%),
    linear-gradient(0deg, rgba(10,9,20,.7), transparent 55%);
  pointer-events: none;
}

.hero-type {
  position: relative;
  z-index: 3;
  width: min(820px, 92%);
  max-width: 820px;
}

.press-mark {
  margin: 0 0 .8rem;
  color: var(--read-gold);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.reading-room-hero h1 {
  max-width: 10ch;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.1rem, 8.7vw, 9rem);
  font-style: italic;
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.065em;
}

.hero-type > p:not(.press-mark) {
  max-width: 660px;
  margin: 1.8rem 0 2.2rem;
  color: rgba(243,230,197,.86);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.55;
}

.press-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  padding: .8rem 1.35rem;
  border: 4px solid var(--read-ink);
  color: var(--read-ink);
  background: var(--read-gold);
  box-shadow: .5rem .5rem 0 var(--read-red);
  font-weight: 950;
  text-decoration: none;
  text-transform: uppercase;
}

.press-button:hover,
.press-button:focus-visible {
  transform: translate(.15rem, .15rem);
  box-shadow: .34rem .34rem 0 var(--read-red);
}

.door-display {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--read-night);
  box-shadow: none;
  transform: none;
}

.door-display img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.door-display.opened-read {
  width: 100%;
  transform: none;
}

.opened-read img {
  aspect-ratio: auto;
  object-fit: cover;
}

.door-display figcaption {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  padding: .55rem .75rem;
  color: var(--read-paper);
  background: rgba(20,26,43,.82);
  border: 2px solid var(--read-gold);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.display-tab {
  position: absolute;
  z-index: 2;
  top: clamp(6rem, 12vw, 9rem);
  right: clamp(1rem, 4vw, 4rem);
  padding: .45rem .75rem;
  color: var(--read-ink);
  background: var(--read-red);
  border: 3px solid var(--read-ink);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(3deg);
}

.press-shelf {
  padding: clamp(5rem, 9vw, 8rem) clamp(1rem, 7vw, 7rem);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(20,26,43,.035) 31px 32px),
    var(--read-paper);
}

.shelf-heading {
  display: grid;
  grid-template-columns: 1fr .65fr;
  gap: 2rem;
  align-items: end;
  max-width: 1280px;
  margin: 0 auto 3rem;
}

.shelf-heading h2,
.open-shelf h2,
.reading-room-exit h2 {
  max-width: 13ch;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 6.4vw, 6.6rem);
  font-style: italic;
  line-height: .87;
  letter-spacing: -.055em;
}

.shelf-heading > p {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.55;
}

.publication-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}

.publication {
  position: relative;
  overflow: hidden;
  border: 5px solid var(--read-ink);
  box-shadow: .8rem .8rem 0 rgba(20,26,43,.2);
}

.featured-book {
  grid-row: span 2;
  display: grid;
  grid-template-rows: minmax(470px, 1fr) auto;
  color: var(--read-cream);
  background: var(--read-plum);
}

.book-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 470px;
  padding: 3rem;
  background:
    radial-gradient(circle at 50% 48%, rgba(224,173,79,.32), transparent 17rem),
    repeating-linear-gradient(135deg, transparent 0 24px, rgba(243,230,197,.06) 24px 26px),
    var(--read-red);
}

.book-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 12%;
  background: rgba(20,26,43,.38);
}

.book-stage img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(75%, 390px);
  max-height: 510px;
  object-fit: contain;
  filter: drop-shadow(1rem 1.2rem 0 rgba(20,26,43,.32));
  transform: rotate(-2deg);
}

.stage-burst {
  position: absolute;
  z-index: 4;
  top: 1.3rem;
  right: 1.2rem;
  display: grid;
  place-items: center;
  width: 7rem;
  aspect-ratio: 1;
  padding: .7rem;
  clip-path: polygon(50% 0,61% 16%,79% 7%,81% 27%,100% 31%,87% 48%,100% 63%,80% 69%,79% 90%,60% 81%,48% 100%,38% 81%,18% 91%,18% 70%,0 63%,13% 47%,0 31%,20% 27%,22% 7%,40% 16%);
  color: var(--read-ink);
  background: var(--read-gold);
  font-size: .72rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(8deg);
}

.publication-copy {
  padding: clamp(1.5rem, 3.5vw, 3rem);
}

.catalog-number {
  margin: 0 0 .65rem;
  color: var(--read-gold);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.publication h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 5vw, 5.3rem);
  font-style: italic;
  line-height: .85;
  letter-spacing: -.045em;
}

.publication-copy > p:not(.catalog-number) {
  max-width: 660px;
  margin: 1.2rem 0 1.7rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
}

.button-red {
  background: var(--read-cream);
  box-shadow: .5rem .5rem 0 var(--read-gold);
}

.boks-rack {
  color: var(--read-cream);
  background: var(--read-blue);
}

.mini-books {
  position: relative;
  min-height: 310px;
  border-bottom: 5px solid var(--read-ink);
  background:
    linear-gradient(0deg, rgba(20,26,43,.5) 0 16%, transparent 16%),
    radial-gradient(circle at 50% 48%, rgba(224,173,79,.26), transparent 13rem),
    var(--read-green);
}

.mini-book {
  position: absolute;
  top: 10%;
  width: min(43%, 220px);
  height: 74%;
  object-fit: cover;
  border: 3px solid var(--read-ink);
  box-shadow: .8rem .8rem 0 rgba(20,26,43,.32);
}

.book-one {
  left: 15%;
  transform: rotate(-7deg);
}

.book-two {
  right: 13%;
  transform: rotate(7deg);
}

.publication-state {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .35rem .55rem;
  color: var(--read-ink);
  background: var(--read-gold);
  font-size: .65rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.boks-rack h3,
.argos-folio h3 {
  font-size: clamp(3.2rem, 6vw, 6rem);
}

.text-link {
  display: inline-block;
  padding-bottom: .22rem;
  border-bottom: 4px solid currentColor;
  color: var(--read-gold);
  font-weight: 950;
  text-decoration: none;
  text-transform: uppercase;
}

.argos-folio {
  background: var(--read-cream);
}

.folio-art {
  position: relative;
  min-height: 330px;
  border-bottom: 5px solid var(--read-ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(35,71,102,.13) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(35,71,102,.13) 27px 28px),
    #d8c899;
}

.folio-art img {
  position: absolute;
  top: 4%;
  right: 4%;
  bottom: 4%;
  width: auto;
  height: 92%;
  object-fit: contain;
  border: .35rem solid var(--read-cream);
  background: var(--read-cream);
  box-shadow: .55rem .65rem 0 rgba(20,26,43,.2);
  transform: rotate(1.5deg);
}

.folio-label {
  position: absolute;
  z-index: 3;
  top: 1rem;
  left: 1rem;
  padding: .35rem .55rem;
  color: var(--read-cream);
  background: var(--read-red);
  border: 2px solid var(--read-ink);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.argos-folio .catalog-number,
.open-shelf .press-mark {
  color: var(--read-red);
}

.argos-folio .text-link {
  color: var(--read-red);
}

.open-shelf {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  padding: clamp(5rem, 9vw, 8rem) clamp(1rem, 7vw, 7rem);
  background:
    radial-gradient(circle at 15% 35%, rgba(185,58,53,.13), transparent 24rem),
    var(--read-cream);
}

.open-shelf-copy > p:not(.press-mark) {
  max-width: 650px;
  margin-top: 1.4rem;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.55;
}

.future-rack {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: .45rem;
  min-height: 390px;
  padding: 2rem 2rem 1.8rem;
  border-bottom: 18px solid var(--read-ink);
  background:
    linear-gradient(90deg, rgba(20,26,43,.06) 1px, transparent 1px) 0 0 / 34px 34px,
    rgba(233,213,167,.5);
}

.future-book {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 18%;
  padding: 1rem .5rem;
  border: 4px dashed var(--read-ink);
  color: var(--read-ink);
  background: rgba(255,255,255,.25);
}

.future-book span {
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.future-book.tall { height: 300px; }
.future-book.short { height: 225px; border-color: var(--read-red); color: var(--read-red); }
.future-book.wide { width: 25%; height: 260px; border-color: var(--read-blue); color: var(--read-blue); }
.future-book.slim { width: 13%; height: 280px; border-color: var(--read-green); color: var(--read-green); }

.bookend {
  display: grid;
  place-items: center;
  width: 6rem;
  aspect-ratio: 1;
  margin-left: .5rem;
  color: var(--read-cream);
  background: var(--read-red);
  border: 5px solid var(--read-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 900;
}

.reading-room-exit {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 8vw, 8rem);
  color: var(--read-cream);
  background:
    linear-gradient(112deg, transparent 0 52%, rgba(224,173,79,.1) 52% 54%, transparent 54%),
    var(--read-plum);
}

.reading-room-exit h2 {
  max-width: 12ch;
}

.button-cream {
  margin-top: 2rem;
  background: var(--read-cream);
}

.read-footer {
  color: white;
  background: #0c0d17;
}

@media (max-width: 940px) {
  .shelf-heading,
  .publication-grid,
  .open-shelf {
    grid-template-columns: 1fr;
  }

  .featured-book {
    grid-row: auto;
  }

  .open-shelf-copy {
    max-width: 820px;
  }
}

@media (max-width: 620px) {
  .read-header {
    width: calc(100% - 1rem);
  }

  .read-header .main-nav {
    gap: .65rem;
    font-size: .68rem;
  }

  .reading-room-hero h1 {
    font-size: clamp(3.8rem, 17vw, 5.6rem);
  }

  .reading-room-hero {
    min-height: 100svh;
  }

  .door-display img {
    object-position: 61% center;
  }

  .display-tab,
  .door-display figcaption {
    display: none;
  }

  .book-stage {
    min-height: 390px;
    padding: 2rem 1rem;
  }

  .book-stage img {
    width: 78%;
  }

  .stage-burst {
    width: 6rem;
  }

  .mini-books,
  .folio-art {
    min-height: 280px;
  }

  .future-rack {
    min-height: 330px;
    padding-inline: .75rem;
  }

  .future-book {
    width: 20%;
    padding-inline: .25rem;
  }

  .future-book.tall { height: 245px; }
  .future-book.short { height: 190px; }
  .future-book.wide { width: 24%; height: 220px; }
  .future-book.slim { width: 15%; height: 235px; }
  .bookend { width: 3.7rem; font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}