:root {
  --verdigris:       #4a8b7a;
  --verdigris-dark:  #2a5a48;
  --verdigris-pale:  #8abfae;
  --verdigris-dim:   #3a6a58;
  --gold:            #c8a84a;
  --gold-dark:       #8a6820;
  --sign-bg:
    repeating-linear-gradient(
      90deg, transparent 0px, rgba(255,255,255,0.03) 1px,
      transparent 2px, transparent 14px
    ),
    linear-gradient(to bottom,
      #1e4438 0px, #326858 3px, #448a70 8px,
      #387a62 50%,
      #448a70 calc(100% - 8px), #326858 calc(100% - 3px), #1e4438 100%
    );
  --parchment:       #d4c49a;
  --parchment-dim:   #9a8a6a;
  --room-dark:       #1e2e22;
  --text-main:       #c8d4cc;
}

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

body {
  background-color: var(--room-dark);
  background-image:
    repeating-linear-gradient(90deg,  transparent 0px, rgba(255,255,255,0.005) 1px, transparent 3px, transparent 80px),
    repeating-linear-gradient(180deg, transparent 0px, rgba(0,0,0,0.06) 1px, transparent 3px, transparent 50px),
    radial-gradient(ellipse 100% 60% at 50% 105%, rgba(160, 80, 15, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 80% at  8% 50%,  rgba(160, 80, 15, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 80% at 92% 50%,  rgba(160, 80, 15, 0.07) 0%, transparent 70%),
    linear-gradient(to bottom, #182818 0%, #1e3020 50%, #223424 100%);
  min-height: 100vh;
  font-family: 'IM Fell English', Georgia, serif;
  color: var(--text-main);
  overflow-x: hidden;
  background-attachment: fixed;
  cursor: default;
}

.room-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.atmosphere-window {
  position: absolute;
  top: 0; left: 4%;
  width: 110px;
  height: 52vh;
  clip-path: polygon(12% 0%, 88% 0%, 100% 9%, 100% 82%, 50% 100%, 0% 82%, 0% 9%);
  background: linear-gradient(to bottom,
    rgba(180,225,248,0.28) 0%,
    rgba(170,218,245,0.14) 55%,
    transparent 100%
  );
}

/* mullion */
.atmosphere-window::before {
  content: '';
  position: absolute;
  left: 50%; top: 4%;
  width: 1px; height: 72%;
  background: rgba(176,210,230,0.14);
  transform: translateX(-50%);
}

/* transom */
.atmosphere-window::after {
  content: '';
  position: absolute;
  left: 10%; top: 38%;
  right: 10%; height: 1px;
  background: rgba(176,210,230,0.14);
}

.atmosphere-moon-area {
  position: absolute;
  top: 14px; left: 1.5%;
  width: 140px;
  text-align: center;
  user-select: none;
}

.moon-crescent {
  display: block;
  font-size: 28px;
  color: rgba(220,240,255,0.80);
  text-shadow: 0 0 18px rgba(180,225,248,0.75), 0 0 42px rgba(160,215,245,0.38);
  margin-bottom: 4px;
  animation: moon-glow 5s ease-in-out infinite alternate;
}

@keyframes moon-glow {
  0%   { text-shadow: 0 0 14px rgba(180,225,248,0.65), 0 0 36px rgba(160,215,245,0.30); }
  100% { text-shadow: 0 0 24px rgba(200,240,255,0.95), 0 0 58px rgba(180,225,248,0.50); }
}

/* glow */
.atmosphere-fireplace {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 300px;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(210,100,16,0.24) 0%,
    rgba(165,72,8,0.12) 45%,
    transparent 70%
  );
  animation: fire-breathe 3.5s ease-in-out infinite alternate;
}

@keyframes fire-breathe {
  0%   { opacity: 0.70; transform: translateX(-50%) scaleX(1.00); }
  30%  { opacity: 1.00; transform: translateX(-50%) scaleX(1.05); }
  65%  { opacity: 0.82; transform: translateX(-50%) scaleX(0.97); }
  100% { opacity: 0.92; transform: translateX(-50%) scaleX(1.03); }
}

.entrance-curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    linear-gradient(to right,
      #060a08 0%, #0a1410 60%, #0d1a14 100%
    );
  transform-origin: left center;
  animation: curtain-sweep 1.1s 0.2s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  pointer-events: none;
}
.entrance-curtain::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--verdigris-dark) 15%,
    var(--verdigris) 50%,
    var(--verdigris-dark) 85%,
    transparent 100%
  );
}
@keyframes curtain-sweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.library-body {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 50px 50px 0px;
  opacity: 0;
  animation: content-arrive 0.7s 1.1s ease forwards;
}

@keyframes content-arrive {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

.lib-header {
  text-align: center;
  padding: 50px 0 55px;
  position: relative;
}

.lib-header h1 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-variant: small-caps;
  font-size: clamp(22px, 5vw, 52px);
  font-weight: bold;
  letter-spacing: 0.22em;
  line-height: 1.2;
  color: #eef8f2;
  padding: clamp(14px, 3vw, 22px) clamp(28px, 6vw, 60px);
  background: var(--sign-bg);
  border: 1px solid var(--verdigris);
  border-top: 2px solid #6aaa90;
  border-bottom: 2px solid #2a5248;
  box-shadow:
    0 5px 20px rgba(0,0,0,0.65),
    0 2px 6px rgba(0,0,0,0.45),
    inset 0 2px 5px rgba(255,255,255,0.08),
    inset 0 -2px 5px rgba(0,0,0,0.35);
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 22px rgba(74,139,122,0.22);
  position: relative;
  display: inline-block;
}
.lib-header h1::before,
.lib-header h1::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 5px; height: 9px;
  background: linear-gradient(to bottom, #3a7060 0%, #2a5248 100%);
  border-radius: 1px;
  box-shadow: 0 -1px 2px rgba(0,0,0,0.5);
}
.lib-header h1::before { left: 22%; transform: translateX(-50%); }
.lib-header h1::after  { right: 22%; transform: translateX(50%); }

.lib-subtitle {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px;
  color: var(--parchment-dim);
  letter-spacing: 0.1em;
  margin-bottom: 28px;
}

.header-rule {
  position: relative;
  width: 280px;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%, var(--verdigris-dark) 25%, var(--verdigris) 50%, var(--verdigris-dark) 75%, transparent 100%
  );
  margin: 0 auto;
}

.header-rule::before {
  content: '⚜';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--verdigris);
  font-size: 13px;
  background: var(--room-dark);
  padding: 0 12px;
  text-shadow: 0 0 12px rgba(74,139,122,0.4);
}

/* back link */
.lib-back {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--verdigris-dim);
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}
.lib-back:hover {
  color: var(--verdigris-pale);
}
.lib-back::before { content: '← '; }

.lib-sign-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 58px;
  margin: 0 auto 20px;
}

/* Chain strands */
.lib-sign-wrapper::before,
.lib-sign-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 5px;
  height: 55px;
  background:
    repeating-linear-gradient(180deg,
      #1e3a2e 0px,  #1e3a2e 2px,
      #5a9a80 2px,  #5a9a80 4px,
      #4a8870 4px,  #4a8870 5px,
      #1e3a2e 5px,  #1e3a2e 7px,
      #7abaa0 7px,  #7abaa0 8px,
      #1e3a2e 8px,  #1e3a2e 10px
    );
  border-radius: 2px;
  box-shadow: 1px 0 3px rgba(0,0,0,0.6), -1px 0 2px rgba(0,0,0,0.35);
}

.lib-sign-wrapper::before { left: 22%; }
.lib-sign-wrapper::after  { right: 22%; }

.shelf-section {
  margin-bottom: 90px;
  position: relative;
}

.shelf-section:nth-child(1) { animation: section-rise 0.6s 1.3s ease both; z-index: 9; }
.shelf-section:nth-child(2) { animation: section-rise 0.6s 1.5s ease both; z-index: 8; }

@keyframes section-rise {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

.section-plaque {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 44px;
  position: relative;
}

.section-plaque::before,
.section-plaque::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--verdigris-dark));
}

.section-plaque::after {
  background: linear-gradient(to left, transparent, var(--verdigris-dark));
}

.section-plaque h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(15px, 2.4vw, 22px);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(200,168,74,0.22);
  white-space: nowrap;
}

.plaque-ornament {
  color: var(--verdigris-dark);
  font-size: 16px;
  flex-shrink: 0;
}

.section-sub {
  text-align: center;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--parchment-dim);
  letter-spacing: 0.07em;
  margin-top: -34px;
  margin-bottom: 40px;
  opacity: 0.8;
}

.bookshelf-container {
  position: relative;
  padding-left: 80px;
}

ol.bookshelf {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
  padding-bottom: 40px;
}

/* The shelf plank */
ol.bookshelf::after {
  content: '';
  display: block;
  position: absolute;
  left: -90px; right: -20px;
  bottom: 18px;
  height: 22px;
  background:
    repeating-linear-gradient(181deg,
      transparent 0px, transparent 18px,
      rgba(0,0,0,0.07) 18px, rgba(0,0,0,0.07) 20px,
      transparent 20px, transparent 44px,
      rgba(255,200,120,0.08) 44px, rgba(255,200,120,0.08) 46px
    ),
    linear-gradient(to bottom, #c49060 0%, #9b6535 28%, #7a4a22 60%, #6b3e1a 100%);
  box-shadow:
    0 8px 22px rgba(0,0,0,0.70),
    0 2px 5px  rgba(0,0,0,0.40),
    inset 0 2px 4px rgba(255,200,120,0.12);
  border-radius: 2px;
  z-index: 0;
}

ol.bookshelf li {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: book-slide-in 0.45s ease forwards;
}

/* Staggered book entrance — 20 books */
ol.bookshelf li:nth-child(1)  { animation-delay: 1.55s; }
ol.bookshelf li:nth-child(2)  { animation-delay: 1.70s; }
ol.bookshelf li:nth-child(3)  { animation-delay: 1.85s; }
ol.bookshelf li:nth-child(4)  { animation-delay: 2.00s; }
ol.bookshelf li:nth-child(5)  { animation-delay: 2.15s; }
ol.bookshelf li:nth-child(6)  { animation-delay: 2.30s; }
ol.bookshelf li:nth-child(7)  { animation-delay: 2.45s; }
ol.bookshelf li:nth-child(8)  { animation-delay: 2.60s; }
ol.bookshelf li:nth-child(9)  { animation-delay: 2.75s; }
ol.bookshelf li:nth-child(10) { animation-delay: 2.90s; }
ol.bookshelf li:nth-child(11) { animation-delay: 3.05s; }
ol.bookshelf li:nth-child(12) { animation-delay: 3.20s; }
ol.bookshelf li:nth-child(n+13) { animation-delay: 3.35s; }

/* Reflections section books start later */
#reflections ol.bookshelf li:nth-child(1)  { animation-delay: 2.00s; }
#reflections ol.bookshelf li:nth-child(2)  { animation-delay: 2.15s; }
#reflections ol.bookshelf li:nth-child(3)  { animation-delay: 2.30s; }
#reflections ol.bookshelf li:nth-child(4)  { animation-delay: 2.45s; }
#reflections ol.bookshelf li:nth-child(5)  { animation-delay: 2.60s; }
#reflections ol.bookshelf li:nth-child(n+6) { animation-delay: 2.75s; }

@keyframes book-slide-in {
  0%   { opacity: 0; transform: translateX(-18px); }
  100% { opacity: 1; transform: translateX(0); }
}

ol.bookshelf li:hover { z-index: 100; }

.book-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: max-content
}

div.title {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  gap: 12px;
  border-radius: 4px;
  font-variant: small-caps;
  font-size: 17px;
  letter-spacing: 0.1em;
  color: #e8c84a;
  padding: 11px 36px 11px 36px;
  font-family: 'IM Fell English', serif;
  min-width: 120px;
  width: max-content;
  flex: nowrap;
  margin-left: -69px;
  white-space: nowrap;
  cursor: pointer;
  background-image:
    repeating-linear-gradient(87deg, transparent 0px, rgba(0,0,0,0.25) 1px, transparent 3px, transparent 6px),
    repeating-linear-gradient(93deg, transparent 0px, rgba(255,255,255,0.12) 1px, transparent 3px, transparent 9px),
    repeating-linear-gradient(45deg, transparent 0px, rgba(0,0,0,0.20) 1px, transparent 2px, transparent 7px),
    repeating-linear-gradient(135deg, transparent 0px, rgba(0,0,0,0.15) 1px, transparent 2px, transparent 9px),
    linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(255,255,255,0.12) 50%, rgba(0,0,0,0.20) 100%),
    linear-gradient(to right,
      rgba(200,160,48,0.9)  0px, rgba(200,160,48,0.9) 6px, transparent 6px,
      transparent 18px, rgba(200,160,48,0.5) 18px, rgba(200,160,48,0.5) 22px,
      transparent 22px, transparent calc(100% - 22px),
      rgba(200,160,48,0.5) calc(100% - 22px), rgba(200,160,48,0.5) calc(100% - 18px),
      transparent calc(100% - 18px), transparent calc(100% - 6px),
      rgba(200,160,48,0.9) calc(100% - 6px), rgba(200,160,48,0.9) 100%
    );
  box-shadow:
    0 3px 0px rgba(0,0,0,0.75),
    0 -2px 0px rgba(0,0,0,0.45),
    inset 0 -5px 10px rgba(0,0,0,0.40);
  transform-style: preserve-3d;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.title-text {
  display: inline-block;
  white-space: normal;   
  max-width: 50vw;      
  vertical-align: middle;
}

.book-ornament {
  display: inline-block;
  color: #e8c84a;
  font-size: 0.9em;
  opacity: 0.75;
  flex-shrink: 0;
}

/* pages */
div.title::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(100% - 4px);
  width: 34px;
  height: 100%;
  clip-path: polygon(0 0, 0% 8%, 0% 25%, 0% 50%, 0% 75%, 0% 92%, 0 100%);
  background-image:
    repeating-linear-gradient(45deg, transparent 0px, rgba(255,255,255,0.08) 1px, transparent 2px, transparent 7px),
    repeating-linear-gradient(87deg, transparent 0px, rgba(255,255,255,0.06) 1px, transparent 3px, transparent 6px),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.42) 100%),
    linear-gradient(to bottom,
      #1a0608 0%, #1a0608 14%, transparent 22%, transparent 78%, #1a0608 86%, #1a0608 100%
    ),
    repeating-linear-gradient(to bottom,
      #f8f3e6 0px, #f8f3e6 1.5px, #ddd4bc 2px, #ddd4bc 2.5px,
      #f0e8d4 3px, #f0e8d4 4.5px, #e4dbc6 5px
    );
  transition: clip-path 0.35s ease;
}

/* Spine colors — dark academia palette */
ol.bookshelf li:nth-child(6n+1) div.title { background-color: #3c1212; }
ol.bookshelf li:nth-child(6n+2) div.title { background-color: #0e2820; }
ol.bookshelf li:nth-child(6n+3) div.title { background-color: #181830; }
ol.bookshelf li:nth-child(6n+4) div.title { background-color: #281c08; }
ol.bookshelf li:nth-child(6n+5) div.title { background-color: #28101e; }
ol.bookshelf li:nth-child(6n+6) div.title { background-color: #0e2424; }

/* Hover: book tilts in 3D, verdigris glow */
ol.bookshelf li:hover div.title {
  transform: perspective(1200px) rotateY(-20deg);
  box-shadow:
    6px 6px 18px rgba(0,0,0,0.65),
    -1px 0 4px rgba(0,0,0,0.4),
    inset 0 -5px 10px rgba(0,0,0,0.40),
    8px 0 24px rgba(74,139,122,0.18),
    inset 42px 0 30px -14px rgba(0,0,0,0.58);
}

ol.bookshelf li:hover div.title::before {
  clip-path: polygon(0 0, 100% 8%, 88% 25%, 82% 50%, 88% 75%, 100% 92%, 0 100%);
}

ol.bookshelf li:nth-child(even):hover div.title {
  transform: perspective(1200px) rotateY(20deg);
  box-shadow:
    -6px 6px 18px rgba(0,0,0,0.65),
    1px 0 4px rgba(0,0,0,0.4),
    inset 0 -5px 10px rgba(0,0,0,0.40),
    -8px 0 24px rgba(74,139,122,0.18),
    inset -42px 0 30px -14px rgba(0,0,0,0.58);
}

ol.bookshelf li:nth-child(even) div.title::before {
  left: auto;
  right: calc(100% - 4px);
  clip-path: polygon(100% 0, 100% 8%, 100% 25%, 100% 50%, 100% 75%, 100% 92%, 100% 100%);
}

ol.bookshelf li:nth-child(even):hover div.title::before {
  clip-path: polygon(100% 0, 0% 8%, 12% 25%, 18% 50%, 12% 75%, 0% 92%, 100% 100%);
}

.book-meta-container {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateX(18px) translateY(-50%);
  transform-style: flat;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 10;
}
ol.bookshelf li:hover .book-meta-container {
  transform: translateX(0) translateY(-50%) rotateY(20deg);
}
ol.bookshelf li:nth-child(even):hover .book-meta-container {
  transform: translateX(0) translateY(-50%) rotateY(-20deg);
}

div.book-meta {
  z-index: 100;
  padding: 16px 15px 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13.5px;
  line-height: 1.75;
  color: #2a1808;
  background:
    repeating-linear-gradient(17deg, transparent 0px, rgba(160,140,100,0.04) 1px, transparent 2px, transparent 7px),
    radial-gradient(ellipse at 30% 15%, rgba(255,252,228,0.5) 0%, transparent 55%),
    #cfc09a;
  width: 190px;
  max-width: 45vw;
  box-shadow:
    0 5px 16px rgba(0,0,0,0.5),
    0 14px 34px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.25);
  opacity: 0;
  pointer-events: none;
  clip-path: polygon(
    0% 0%, 4% 1.8%, 9% 0.4%, 15% 2.2%, 22% 0.6%, 30% 1.9%,
    38% 0.3%, 47% 1.7%, 55% 0.5%, 63% 1.8%, 71% 0.4%,
    80% 2.0%, 88% 0.7%, 95% 1.5%, 100% 0.8%,
    100% 100%, 0% 100%
  );
  transition: opacity 0.18s ease;
  rotate: -1.8deg;
}

div.book-meta .meta-author {
  display: block;
  font-size: 13px;
  color: #3a2010;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(100,70,30,0.28);
}

div.book-meta .meta-rating {
  display: block;
  color: var(--gold-dark);
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 5px;
  font-style: normal;
}

div.book-meta .meta-genre {
  display: block;
  font-size: 11px;
  color: var(--verdigris-dark);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-style: normal;
}

ol.bookshelf li:hover div.book-meta {
  opacity: 1;
}

/* Sticky notes */
.sticky-note {
  position: absolute;
  width: 100px;
  padding: 9px 11px;
  background: #eece50;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, transparent 25%);
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 12px;
  color: #2a1800;
  line-height: 1.55;
  rotate: var(--rot, -3deg);
  top: var(--top, 200px);
  left: var(--left, auto);
  right: var(--right, auto);
  box-shadow: 2px 3px 8px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(0,0,0,0.08);
  z-index: 5;
  pointer-events: none;
}

.sticky-note::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: rgba(0,0,0,0.07);
  z-index: 5;
}

/* Pushpin */
.pushpin {
  position: absolute;
  top: var(--top, 50px);
  left: var(--left, auto);
  right: var(--right, auto);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    #d04820 0%, #a03010 55%, #701808 100%
  );
  box-shadow:
    1px 2px 5px rgba(0,0,0,0.6),
    inset 1px 1px 2px rgba(255,120,60,0.3);
  z-index: 7;
  pointer-events: none;
}

.pushpin::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 10px;
  background: linear-gradient(to bottom, #606060, #303030);
  border-radius: 0 0 1px 1px;
  z-index: 6;
}

/*fireplace*/
.lib-mantle {
  margin: 80px auto 0;
  width: 560px;
  max-width: 100%;
  position: relative;
  animation: card-arrive 0.6s 1.6s ease both;
}

/* shelf */
.mantle-shelf {
  position: relative;
  height: 28px;
  background: linear-gradient(to bottom,
    #545848 0%, #42463a 40%, #32362e 100%
  );
  box-shadow:
    0 8px 22px rgba(0,0,0,0.8),
    0 3px 6px rgba(0,0,0,0.5),
    inset 0 2px 3px rgba(255,255,255,0.07),
    inset 0 -1px 2px rgba(0,0,0,0.4);
  border-radius: 2px 2px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 2;
}

/* links */
.mantle-shelf-links {
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  text-align: center;
  padding: 0 0 8px;
}

.mantle-shelf-links a {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--verdigris-dim);
  text-decoration: none;
  transition: color 0.2s ease;
  opacity: 0.7;
}

.mantle-shelf-links a:hover {
  color: var(--verdigris-pale);
  opacity: 1;
}

.mantle-shelf-links a + a::before {
  content: ' 📜 ';
  font-size: 10px;
  vertical-align: middle;
}

.mantle-shelf-links .library-wrap {
  display: none;
}

/* stone */
.mantle-surround {
  display: flex;
  flex-direction: row;
}

.mantle-pilaster {
  width: 36px;
  background: linear-gradient(to right,
    #282e26 0%, #363c30 50%, #2a3028 100%
  );
  box-shadow: inset -3px 0 8px rgba(0,0,0,0.4);
  padding-bottom: 0;
}

.mantle-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #2e342c;
  padding: 20px 24px 0;
  gap: 18px;
}

/* crest */
.mantle-crest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* circle */
.mantle-crest div.wax-seal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #2a1e1e;
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,0.85),
    inset 0 0 30px rgba(0,0,0,0.6),
    0 0 0 2px rgba(0,0,0,0.6),
    0 0 0 4px rgba(255,255,255,0.04),
    0 0 0 6px rgba(0,0,0,0.5);
  clip-path: none;
}

.mantle-crest a.wax-seal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: none;
  background-image: none;
  text-decoration: none;
}

.mantle-crest span.seal-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  z-index: 2;
}

/* letters */
.mantle-crest span.seal-letter {
  position: absolute;
  font-style: italic;
  font-weight: bold;
  color: #5a2a2a;
  text-shadow:
    0 -1px 1px rgba(255,255,255,0.06),
    0 2px 3px rgba(0,0,0,0.95);
}

.mantle-crest span.seal-letter:nth-child(1) { font-size: 1.75rem; transform: translate(-11px, -11px); z-index: 4; }
.mantle-crest span.seal-letter:nth-child(2) { font-size: 1.75rem; transform: translate( 7px, -10px);  z-index: 3; }
.mantle-crest span.seal-letter:nth-child(3) { font-size: 1.75rem; transform: translate(-11px,  11px); z-index: 2; }
.mantle-crest span.seal-letter:nth-child(4) { font-size: 1.60rem; transform: translate(  9px,  11px); z-index: 1; }

/* firebox */
.mantle-firebox {
  width: 75%;
  height: 180px;
  background: radial-gradient(ellipse at 50% 100%,
      rgba(220,95,10,0.50) 0%,
      rgba(140,50,5,0.28) 38%,
      transparent 68%
    ),
    repeating-linear-gradient(
      93deg,
      transparent 0px, rgba(0,0,0,0.08) 1px,
      transparent 2px, transparent 7px
    ),
    repeating-linear-gradient(
      183deg,
      transparent 0px, rgba(0,0,0,0.10) 1px,
      transparent 2px, transparent 9px
    ),
    repeating-linear-gradient(180deg,
      rgba(0,0,0,0.55) 0px,  rgba(0,0,0,0.55) 2px,
      transparent      2px,  transparent      38px,
      rgba(0,0,0,0.55) 38px, rgba(0,0,0,0.55) 40px,
      transparent      40px, transparent      74px,
      rgba(0,0,0,0.55) 74px, rgba(0,0,0,0.55) 76px,
      transparent      76px, transparent      118px,
      rgba(0,0,0,0.55) 118px,rgba(0,0,0,0.55) 120px,
      transparent      120px,transparent      156px,
      rgba(0,0,0,0.55) 156px,rgba(0,0,0,0.55) 158px,
      transparent      158px,transparent      180px
    ),repeating-linear-gradient(90deg,
      rgba(0,0,0,0.45) 0px,  rgba(0,0,0,0.45) 2px,
      transparent      2px,  transparent      52px,
      rgba(0,0,0,0.45) 52px, rgba(0,0,0,0.45) 54px,
      transparent      54px, transparent      110px,
      rgba(0,0,0,0.45) 110px,rgba(0,0,0,0.45) 112px,
      transparent      112px,transparent      160px
    ),
    repeating-linear-gradient(90deg,
      transparent       0px, transparent       26px,
      rgba(0,0,0,0.45) 26px, rgba(0,0,0,0.45) 28px,
      transparent      28px, transparent       80px,
      rgba(0,0,0,0.45) 80px, rgba(0,0,0,0.45) 82px,
      transparent      82px, transparent      136px,
      rgba(0,0,0,0.45) 136px,rgba(0,0,0,0.45) 138px,
      transparent      138px,transparent      180px
    ),
    #0c0e0a;
  border-radius: 6px 6px 0 0;
  box-shadow:
    inset 0 6px 24px rgba(0,0,0,0.97),
    inset 0 0 50px rgba(0,0,0,0.9),
    0 0 40px rgba(180,70,5,0.12);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  padding-bottom: 10px;
  gap: 0;
}

/* logs */
.fire-logs {
  position: relative;
  width: 80px;
  height: 24px;
  z-index: 2;
}

.log {
  position: absolute;
  font-size: 26px;
  line-height: 1;
}

.log-back  { transform: rotate(-30deg); bottom: 6px; left: 6px; opacity: 0.9; }
.log-front { transform: rotate( 30deg); bottom: 2px; right: 6px; opacity: 0.95; }

/* flames */
.fire-flames {
  position: absolute;
  bottom: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0;
  z-index: 3;
}

.flame {
  display: inline-block;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255,120,20,0.6));
}

.flame-c { font-size: 70px; animation: flicker-c 2.1s ease-in-out infinite alternate; }

@keyframes flicker-c {
  0%   { transform: scaleX(1)    scaleY(1)    translateX(0);    opacity: 1; }
  40%  { transform: scaleX(0.92) scaleY(1.08) translateX(1px);  opacity: 0.95; }
  100% { transform: scaleX(1.06) scaleY(0.96) translateX(-1px); opacity: 1; }
}

img.feather {
  display: none;
}
.links .library-wrap {
  display: none;
}

.links {
  text-align: center;
  padding: 20px 0 40px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.links:hover {
  opacity: 1;
}

.links a {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--verdigris-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}

.links a:hover {
  color: var(--verdigris-pale);
}

.links a + a::before {
  content: ' 📜 ';
  font-size: 10px;
  vertical-align: middle;
}

/*ladder*/
.back-to-top {
  text-align: center;
  margin: 50px 0 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 50px 0 50px;
}

.ladder-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.3s ease;
}

.ladder-link:hover { opacity: 1; }

.ladder-inner {
  display: block;
  position: relative;
  width: 42px;
  height: 136px;
  transform: rotate(14deg);
  transform-origin: bottom center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rail {
  display: block;
  position: absolute;
  top: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(to right,
    #4a2808 0%, #9b6535 35%, #c49060 50%, #9b6535 65%, #6b3e1a 100%
  );
  border-radius: 3px 3px 2px 2px;
}

.rail-l { left: 0; }
.rail-r { right: 0; }

.rung {
  display: block;
  position: absolute;
  left: 0; right: 0;
  height: 7px;
  top: calc(10px + var(--r) * 25px);
  background: linear-gradient(to bottom, #8a5525 0%, #6b3e1a 55%, #8a5525 100%);
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.4);
}

.ladder-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--verdigris-dim);
  transition: color 0.2s;
}

.ladder-link:hover .ladder-label { 
  color: var(--verdigris-pale); 
}
.ladder-link:hover .ladder-inner {
  transform: rotate(0deg);
}

.lib-recs {
  clip-path: polygon(0% 0%, calc(100% - 18px) 0%, 100% 50%, calc(100% - 18px) 100%, 0% 100%);
  margin-right: 18px;
  text-indent: -6px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-variant: small-caps;
  letter-spacing: 0.15em;
  color: #d4ede0;
  text-decoration: none;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.8),
    0 0 8px rgba(160,220,190,0.2);
  padding: 10px 36px 10px 18px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px, rgba(255,255,255,0.03) 1px,
      transparent 2px, transparent 14px
    ),
    linear-gradient(to bottom, #244f42, #2e6650, #244f42);
  border-top: 1px solid #5aab88;
  border-bottom: 1px solid #5aab88;
  box-shadow:
    inset 0 2px 5px rgba(180,240,210,0.10),
    inset 0 -2px 5px rgba(0,0,0,0.50),
    inset 4px 0 8px rgba(0,0,0,0.25);
  filter:
    drop-shadow(0px 0px 1.5px rgba(0,0,0,0.95))
    drop-shadow(2px 0 5px rgba(0,0,0,0.5));
  transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.lib-recs:hover {
  transform: translateX(8px);
  color: #eef8f2;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px, rgba(255,255,255,0.03) 1px,
      transparent 2px, transparent 14px
    ),
    linear-gradient(to bottom, #2e6650, #448a70, #2e6650);
}
.lib-header .lib-recs {
  font-size: 11px;
  white-space: nowrap;
}

/* header nav links container */
.lib-header-links {
  position: absolute;
  top: 5px;
  right: -200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* individual link overrides when inside the header */
.lib-back {
  position: static;
  left: auto;
  top: auto;
}

.lib-header .lib-recs {
  position: static;
  left: auto;
  top: auto;
  font-size: 11px;
}

@media (max-width: 1250px) {
  .lib-header-links {
    align-items: flex-end;
    gap: 8px;
    right: -60px;
    top: -40px;
  }

  .lib-back {
    font-size: 13px;
    letter-spacing: 0.06em;
  }
  
  .lib-header-links .lib-back,
  .lib-header-links .lib-recs {
    white-space: normal;
    max-width: 200px;
    text-align: left;
    padding: 7px 18px 7px 12px;
  }
}

@media (max-width: 700px) {
  
/* hide sticky notes and pushpins */
  .sticky-note,
  .pushpin {
    display: none;
  }
  
/* book metadata change */
  .book-meta-container {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
    z-index: 10;
  }

  ol.bookshelf li:hover .book-meta-container,
  ol.bookshelf li:nth-child(even):hover .book-meta-container {
    transform: translateY(0);
  }

  div.book-meta {
    width: 50vw;
    max-width: 50vw;
    rotate: 0deg;
    border-radius: 8px 8px 0 0;
  }
}

@media (max-width: 500px) {
  .lib-header-links {
    flex-direction: row;
    right: -60px;
    gap: 2px;
  }

  .lib-back {
    font-size: 11px;
    right: -60px;
    letter-spacing: 0.04em;
  }

  .lib-header .lib-recs {
    font-size: 9px;
    max-width: 120px;
    right: -60px;
    padding: 7px 18px 7px 12px;
  }
}