/* The final physical object. All moving values are supplied by close.js. */
.close-stage { --close-turn: 180deg; --close-lift: 0px; --close-slip-y: 0px; --close-slip-op: 1; --close-shadow-x: 0px; --close-shadow-scale: 1; --close-shadow-op: .65; }
.close-object { position: absolute; width: min(29vw, 390px); aspect-ratio: .74; left: 16%; top: 50%; transform: translateY(-50%); perspective: 1400px; }
.close-book { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateY(var(--close-lift)) rotateZ(-6deg) rotateY(var(--close-turn)); }
.close-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 2px 5px 5px 2px; }
.close-front { transform: translateZ(10px); display: flex; align-items: center; flex-direction: column; justify-content: space-between; padding: 9% 9% 7%; box-sizing: border-box; }
.close-title { font-size: clamp(26px, 2.8vw, 42px); line-height: 1.06; text-align: center; }
.close-author { font-size: clamp(18px, 1.8vw, 26px); }
.close-plate { width: 76%; height: 56%; border: 1px solid #a99360; padding: 3px; }
.close-plate img { width: 100%; height: 100%; object-fit: cover; }
.close-back { backface-visibility: visible; opacity: var(--close-back-op, 1); transform: rotateY(180deg) translateZ(10px); display: grid; place-items: center; }
.close-label { width: 79%; box-sizing: border-box; background: var(--grain), #EFE4CC; color: #2A2119; padding: 9% 7% 7%; box-shadow: 1px 2px 3px #15200f66; text-align: center; }
.close-label p { font-size: clamp(14px, 1.22vw, 18px); line-height: 1.35; margin: 0 0 1.2em; }
.close-label .close-series { font-family: var(--sc-font-display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; margin-bottom: 1.1em; }
.close-label cite { font-style: italic; }
.close-isbn { white-space: nowrap; font-size: .85em; font-variant-numeric: lining-nums; }
.close-label .close-publisher { margin-bottom: 0; font-size: clamp(13px, 1.1vw, 16px); }
.close-edge { position: absolute; backface-visibility: visible; background: repeating-linear-gradient(0deg, #e9ddc2 0 2px, #cdbf9e 2px 3px); }
.close-edge--pages, .close-edge--spine { top: 1%; height: 98%; width: 20px; }
.close-edge--pages { right: -10px; transform: rotateY(90deg); border-top: 3px solid var(--board-edge); border-bottom: 3px solid var(--board-edge); box-sizing: border-box; }
.close-edge--spine { left: -10px; transform: rotateY(90deg); }
.close-edge--head, .close-edge--tail { left: 1%; width: 98%; height: 20px; transform: rotateX(90deg); border-left: 3px solid var(--board-edge); border-right: 3px solid var(--board-edge); box-sizing: border-box; }
.close-edge--head { top: -10px; }
.close-edge--tail { bottom: -10px; }
.close-shadow { position: absolute; inset: 2% -3% -3% 2%; background: #100b07; filter: blur(12px); opacity: var(--close-shadow-op); transform: translate(var(--close-shadow-x), 16px) rotate(-6deg) scaleX(var(--close-shadow-scale)); }
.close-slip { left: 55%; top: 50%; width: min(33vw, 470px); box-sizing: border-box; padding: 32px 36px; transform: translateY(calc(-50% + var(--close-slip-y))) rotate(2deg); opacity: var(--close-slip-op); }
.close-slip h2 { font-family: var(--sc-font-display); font-size: clamp(36px, 3.5vw, 52px); font-weight: 500; line-height: 1; margin: 0 0 26px; }
.close-listing + .close-listing { margin-top: 25px; }
.close-listing h3 { font-family: var(--sc-font-display); font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; line-height: 1.1; margin: 0 0 12px; }
.close-listing ul { list-style: none; padding: 0; margin: 0; }
.close-listing a { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; text-underline-offset: 4px; }
.close-listing .find { display: inline-flex; flex-wrap: wrap; column-gap: .25em; box-sizing: border-box; font-size: 22px; padding: 8px 16px; margin-bottom: 3px; }
.close-listing .find span { font-size: .8em; }
.close-listing a:focus-visible { outline: 2px solid #2A2119; outline-offset: 3px; }
.close-listing a:not(.find):hover { text-decoration-thickness: 2px; }
.close-listing a:not(.find):active { transform: translateY(1px); }
.close-footer { background: #1A120C; padding: 40px max(24px, 8vw) 48px; color: var(--paper); font-size: 16px; line-height: 1.6; }
.close-footer p { max-width: 64ch; margin: 0 0 12px; }
.close-footer a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.close-footer a:hover { text-decoration-thickness: 2px; }
.close-footer a:active { transform: translateY(1px); }
/* Flatten the settled object to keep Chromium from culling a 3D face as the stage exits. */
.close-at-rest .close-book { transform: rotateZ(-6deg); transform-style: flat; }
.close-at-rest .close-back { transform: none; }
.close-at-rest .close-front, .close-at-rest .close-edge { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .close-stage.close-at-rest .close-book { transform: rotateZ(-6deg); }
  .close-stage .close-slip { transform: translateY(-50%) rotate(2deg); opacity: 1; }
  .close-stage .close-shadow { transform: translate(0,16px) rotate(-6deg); opacity: .65; }
}
/* Phone composition is deliberately last: the label above, the finding slip below. */
@media (max-width: 700px) {
  .close-object { width: 194px; left: calc(50% - 105px); top: 38px; transform: none; }
  .close-label { width: 84%; padding: 7% 5%; }
  .close-label p { font-size: 11px; line-height: 1.25; margin-bottom: .8em; }
  .close-label .close-series { font-size: 16px; margin-bottom: .7em; }
  .close-label .close-publisher { font-size: 11px; }
  .close-title { font-size: 25px; }
  .close-author { font-size: 17px; }
  .close-slip { left: 18px; top: 300px; width: calc(100% - 70px); padding: 22px 24px 20px; transform: translateY(var(--close-slip-y)) rotate(1deg); }
  .close-slip h2 { font-size: 36px; margin-bottom: 18px; }
  .close-listing h3 { font-size: 23px; margin-bottom: 8px; }
  .close-listing + .close-listing { margin-top: 16px; }
  .close-listing a { font-size: 17px; }
  .close-listing .find { font-size: 21px; padding: 7px 12px; }
  .close-footer { padding: 28px 24px; }
  @media (prefers-reduced-motion: reduce) {
    .close-stage .close-slip { transform: rotate(1deg); }
  }
}
/* v2b: the two real covers, one product framing: same size, board edge, tilt and table shadow.
   v2c: enlarged so each cover is the largest thing in its row (both critics: "stamp-sized"). */
.close-slip { width: min(36vw, 520px); }
.close-listing { display: grid; grid-template-columns: var(--cover-w) 1fr; column-gap: 24px; align-items: start; --cover-w: clamp(108px, 10.6vw, 160px); }
.close-listing > :not(.close-cover) { grid-column: 2; }
.close-cover { grid-column: 1; grid-row: 1 / span 2; width: var(--cover-w); height: auto; aspect-ratio: 400 / 549; margin-top: 4px; border-radius: 1px 3px 3px 1px;
  transform: rotate(-2deg); box-shadow: inset 3px 0 0 #0000, 1px 0 0 #e9ddc2, 2px 1px 0 #cdbf9e, 3px 2px 0 #e9ddc2, 6px 9px 14px #15200f80; }
/* v2c tablet (701-1000): kept exactly as v2b. A wider slip and a 104 px cover pushed the title under the nav ribbon
   at 701-740 (QA v2c), so the narrow slip keeps its small cover beside the title, links full width below. */
@media (min-width: 701px) and (max-width: 1000px) {
  .close-slip { width: 33vw; }
  .close-listing { --cover-w: 50px; column-gap: 14px; align-items: center; }
  .close-listing > ul:not(.close-cover) { grid-column: 1 / -1; margin-top: 8px; }
  .close-cover { grid-row: 1; margin-top: 0; }
}
/* v2c phone: cover about half the screen, stacked above its buttons. The slip is now taller than the screen, so the
   back page stops pinning here and flows (close.js turns the book by its own position on the phone). */
@media (max-width: 700px) {
  .act-close { height: auto !important; }
  .act-close .close-stage { position: relative; height: auto; min-height: 100svh; }
  .close-slip { position: relative; left: auto; top: auto; width: auto; margin: 300px 52px 44px 18px; }
  .close-listing { grid-template-columns: 1fr; --cover-w: min(100%, 50vw); }
  .close-listing > :not(.close-cover) { grid-column: 1; }
  .close-cover { grid-row: auto; margin: 2px 0 16px; }
  .close-listing + .close-listing { margin-top: 30px; }
}
/* v2d: the Bokfynd button keeps "Jämför bokhandlar" whole and lets "(Bokfynd)" drop under it when its column is narrow
   (it broke into 3 lines at 1024 px). The label shrinks only as far as its own column needs; the covers never do. */
.close-listing ul { container-type: inline-size; }
.close-listing .find { white-space: nowrap; font-size: min(22px, calc((100cqi - 34px) / 7.6)); }
@media (max-width: 700px) { .close-listing .find { font-size: min(21px, calc((100cqi - 26px) / 7.6)); } }