diff --git a/.gitignore b/.gitignore
index addfb8f1..2fa4c450 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,9 @@
 # Local-only — never commit.
 /attachments/
 
+# Pasted/dropped image scratch — local-only, never commit.
+/dropped-images/
+
 # Logs
 logs
 *.log
diff --git a/public/assets/library/library-wide.png b/public/assets/library/library-wide.png
new file mode 100644
index 00000000..234acf12
Binary files /dev/null and b/public/assets/library/library-wide.png differ
diff --git a/public/library/images/icons/all.svg b/public/library/images/icons/all.svg
index 847fde7c..232482c7 100644
--- a/public/library/images/icons/all.svg
+++ b/public/library/images/icons/all.svg
@@ -23,7 +23,7 @@
 
   <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" id="book">
     <g clip-path="url(#clip0_2911_7827)">
-      <path d="M7.4925 6.61416C7.3575 7.1914 6.66 6.86815 6.9525 6.93742L2.52 5.78294C2.2725 5.71367 2.1375 5.45969 2.205 5.2288C2.2725 4.97481 2.52 4.83628 2.745 4.90554L7.1775 6.08311C7.4025 6.12928 7.5375 6.38327 7.4925 6.61416ZM7.155 9.154L2.7225 7.97644C2.475 7.90717 2.2275 8.0688 2.1825 8.29969C2.115 8.55368 2.2725 8.80766 2.4975 8.85384L6.93 10.0314C6.6375 9.96213 7.335 10.2392 7.47 9.70815C7.5375 9.47725 7.4025 9.22327 7.155 9.154ZM5.8275 11.8555L2.7225 11.0242C2.475 10.955 2.2275 11.1166 2.1825 11.3475C2.115 11.6015 2.2725 11.8555 2.4975 11.9016L5.6025 12.7329C5.31 12.6636 6.0075 12.9407 6.1425 12.4096C6.21 12.1787 6.075 11.9247 5.8275 11.8555ZM18 1.85774V13.9797C18 14.1875 17.865 14.3722 17.6625 14.4184L9.1125 16.6119C9.045 16.635 8.955 16.635 8.8875 16.6119L0.3375 14.4184C0.135 14.3722 0 14.1875 0 13.9797V1.85774C0 1.55758 0.27 1.32668 0.5625 1.41904L9 3.58945L17.4375 1.41904C17.73 1.32668 18 1.55758 18 1.85774ZM8.55 4.42067L0.9 2.45806V13.6103L8.55 15.5729V4.42067ZM17.1 2.45806L9.45 4.42067V15.5729L17.1 13.6103V2.45806ZM15.795 5.2288C15.7275 4.97481 15.48 4.83628 15.255 4.90554L10.8225 6.08311C10.575 6.15237 10.44 6.40636 10.5075 6.63725C10.6425 7.21449 11.34 6.89124 11.0475 6.9605L15.48 5.78294C15.7275 5.71367 15.8625 5.45969 15.795 5.2288ZM15.795 8.32278C15.7275 8.0688 15.48 7.93026 15.255 7.99953L10.8225 9.17709C10.575 9.24636 10.44 9.50034 10.5075 9.73124C10.6425 10.2854 11.34 9.98522 11.0475 10.0545L15.48 8.87693C15.7275 8.80766 15.8625 8.55368 15.795 8.32278ZM14.4675 11.7169C14.4 11.4629 14.1525 11.3244 13.9275 11.3937L10.8225 12.2249C10.575 12.2942 10.44 12.5482 10.5075 12.779C10.6425 13.3563 11.34 13.033 11.0475 13.1023L14.1525 12.2942C14.4 12.2249 14.535 11.9709 14.4675 11.7169Z" fill="white"></path>
+      <path d="M7.4925 6.61416C7.3575 7.1914 6.66 6.86815 6.9525 6.93742L2.52 5.78294C2.2725 5.71367 2.1375 5.45969 2.205 5.2288C2.2725 4.97481 2.52 4.83628 2.745 4.90554L7.1775 6.08311C7.4025 6.12928 7.5375 6.38327 7.4925 6.61416ZM7.155 9.154L2.7225 7.97644C2.475 7.90717 2.2275 8.0688 2.1825 8.29969C2.115 8.55368 2.2725 8.80766 2.4975 8.85384L6.93 10.0314C6.6375 9.96213 7.335 10.2392 7.47 9.70815C7.5375 9.47725 7.4025 9.22327 7.155 9.154ZM5.8275 11.8555L2.7225 11.0242C2.475 10.955 2.2275 11.1166 2.1825 11.3475C2.115 11.6015 2.2725 11.8555 2.4975 11.9016L5.6025 12.7329C5.31 12.6636 6.0075 12.9407 6.1425 12.4096C6.21 12.1787 6.075 11.9247 5.8275 11.8555ZM18 1.85774V13.9797C18 14.1875 17.865 14.3722 17.6625 14.4184L9.1125 16.6119C9.045 16.635 8.955 16.635 8.8875 16.6119L0.3375 14.4184C0.135 14.3722 0 14.1875 0 13.9797V1.85774C0 1.55758 0.27 1.32668 0.5625 1.41904L9 3.58945L17.4375 1.41904C17.73 1.32668 18 1.55758 18 1.85774ZM8.55 4.42067L0.9 2.45806V13.6103L8.55 15.5729V4.42067ZM17.1 2.45806L9.45 4.42067V15.5729L17.1 13.6103V2.45806ZM15.795 5.2288C15.7275 4.97481 15.48 4.83628 15.255 4.90554L10.8225 6.08311C10.575 6.15237 10.44 6.40636 10.5075 6.63725C10.6425 7.21449 11.34 6.89124 11.0475 6.9605L15.48 5.78294C15.7275 5.71367 15.8625 5.45969 15.795 5.2288ZM15.795 8.32278C15.7275 8.0688 15.48 7.93026 15.255 7.99953L10.8225 9.17709C10.575 9.24636 10.44 9.50034 10.5075 9.73124C10.6425 10.2854 11.34 9.98522 11.0475 10.0545L15.48 8.87693C15.7275 8.80766 15.8625 8.55368 15.795 8.32278ZM14.4675 11.7169C14.4 11.4629 14.1525 11.3244 13.9275 11.3937L10.8225 12.2249C10.575 12.2942 10.44 12.5482 10.5075 12.779C10.6425 13.3563 11.34 13.033 11.0475 13.1023L14.1525 12.2942C14.4 12.2249 14.535 11.9709 14.4675 11.7169Z" fill="currentColor"></path>
       <path d="M295.92 -167.388V135.732H-25.1996V-167.388H295.92ZM297.36 -168.828H-26.6396V137.172H297.36V-168.828Z" fill="#0000FF"></path>
     </g>
     <defs>
@@ -35,7 +35,7 @@
 
   <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" id="video">
     <g clip-path="url(#clip0_3183_9784)">
-      <path d="M12.4696 2.06667L9.57886 3.88333V3.33333C9.57886 2.6 8.96308 2 8.21045 2H1.36841C0.615784 2 0 2.6 0 3.33333V8.66667C0 9.4 0.615784 10 1.36841 10H8.21045C8.96308 10 9.57886 9.4 9.57886 8.66667V8.11667L12.4696 9.93333C12.7946 10.1 12.9999 9.81667 12.9999 9.65V2.33333C12.9999 2.16667 12.8117 1.86667 12.4696 2.06667ZM8.89466 8.66667C8.89466 9.03333 8.58677 9.33333 8.21045 9.33333H1.36841C0.992096 9.33333 0.684204 9.03333 0.684204 8.66667V3.33333C0.684204 2.96667 0.992096 2.66667 1.36841 2.66667H8.21045C8.58677 2.66667 8.89466 2.96667 8.89466 3.33333V8.66667ZM12.3157 9.05L9.57886 7.33333V4.66667L12.3157 2.95V9.05Z" fill="white"></path>
+      <path d="M12.4696 2.06667L9.57886 3.88333V3.33333C9.57886 2.6 8.96308 2 8.21045 2H1.36841C0.615784 2 0 2.6 0 3.33333V8.66667C0 9.4 0.615784 10 1.36841 10H8.21045C8.96308 10 9.57886 9.4 9.57886 8.66667V8.11667L12.4696 9.93333C12.7946 10.1 12.9999 9.81667 12.9999 9.65V2.33333C12.9999 2.16667 12.8117 1.86667 12.4696 2.06667ZM8.89466 8.66667C8.89466 9.03333 8.58677 9.33333 8.21045 9.33333H1.36841C0.992096 9.33333 0.684204 9.03333 0.684204 8.66667V3.33333C0.684204 2.96667 0.992096 2.66667 1.36841 2.66667H8.21045C8.58677 2.66667 8.89466 2.96667 8.89466 3.33333V8.66667ZM12.3157 9.05L9.57886 7.33333V4.66667L12.3157 2.95V9.05Z" fill="currentColor"></path>
       <path d="M159.12 -84.4991V134.421H-72.7998V-84.4991H159.12ZM160.16 -85.5391H-73.8398V135.461H160.16V-85.5391Z" fill="#0000FF"></path>
     </g>
     <defs>
@@ -46,7 +46,7 @@
   </symbol>
 
   <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" id="audio">
-    <path d="M11.6333 1H4.3C4.20275 1 4.10949 1.03863 4.04073 1.10739C3.97196 1.17616 3.93333 1.26942 3.93333 1.36667V8.33333H2.83333C2.47074 8.33333 2.11628 8.44086 1.81479 8.6423C1.5133 8.84375 1.27832 9.13008 1.13956 9.46508C1.00079 9.80008 0.964488 10.1687 1.03523 10.5243C1.10597 10.88 1.28058 11.2066 1.53697 11.463C1.79337 11.7194 2.12004 11.894 2.47567 11.9648C2.8313 12.0355 3.19992 11.9992 3.53492 11.8604C3.86992 11.7217 4.15625 11.4867 4.35769 11.1852C4.55914 10.8837 4.66667 10.5293 4.66667 10.1667V8.7C4.66453 8.66878 4.65837 8.63797 4.64833 8.60833C4.65837 8.5787 4.66453 8.54788 4.66667 8.51667V4.11667H11.2667V8.33333H10.1667C9.80407 8.33333 9.44961 8.44086 9.14812 8.6423C8.84663 8.84375 8.61165 9.13008 8.47289 9.46508C8.33413 9.80008 8.29782 10.1687 8.36856 10.5243C8.4393 10.88 8.61391 11.2066 8.8703 11.463C9.1267 11.7194 9.45337 11.894 9.809 11.9648C10.1646 12.0355 10.5333 11.9992 10.8683 11.8604C11.2033 11.7217 11.4896 11.4867 11.691 11.1852C11.8925 10.8837 12 10.5293 12 10.1667V8.7C11.9979 8.66878 11.9917 8.63797 11.9817 8.60833C11.9917 8.5787 11.9979 8.54788 12 8.51667V1.36667C12 1.26942 11.9614 1.17616 11.8926 1.10739C11.8238 1.03863 11.7306 1 11.6333 1ZM3.93333 10.1667C3.93333 10.3842 3.86882 10.5969 3.74795 10.7778C3.62708 10.9587 3.45528 11.0997 3.25429 11.1829C3.05329 11.2662 2.83211 11.288 2.61873 11.2455C2.40536 11.2031 2.20935 11.0983 2.05552 10.9445C1.90168 10.7906 1.79691 10.5946 1.75447 10.3813C1.71203 10.1679 1.73381 9.94671 1.81707 9.74571C1.90032 9.54472 2.04131 9.37292 2.22221 9.25205C2.4031 9.13118 2.61577 9.06667 2.83333 9.06667H3.93333V10.1667ZM4.66667 3.38333V1.73333H11.2667V3.38333H4.66667ZM11.2667 10.1667C11.2667 10.3842 11.2022 10.5969 11.0813 10.7778C10.9604 10.9587 10.7886 11.0997 10.5876 11.1829C10.3866 11.2662 10.1654 11.288 9.95207 11.2455C9.73869 11.2031 9.54269 11.0983 9.38885 10.9445C9.23501 10.7906 9.13025 10.5946 9.0878 10.3813C9.04536 10.1679 9.06714 9.94671 9.1504 9.74571C9.23366 9.54472 9.37465 9.37292 9.55554 9.25205C9.73643 9.13118 9.94911 9.06667 10.1667 9.06667H11.2667V10.1667Z" fill="white"></path>
+    <path d="M11.6333 1H4.3C4.20275 1 4.10949 1.03863 4.04073 1.10739C3.97196 1.17616 3.93333 1.26942 3.93333 1.36667V8.33333H2.83333C2.47074 8.33333 2.11628 8.44086 1.81479 8.6423C1.5133 8.84375 1.27832 9.13008 1.13956 9.46508C1.00079 9.80008 0.964488 10.1687 1.03523 10.5243C1.10597 10.88 1.28058 11.2066 1.53697 11.463C1.79337 11.7194 2.12004 11.894 2.47567 11.9648C2.8313 12.0355 3.19992 11.9992 3.53492 11.8604C3.86992 11.7217 4.15625 11.4867 4.35769 11.1852C4.55914 10.8837 4.66667 10.5293 4.66667 10.1667V8.7C4.66453 8.66878 4.65837 8.63797 4.64833 8.60833C4.65837 8.5787 4.66453 8.54788 4.66667 8.51667V4.11667H11.2667V8.33333H10.1667C9.80407 8.33333 9.44961 8.44086 9.14812 8.6423C8.84663 8.84375 8.61165 9.13008 8.47289 9.46508C8.33413 9.80008 8.29782 10.1687 8.36856 10.5243C8.4393 10.88 8.61391 11.2066 8.8703 11.463C9.1267 11.7194 9.45337 11.894 9.809 11.9648C10.1646 12.0355 10.5333 11.9992 10.8683 11.8604C11.2033 11.7217 11.4896 11.4867 11.691 11.1852C11.8925 10.8837 12 10.5293 12 10.1667V8.7C11.9979 8.66878 11.9917 8.63797 11.9817 8.60833C11.9917 8.5787 11.9979 8.54788 12 8.51667V1.36667C12 1.26942 11.9614 1.17616 11.8926 1.10739C11.8238 1.03863 11.7306 1 11.6333 1ZM3.93333 10.1667C3.93333 10.3842 3.86882 10.5969 3.74795 10.7778C3.62708 10.9587 3.45528 11.0997 3.25429 11.1829C3.05329 11.2662 2.83211 11.288 2.61873 11.2455C2.40536 11.2031 2.20935 11.0983 2.05552 10.9445C1.90168 10.7906 1.79691 10.5946 1.75447 10.3813C1.71203 10.1679 1.73381 9.94671 1.81707 9.74571C1.90032 9.54472 2.04131 9.37292 2.22221 9.25205C2.4031 9.13118 2.61577 9.06667 2.83333 9.06667H3.93333V10.1667ZM4.66667 3.38333V1.73333H11.2667V3.38333H4.66667ZM11.2667 10.1667C11.2667 10.3842 11.2022 10.5969 11.0813 10.7778C10.9604 10.9587 10.7886 11.0997 10.5876 11.1829C10.3866 11.2662 10.1654 11.288 9.95207 11.2455C9.73869 11.2031 9.54269 11.0983 9.38885 10.9445C9.23501 10.7906 9.13025 10.5946 9.0878 10.3813C9.04536 10.1679 9.06714 9.94671 9.1504 9.74571C9.23366 9.54472 9.37465 9.37292 9.55554 9.25205C9.73643 9.13118 9.94911 9.06667 10.1667 9.06667H11.2667V10.1667Z" fill="currentColor"></path>
   </symbol>
 
   <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 12" id="logo">
diff --git a/src/components/library/atoms/Icon/Icon.tsx b/src/components/library/atoms/Icon/Icon.tsx
index d7f2d1c5..44f4d821 100644
--- a/src/components/library/atoms/Icon/Icon.tsx
+++ b/src/components/library/atoms/Icon/Icon.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import type { JSX } from 'react';
+import { useEffect } from 'react';
 
 import { IconName, IconProps } from './Icon.types';
 
@@ -29,6 +30,41 @@ const ICON_VIEWBOX: Record<IconName, string> = {
   [IconName.Copy]: '0 0 16 16',
 };
 
+const SPRITE_URL = '/library/images/icons/all.svg';
+const SPRITE_DOM_ID = 'library-icon-sprite';
+
+let spritePromise: Promise<void> | null = null;
+
+// Safari (and some WebViews) ignore external `<use href="file.svg#id">`, so the
+// sprite never resolves and every icon renders blank there. Fetch the sprite
+// once and inline it into the document, then reference symbols same-document via
+// `<use href="#id">`, which every browser supports.
+function ensureSprite() {
+  if (typeof document === 'undefined' || spritePromise) {
+    return;
+  }
+  if (document.getElementById(SPRITE_DOM_ID)) {
+    return;
+  }
+  spritePromise = fetch(SPRITE_URL)
+    .then(res => res.text())
+    .then(markup => {
+      if (document.getElementById(SPRITE_DOM_ID)) {
+        return;
+      }
+      const container = document.createElement('div');
+      container.id = SPRITE_DOM_ID;
+      container.setAttribute('aria-hidden', 'true');
+      container.style.cssText =
+        'position:absolute;width:0;height:0;overflow:hidden';
+      container.innerHTML = markup;
+      document.body.prepend(container);
+    })
+    .catch(() => {
+      spritePromise = null;
+    });
+}
+
 export function Icon(props: IconProps): JSX.Element {
   const {
     width = 40,
@@ -38,6 +74,10 @@ export function Icon(props: IconProps): JSX.Element {
     name,
   } = props;
 
+  useEffect(() => {
+    ensureSprite();
+  }, []);
+
   return (
     <svg
       className={classNames(styles.icon, className)}
@@ -48,7 +88,7 @@ export function Icon(props: IconProps): JSX.Element {
       viewBox={ICON_VIEWBOX[name]}
       role="graphics-document"
     >
-      <use href={`/library/images/icons/all.svg#${name}`} />
+      <use href={`#${name}`} />
     </svg>
   );
 }
diff --git a/src/components/library/molecules/Object/Object.module.scss b/src/components/library/molecules/Object/Object.module.scss
index 40e041ff..08d5f483 100644
--- a/src/components/library/molecules/Object/Object.module.scss
+++ b/src/components/library/molecules/Object/Object.module.scss
@@ -8,6 +8,9 @@
 
   .icon {
     display: flex;
+    // Icons are currentColor sprites; the cover card recolors them white. Here,
+    // on light cards/sidebar, pin a dark tone so they don't inherit white.
+    color: var(--gray-darkest);
     background: transparent;
     border-radius: 8px 0 0 8px;
     padding: 3px 4px 3px 0;
diff --git a/src/components/library/molecules/RatingBox/RatingBox.tsx b/src/components/library/molecules/RatingBox/RatingBox.tsx
index 5fd20837..84161721 100644
--- a/src/components/library/molecules/RatingBox/RatingBox.tsx
+++ b/src/components/library/molecules/RatingBox/RatingBox.tsx
@@ -74,9 +74,13 @@ function ColoredSelect<T extends string | number>(
   const triggerRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
 
-  // Keep the portaled menu glued to the trigger as the modal/page scrolls, and
-  // flip it above the trigger when it would overflow the bottom of the viewport.
-  const menuPos = useAnchoredPosition(triggerRef, isOpen, menuRef);
+  // Keep the portaled menu glued to the trigger as the modal/page scrolls.
+  // Placement is decided by viewport width, not measured space: open upward at
+  // 1920px and below, downward only on wider screens. Width-based placement is
+  // settled before the menu paints, so it never opens one way then jumps.
+  const menuPos = useAnchoredPosition(triggerRef, isOpen, menuRef, {
+    openUpMaxWidth: 1920,
+  });
 
   const handleToggle = () => {
     if (readOnly) return;
diff --git a/src/components/library/organisms/InteractiveCover/InteractiveCover.module.scss b/src/components/library/organisms/InteractiveCover/InteractiveCover.module.scss
index 492817b6..55473cae 100644
--- a/src/components/library/organisms/InteractiveCover/InteractiveCover.module.scss
+++ b/src/components/library/organisms/InteractiveCover/InteractiveCover.module.scss
@@ -1,7 +1,13 @@
 // Coordinates in coverHotspots.ts are percentages of the cover frame, so the
-// frame is locked to the artwork's native 1536x1024 (3:2) ratio and every
-// hotspot tracks the art as it scales. No runtime measurement needed.
+// frame is locked to the artwork's native aspect ratio and every hotspot tracks
+// the art as it scales. No runtime measurement needed.
+//
+// Mobile (<768px) shows the taller 3:2 library.png; 768px+ shows the wide
+// library-wide.png (3840x1704). The frame matches whichever art is visible so
+// the cover always fills the width edge-to-edge with no crop and the height
+// stays proportional across every desktop/tablet width.
 $cover-aspect: calc(3 / 2);
+$cover-aspect-wide: calc(3840 / 1704);
 
 .frame {
   position: relative;
@@ -10,7 +16,17 @@ $cover-aspect: calc(3 / 2);
   overflow: hidden;
 }
 
+@media (min-width: 768px) {
+  .frame {
+    aspect-ratio: $cover-aspect-wide;
+  }
+}
+
 .image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
   object-position: center;
 }
@@ -97,10 +113,3 @@ $cover-aspect: calc(3 / 2);
     transform: none;
   }
 }
-
-@media (max-width: 768px) {
-  .card {
-    width: 60%;
-    min-width: 0;
-  }
-}
diff --git a/src/components/library/organisms/InteractiveCover/InteractiveCover.tsx b/src/components/library/organisms/InteractiveCover/InteractiveCover.tsx
index 0727170b..a522c9b4 100644
--- a/src/components/library/organisms/InteractiveCover/InteractiveCover.tsx
+++ b/src/components/library/organisms/InteractiveCover/InteractiveCover.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import Image from 'next/image';
 import React, {
   Dispatch,
   SetStateAction,
@@ -17,6 +16,22 @@ import { HotspotMode, useHotspotTrigger } from './useHotspotTrigger';
 
 import styles from './InteractiveCover.module.scss';
 
+// Tracks a media query on the client; false during SSR and first paint so the
+// markup is deterministic, then corrected in the effect after hydration.
+function useMatchMedia(query: string) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia(query);
+    const update = () => setMatches(mq.matches);
+    update();
+    mq.addEventListener('change', update);
+    return () => mq.removeEventListener('change', update);
+  }, [query]);
+
+  return matches;
+}
+
 interface HotspotProps {
   hotspot: CoverHotspot;
   mode: HotspotMode;
@@ -32,7 +47,10 @@ function Hotspot({ hotspot, mode, activeId, setActiveId }: HotspotProps) {
     setActiveId,
   });
 
-  const { hit, highlight, card, library } = hotspot;
+  // The layer only mounts at 768px+, where the wide artwork is shown, so the
+  // wide geometry is the only one the hotspots ever render against.
+  const { library } = hotspot;
+  const { hit, highlight, card } = hotspot.wide;
 
   return (
     <>
@@ -66,7 +84,11 @@ function Hotspot({ hotspot, mode, activeId, setActiveId }: HotspotProps) {
 
       <div
         className={classNames(styles.card, { [styles.cardActive]: isActive })}
-        style={{ left: `${card.left}%`, top: `${card.top}%` }}
+        style={{
+          left: card.left !== undefined ? `${card.left}%` : undefined,
+          right: card.right !== undefined ? `${card.right}%` : undefined,
+          top: `${card.top}%`,
+        }}
       >
         <LibraryInfoCard {...library} isActive={isActive} />
       </div>
@@ -76,6 +98,7 @@ function Hotspot({ hotspot, mode, activeId, setActiveId }: HotspotProps) {
 
 export function InteractiveCover({
   src,
+  wideSrc,
   alt,
   mode = 'hover',
   className,
@@ -83,6 +106,11 @@ export function InteractiveCover({
   const [activeId, setActiveId] = useState<string | null>(null);
   const frameRef = useRef<HTMLDivElement>(null);
 
+  // 768px+ swaps to the wide artwork (see <source> below) and runs the hotspot
+  // layer with its wide geometry. Below that is mobile/touch territory: the
+  // taller art shows and hover hotspots are dropped.
+  const isWide = useMatchMedia('(min-width: 768px)');
+
   // In click mode the card stays open until dismissed, so an outside click or
   // Escape needs to close it. Hover mode dismisses itself via onMouseLeave.
   useEffect(() => {
@@ -113,29 +141,33 @@ export function InteractiveCover({
 
   return (
     <div ref={frameRef} className={classNames(styles.frame, className)}>
-      <Image
-        className={styles.image}
-        src={src}
-        alt={alt}
-        fill
-        priority
-        sizes="100vw"
-      />
-
-      <div
-        className={styles.layer}
-        onMouseLeave={mode === 'hover' ? clearActive : undefined}
-      >
-        {coverHotspots.map(hotspot => (
-          <Hotspot
-            key={hotspot.id}
-            hotspot={hotspot}
-            mode={mode}
-            activeId={activeId}
-            setActiveId={setActiveId}
-          />
-        ))}
-      </div>
+      <picture>
+        {wideSrc && <source media="(min-width: 768px)" srcSet={wideSrc} />}
+        <img
+          className={styles.image}
+          src={src}
+          alt={alt}
+          draggable={false}
+          fetchPriority="high"
+        />
+      </picture>
+
+      {isWide && (
+        <div
+          className={styles.layer}
+          onMouseLeave={mode === 'hover' ? clearActive : undefined}
+        >
+          {coverHotspots.map(hotspot => (
+            <Hotspot
+              key={hotspot.id}
+              hotspot={hotspot}
+              mode={mode}
+              activeId={activeId}
+              setActiveId={setActiveId}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/library/organisms/InteractiveCover/InteractiveCover.types.ts b/src/components/library/organisms/InteractiveCover/InteractiveCover.types.ts
index 2f99557f..1b053f1a 100644
--- a/src/components/library/organisms/InteractiveCover/InteractiveCover.types.ts
+++ b/src/components/library/organisms/InteractiveCover/InteractiveCover.types.ts
@@ -3,6 +3,8 @@ import type { HotspotMode } from './useHotspotTrigger';
 export interface InteractiveCoverProps {
   /** Cover artwork rendered behind the hotspots. */
   src: string;
+  /** Wider artwork served to 1920px+ viewports via <picture> art direction. */
+  wideSrc?: string;
   alt: string;
   /**
    * How a hotspot reveals its card. Defaults to 'hover'; flip to 'click' for
diff --git a/src/components/library/organisms/InteractiveCover/coverHotspots.ts b/src/components/library/organisms/InteractiveCover/coverHotspots.ts
index 1ba9875a..a2390d94 100644
--- a/src/components/library/organisms/InteractiveCover/coverHotspots.ts
+++ b/src/components/library/organisms/InteractiveCover/coverHotspots.ts
@@ -1,11 +1,14 @@
 import type { LibraryInfoCardProps } from '@components/library/molecules/LibraryInfoCard';
 
 /**
- * All geometry is expressed in percentages of the cover's 1440x852 design
- * frame, so hotspots track the artwork as it scales responsively without any
- * runtime measurement. Library content is static for now and will later be fed
- * from the six real libraries — keeping geometry and data separate means that
- * swap is data-only.
+ * Hotspot geometry is expressed in percentages of the cover frame, so it tracks
+ * the artwork as it scales responsively without runtime measurement.
+ *
+ * Hotspots only render at 768px+, where the cover shows the wide
+ * `library-wide.png` (3840x1704). All numbers below are authored directly
+ * against that wide frame: left/top is the box's top-left corner as a percent
+ * of the frame, width is a percent of the frame width, height a percent of the
+ * frame height.
  */
 
 interface Box {
@@ -15,121 +18,145 @@ interface Box {
   height?: number;
 }
 
-export interface CoverHotspot {
-  id: string;
+interface HotspotGeometry {
   /** Invisible trigger region over the building itself. */
   hit: Box;
   /** Glow silhouette overlay (house + tree + leader line). */
   highlight: { src: string; alt: string } & Box;
-  /** Top-left anchor of the info card at the end of the leader line. */
-  card: { left: number; top: number };
+  /**
+   * Where the info card attaches to the leader line. Anchor by whichever edge
+   * meets the line: `left` for lines exiting right, `right` for lines exiting
+   * left. Using the touching edge keeps the join intact across viewport widths,
+   * since the card has a fixed pixel width but the line endpoint is a percent.
+   */
+  card: { left?: number; right?: number; top: number };
+}
+
+export interface CoverHotspot {
+  id: string;
+  /** Geometry for the wide `library-wide.png` cover, used at 768px+. */
+  wide: HotspotGeometry;
   library: Omit<LibraryInfoCardProps, 'className'>;
 }
 
+const makeHotspot = (
+  id: string,
+  wide: HotspotGeometry,
+  library: CoverHotspot['library'],
+): CoverHotspot => ({
+  id,
+  wide,
+  library,
+});
+
+const lorem =
+  'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cih sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus';
+
 export const coverHotspots: CoverHotspot[] = [
-  {
-    id: 'house-1',
-    hit: { left: 38.6, top: 11.9, width: 16.8, height: 35.9 },
-    highlight: {
-      src: '/library/images/hotspots/house-1.svg',
-      alt: '',
-      left: 38,
-      top: 6.57,
-      width: 34.55,
+  makeHotspot(
+    'house-1',
+    {
+      hit: { left: 37.73, top: 11.9, width: 12.55, height: 35.9 },
+      highlight: {
+        src: '/library/images/hotspots/house-1.svg',
+        alt: '',
+        left: 40.8,
+        top: 7.57,
+        width: 25.81,
+      },
+      card: { left: 53.0, top: 19.01 },
     },
-    card: { left: 59.03, top: 19.01 },
-    library: {
+    {
       libraryName: 'John’s Library',
-      about:
-        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cih sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus',
+      about: lorem,
       bookCount: 123,
       videoCount: 52,
       songCount: 17,
     },
-  },
-  {
-    id: 'house-2',
-    // Estimated from the screenshot — confirm/refine via devtools like house-1.
-    hit: { left: 7, top: 2, width: 30, height: 60 },
-    highlight: {
-      src: '/library/images/hotspots/house-2.svg',
-      alt: '',
-      left: 6.8,
-      top: 0,
-      width: 63,
+  ),
+  makeHotspot(
+    'house-2',
+    {
+      hit: { left: 14.13, top: 2, width: 22.41, height: 60 },
+      highlight: {
+        src: '/library/images/hotspots/house-2.svg',
+        alt: '',
+        left: 17.98,
+        top: 0,
+        width: 47.06,
+      },
+      card: { left: 53.0, top: 19.01 },
     },
-    card: { left: 59.03, top: 19.01 },
-    library: {
+    {
       libraryName: 'Sarah’s Library',
-      about:
-        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cih sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus',
+      about: lorem,
       bookCount: 88,
       videoCount: 34,
       songCount: 12,
     },
-  },
-  {
-    id: 'house-3',
-    // Estimated from the screenshot — confirm/refine via devtools like house-1.
-    hit: { left: 25, top: 43, width: 17, height: 34 },
-    highlight: {
-      src: '/library/images/hotspots/house-3.svg',
-      alt: '',
-      left: 24,
-      top: 16.5,
-      width: 27,
+  ),
+  makeHotspot(
+    'house-3',
+    {
+      hit: { left: 27.58, top: 43, width: 12.7, height: 34 },
+      highlight: {
+        src: '/library/images/hotspots/house-3.svg',
+        alt: '',
+        left: 30,
+        top: 18.5,
+        width: 20.17,
+      },
+      card: { left: 46.47, top: 10.5 },
     },
-    card: { left: 50.3, top: 10.5 },
-    library: {
+    {
       libraryName: 'Liam’s Library',
-      about:
-        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cih sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus',
+      about: lorem,
       bookCount: 64,
       videoCount: 21,
       songCount: 9,
     },
-  },
-  {
-    id: 'house-4',
-    // Estimated from the screenshot — confirm/refine via devtools like house-1.
-    hit: { left: 11, top: 57, width: 14, height: 17 },
-    highlight: {
-      src: '/library/images/hotspots/house-4.svg',
-      alt: '',
-      left: 10.4,
-      top: 25.9,
-      width: 15,
+  ),
+  makeHotspot(
+    'house-4',
+    {
+      hit: { left: 17.12, top: 57, width: 10.46, height: 17 },
+      highlight: {
+        src: '/library/images/hotspots/house-4.svg',
+        alt: '',
+        left: 19.9,
+        top: 28.9,
+        width: 11.21,
+      },
+      card: { left: 30.62, top: 26.4 },
     },
-    card: { left: 24.7, top: 26.4 },
-    library: {
+    {
       libraryName: 'Mia’s Library',
-      about:
-        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cih sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus',
+      about: lorem,
       bookCount: 47,
       videoCount: 18,
       songCount: 6,
     },
-  },
-  {
-    id: 'house-5',
-    // Estimated from the screenshot — confirm/refine via devtools like house-1.
-    // Leader line exits to the LEFT, so the card sits left of the lantern.
-    hit: { left: 71, top: 38, width: 12, height: 26 },
-    highlight: {
-      src: '/library/images/hotspots/house-5.svg',
-      alt: '',
-      left: 67.5,
-      top: 19,
-      width: 16,
+  ),
+  makeHotspot(
+    'house-5',
+    {
+      // Leader line exits to the LEFT, so the card sits left of the lantern.
+      hit: { left: 61.94, top: 38, width: 8.96, height: 26 },
+      highlight: {
+        src: '/library/images/hotspots/house-5.svg',
+        alt: '',
+        left: 63.32,
+        top: 22,
+        width: 11.95,
+      },
+      card: { right: 36.26, top: 14 },
     },
-    card: { left: 40, top: 14 },
-    library: {
+    {
       libraryName: 'Noah’s Library',
-      about:
-        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cih sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus',
+      about: lorem,
       bookCount: 31,
       videoCount: 14,
       songCount: 4,
     },
-  },
+  ),
 ];
diff --git a/src/components/library/organisms/Sidebar/Sidebar.module.scss b/src/components/library/organisms/Sidebar/Sidebar.module.scss
index 5069de27..db0fd3af 100644
--- a/src/components/library/organisms/Sidebar/Sidebar.module.scss
+++ b/src/components/library/organisms/Sidebar/Sidebar.module.scss
@@ -1,7 +1,10 @@
 .sidebar {
   width: 100%;
   max-width: 331px;
-  height: 100vh;
+  // Stick below the global header rather than scrolling under it. The header is
+  // sticky 48px on desktop; offset by that and shorten the panel to the leftover
+  // viewport so the pinned guest-mode footer stays on screen while scrolling.
+  height: calc(100vh - 48px);
   background: var(--white-warm);
   box-shadow: var(--sidebar-shadow);
   padding: 16px;
@@ -11,12 +14,22 @@
   gap: 16px;
   transition: transform 0.3s ease;
   position: sticky;
-  top: 0;
+  top: 48px;
   align-self: flex-start;
 
+  // 1025–1140px: the header switches to position:fixed at 55px, so match the
+  // larger offset/height in that band.
+  @media (max-width: 1140px) {
+    top: 55px;
+    height: calc(100vh - 55px);
+  }
+
   @media (max-width: 1024px) {
     position: fixed;
+    // Full-height slide-in drawer overlay, above the fixed header.
+    top: 0;
     right: 0;
+    height: 100vh;
     // Above the fixed global header (z-index up to 113 on mobile) so the
     // drawer's own top controls aren't hidden beneath it when open.
     z-index: 130;
diff --git a/src/hooks/library/useAnchoredPosition.ts b/src/hooks/library/useAnchoredPosition.ts
index 8a9c9612..49925c71 100644
--- a/src/hooks/library/useAnchoredPosition.ts
+++ b/src/hooks/library/useAnchoredPosition.ts
@@ -9,6 +9,14 @@ export interface AnchoredPosition {
   placement: 'top' | 'bottom';
 }
 
+export interface AnchoredPositionOptions {
+  // When set, placement is decided purely by viewport width: open upward when
+  // `window.innerWidth <= openUpMaxWidth`, downward otherwise. This skips the
+  // measure-then-flip pass (the menu's height is not consulted), so the menu
+  // lands in its final position on first paint with no reposition flicker.
+  openUpMaxWidth?: number;
+}
+
 // Track the viewport position of an anchor element so a portaled menu can be
 // glued to it via `position: fixed`. Recomputes on scroll/resize while enabled,
 // so the menu stays attached as a modal or page scrolls. Returns null until the
@@ -18,12 +26,17 @@ export interface AnchoredPosition {
 // the viewport and there's more room above the trigger, it anchors above
 // instead. The menu's height is read from `menuRef` once it has mounted (a
 // rAF re-measure follows the first paint), so until then it defaults to 'bottom'.
+//
+// Pass `options.openUpMaxWidth` to bypass that measurement and pick placement by
+// viewport width alone (open up at/below the width, down above it).
 export const useAnchoredPosition = (
   anchorRef: RefObject<HTMLElement | null>,
   enabled: boolean,
   menuRef?: RefObject<HTMLElement | null>,
+  options?: AnchoredPositionOptions,
 ): AnchoredPosition | null => {
   const [position, setPosition] = useState<AnchoredPosition | null>(null);
+  const openUpMaxWidth = options?.openUpMaxWidth;
 
   useEffect(() => {
     if (!enabled) return;
@@ -38,9 +51,11 @@ export const useAnchoredPosition = (
       const spaceBelow = window.innerHeight - rect.bottom;
       const spaceAbove = rect.top;
       const openUp =
-        menuHeight > 0 &&
-        spaceBelow < menuHeight + margin &&
-        spaceAbove > spaceBelow;
+        openUpMaxWidth != null
+          ? window.innerWidth <= openUpMaxWidth
+          : menuHeight > 0 &&
+            spaceBelow < menuHeight + margin &&
+            spaceAbove > spaceBelow;
 
       const next: AnchoredPosition = {
         top: openUp ? rect.top - gap : rect.bottom + gap,
@@ -69,7 +84,7 @@ export const useAnchoredPosition = (
       window.removeEventListener('scroll', update, true);
       window.removeEventListener('resize', update);
     };
-  }, [anchorRef, enabled, menuRef]);
+  }, [anchorRef, enabled, menuRef, openUpMaxWidth]);
 
   return position;
 };
diff --git a/src/layouts/library/Home/Home.module.scss b/src/layouts/library/Home/Home.module.scss
index b476e71d..e5c0b924 100644
--- a/src/layouts/library/Home/Home.module.scss
+++ b/src/layouts/library/Home/Home.module.scss
@@ -1,15 +1,11 @@
 .banner {
   position: relative;
-  // The artwork is authored at 1440px wide; on wider screens the cover is
-  // centered and the surrounding gutters are filled with the painting's own
-  // misty green so the banner reads edge-to-edge.
-  background: #5b7d6f;
 
+  // The cover always spans the full viewport width; its aspect-ratio keeps the
+  // height proportional, so there are no side gutters to fill.
   .bannerInner {
     position: relative;
     width: 100%;
-    max-width: 1440px;
-    margin: 0 auto;
   }
 
   .image {
diff --git a/src/layouts/library/Home/Home.tsx b/src/layouts/library/Home/Home.tsx
index 9dfafd53..7b3a1687 100644
--- a/src/layouts/library/Home/Home.tsx
+++ b/src/layouts/library/Home/Home.tsx
@@ -23,7 +23,7 @@ import styles from './Home.module.scss';
 
 const sectionId = 'libraries-section';
 
-const perPage = 8;
+const perPage = 6;
 
 export function HomeTemplate({ data: dataOverride }: HomeTemplateProps) {
   const [value, setValue] = useState('');
@@ -144,6 +144,7 @@ export function HomeTemplate({ data: dataOverride }: HomeTemplateProps) {
           <InteractiveCover
             className={styles.image}
             src="/assets/library/library.png"
+            wideSrc="/assets/library/library-wide.png"
             alt="Keep Simple library cover"
           />
           <Button
@@ -187,9 +188,11 @@ export function HomeTemplate({ data: dataOverride }: HomeTemplateProps) {
             )}
           </div>
 
-          <div className={styles.pagination}>
-            <Pagination count={totalPages} onChange={handlePageChange} />
-          </div>
+          {totalPages > 1 && (
+            <div className={styles.pagination}>
+              <Pagination count={totalPages} onChange={handlePageChange} />
+            </div>
+          )}
         </div>
       </section>