/* /library: matches vpublication.com/library.html (the owner's "orange, yellow, blue, tan" look): tan paper, blue ink,
   thick 4px blue borders with hard offset shadows, dot-grid hero, boxed title, yellow neo buttons, orange accent.
   Light (tan) is this page's default; the Theme button flips to a navy variant with the same shapes. */
.lib {
  --lb-bg: #FAF0CA; --lb-text: #0D3B66; --lb-ink: #0D3B66; --lb-card: #FFFFFF; --lb-dot: #0D3B66;
  --lb-btn: #F4D35E; --lb-btn-text: #0D3B66; --lb-badge: #F4D35E; --lb-accent: #EE964B; --lb-title-bg: #FFFFFF;
  background: var(--lb-bg); color: var(--lb-text); font-family: 'Space Grotesk', system-ui, sans-serif;
}
:root[data-theme="dark"] .lib {
  --lb-bg: #0D3B66; --lb-text: #FAF0CA; --lb-ink: #F4D35E; --lb-card: #0A2E50; --lb-dot: rgba(250, 240, 202, .22);
  --lb-btn: #F4D35E; --lb-btn-text: #0D3B66; --lb-badge: #0A2E50; --lb-accent: #EE964B; --lb-title-bg: #0A2E50;
}
.lib .site-header { background: var(--lb-bg); border-bottom: 4px solid var(--lb-ink); box-shadow: none; }
.lib .brand, .lib nav a { color: var(--lb-ink); font-weight: 900; }
.lib nav .btn { color: var(--lb-ink); border-color: var(--lb-ink); background: transparent; font-family: 'VT323', ui-monospace, monospace; font-size: 1.2rem; font-weight: 400; }
.lib .brand-mark { background: var(--lb-btn); box-shadow: 6px 6px 0 var(--lb-accent); }
.lib main.wrap { max-width: 1120px; }
.lib .pixel { font-family: 'VT323', ui-monospace, monospace; font-weight: 400; }
.lib .dot-grid { background-color: var(--lb-bg); background-image: radial-gradient(var(--lb-dot) 2px, transparent 2px); background-size: 30px 30px; }
.lib { overflow-x: clip; }
.lib-hero { text-align: center; padding: 3.2rem 1rem; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-bottom: 6px solid var(--lb-ink); box-shadow: 0 8px 0 0 var(--lb-ink); }
.lib-hero .pixel { font-size: 1.7rem; color: var(--lb-ink); margin: 0 0 .5rem; }
.lib .lib-title { display: inline-block; text-transform: uppercase; font-weight: 900; letter-spacing: -.04em; font-size: clamp(2rem, 6.5vw, 4.2rem); line-height: 1.05; margin: 0 0 1rem;
  padding: .3rem 1rem; border: 4px solid var(--lb-ink); background: var(--lb-title-bg); color: var(--lb-ink); transform: rotate(1deg); box-shadow: 8px 8px 0 var(--lb-accent); }
.lib-lead { display: inline-block; max-width: 42rem; margin: 0; font-size: 1.15rem; font-weight: 700; padding: .35rem .8rem; border: 2px solid var(--lb-ink); background: var(--lb-card); color: var(--lb-ink); }
.lib-catalog { padding: 2.5rem 0 1rem; }
.lib-head { border-bottom: 4px solid var(--lb-ink); padding-bottom: .6rem; margin-bottom: 2rem; }
.lib-head h2 { margin: 0; text-transform: uppercase; font-weight: 900; letter-spacing: -.04em; font-size: 2.2rem; color: var(--lb-ink); }
.lib .books { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.lib .book { display: flex; flex-direction: column; border: 4px solid var(--lb-ink); box-shadow: 8px 8px 0 var(--lb-ink); background: var(--lb-card); padding: 1.4rem; border-radius: 0; transition: transform .2s, box-shadow .2s; }
.lib .book:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--lb-ink); }
.lib .cover { width: 100%; max-height: 350px; height: auto; object-fit: cover; margin: 0 0 1rem; border: 2px solid var(--lb-ink); border-radius: 0; box-shadow: none; }
.lib .badge-row { margin: 0 0 .7rem; }
.lib .badge { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; padding: 3px 9px; background: var(--lb-badge); color: var(--lb-ink); border: 2px solid var(--lb-ink); border-radius: 0; margin-right: 6px; }
.lib .badge.price { background: var(--lb-accent); color: #0D3B66; }
.lib .book h3 { margin: 0 0 .3rem; text-transform: uppercase; font-weight: 900; letter-spacing: -.04em; font-size: 1.6rem; line-height: 1.1; color: var(--lb-ink); }
.lib .sub { font-size: 1.25rem; margin: 0 0 .8rem; color: var(--lb-ink); line-height: 1.15; }
.lib .blurb { flex-grow: 1; font-size: .95rem; margin: 0 0 .8rem; color: var(--lb-text); }
.lib .pairs { font-size: .9rem; color: var(--lb-text); }
.lib .pairs a, .lib-foot a { color: var(--lb-ink); font-weight: 700; }
:root[data-theme="dark"] .lib .pairs a, :root[data-theme="dark"] .lib-foot a { color: #F4D35E; }
.lib .actions { display: flex; flex-wrap: wrap; gap: 22px 26px; margin: .9rem 0 .4rem; }
.neo-btn { display: inline-block; flex: 1; text-align: center; font: inherit; font-weight: 900; text-transform: uppercase; text-decoration: none; padding: .7rem .5rem; font-size: .92rem; white-space: nowrap; cursor: pointer;
  background: var(--lb-btn); color: var(--lb-btn-text); border: 4px solid var(--lb-ink); box-shadow: 6px 6px 0 var(--lb-ink); transition: all .1s; }
.neo-btn:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--lb-ink); }
.neo-btn.ghost { background: transparent; color: var(--lb-ink); }
.neo-btn.disabled { opacity: .55; cursor: not-allowed; border-style: dashed; }
.neo-btn.disabled:hover { transform: none; box-shadow: 6px 6px 0 var(--lb-ink); }
.lib-foot { text-align: center; margin: 2.5rem 0 0; font-weight: 700; color: var(--lb-ink); }
.lib .site-footer { background: var(--lb-bg); border-top: 4px solid var(--lb-ink); color: var(--lb-text); box-shadow: none; }
.lib .site-footer a { color: var(--lb-ink); }
:root[data-theme="dark"] .lib .site-footer a { color: #F4D35E; }
@media (max-width: 640px) { .lib-hero { padding: 2rem .8rem; } .lib .actions { flex-direction: column; } .neo-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .lib .book, .neo-btn { transition: none; } .lib .book:hover { transform: none; } }