:root {
  color-scheme:dark;
  --bg:#16120e;
  --bg2:#1e1915;
  --bg3:#0e0b08;
  --ink:#ede8e0;
  --ink2:#c4bdb4;
  --muted:#a3978a;
  --accent:#c4622d;
  --accent2:#e8896a;
  --blue:#6b9ec4;
  --rule:#2e2820;
  --mono:'DM Mono',monospace;
  --serif:'DM Serif Display',serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 var(--mono);
}

::selection {
  background:#c4622d55;
}

button,input {
  font:inherit;
}

button,a,input {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:var(--blue);
  text-decoration:none;
}

a:hover {
  color:var(--accent2);
}

button {
  cursor:pointer;
}

button:focus-visible,a:focus-visible,input:focus-visible,.shelf-scroll:focus-visible {
  outline:2px solid var(--accent2);
  outline-offset:5px;
}

[hidden] {
  display:none!important;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.skip-link {
  position:fixed;
  top:-5rem;
  left:1rem;
  z-index:5;
  padding:.5rem;
  background:var(--bg3);
}

.skip-link:focus {
  top:1rem;
}

.page {
  max-width:68rem;
  margin:auto;
  padding:2rem 1.25rem 4rem;
}

.site-header {
  max-width:39.5rem;
  margin:0 auto 2.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid #7a6f6566;
}

.site-title a {
  font:italic 2.4rem var(--serif);
  color:var(--ink);
}

.site-desc {
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin:.1rem 0 0;
}

.links {
  display:flex;
  flex-wrap:wrap;
  gap:.25rem 1rem;
  margin-top:.5rem;
}

.links a {
  font-size:.78rem;
}

.links a[aria-current] {
  color:var(--accent2);
}

.heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
}

.eyebrow {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent2);
  margin:0 0 .35rem;
}

h1 {
  font:italic 3.4rem/1.1 var(--serif);
  font-weight:400;
  margin:0;
}

h1 span {
  color:var(--accent);
}

.shelf-mark {
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted);
  padding-bottom:.25rem;
}

.intro {
  margin:.65rem 0 1.8rem;
  color:var(--ink2);
}

.controls {
  display:flex;
  gap:1rem;
  justify-content:space-between;
  align-items:center;
}

.search {
  position:relative;
  flex:1;
  max-width:26rem;
}

.search input {
  width:100%;
  min-height:44px;
  background:var(--bg3);
  border:1px solid #514338;
  color:var(--ink);
  padding:.6rem 2.6rem .6rem .85rem;
  border-radius:0;
}

.search input::placeholder {
  color:var(--muted);
}

.search>span {
  position:absolute;
  right:.8rem;
  top:.2rem;
  font-size:25px;
  color:var(--accent2);
  pointer-events:none;
}

.filters {
  display:flex;
  gap:4px;
}

.filters button,#reset {
  min-height:44px;
  background:transparent;
  color:var(--ink2);
  border:1px solid var(--rule);
  padding:.5rem 1rem;
  font-size:14px;
}

.filters button[aria-pressed=true] {
  color:var(--ink);
  background:#823e20;
  border-color:var(--accent);
}

.filters button:hover,#reset:hover {
  border-color:var(--accent2);
}

.shelf-meta {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:var(--muted);
  font-size:12px;
  margin:1rem 0 .5rem;
}

.shelf-meta p {
  margin:0;
}

.mobile-hint {
  display:none;
}

.shelf-scroll {
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  scrollbar-color:#795239 var(--bg3);
  scrollbar-width:thin;
  padding-bottom:12px;
}

.cabinet {
  min-width:860px;
  background:#100c09;
  border:12px solid #241b14;
  border-top-width:16px;
  box-shadow:0 10px 24px #0005,inset 0 0 24px #000;
}

.shelf-row {
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:282px;
  padding:22px 16px 0;
  border-bottom:17px solid #39271b;
  position:relative;
  background:linear-gradient(180deg,#0009,transparent 35%,#0005),repeating-linear-gradient(90deg,#1b130e 0,#1b130e 120px,#1a120d 122px,#1b130e 124px);
  box-shadow:inset 0 -12px 18px #0009;
}

.shelf-row::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-17px;
  height:17px;
  pointer-events:none;
  background:linear-gradient(#755138 0,#4b3222 2px,#332319 6px,#21170f 100%);
  box-shadow:0 8px 10px #0009;
}

.spine {
  position:relative;
  flex:0 0 var(--width);
  width:var(--width);
  height:var(--height);
  padding:12px 5px 8px;
  border:0;
  border-radius:2px 3px 0 0;
  color:var(--letter);
  background:linear-gradient(90deg,#0007,transparent 15%,#ffffff12 27%,transparent 50%,#0004 90%,#0009),var(--color);
  box-shadow:2px 0 3px #0009,inset 1px 0 0 #ffffff25,inset -2px 0 0 #0006;
  transform:rotate(var(--lean));
  transform-origin:bottom center;
  transition:transform .16s ease,filter .16s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  text-align:left;
}

.spine:hover,.spine:focus-visible {
  transform:translateY(-10px) rotate(0deg);
  filter:brightness(1.16);
  z-index:2;
}

.spine-title {
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font:400 16px/1.15 var(--serif);
  max-width:100%;
  max-height:calc(100% - 27px);
  overflow:hidden;
  overflow-wrap:normal;
  white-space:nowrap;
  text-overflow:ellipsis;
  flex:1;
}

.spine:nth-child(3n) .spine-title {
  font-family:var(--mono);
  font-size:13px;
}

.spine:nth-child(5n)::before {
  content:'';
  position:absolute;
  top:7px;
  left:4px;
  right:4px;
  height:2px;
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
  opacity:.5;
}

.spine-mark {
  font:9px/1 var(--mono);
  letter-spacing:.02em;
  opacity:.85;
}

.spine.movie {
  border-top:8px solid #17191f;
  border-radius:5px 5px 1px 1px;
}

.spine.movie:nth-child(2n) {
  border-top-color:#23557a;
}

.spine.movie .spine-title {
  font-family:var(--mono);
  font-size:13px;
  font-weight:500;
}

.empty {
  border:1px solid var(--rule);
  text-align:center;
  padding:3rem 1rem;
  background:var(--bg3);
}

.empty p {
  margin:0 0 1rem;
}

.collection-note {
  font-size:12px;
  color:var(--muted);
  max-width:40rem;
  margin:1.1rem 0;
}

.site-footer {
  border-top:1px solid var(--rule);
  margin-top:2.5rem;
  padding-top:1rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.site-footer a {
  color:var(--muted);
}

dialog {
  color:var(--ink);
  background:var(--bg2);
  border:1px solid #514338;
  border-top:2px solid var(--accent);
  padding:0;
  width:min(28rem,calc(100% - 2rem));
  max-height:85dvh;
  overflow-y:auto;
  box-shadow:0 20px 70px #0008;
}

dialog::backdrop {
  background:#0a0806df;
}

.detail-inner {
  padding:1.4rem;
}

.close {
  display:block;
  margin:0 0 1.8rem auto;
  background:transparent;
  color:var(--ink2);
  border:0;
  min-height:44px;
  font:12px var(--mono);
}

h2 {
  font:italic 1.9rem/1.25 var(--serif);
  margin:.5rem 0;
}

#detail-creator {
  color:var(--accent2);
  font-size:14px;
}

#detail-note {
  color:var(--ink2);
  font-size:14px;
}

.detail-rule {
  height:1px;
  background:var(--rule);
  margin:1.5rem 0;
}

.detail-foot {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  margin:1.5rem 0 0;
}

body.modal-open {
  overflow:hidden;
}

@media(max-width:650px) {
  .page {
    padding:1.5rem 1rem 3rem;
  }
  .site-title a {
    font-size:2rem;
  }
  .site-header {
    margin-bottom:2rem;
  }
  .controls {
    align-items:stretch;
    flex-direction:column;
    gap:.65rem;
  }
  .search {
    max-width:none;
  }
  .filters button {
    flex:1;
  }
  .mobile-hint {
    display:inline;
  }
  .shelf-meta {
    flex-direction:column;
    gap:.25rem;
  }
  .shelf-mark {
    font-size:10px;
  }
  h1 {
    font-size:3rem;
  }
  .intro {
    font-size:14px;
  }
  .cabinet {
    border-width:9px;
  }
  .shelf-row {
    padding-inline:12px;
  }
}

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

/* Cover artwork belongs in the detail card; the shelf remains a row of spines. */
dialog {
  width: min(36rem, calc(100% - 2rem));
}
.detail-heading {
  display: flex;
  gap: 1.3rem;
  align-items: center;
}
.detail-heading-text { min-width: 0; }
.detail-cover {
  flex: 0 0 144px;
  width: 144px;
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px solid var(--rule);
  box-shadow: 4px 6px 14px #0005;
}
.detail-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 235px;
  object-fit: contain;
}
.cover-fallback {
  padding: 1rem;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}
#detail-year { font-size: 12px; color: var(--muted); }
.detail-links { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.detail-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem .75rem;
  border: 1px solid #514338;
  color: var(--accent2);
  font-size: 13px;
}
.detail-links a:hover { border-color: var(--accent2); }
.detail-source, .detail-match { color: var(--muted); font-size: 12px; }
.detail-match { border-left: 2px solid var(--accent); padding-left: .75rem; }
.detail-source a { color: var(--muted); text-decoration: underline; }
@media(max-width:480px) {
  .detail-heading { gap: .85rem; align-items: flex-start; }
  .detail-cover { flex-basis: 100px; width: 100px; min-height: 150px; }
  .detail-cover img { max-height: 165px; }
  .detail-heading h2 { font-size: 1.45rem; overflow-wrap: anywhere; }
  .detail-inner { padding: 1rem; }
}