@import url("/loads/css/theme.css");
@import url("/loads/css/sidebars.css");
@import url("/loads/css/monochrome.css");


:root {
  --font: "Baskervville", serif;
  --heading: var(--fancytxt);
  --size: 874px;
}

html {
  --color: var(--text);
  --accent: var(--dark);
  --button: var(--light);
}

html {
  color: var(--color);
  font-family: var(--font);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

body {
  line-height: 1.2;
  background-image: url('https://i.imgur.com/WD8T3Y1.jpeg');
  background-size: 200px auto;
  background-position: 50% 39%;
  background-repeat: repeat;
  background-attachment: fixed;
}

main {
  max-width: var(--size);
  margin-inline: auto;
  margin-top: 40px;
  padding-inline: 16px;
}

h1 {
  font-family: var(--heading);
  color: var(--dark);
  font-weight: normal;
  font-size: 1.5em;
  text-transform: none;
  text-align: right;
  margin-right: 40px;
  text-decoration: underline;
}

.title {
  margin-bottom: 14px;
  padding: 10px;
  background-color: #f7f4ed;
  color: #342e27;
  border: 1px solid #c6b8a5;
  border-radius: 9px;
  position: relative;
}
/* Match the book shelf's parchment colors and book-detail typography
   without changing the title's position or existing controls. */
.title h1 {
  color: #342e27;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 27px;
  text-decoration: none;
}
.title .button {
  color: #342e27;
  background: #eee7d9;
  border-color: #c6b8a5;
}
.title .button:hover,
.title .button:focus-visible {
  color: #342e27;
  background: #ded2c2;
  border-color: #ac987e;
}
.title .button.is-checked {
  color: #fff;
  background: #806a53;
  border-color: #806a53;
}
.title p {
  text-align: right;
  color: #68594b;
  font-family: Georgia, 'Times New Roman', serif;
  margin-top: 10px;
  margin-bottom: -65px;
  margin-right: 15px;
  position: relative;
}
.title::before {
  content:'';
  background: url("https://i.imgur.com/WP1Ay40.png");
  height: 100px;
  width: 100px;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 100000;
  bottom: -60px;
  right: -40px;
}
.title p::before {
  content:'';
  background: url("https://i.imgur.com/Gepi7In.png");
  height: 56px;
  width: 270px;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 100000;
  top: 20px;
  right: 0;
}
.library-vintage-nav__links::before {
  content:'';
  background: url("https://i.imgur.com/4lQgqH2.png");
  height: 98px;
  width: 98px;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 100000;
  top: -28px;
  left: -55px;
}

#favborder, #smborder {
  margin-left: 865px;
}
#awning {
  margin-left: -275px;
}
#quoteborder {
  margin-left: -280px;
  width: 263px;
}
#update {
  width: 100%;
}
#quote {
  width: 95%;
}
#favs {
  width: 99%;
  max-height: 400px;
}
#smlinks {
  width: 97%;
}
#directory {
  display: flex;
}
#directory td {
  width: 120px;
  padding: 0 2px;
}
.upd {
  font-size: 0.8em;
}
#update .upd h4 {
  font-size: 1.1em;
}
#favs .upd h4 {
  font-size: 1.4em;
}
#quote blockquote {
  font-size: 0.9em;
}
#favs h2 {
  font-size: 1.2em;
  padding: 5px;
}


/* Book shelf — parchment palette from the approved flip-card preview. */
.library-shelf {
  margin-block: 22px 60px;
  padding: 22px 12px 26px;
  border-radius: 9px;
  background: #f7f4ed;
  color: #342e27;
}

.library-shelf__hint {
  margin: 0 0 25px;
  text-align: center;
  font: 13px/1.4 Georgia, 'Times New Roman', serif;
  color: #817665;
}

.grid {
  margin-inline: auto;
  transition: width 200ms;
}

.posters {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

/* The LI retains every original metadata class; Isotope reads sorting from data-* attributes. */
.poster {
  width: 180px;
  aspect-ratio: 2 / 3;
  margin-bottom: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  list-style: none;
}

.library-flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  color: #342e27;
  font-family: Georgia, 'Times New Roman', serif;
  perspective: 1100px;
}

.library-flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(.2, .7, .25, 1);
}

.library-flip-card.is-flipped .library-flip-card__inner {
  transform: rotateY(180deg);
}

.library-flip-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 7px 18px rgb(56 43 30 / 16%);
}

.library-flip-card__front { background: #e6ded1; }

.library-flip-card__cover-button {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.library-flip-card__cover-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-flip-card__cover-button img:hover {
  object-fit: contain;
}

.library-flip-card__cover-button:focus-visible,
.library-flip-card__review:focus-visible {
  outline: 2px solid #94724a;
  outline-offset: -4px;
}

.library-flip-card__back {
  transform: rotateY(180deg);
  box-sizing: border-box;
  border: 1px solid #c6b8a5;
  background: #eee7d9;
  padding: 18px 14px 14px;
  text-align: center;
  gap: 9px;
  justify-content: safe center;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  cursor: pointer;
}

.library-flip-card__back:focus { outline: none; }
.library-flip-card__back:focus-visible { outline: 2px solid #94724a; outline-offset: -4px; }

.library-flip-card__eyebrow {
  flex-shrink: 0;
  color: #806a53;
  font: 10px/1.3 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.library-flip-card__rule {
  width: 30px;
  flex: 0 0 1px;
  background: #b5a58f;
}

/* The original title/author/notes are moved to the back face by JS. */
.library-flip-card__back .caption {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow-wrap: anywhere;
}

.library-flip-card__back .caption strong {
  display: block;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 500;
  color: #342e27;
}

.library-flip-card__back .caption em {
  display: block;
  font-style: normal;
  font-size: 13px;
  line-height: 1.35;
  color: #68594b;
}

.library-flip-card__date {
  display: block;
  font: 12px/1.3 Arial, sans-serif;
  color: #806a53;
}

.library-flip-card__review {
  flex-shrink: 0;
  font: 11px/1.4 Georgia, 'Times New Roman', serif;
  color: #6f5540;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.library-flip-card__review:hover { color: #342e27; }


/* Keep the first marker anchored at the same 30% offset regardless of
   how many markers are added. Extra markers extend LEFT, not right. */
.library-flip-card__badges {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  transform: translate(30%, -30%);
  z-index: 5;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.library-flip-card__badge {
  position: relative;
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
  filter: drop-shadow(0 1px 2px rgb(255 255 255 / 60%));
}

.library-flip-card__badge--fav::before { content: "💕"; }
.library-flip-card__badge--more::before { content: "🌼"; }
.library-flip-card__badge--hate::before { content: "❌"; }
.library-flip-card__badge--yay::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;  /* approximately 40% larger than the original 24px GIF */
  height: 34px;
  background: url("https://i.imgur.com/QJNGUIN.gif") center / contain no-repeat;
}


details {
  margin-top: 10px;
  border: 1px solid var(--accent);
  border-radius: 2px;
}
details summary {
  cursor: pointer;
  padding: 2px 6px;
  background-color: var(--background);
}
details[open] {
  border: 1px solid var(--accent);
}
details[open] summary {
  background-color: var(--accent);
  color: white;
}

.button {
  cursor: var(--pointcursor);
  background: none;
  border: none;
  font-size: 0.8em;
  color: var(--color);
  border: 2px solid var(--med);
  border-radius: 5px;
  padding: 4px 8px;
  background-color: var(--background);
  transition-property: color, background-color, text-decoration-color;
  transition-duration: 150ms;
  z-index: 1000;
}
.button:hover, .button:focus {
  color: var(--background);
  background-color: var(--med);
}
.button.is-checked {
  color: white;
  background-color: var(--accent);
}

.buttons {
  padding-top: 10px;
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Progressive enhancement: the authored entries remain legible if JS is unavailable. */
.poster:not(.is-enhanced) {
  height: auto;
  aspect-ratio: auto;
  background: #eee7d9;
  padding: 0 0 12px;
  text-align: center;
}
.poster:not(.is-enhanced) > img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.poster:not(.is-enhanced) > strong,
.poster:not(.is-enhanced) > em {
  display: block;
  padding: 5px 8px 0;
  overflow-wrap: anywhere;
}
.poster:not(.is-enhanced) > em { font-size: 13px; font-style: normal; }
.poster:not(.is-enhanced) > a { display: block; margin: 8px; }


@media (max-width: 440px) {
  .library-shelf { padding: 18px 10px 24px; }
  .library-flip-card__back { padding: 10px 8px; gap: 6px; }
  .library-flip-card__back .caption { gap: 5px; }
  .library-flip-card__back .caption strong { font-size: 14px; }
  .library-flip-card__back .caption em { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .library-flip-card__inner { transition: none; }
}


/* ====================================================================
   Library quotation layout, v05
   Original quote content still loads into #quo and favorites into #fav.
   Updates and social-links sidebars are intentionally omitted.
   ==================================================================== */

main.library-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.library-page__layout {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 300px minmax(0, 874px) 240px;
  column-gap: 18px;
  align-items: start;
  justify-content: center;
  width: min(calc(100% - 32px), 1450px);
  margin: 40px auto 70px;
}

/* Quote: 300px (50px narrower). Favorites: 240px (50px wider).
   They occupy opposite rails on wide screens and stack next to the
   catalog on narrower screens. */
.library-page__sidebars { display: contents; }
.library-page__quotes { grid-column: 1; grid-row: 1; }
.library-page__collection { grid-column: 2; grid-row: 1; }
.library-page__favorites { grid-column: 3; grid-row: 1; }

.library-page__quotes,
.library-page__collection,
.library-page__favorites {
  box-sizing: border-box;
  min-width: 0;
}

/* Override margin/position rules from the shared sidebar stylesheet,
   since these elements are now placed by the page's grid. */
main.library-page #quoteborder,
main.library-page #favborder {
  box-sizing: border-box;
  position: relative;
  inset: auto;
  float: none;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  overflow: visible;
}

main.library-page #quoteborder {
  padding: 9px;
  border: 1px solid #b8a58a;
  background: #ede5d7;
  border-radius: 0;
  box-shadow: 0 10px 28px rgb(67 59 48 / 16%);
  color: #483b31;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
}

.library-quote-panel__inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 333px;
  padding: 26px 20px 24px;
  border: 1px solid #cab9a0;
}

.library-quote-panel__kicker {
  color: #867058;
  text-transform: uppercase;
  letter-spacing: .23em;
  font: 10px/1.5 Arial, sans-serif;
}

.library-quote-panel__rule {
  display: block;
  flex: 0 0 1px;
  width: 55px;
  margin: 19px auto 5px;
  background: #b9a88f;
}

.library-quote-panel__glyph {
  display: block;
  flex-shrink: 0;
  height: 54px;
  color: #b39c7e;
  font: 65px/.95 Georgia, 'Times New Roman', serif;
}

/* This is deliberately the *inner* scroll region: very long quotations
   never get cut off and the decorative frame remains visible. */
main.library-page #quote.library-quote-panel__scroll {
  box-sizing: border-box;
  display: block;
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  max-height: min(60vh, 540px);
  margin: 5px 0 0;
  padding: 0 10px 3px 3px;
  border: 0;
  background: transparent;
  color: #483b31;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b5a58f #ede5d7;
  overflow-wrap: anywhere;
  text-align: center;
  font: italic 20px/1.5 Georgia, 'Times New Roman', serif;
}

main.library-page #quote.library-quote-panel__scroll:focus-visible {
  outline: 1px solid #94724a;
  outline-offset: 2px;
}

main.library-page #quote blockquote {
  margin: 7px 0 17px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

main.library-page #quote p { margin: 7px 0 14px; }
main.library-page #quote cite,
main.library-page #quote footer,
main.library-page #quote .author,
main.library-page #quote .source {
  display: block;
  margin-top: 16px;
  color: #806c58;
  font: normal 11px/1.5 Arial, sans-serif;
  letter-spacing: .09em;
}
main.library-page #quote a { color: #6f5540; }

.library-quote-panel__footnote {
  margin: 14px 0 0;
  color: #6e6152;
  text-align: center;
  font: 10px/1.5 Arial, sans-serif;
  letter-spacing: .04em;
}

/* Favorites keep their full loaded contents and remain on the right. */
main.library-page #favborder {
  padding: 10px;
  border: 1px solid #c6b8a5;
  border-radius: 3px;
  background: #f7f4ed;
  box-shadow: 0 3px 11px rgb(67 59 48 / 10%);
  color: #342e27;
}

main.library-page #favs,
main.library-page #fav {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
}

main.library-page #favs { margin: 0; }

/* The original center width stays up to 874px. This layout naturally
   puts its center to the RIGHT of the screen midpoint on wide monitors. */
.library-page__collection .title { margin-top: 0; }
.library-page__collection .library-shelf { margin-top: 22px; }

@media (max-width: 1340px) {
  .library-page__layout {
    grid-template-columns: minmax(260px, 300px) minmax(0, 874px);
    max-width: 1260px;
  }
  .library-page__sidebars {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
  }
  .library-page__quotes,
  .library-page__favorites { grid-column: auto; grid-row: auto; }
  .library-page__collection { grid-column: 2; grid-row: 1; }
  /* Keep the original title ornament from extending offscreen. */
  .library-page__collection .title::before { right: 0; }
}

@media (max-width: 930px) {
  .library-page__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: min(calc(100% - 28px), 874px);
    margin-top: 18px;
  }
  .library-page__sidebars { display: contents; }
  .library-page__quotes,
  .library-page__collection,
  .library-page__favorites { width: 100%; }
  .library-page__quotes { order: 1; }
  /* IMPORTANT: never place Favorites below hundreds of book entries. */
  .library-page__favorites { order: 2; margin: 0; }
  .library-page__collection { order: 3; }
  .library-quote-panel__inner { min-height: 0; padding: 18px 17px; }
  main.library-page #quote.library-quote-panel__scroll { max-height: min(45vh, 440px); }
  .library-quote-panel__glyph { height: 42px; font-size: 51px; }
  .library-quote-panel__rule { margin-top: 12px; }
}

@media (max-width: 480px) {
  .library-page__layout { width: calc(100% - 22px); }
  .library-quote-panel__inner { padding: 15px 12px; }
  main.library-page #quote.library-quote-panel__scroll {
    font-size: 18px;
    line-height: 1.45;
    max-height: min(48vh, 420px);
  }
}


/* Preserve the discontinued sidebar targets for the shared content loader,
   without displaying their panels or allowing them to affect the grid. */
.library-page__legacy-loader-targets {
  display: none !important;
}


/* Library v05: Favorites fix.
   /loads/css/sidebars.css translates #favs backward in 3D and gives
   #favborder a preserve-3d stacking context. The v04 opaque parchment
   background consequently paints over the successfully loaded content.
   Reset the legacy 3D effects ONLY on the library Favorites panel. */
main.library-page #favborder {
  transform-style: flat;
}
main.library-page #favs {
  transform: none;
}


/* ====================================================================
   Library Updates 06–07: approved page-specific presentation.
   Shared /loads files are not changed.
   ==================================================================== */

/* Six-destination parchment navigation above the catalog. */
.library-site-header {
  width: min(calc(100% - 32px), 1450px);
  margin: 8px auto 0;
}
.library-vintage-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  color: #4c392d;
}
.library-vintage-nav::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.library-vintage-nav__links a {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: .01em;
  color: #50392c;
}


/* Approved navigation, Favorites, quote control and parchment framing. */


/* Slimmer, higher navigation and a shadow matching the quotation box. */
.library-site-header {
 width:min(calc(100% - 32px),1450px);
 margin:8px auto 0;
}
.library-vintage-nav {
 padding:5px 14px;
 gap:0;
 background:#ede5d7;
 border:1px solid #b8a58a;
 outline:1px solid #cab9a0;
 outline-offset:3px;
 box-shadow:0 10px 28px rgb(67 59 48 / 16%);
}
/* Restore the inset ornamental border. Earlier code specified only its
   color, not its border width/style, leaving it invisible. Keep the
   pseudo-element above the nav background, below the actual links. */
.library-vintage-nav::before {
  inset: 5px;
  border: 1px solid #cab9a0;
  z-index: 0;
}
.library-vintage-nav::after { display:none; }
.library-vintage-nav__image-slot {
 flex:0 0 48px;
 width:48px;height:34px;
 display:block;
 background:transparent;
}
.library-vintage-nav__image-slot img {
 display:block;width:100%;height:100%;object-fit:contain;
}
.library-vintage-nav__links {
 width:100%;
 display:grid;
 grid-template-columns:repeat(6,minmax(0,1fr));
 align-items:center;
 position:relative;
 z-index:1;
}
.library-vintage-nav__links a {
 display:flex;
 justify-content:center;
 align-items:center;
 font:16px/1.2 Georgia,'Times New Roman',serif;
 min-height:34px;
 padding:7px 4px;
 position:relative;
 text-decoration:none;
 background:transparent;
 color:#50392c;
 isolation:isolate;
}
.library-vintage-nav__links a .library-vintage-nav__label { position:relative;z-index:1; }
.library-vintage-nav__links a::before {
 content:"";
 position:absolute;
 left:10%;right:10%;top:3px;bottom:3px;
 background:rgb(112 84 56 / 11%);
 outline:1px solid #bda78d;
 outline-offset:-1px;
 border-radius:2px;
 opacity:0;
 transition:opacity .15s ease;
 z-index:0;
}
.library-vintage-nav__links a:hover,
.library-vintage-nav__links a:focus-visible {
 color:#6a452d;
 background:transparent;
 outline:0;
}
.library-vintage-nav__links a:hover::before,
.library-vintage-nav__links a:focus-visible::before { opacity:1; }
.library-vintage-nav__links a:not(:last-child)::after {
 content:'✦';position:absolute;top:50%;right:-4px;
 transform:translateY(-50%);z-index:1;
 color:#a18c70;font:8px Georgia,serif;
}
/* Reduce the previous gap below navigation. */
main.library-page .library-page__layout { margin-top:15px; }

/* Favorites: use the same two-border frame, shadow and parchment as Quotes. */
main.library-page #favborder {
 padding:9px;
 border:1px solid #b8a58a;
 border-radius:0;
 background:#ede5d7;
 box-shadow:0 10px 28px rgb(67 59 48 / 16%);
 color:#483b31;
}
main.library-page #favborder::before,
main.library-page #favborder::after { content:none; }
main.library-page #favs {
 margin:0;
 padding:16px 14px 20px;
 border:1px solid #cab9a0;
 background:transparent;
 overflow:visible;
 max-height:none;
 transform:none;
}
main.library-page #favs h2 {
 font:italic 21px/1.3 Georgia,'Times New Roman',serif;
 color:#604833;
 border:0;
 text-align:center;
 padding:0;
 margin:0;
 margin-top:0 !important; /* Override the inline 15px heading margin in favs.html */
 background:transparent;
}
main.library-page #favs h2::after {
 content:'';
 display:block;width:55px;height:1px;
 margin:15px auto 2px;
 background:#b9a88f;
}
main.library-page #favs .upd {
 display:block;
 margin:0;
 padding:17px 2px 15px;
 border-bottom:1px solid #cab9a0;
 border-radius:0;
 text-indent:0; /* Undo the inherited -13px in sidebars.css. */
 color:#514437;
 font:12px/1.38 Georgia,'Times New Roman',serif;
}
main.library-page #favs .upd:last-child { border-bottom:0;padding-bottom:2px; }
main.library-page #favs .upd h4 {
 text-transform:uppercase;
 font:10px/1.5 Arial,sans-serif;
 letter-spacing:.16em;
 color:#806a53;
 text-align:center;
 margin:0 0 10px;
}
main.library-page #favs .upd h4::before { content:none; }
/* Match the mockup's small typographic bullets, rather than the
   legacy image markers from /loads/css/sidebars.css. */
main.library-page #favs .upd p {
 position:relative;
 margin:0 0 6px;
 padding:0 0 0 14px;
 text-indent:0;
 line-height:1.4;
 overflow-wrap:break-word;
}
main.library-page #favs .upd p::before {
 content:'·';
 position:absolute;
 top:0;
 left:3px;
 display:block;
 margin:0;
 padding:0;
 zoom:1;
 color:#9d7e5b;
 font:20px/15px Georgia,'Times New Roman',serif;
}
main.library-page #favs .upd p i { font-style:italic; }

/* Match title and catalog framing to quote box; retain the palette/controls. */
main.library-page .title,
main.library-page .library-shelf {
 background:#ede5d7;
 border:1px solid #b8a58a;
 border-radius:0;
 box-shadow:0 10px 28px rgb(67 59 48 / 16%);
 color:#342e27;
}
main.library-page .title { padding:14px; }
main.library-page .title::after {
 content:"";position:absolute;inset:8px;
 border:1px solid #cab9a0;
 pointer-events:none;
}
main.library-page .library-shelf {
 position:relative;
 padding:24px 17px 26px;
}
main.library-page .library-shelf::before {
 content:"";position:absolute;inset:8px;
 border:1px solid #cab9a0;
 pointer-events:none;
}
main.library-page .library-shelf > * {position:relative;}

/* Quote-changing control, deliberately quieter than the shelf buttons. */
.library-quote-panel__cycle {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:7px;
 margin:17px auto 0;
 padding:7px 13px;
 min-height:31px;
 max-width:100%;
 border:1px solid #baa78e;
 border-radius:2px;
 background:rgb(255 252 246 / 28%);
 box-shadow:0 1px 0 rgb(255 255 255 / 25%) inset;
 color:#705b45;
 font:11px/1.35 Georgia,'Times New Roman',serif;
 letter-spacing:.055em;
 cursor:pointer;
 transition:background-color .15s ease,border-color .15s ease;
}
.library-quote-panel__cycle:hover,
.library-quote-panel__cycle:focus-visible {
 background:rgb(255 252 246 / 65%);
 border-color:#947c60;
 color:#483b31;
 outline-offset:3px;
}
.library-quote-panel__cycle-icon {
 font:17px/12px Georgia,serif;
 color:#9b7f60;
 transform:translateY(-1px);
}
main.library-page #quote.library-quote-panel__scroll {min-height:80px;}

/* Maintain six visible destinations without horizontal overflow. */
@media (max-width:1340px) {
  .library-site-header {max-width:1260px;}
}
@media (max-width:930px) {
 .library-site-header { width:min(calc(100% - 28px),874px);margin-top:8px; }
 .library-vintage-nav { padding:5px 8px; }
 .library-vintage-nav__image-slot { flex-basis:22px;width:22px;height:30px; }
 .library-vintage-nav__links { grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto); }
 .library-vintage-nav__links a { font-size:15px;padding:6px 4px;min-height:31px; }
 .library-vintage-nav__links a:nth-child(3)::after {display:none;}
 main.library-page .library-page__layout {margin-top:15px;}
}
@media(max-width:480px) {
 .library-site-header {width:calc(100% - 22px);}
 .library-vintage-nav {padding:4px 5px;}
 .library-vintage-nav__image-slot {flex-basis:5px;width:5px;}
 .library-vintage-nav__links a {font-size:12px;padding:6px 2px;min-height:32px;letter-spacing:0;}
 .library-vintage-nav__links a:not(:last-child)::after {right:-3px;font-size:7px;}
 .library-vintage-nav__links a::before {left:10%;right:10%;}
 main.library-page .title{padding:12px;}
 main.library-page .library-shelf {padding:20px 13px;}
}
@media(prefers-reduced-motion:reduce) {
 .library-vintage-nav__links a::before,
 .library-quote-panel__cycle {transition:none;}
}


/* Flat vintage catalogue buttons for the existing filters and sorting.
   Keeps the original colors, dimensions, labels, and interactions. */
main.library-page .title .button {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid #b8a58a;
  border-radius: 2px;
  background: #f0e7d9;
  box-shadow: none;
  color: #584536;
  font: normal 12px/1.35 Georgia, 'Times New Roman', serif;
  letter-spacing: .01em;
  text-shadow: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
main.library-page .title .button:not(.is-checked):hover {
  color: #433124;
  background: #f6ecdf;
  border-color: #927a5e;
  box-shadow: none;
  transform: none;
}
main.library-page .title .button.is-checked {
  border: 1px solid #6f5944;
  background: #806a53;
  color: #fff8e9;
  box-shadow: none;
  text-shadow: none;
}
main.library-page .title .button.is-checked:hover {
  background: #896f57;
  border-color: #5f4834;
}
main.library-page .title .button:focus-visible {
  outline: 2px solid #725a3f;
  outline-offset: 3px;
}
@media (prefers-reduced-motion:reduce) {
  main.library-page .title .button { transition: none; }
}


/* A functional old quote button, if the loaded fragment supplies one,
   stays in place for its event handler but does not clutter the panel. */
main.library-page #quo .library-quote-panel__legacy-cycle {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Retain the header/filters' final equal-padding adjustment from the preview. */
main.library-page .title h1 { margin-top: 0; margin-bottom: 0; }
main.library-page .title .buttons { padding-top: 0; margin-top: 5px; }


/* ====================================================================
   Library Update 08 — prevent shared sidebar/theme panel styling from
   leaking into the library Favorites sections.
   The remotely loaded favs.html uses a <div class="upd"> per category.
   Some shared styles supply white backgrounds and pink box borders;
   reset those surfaces here, without modifying the shared CSS or HTML.
   ==================================================================== */
main.library-page #favborder #favs #fav {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
main.library-page #favborder #favs #fav > div.upd {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid #cab9a0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
main.library-page #favborder #favs #fav > div.upd:last-child {
  border-bottom: 0 !important;
}