:root {
  color-scheme: dark;
  --ink: #f5e6c2;
  --muted: #c8aa77;
  --shadow: #110c0b;
  --wood-dark: #17090a;
  --wood: #3e160e;
  --wood-light: #85511f;
  --brass: #c99a32;
  --curia-blue: #0d2744;
  --curia-red: #34100f;
  --green: #46644c;
  --blue: #2f5e74;
  --red: #813b35;
  --teal: #34706e;
  --violet: #695078;
  --ivory: #d8c9a5;
  --umber: #75502e;
  font-family: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(rgba(7, 4, 5, 0.84), rgba(10, 5, 6, 0.9)),
    url("/assets/book-of-hours/room-curia-reading.png") center / cover fixed;
  color: var(--ink);
}

a {
  color: inherit;
}

.library {
  min-height: 100vh;
  padding: clamp(8px, 1.4vw, 22px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.room {
  position: relative;
  width: min(1240px, calc((100vh - 16px) * 2), calc(100vw - 16px));
  aspect-ratio: 2 / 1;
  border: 1px solid rgba(205, 143, 39, 0.42);
  background:
    linear-gradient(180deg, rgba(13, 4, 5, 0.12), rgba(12, 5, 5, 0.48)),
    url("/assets/book-of-hours/room-curia-reading.png") center / cover no-repeat;
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.68), inset 0 0 96px rgba(0, 0, 0, 0.46);
  isolation: isolate;
}

.room::before,
.room::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.room::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.62)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 28%, rgba(0, 0, 0, 0.28));
  z-index: -1;
}

.room::after {
  background-image: url("/assets/grain.svg");
  opacity: 0.2;
  mix-blend-mode: overlay;
}

.wall-art {
  position: absolute;
  top: clamp(238px, 30vw, 310px);
  right: clamp(24px, 5vw, 76px);
  width: clamp(82px, 10vw, 132px);
  aspect-ratio: 0.59;
  display: grid;
  place-items: center;
  border: 1px solid rgba(225, 180, 92, 0.28);
  background: rgba(29, 15, 12, 0.36);
  box-shadow: 0 18px 24px rgba(0, 0, 0, 0.34), inset 0 0 24px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.wall-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.lamp-holder {
  position: absolute;
  left: clamp(28px, 6vw, 86px);
  bottom: clamp(30px, 7vw, 86px);
  width: clamp(50px, 6vw, 72px);
  filter: drop-shadow(0 0 20px rgba(242, 120, 95, 0.38)) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.6));
}

.lamp-holder::before {
  content: "";
  position: absolute;
  inset: 26% -70% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 87, 101, 0.28), transparent 64%);
  animation: flame 3.2s ease-in-out infinite;
}

.lamp-holder img {
  position: relative;
  width: 100%;
  display: block;
  image-rendering: auto;
}

.wall-art,
.lamp-holder {
  display: none;
}

.title-plaque {
  position: absolute;
  z-index: 3;
  left: clamp(18px, 4vw, 58px);
  top: clamp(18px, 4vw, 52px);
  width: min(590px, calc(100% - 380px));
  padding: clamp(13px, 1.5vw, 18px) clamp(16px, 2.1vw, 24px);
  border: 1px solid rgba(202, 150, 49, 0.54);
  background:
    linear-gradient(120deg, rgba(219, 163, 54, 0.14), transparent 44%),
    rgba(21, 8, 9, 0.78);
  box-shadow: inset 0 0 0 1px rgba(1, 10, 18, 0.42), 0 16px 30px rgba(0, 0, 0, 0.34);
}

.eyebrow,
.inspector-kicker {
  margin: 0 0 8px;
  color: var(--brass);
  font: 700 0.72rem/1.2 system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4.1vw, 4rem);
  line-height: 1;
  font-weight: 500;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}

.title-plaque p:last-child {
  margin: 12px 0 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.5;
}

.bookcase {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bookcase::before,
.bookcase::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.bookcase::before {
  display: none;
}

.bookcase::after {
  display: none;
}

.shelf {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: end;
  gap: clamp(1px, 0.18vw, 3px);
  min-width: 0;
  padding: 0;
  overflow: visible;
  pointer-events: auto;
}

.shelf-top {
  left: 3.1%;
  top: 36.8%;
  width: 28.8%;
  height: 13.4%;
}

.shelf-middle {
  left: 55.4%;
  top: 60.2%;
  width: 25.2%;
  height: 13.5%;
}

.shelf-bottom {
  left: 2.5%;
  top: 78%;
  width: 30.6%;
  height: 15%;
}

.shelf::after {
  display: none;
}

.book,
.book-filler {
  --book-width: 54px;
  --book-height: 136px;
  --book-tilt: 0deg;
  position: relative;
  z-index: 1;
  flex: 0 0 var(--book-width);
  width: var(--book-width);
  height: var(--book-height);
  min-height: 56px;
  max-height: 86px;
  border: 0;
  padding: 0;
  cursor: pointer;
  transform: rotate(var(--book-tilt));
  transform-origin: 50% 100%;
  text-decoration: none;
  display: block;
  border-radius: 3px;
  background: transparent;
  transform-style: preserve-3d;
  transition: transform 160ms ease, filter 160ms ease, translate 160ms ease;
}

.book-filler {
  pointer-events: none;
}

.book::before,
.book-filler::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -4px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  filter: blur(5px);
}

.book:hover,
.book:focus-visible {
  translate: 0 -4px;
  transform: rotate(0deg) scale(1.03);
  filter: brightness(1.15) saturate(1.04);
  outline: 2px solid rgba(242, 211, 143, 0.8);
  outline-offset: 3px;
}

.book.is-disabled {
  opacity: 0.65;
  cursor: default;
}

.book-spine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: right center;
  filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.36));
}

.book-spacer {
  flex: 0 0 var(--spacer-width);
  height: 20px;
}

.book-spacer-soft {
  flex-basis: clamp(var(--spacer-width), 0.8vw, 12px);
}

.inspector {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 4vw, 58px);
  top: clamp(18px, 4vw, 52px);
  width: min(300px, calc(100% - 40px));
  min-height: 118px;
  padding: 18px 20px;
  border: 1px solid rgba(202, 150, 49, 0.48);
  background:
    linear-gradient(135deg, rgba(205, 151, 49, 0.12), transparent 48%),
    linear-gradient(rgba(19, 8, 9, 0.82), rgba(14, 8, 10, 0.82)),
    url("/assets/book-of-hours/aureate-eye-cardback.png") right center / auto 120% no-repeat,
    rgba(20, 8, 9, 0.82);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(4, 18, 31, 0.36);
}

.inspector h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1;
  font-weight: 500;
}

.inspector p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.42;
}

@keyframes flame {
  0%,
  100% {
    transform: scale(0.94);
  }

  50% {
    transform: scale(1.08);
  }
}

@media (max-width: 820px) {
  .library {
    align-items: start;
    padding: 0;
  }

  .room {
    width: 100%;
    aspect-ratio: auto;
    min-height: 100vh;
    border: 0;
    background-size: auto 100%;
    background-position: left top;
  }

  .title-plaque {
    width: calc(100% - 36px);
  }

  h1 {
    font-size: clamp(2.4rem, 14vw, 4.4rem);
  }

  .wall-art {
    display: none;
  }

  .bookcase {
    inset: 0;
  }

  .shelf-top {
    left: 7%;
    top: 39%;
    width: 72%;
    height: 9.5%;
  }

  .shelf-middle {
    left: 7%;
    top: 52%;
    width: 72%;
    height: 10.2%;
  }

  .shelf-bottom {
    left: 7%;
    top: 68%;
    width: 72%;
    height: 12.5%;
  }

  .book {
    flex-basis: min(var(--book-width), 13vw);
    width: min(var(--book-width), 13vw);
    height: min(var(--book-height), 122px);
    max-height: 122px;
  }

  .book-filler {
    flex-basis: min(var(--book-width), 10vw);
    width: min(var(--book-width), 10vw);
    height: min(var(--book-height), 112px);
  }

  .lamp-holder {
    display: none;
  }

  .inspector {
    top: auto;
    left: 15px;
    right: 15px;
    bottom: 16px;
    width: auto;
    min-height: 98px;
    padding: 14px 16px;
  }
}

@media (max-width: 480px) {
  .title-plaque {
    padding: 14px;
  }

  .title-plaque p:last-child {
    font-size: 0.9rem;
  }

  .bookcase {
    inset: 0;
  }

  .shelf {
    gap: 1px;
    padding-inline: 0;
  }

  .book-spacer {
    display: none;
  }
}