/*
 * Númenor volume language
 * A royal maritime atlas: indigo leather, salt-aged vellum, white stone,
 * and bronze instruments of navigation.
 */

body.numenor-volume {
  --atlas-walnut-950: #07131f;
  --atlas-walnut-900: #0d2033;
  --atlas-walnut-800: #17334d;
  --atlas-walnut-700: #294d67;
  --atlas-parchment-100: #f6f1e3;
  --atlas-parchment-200: #e8e0ce;
  --atlas-parchment-300: #d0c5af;
  --atlas-parchment-500: #a99b83;
  --atlas-ink: #1f3442;
  --atlas-ink-soft: #526775;
  --atlas-gold: #ae8248;
  --atlas-gold-light: #d9bd82;
  --atlas-oxblood: #315c74;
  --atlas-oxblood-deep: #17394f;
  --atlas-forest: #47766f;
  --atlas-shadow: rgba(5, 17, 29, 0.48);
  --numenor-indigo: #173d5d;
  --numenor-indigo-deep: #091d30;
  --numenor-royal-blue: #315f7a;
  --numenor-bronze: #ae8248;
  --numenor-bronze-light: #ddc48f;
  --numenor-sea-green: #47766f;
  --numenor-vellum: #eee8d8;
  --numenor-white-stone: #f7f3e8;
  --numenor-route-royal: #8f6738;
  --numenor-route-coastal: #416d77;
  --numenor-route-sacred: #685b80;
  --numenor-route-road: #334f68;
  color: var(--atlas-ink);
}

/* The royal sea-chart rests on indigo leather above the shared study desk. */

.numenor-volume .atlas-physical-map__surface--numenor {
  filter:
    drop-shadow(0 17px 20px rgba(8, 4, 3, 0.46))
    drop-shadow(0 3px 4px rgba(8, 16, 22, 0.52));
}

.numenor-volume .atlas-physical-mat-pane--royal-indigo-leather .atlas-physical-mat__layer--surface {
  filter: hue-rotate(92deg) saturate(0.9) brightness(0.78);
}

.numenor-volume .atlas-physical-mat-pane--royal-indigo-leather .atlas-physical-mat__layer--shadow {
  filter: drop-shadow(0 13px 17px rgba(5, 4, 3, 0.72));
}

.numenor-volume .atlas-physical-mat-pane--royal-indigo-leather .atlas-physical-mat__layer--edge {
  filter: drop-shadow(0 1px 0 rgba(232, 204, 147, 0.22));
}

.numenor-volume .atlas-physical-frame-pane--numenor,
.numenor-volume .atlas-physical-frame-pane--numenor * {
  pointer-events: none;
}

.numenor-volume .atlas-physical-frame__line {
  fill: none;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.numenor-volume .atlas-physical-frame__line--shadow {
  stroke: rgba(4, 11, 16, 0.7);
  stroke-width: 30px;
  filter: drop-shadow(0 12px 14px rgba(5, 3, 2, 0.6));
}

.numenor-volume .atlas-physical-frame__line--outer {
  stroke: #081a28;
  stroke-width: 21px;
}

.numenor-volume .atlas-physical-frame__line--texture {
  stroke-width: 17px;
  stroke-opacity: 0.88;
  filter: sepia(0.28) saturate(0.9) drop-shadow(0 1px 0 rgba(238, 205, 144, 0.19));
}

.numenor-volume .atlas-physical-frame__line--rail {
  stroke: rgba(182, 137, 71, 0.75);
  stroke-width: 11px;
  mix-blend-mode: screen;
}

.numenor-volume .atlas-physical-frame__line--patina {
  stroke: rgba(49, 104, 111, 0.68);
  stroke-width: 6px;
}

.numenor-volume .atlas-physical-frame__line--highlight {
  stroke: rgba(226, 195, 132, 0.94);
  stroke-width: 2px;
}

.numenor-volume .atlas-physical-frame__corner {
  border: 0;
  background: transparent;
  opacity: 0.94;
  transition: opacity 180ms ease;
}

.numenor-volume .atlas-physical-frame__ornament {
  display: block;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 4px 5px rgba(3, 11, 17, 0.64));
  transform-origin: center;
}

.numenor-volume .atlas-physical-frame__ornament--north-east {
  transform: rotate(90deg);
}

.numenor-volume .atlas-physical-frame__ornament--south-east {
  transform: rotate(180deg);
}

.numenor-volume .atlas-physical-frame__ornament--south-west {
  transform: rotate(270deg);
}

.numenor-volume .atlas-physical-frame__ornament svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.numenor-volume .atlas-physical-frame__corner-rail,
.numenor-volume .atlas-physical-frame__corner-highlight,
.numenor-volume .atlas-physical-frame__compass-ring,
.numenor-volume .atlas-physical-frame__compass-arc {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.numenor-volume .atlas-physical-frame__corner-rail {
  stroke: #a27643;
  stroke-width: 4.6px;
}

.numenor-volume .atlas-physical-frame__corner-highlight {
  stroke: rgba(238, 211, 155, 0.94);
  stroke-width: 1.15px;
}

.numenor-volume .atlas-physical-frame__rail-stud,
.numenor-volume .atlas-physical-frame__compass-core {
  fill: #ead49f;
  stroke: #315e68;
  stroke-width: 0.8px;
}

.numenor-volume .atlas-physical-frame__compass-ring {
  stroke: #c39554;
  stroke-width: 1.15px;
}

.numenor-volume .atlas-physical-frame__compass-ring--inner {
  stroke: rgba(224, 197, 139, 0.75);
  stroke-width: 0.7px;
}

.numenor-volume .atlas-physical-frame__compass-rose {
  fill: #b48345;
  stroke: #f0dba8;
  stroke-linejoin: round;
  stroke-width: 0.82px;
}

.numenor-volume .atlas-physical-frame__compass-rose--minor {
  fill: #3b6d77;
  opacity: 0.88;
  stroke-width: 0.58px;
}

.numenor-volume .atlas-physical-frame__compass-arc {
  stroke: #4e8390;
  stroke-width: 1.25px;
}

.numenor-volume .atlas-physical-frame-pane--detail .atlas-physical-frame__corner {
  opacity: 0;
}

@media (max-width: 720px) {
  .numenor-volume .atlas-physical-frame__line--shadow {
    stroke-width: 22px;
  }

  .numenor-volume .atlas-physical-frame__line--outer {
    stroke-width: 16px;
  }

  .numenor-volume .atlas-physical-frame__line--texture {
    stroke-width: 13px;
  }

  .numenor-volume .atlas-physical-frame__line--rail {
    stroke-width: 9px;
  }

  .numenor-volume .atlas-physical-frame__ornament {
    scale: 0.78;
  }
}

/* The royal volume rests on screen before opening quickly from its spine. */
.numenor-volume-cover {
  --binding-duration: 760ms;
  --binding-delay: 3000ms;
  --binding-ease: cubic-bezier(0.58, 0.02, 0.28, 0.99);
  position: fixed;
  z-index: 30000;
  inset: 0;
  overflow: hidden;
  perspective: max(1800px, 180vw);
  perspective-origin: left center;
  pointer-events: none;
  animation: numenor-volume-open var(--binding-duration) linear var(--binding-delay) both;
}

.numenor-volume-cover.atlas-volume-cover--returning {
  --binding-duration: 620ms;
  --binding-delay: 0ms;
}

.numenor-volume-cover__board {
  position: absolute;
  inset: 0 10px 6px 22px;
  transform-style: preserve-3d;
  transform-origin: left center;
  animation: numenor-binding-turn var(--binding-duration) var(--binding-ease) var(--binding-delay) both;
}

.numenor-volume-cover__face,
.numenor-volume-cover__inside {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 0 8px 8px 0;
  backface-visibility: hidden;
}

.numenor-volume-cover__face {
  transform: translateZ(3px);
  overflow: hidden;
  color: #ead9b5;
  /* A smaller grain and broad satin highlight distinguish the royal binding. */
  background:
    radial-gradient(ellipse at 100% 0, rgba(109, 153, 181, 0.14), transparent 24%),
    radial-gradient(ellipse at 96% 100%, rgba(113, 148, 169, 0.12), transparent 24%),
    linear-gradient(105deg, rgba(4, 17, 32, 0.38), rgba(24, 71, 109, 0.28) 45%, rgba(6, 26, 47, 0.38)),
    url('../middle_earth/assets/materials/middle-earth-green-leather-v1.webp') center / 320px 320px,
    #173d5d;
  background-blend-mode: normal, normal, normal, luminosity;
  box-shadow:
    inset -2px 0 2px rgba(219, 192, 133, 0.4),
    inset 0 0 0 9px rgba(5, 22, 37, 0.5),
    inset 0 0 0 10px rgba(187, 146, 77, 0.65),
    inset 0 0 0 12px rgba(4, 17, 31, 0.45),
    inset 0 0 85px rgba(3, 12, 22, 0.36);
}

.numenor-volume-cover__face::before,
.numenor-volume-cover__face::after {
  position: absolute;
  inset-block: 20px;
  width: 1px;
  content: "";
  background: linear-gradient(transparent, rgba(202, 164, 101, 0.72) 12%, rgba(202, 164, 101, 0.72) 88%, transparent);
}

.numenor-volume-cover__face::before {
  left: 56px;
}

.numenor-volume-cover__face::after {
  right: 28px;
}

.numenor-volume-cover__frame {
  position: relative;
  box-sizing: border-box;
  width: min(700px, calc(100vw - 112px));
  padding: 42px 28px 45px;
  border: 1px solid rgba(210, 174, 111, 0.76);
  box-shadow:
    inset 0 0 0 4px rgba(5, 18, 30, 0.7),
    inset 0 0 0 5px rgba(169, 126, 68, 0.42),
    0 1px 0 rgba(235, 205, 145, 0.18),
    0 -1px 2px rgba(3, 11, 18, 0.7);
  text-align: center;
  text-shadow: 0 -1px 1px #12212e, 0 1px 0 rgba(235, 205, 145, 0.2);
}

.numenor-volume-cover__seal {
  width: 120px;
  height: 64px;
  margin: 0 auto;
  background: linear-gradient(135deg, #b18a4d, #f1dba3 38%, #ad8244 67%, #dcc18a);
  mask: url('./assets/numenor-frontispiece-ornament.svg') center / contain no-repeat;
}

.numenor-volume-cover__eyebrow,
.numenor-volume-cover__subtitle {
  margin: 0;
  color: #d2b982;
  font-family: "Libre Baskerville", Georgia, serif;
  text-transform: uppercase;
}

.numenor-volume-cover__eyebrow {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.24em;
}

.numenor-volume-cover__title {
  margin: 9px 0 6px;
  color: #f2e6c9;
  font-family: "Ringbearer", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3rem, 9vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: 0.045em;
  text-shadow: 0 -1px 1px #0b1722, 0 1px 0 rgba(240, 213, 151, 0.4), 0 2px 3px rgba(0, 0, 0, 0.48);
}

.numenor-volume-cover__subtitle {
  margin-bottom: 20px;
  font-size: 10px;
  letter-spacing: 0.18em;
}

@keyframes numenor-volume-open {
  from { visibility: visible; }
  to { visibility: hidden; }
}

.numenor-volume-cover__spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 43px;
  border-right: 1px solid rgba(204, 161, 91, 0.5);
  background:
    repeating-linear-gradient(0deg, transparent 0 17%, rgba(4, 12, 19, 0.7) 17.3% 17.7%, rgba(204, 161, 91, 0.3) 18% 18.3%, transparent 18.6% 20%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 30%, rgba(158, 184, 208, 0.1) 68%, rgba(0, 0, 0, 0.35)),
    url('../middle_earth/assets/materials/middle-earth-green-leather-v1.webp') center / 320px 320px,
    #091d30;
  background-blend-mode: normal, normal, luminosity;
  box-shadow: 7px 0 18px rgba(0, 0, 0, 0.28);
}

.numenor-volume-cover__inside {
  transform: rotateY(180deg) translateZ(3px);
  background: linear-gradient(90deg, #b7c4b9, #e8e6d5 12%, #f2eddf 75%, #c7cdbb);
  border: 12px solid #18364d;
  box-shadow: inset 0 0 32px rgba(32, 45, 48, 0.4);
}

.numenor-volume-cover__inside::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #47766f;
  mask: url('./assets/numenor-frontispiece-ornament.svg') center / 120px 64px repeat;
  opacity: 0.12;
}

.numenor-volume-cover__edge {
  position: absolute;
  inset: 0 0 0 auto;
  width: 6px;
  transform-origin: right center;
  transform: translateZ(3px) rotateY(-90deg);
  background: linear-gradient(90deg, #b89d68, #193b55 35% 65%, #dfc48c);
}

.numenor-volume-cover__pages {
  position: absolute;
  inset: 4px 1px 0 29px;
  border-right: 12px solid #d0c9b4;
  border-bottom: 7px solid #d0c9b4;
  border-radius: 0 7px 7px 0;
  box-shadow: inset -2px -2px 0 #f4edda, -2px 0 8px #29343c;
  background: repeating-linear-gradient(90deg, #a29c85 0 1px, #e4deca 1px 3px) right / 9px 100% no-repeat;
  animation: numenor-binding-pages var(--binding-duration) ease var(--binding-delay) both;
}

.numenor-volume-cover__cast-shadow {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(6, 13, 22, 0.64), rgba(6, 13, 22, 0.4) 65%, transparent);
  animation: numenor-binding-shadow var(--binding-duration) var(--binding-ease) var(--binding-delay) both;
}

.numenor-volume-cover__light {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 15%, rgba(222, 232, 223, 0.16) 44%, transparent 68%);
  animation: numenor-binding-light var(--binding-duration) var(--binding-ease) var(--binding-delay) both;
}

@keyframes numenor-binding-turn {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-112deg); }
}

@keyframes numenor-binding-shadow {
  from { opacity: 0.9; transform: scaleX(1); }
  70% { opacity: 0.4; }
  to { opacity: 0; transform: scaleX(0.04); }
}

@keyframes numenor-binding-pages {
  0%, 35% { opacity: 1; }
  85%, 100% { opacity: 0; }
}

@keyframes numenor-binding-light {
  from { opacity: 0.4; transform: translateX(-20%); }
  40% { opacity: 1; }
  to { opacity: 0; transform: translateX(50%); }
}

/* A compass-star held between the measured lines of a sea chart. */
.numenor-ornament {
  display: grid;
  grid-template-columns: minmax(34px, 1fr) auto minmax(34px, 1fr);
  align-items: center;
  gap: 11px;
  margin: 9px 0 16px;
  color: var(--numenor-bronze);
}

.numenor-ornament::before,
.numenor-ornament::after {
  height: 9px;
  content: "";
  opacity: 0.78;
  background:
    radial-gradient(ellipse at 50% 105%, transparent 5px, currentColor 5.5px 6.4px, transparent 7px)
    0 0 / 18px 9px repeat-x;
}

.numenor-ornament > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid currentColor;
  color: var(--numenor-bronze);
  font-size: 15px;
  line-height: 1;
  rotate: 45deg;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.numenor-ornament > span::first-letter {
  rotate: -45deg;
}

.numenor-ornament--cover {
  margin: 0 auto;
  color: #9e7542;
}

.numenor-ornament--cover > span {
  color: #d2b274;
  box-shadow: inset 0 0 0 2px rgba(7, 22, 35, 0.72);
  text-shadow: 0 2px 3px #02090f;
}

/* Salt-aged vellum and indigo-blue royal leather. */
.numenor-volume .sidebar {
  border-color: rgba(174, 130, 72, 0.92);
  background: var(--numenor-indigo-deep);
  box-shadow:
    0 18px 46px var(--atlas-shadow),
    0 0 0 1px rgba(238, 219, 180, 0.12);
}

.numenor-volume .sidebar-content {
  background:
    radial-gradient(circle at 86% 9%, rgba(75, 119, 128, 0.08), transparent 26%),
    linear-gradient(rgba(248, 244, 232, 0.92), rgba(215, 211, 195, 0.84)),
    url('../../assets/map_parchment.png') center / cover;
  box-shadow:
    inset 14px 0 25px rgba(19, 50, 70, 0.08),
    inset 0 0 50px rgba(117, 103, 76, 0.07);
  scrollbar-color: var(--numenor-bronze) rgba(23, 61, 93, 0.1);
}

.numenor-volume .sidebar-tabs {
  border-right-color: rgba(183, 143, 82, 0.72);
  background:
    radial-gradient(circle at 50% 5%, rgba(62, 111, 142, 0.2), transparent 25%),
    linear-gradient(90deg, #071522, #173650);
}

.numenor-volume .sidebar-tabs > li,
.numenor-volume .sidebar-tabs > ul > li {
  color: #c8ba9d;
}

.numenor-volume .sidebar-tabs > li:hover,
.numenor-volume .sidebar-tabs > ul > li:hover {
  color: #fff6df;
  background: rgba(177, 132, 66, 0.14);
}

.numenor-volume .sidebar-tabs > li.active,
.numenor-volume .sidebar-tabs > ul > li.active {
  color: #fff7e6;
  background: linear-gradient(90deg, #1d4966, #326b82);
  box-shadow:
    inset 3px 0 var(--numenor-bronze-light),
    inset 0 0 18px rgba(235, 216, 175, 0.08);
}

.numenor-volume .numenor-frontispiece-tab {
  border-bottom-color: rgba(208, 176, 118, 0.28);
}

.numenor-volume .sidebar-header {
  position: relative;
  border-bottom-color: var(--numenor-bronze);
  background:
    radial-gradient(circle at 18% 20%, rgba(93, 145, 163, 0.14), transparent 24%),
    linear-gradient(100deg, #081827, #234d68);
}

.numenor-volume .sidebar-header::after {
  position: absolute;
  right: 57px;
  bottom: 9px;
  content: "✦  ⊹";
  color: rgba(222, 193, 137, 0.62);
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.18em;
}

.numenor-volume .sidebar-pane h2 {
  border-bottom-color: rgba(133, 105, 61, 0.28);
  color: #294454;
}

.numenor-volume .sidebar-pane label:hover {
  border-color: rgba(151, 115, 62, 0.3);
  background: rgba(174, 130, 72, 0.08);
}

.numenor-volume .sidebar-pane label:has(input[id^="all"]) {
  border-color: rgba(145, 108, 56, 0.3);
  background: rgba(174, 130, 72, 0.07);
}

.numenor-volume .sidebar-pane input[type="checkbox"] {
  accent-color: var(--numenor-royal-blue);
}

.numenor-volume .sidebar-pane label:has(input:disabled) {
  cursor: default;
  opacity: 0.48;
  filter: grayscale(0.35);
}

.numenor-volume .sidebar-pane label:has(input:disabled):hover {
  border-color: transparent;
  background: transparent;
}

.numenor-volume .atlas-frontispiece__eyebrow {
  color: var(--numenor-indigo);
}

.numenor-volume .atlas-frontispiece__eyebrow::after {
  background: linear-gradient(90deg, var(--numenor-bronze), transparent);
}

.numenor-volume .numenor-frontispiece .atlas-frontispiece__title {
  color: #1e3d50;
  text-shadow: 0 1px rgba(255, 255, 255, 0.54);
}

.numenor-volume .numenor-frontispiece .atlas-frontispiece__copy {
  color: #526776;
}

.numenor-volume .sidebar-pane button.atlas-chapter-card {
  border-color: rgba(160, 125, 73, 0.7);
  background:
    linear-gradient(105deg, rgba(250, 246, 233, 0.86), rgba(213, 211, 195, 0.55)),
    url('../../assets/map_parchment.png') center / cover;
  box-shadow:
    0 7px 18px rgba(20, 49, 66, 0.14),
    inset 0 0 0 1px rgba(255, 253, 244, 0.5);
}

.numenor-volume .sidebar-pane button.atlas-chapter-card:hover,
.numenor-volume .sidebar-pane button.atlas-chapter-card:focus-visible {
  border-color: var(--numenor-bronze-light);
  background:
    radial-gradient(circle at 11% 22%, rgba(227, 208, 165, 0.16), transparent 23%),
    linear-gradient(112deg, #376b82, #173c59);
}

.numenor-volume .atlas-chapter-card__medallion {
  border-color: var(--numenor-bronze-light);
  background:
    radial-gradient(circle at 35% 28%, rgba(231, 215, 178, 0.2), transparent 28%),
    #173c59;
  box-shadow:
    0 3px 8px rgba(10, 31, 45, 0.3),
    inset 0 0 0 2px rgba(7, 27, 43, 0.72);
}

.numenor-volume .atlas-chapter-card__chevron,
.numenor-volume .atlas-frontispiece__return-note .material-icons {
  color: var(--numenor-bronze);
}

.numenor-volume .atlas-frontispiece__return-note {
  color: #596d77;
}

.numenor-empty-state {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 18px 0 4px;
  padding: 19px 17px 18px;
  border: 1px dashed rgba(150, 112, 58, 0.52);
  color: #596b73;
  background:
    radial-gradient(circle at 50% 0, rgba(73, 115, 128, 0.08), transparent 35%),
    rgba(242, 237, 222, 0.54);
  text-align: center;
}

.numenor-empty-state > i,
.numenor-empty-state > .material-symbols-outlined {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid var(--numenor-bronze);
  border-radius: 50%;
  color: var(--numenor-indigo);
  background: rgba(247, 243, 229, 0.64);
  font-size: 20px;
}

.numenor-empty-state > strong {
  color: #294859;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  line-height: 1.05;
}

.numenor-empty-state > span:last-child {
  max-width: 31ch;
  font-size: 12px;
  line-height: 1.55;
}

.numenor-volume-card,
.numenor-volume .atlas-project-card,
.numenor-volume .atlas-sounds-card {
  border-color: rgba(151, 116, 66, 0.45);
  background: rgba(233, 228, 213, 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 240, 0.43),
    0 8px 20px rgba(28, 54, 67, 0.08);
}

.numenor-volume-card {
  margin: 18px 0;
  padding: 17px 16px 16px;
  border: 1px solid rgba(151, 116, 66, 0.45);
  text-align: center;
}

.numenor-volume-card__eyebrow {
  margin: 0;
  color: var(--numenor-indigo);
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.numenor-volume-card .numenor-ornament {
  margin: 9px 0 12px;
}

.numenor-volume-card h2 {
  margin: 0 0 6px;
  border: 0;
  color: #294859;
  font-size: 25px;
}

.numenor-volume-card > p:last-child {
  margin: 0;
  color: #5b6d75;
  font-size: 12px;
  line-height: 1.55;
}

/* Bronze-edged controls belong to the royal charting table. */
.numenor-volume .leaflet-bar {
  border-color: var(--numenor-bronze);
  box-shadow: 0 8px 20px rgba(6, 25, 39, 0.34);
}

.numenor-volume .leaflet-bar a,
.numenor-volume .leaflet-bar a:hover,
.numenor-volume .leaflet-bar a:focus {
  border-bottom-color: rgba(218, 189, 134, 0.34);
  color: #f2e8d2;
  background: linear-gradient(#214963, #0b2235);
}

.numenor-volume .leaflet-bar a:hover,
.numenor-volume .leaflet-bar a:focus-visible {
  color: #fff8e8;
  background: linear-gradient(#397087, #173e59);
}

.numenor-volume .atlas-map-nav__link,
.numenor-volume .atlas-map-nav__toggle {
  border-color: rgba(200, 157, 88, 0.72);
  color: #f2e7cc;
  background: rgba(7, 28, 45, 0.94);
  box-shadow: 0 8px 24px rgba(4, 19, 31, 0.34);
}

.numenor-volume .atlas-map-nav__link:hover,
.numenor-volume .atlas-map-nav__link:focus-visible,
.numenor-volume .atlas-map-nav__toggle:hover,
.numenor-volume .atlas-map-nav__toggle:focus-visible {
  color: #fff8e7;
  background: rgba(28, 72, 96, 0.97);
}

.numenor-volume .atlas-map-nav__link--current {
  border-color: var(--numenor-bronze-light);
  background: rgba(41, 91, 117, 0.97);
}

/* The royal star opens each parchment note above its title. */
.numenor-volume .campsite-popup__frame::before,
.numenor-volume .lore-popup__frame::before {
  display: block;
  flex-shrink: 0;
  width: 96px;
  height: 24px;
  margin: 0 auto 10px;
  color: var(--numenor-bronze);
  content: "⊹  ✦  ⊹";
  font: 400 24px/1 Georgia, serif;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px rgba(255, 253, 240, 0.54);
}

.numenor-volume.atlas-sidebar-open #map::after {
  background: rgba(12, 46, 66, 0.15);
}

@media (max-width: 520px) {
  .numenor-volume-cover__frame {
    width: calc(100vw - 96px);
    padding-inline: 16px;
  }

  .numenor-volume-cover__spine {
    left: 0;
    width: 27px;
  }

  .numenor-volume-cover__subtitle {
    font-size: 8px;
    letter-spacing: 0.14em;
  }

  .numenor-empty-state {
    margin-top: 14px;
    padding: 16px 13px;
  }
}

@media (max-height: 500px) {
  .numenor-volume-cover__frame { padding-block: 14px; }
  .numenor-volume-cover__title { font-size: clamp(2.4rem, 11vh, 4rem); }
  .numenor-volume-cover__eyebrow { margin-top: 8px; }
  .numenor-volume-cover__subtitle { margin-bottom: 8px; }
  .numenor-volume-cover__seal { width: 90px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .numenor-volume-cover {
    animation: numenor-volume-fade 180ms ease-out 3000ms both;
  }

  .numenor-volume-cover__board,
  .numenor-volume-cover__pages,
  .numenor-volume-cover__cast-shadow,
  .numenor-volume-cover__light {
    animation: none;
  }

  @keyframes numenor-volume-fade {
    to {
      visibility: hidden;
      opacity: 0;
    }
  }
}