/* A cloth-bound household almanac, sharing the other volumes' opening rhythm. */
.shire-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: shire-volume-open var(--binding-duration) linear var(--binding-delay) both;
}

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

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

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

.shire-volume-cover__face {
  transform: translateZ(3px);
  overflow: hidden;
  color: #393b2b;
  /* A broad weave with honey, wheat and oatmeal variation. */
  background:
    radial-gradient(ellipse at 100% 0, rgba(246, 232, 190, 0.3), transparent 24%),
    radial-gradient(ellipse at 96% 100%, rgba(236, 216, 165, 0.24), transparent 24%),
    linear-gradient(105deg, rgba(105, 70, 30, 0.22), rgba(242, 214, 147, 0.13) 48%, rgba(150, 105, 42, 0.2)),
    url('../beleriand/assets/materials/beleriand-cloth-v1.webp') center / 800px 800px,
    #cda453;
  background-blend-mode: normal, normal, normal, luminosity;
  box-shadow:
    inset -2px 0 2px rgba(249, 229, 178, 0.5),
    inset 0 0 0 9px rgba(91, 62, 29, 0.3),
    inset 0 0 0 10px rgba(118, 87, 43, 0.7),
    inset 0 0 0 12px rgba(246, 221, 162, 0.35),
    inset 0 0 70px rgba(90, 57, 22, 0.18);
}

.shire-volume-cover__face::before,
.shire-volume-cover__face::after {
  position: absolute;
  inset-block: 20px;
  width: 1px;
  content: "";
  background: linear-gradient(transparent, rgba(122, 86, 39, 0.6) 12%, rgba(122, 86, 39, 0.6) 88%, transparent);
}

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

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

.shire-volume-cover__frame {
  position: relative;
  box-sizing: border-box;
  width: min(650px, calc(100vw - 112px));
  padding: 38px 28px 44px;
  border: 1px solid #73572f;
  box-shadow: inset 0 0 0 4px #d5b86c66, inset 0 0 0 5px #efd89088,
    0 1px 0 #f1e4c355, 0 -1px 1px #68462266;
  text-align: center;
}

.shire-harvest-ornament { display: block; width: 120px; height: 64px; margin: 0 auto 12px; }
.shire-volume-cover__eyebrow,
.shire-volume-cover__subtitle {
  margin: 0;
  font-family: 'Libre Baskerville', Georgia, serif;
  text-transform: uppercase;
  line-height: 1.7;
}
.shire-volume-cover__eyebrow { font-size: 11px; letter-spacing: .25em; }
.shire-volume-cover__title {
  margin: 16px 0 18px;
  font-family: 'Ringbearer', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 9vw, 6rem);
  line-height: 1.05;
  letter-spacing: .035em;
  text-shadow: 0 1px #f1e4c388;
}
.shire-volume-cover__subtitle { font-size: 10px; letter-spacing: .16em; }
@keyframes shire-volume-open {
  from { visibility: visible; }
  to { visibility: hidden; }
}

.shire-volume-cover__spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 43px;
  border-right: 1px solid rgba(207, 169, 91, 0.5);
  background:
    repeating-linear-gradient(0deg, transparent 0 17%, rgba(40, 21, 12, 0.65) 17.3% 17.7%, rgba(211, 176, 103, 0.34) 18% 18.3%, transparent 18.6% 20%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 30%, rgba(242, 205, 145, 0.17) 68%, rgba(0, 0, 0, 0.35)),
    url('../middle_earth/assets/materials/middle-earth-green-leather-v1.webp') center / 640px 640px,
    #704127;
  background-blend-mode: normal, normal, luminosity;
  box-shadow: 7px 0 18px rgba(0, 0, 0, 0.28);
}

.shire-volume-cover__inside {
  transform: rotateY(180deg) translateZ(3px);
  background: linear-gradient(90deg, #d3c9a7, #f1e6ca 12%, #f8f0dc 75%, #e3d6b5);
  border: 12px solid #704b2d;
  box-shadow: inset 0 0 32px rgba(89, 66, 32, 0.3);
}

.shire-volume-cover__inside::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #87936a;
  mask: url('./assets/shire-harvest-ornament.svg') center / 144px 80px repeat;
  opacity: 0.12;
}

.shire-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, #bc985c, #775534 35% 65%, #dbc48d);
}

.shire-volume-cover__pages {
  position: absolute;
  inset: 4px 1px 0 29px;
  border-right: 12px solid #d5c7a4;
  border-bottom: 7px solid #d5c7a4;
  border-radius: 0 7px 7px 0;
  box-shadow: inset -2px -2px 0 #f8edcf, -2px 0 8px #59432b;
  background: repeating-linear-gradient(90deg, #b2a17a 0 1px, #e9debb 1px 3px) right / 9px 100% no-repeat;
  animation: shire-binding-pages var(--binding-duration) ease var(--binding-delay) both;
}

.shire-volume-cover__cast-shadow {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(35, 26, 14, 0.6), rgba(35, 26, 14, 0.35) 65%, transparent);
  animation: shire-binding-shadow var(--binding-duration) var(--binding-ease) var(--binding-delay) both;
}

.shire-volume-cover__light {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 237, 189, 0.12) 44%, transparent 68%);
  animation: shire-binding-light var(--binding-duration) var(--binding-ease) var(--binding-delay) both;
}

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

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

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

@keyframes shire-binding-light {
  from { opacity: 0.4; transform: translateX(-20%); }
  40% { opacity: 1; }
  to { opacity: 0; transform: translateX(50%); }
}
.shire-volume .sidebar-pane button.atlas-chapter-card:hover,
.shire-volume .sidebar-pane button.atlas-chapter-card:focus-visible {
  color: var(--atlas-ink);
  background: linear-gradient(110deg, #e6c96b, #d9b052);
}
.shire-volume .atlas-chapter-card:hover .atlas-chapter-card__copy > span,
.shire-volume .atlas-chapter-card:focus-visible .atlas-chapter-card__copy > span { color: var(--atlas-ink); }
.shire-volume .atlas-chapter-card__medallion { color: #393b2b; background: #e6c96b; box-shadow: inset 0 0 0 2px #c99a3a; }
@media (max-width: 520px) {
  .shire-volume-cover__frame { width: calc(100vw - 96px); padding: 25px 16px 30px; }
  .shire-volume-cover__spine { left: 0; width: 27px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .shire-volume-cover__frame { padding: 14px 24px 18px; }
  .shire-volume-cover .shire-harvest-ornament { width: 90px; height: 48px; margin-bottom: 6px; }
  .shire-volume-cover__title { font-size: clamp(2.4rem, 10vh, 4rem); margin: 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shire-volume-cover { animation-name: shire-volume-fade; }
  .shire-volume-cover__board,
  .shire-volume-cover__pages,
  .shire-volume-cover__cast-shadow,
  .shire-volume-cover__light { animation: none; }
  @keyframes shire-volume-fade { to { visibility: hidden; opacity: 0; } }
}

/* Harvest Almanac: honey, flax, copper, and olive ink. Scoped to this volume. */
body.shire-volume {
  --atlas-walnut-950: #303225;
  --atlas-walnut-900: #393b2b;
  --atlas-walnut-800: #4c5038;
  --atlas-walnut-700: #606347;
  --atlas-parchment-100: #f8efd8;
  --atlas-parchment-200: #f1e4c3;
  --atlas-parchment-300: #e6c96b;
  --atlas-parchment-500: #a58b50;
  --atlas-ink: #393b2b;
  --atlas-ink-soft: #5c6047;
  --atlas-gold: #c99a3a;
  --atlas-gold-light: #e6c96b;
  --atlas-oxblood: #87462f;
  --atlas-oxblood-deep: #683623;
  --atlas-forest: #87936a;
  --shire-terracotta: #a85f42;
}

.shire-volume .sidebar-content {
  background: linear-gradient(#f1e4c3ed, #e8d6a9df), url('../../assets/map_parchment.png') center / cover;
  background-color: #f1e4c3;
}

.shire-volume .sidebar-tabs {
  background: linear-gradient(90deg, #a97d30, #c99a3a);
  box-shadow: inset -4px 0 10px #6e4d2529;
}

.shire-volume .sidebar-tabs > ul > li,
.shire-volume .sidebar-tabs > li {
  color: var(--atlas-ink);
}

.shire-volume .sidebar-tabs > ul > li:hover,
.shire-volume .sidebar-tabs > ul > li.active,
.shire-volume .sidebar-tabs > li:hover,
.shire-volume .sidebar-tabs > li.active {
  color: var(--atlas-ink);
  background: #e6c96b;
  box-shadow: inset 3px 0 #f1e4c3;
}

.shire-volume .sidebar-header {
  color: var(--atlas-ink);
  background: linear-gradient(105deg, #c99a3a, #e6c96b);
  text-shadow: 0 1px #f1e4c366;
}

.shire-volume .sidebar-close,
.shire-volume .sidebar-close:hover,
.shire-volume .sidebar-close:focus-visible { color: var(--atlas-ink); }
.shire-volume .sidebar-pane input[type="checkbox"] { accent-color: #606b46; }
.shire-volume .sidebar-pane label:hover { background: #e6c96b33; border-color: #c99a3a66; }

.shire-volume .atlas-map-nav__link,
.shire-volume .atlas-map-nav__toggle {
  /* Slightly deeper olive gives small pill labels at least 4.5:1 contrast. */
  color: #353727;
  border-color: #e6c96b;
  background: #c99a3a;
  box-shadow: 0 8px 24px #21140e40;
}

.shire-volume .atlas-map-nav__link:hover,
.shire-volume .atlas-map-nav__link:focus-visible,
.shire-volume .atlas-map-nav__toggle:hover,
.shire-volume .atlas-map-nav__toggle:focus-visible,
.shire-volume .atlas-map-nav__link--current {
  color: var(--atlas-ink);
  background: #e6c96b;
}

.shire-volume .leaflet-bar a,
.shire-volume .leaflet-bar a:hover,
.shire-volume .leaflet-bar a:focus {
  color: var(--atlas-ink);
  background: #c99a3a;
  border-bottom-color: #88632e;
}
.shire-volume .leaflet-bar a:hover,
.shire-volume .leaflet-bar a:focus-visible { background: #e6c96b; }
.shire-volume .leaflet-bar a.leaflet-disabled { color: #5c6047; background: #ddc48a; }

/* Retain the parchment silhouette: tint only inside its existing alpha mask. */
.shire-volume .leaflet-popup-content-wrapper {
  position: relative;
  isolation: isolate;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.shire-volume .leaflet-popup-content-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#f1e4c3db, #e6c96b33), url('../../assets/map_parchment.png') center / 100% 100% no-repeat;
  background-color: #f1e4c3;
  -webkit-mask: url('../../assets/map_parchment.png') center / 100% 100% no-repeat;
  mask: url('../../assets/map_parchment.png') center / 100% 100% no-repeat;
}
.shire-volume .leaflet-popup-tip-container { display: none; }
.shire-volume .lore-popup__frame::before,
.shire-volume .campsite-popup__frame::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 96px;
  height: 24px;
  margin: 0 auto 10px;
  background: url('./assets/barley-ornament.svg') center / contain no-repeat;
}
.shire-volume .lore-popup__section-title,
.shire-volume .lore-popup__section-text,
.shire-volume .lore-popup__notes-text,
.shire-volume .campsite-popup__notes-text,
.shire-volume .campsite-popup__value { color: var(--atlas-ink); }
.shire-volume .leaflet-container a.lore-popup__link:hover,
.shire-volume .leaflet-container a.lore-popup__link:focus-visible {
  background: linear-gradient(#985237, #683623);
}
.shire-volume .leaflet-tooltip,
.shire-volume .polygon-label { color: var(--atlas-ink); background: #f1e4c3; }

/* Shared frame geometry, Shire-specific material finish. */
.shire-volume .atlas-physical-map__surface--shire {
  filter: drop-shadow(0 17px 20px #21140e73) drop-shadow(0 3px 4px #21140e85);
}
.shire-volume .atlas-physical-mat-pane--wheat-linen .atlas-physical-mat__layer--surface {
  filter: grayscale(1) sepia(0.65) brightness(1.1);
}
.shire-volume .atlas-physical-frame-pane--shire,
.shire-volume .atlas-physical-frame-pane--shire * { pointer-events: none; }
.shire-volume .atlas-physical-frame__line {
  fill: none;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
.shire-volume .atlas-physical-frame__line--shadow {
  stroke: #21140eb3;
  stroke-width: 30px;
  filter: drop-shadow(0 12px 14px #21140e99);
}
.shire-volume .atlas-physical-frame__line--outer { stroke: #513426; stroke-width: 21px; }
.shire-volume .atlas-physical-frame__line--texture {
  stroke-width: 17px;
  stroke-opacity: 0.9;
  filter: sepia(0.5) saturate(0.8);
}
.shire-volume .atlas-physical-frame__line--rail { stroke: #a85f4299; stroke-width: 11px; }
.shire-volume .atlas-physical-frame__line--patina { stroke: #724531aa; stroke-width: 6px; }
.shire-volume .atlas-physical-frame__line--highlight { stroke: #e6c96be6; stroke-width: 2px; }
.shire-volume .atlas-physical-frame__corner {
  border: 0;
  background: transparent;
  opacity: 0.96;
  transition: opacity 180ms ease;
}
.shire-volume .atlas-physical-frame__ornament {
  display: block;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 3px 3px #21140eaa);
  transform-origin: center;
}
.shire-volume .atlas-physical-frame__ornament--north-east { transform: rotate(90deg); }
.shire-volume .atlas-physical-frame__ornament--south-east { transform: rotate(180deg); }
.shire-volume .atlas-physical-frame__ornament--south-west { transform: rotate(270deg); }
.shire-volume .atlas-physical-frame__ornament svg { display: block; width: 100%; height: 100%; overflow: visible; }
.shire-volume .atlas-physical-frame__corner-rail,
.shire-volume .atlas-physical-frame__corner-highlight,
.shire-volume .atlas-physical-frame__barley-stem {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shire-volume .atlas-physical-frame__corner-rail { stroke: #a85f42; stroke-width: 4.6px; }
.shire-volume .atlas-physical-frame__corner-highlight { stroke: #e6c96b; stroke-width: 1.15px; }
.shire-volume .atlas-physical-frame__barley-stem { stroke: #e6c96b; stroke-width: 1.2px; }
.shire-volume .atlas-physical-frame__barley-grain,
.shire-volume .atlas-physical-frame__rail-stud { fill: #e6c96b; stroke: #88632e; stroke-width: 0.65px; }
.shire-volume .atlas-physical-frame__acorn { fill: #c99a3a; stroke: #f1e4c3; stroke-width: 0.85px; }
.shire-volume .atlas-physical-frame__acorn-cap { fill: #a85f42; stroke: #e6c96b; stroke-width: 0.85px; }
.shire-volume .atlas-physical-frame-pane--detail .atlas-physical-frame__corner { opacity: 0; }

@media (max-width: 720px) {
  .shire-volume .atlas-physical-frame__line--shadow { stroke-width: 22px; }
  .shire-volume .atlas-physical-frame__line--outer { stroke-width: 16px; }
  .shire-volume .atlas-physical-frame__line--texture { stroke-width: 13px; }
  .shire-volume .atlas-physical-frame__line--rail { stroke-width: 9px; }
  .shire-volume .atlas-physical-frame__ornament { scale: 0.78; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1024px) {
  .shire-volume .sidebar-tabs > ul:last-child { background: #c99a3a; }
}
@media (prefers-reduced-motion: reduce) {
  .shire-volume .atlas-physical-frame__corner { transition: none; }
}