/* Creative Conviction — the Library: pictures from the interviews on one wall, the full width of the screen, in square tiles.
   Click one and it pops out with the whole passage, which links to that spot in the interview */
.library { padding: 28px clamp(12px, 2vw, 24px) 80px; }
/* On the home page the Library sits under the interviews; it waits until the opening has finished */
#interviews, #library { scroll-margin-top: 64px; }
body.home .library { padding-top: clamp(16px, 3vw, 40px); }
body.home.opening .library { visibility: hidden; }
.library h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.02em; margin: 0 0 24px; }

/* The grid (sized in library.js): square cells that fill the width exactly */
.wallgrid { --cols: 8; --cell: 180px; --gap: 6px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--cell); gap: var(--gap); }
.wallgrid .tile { position: relative; perspective: 1400px; cursor: pointer; outline: none; container-type: size; }
.wallgrid .tile:focus-visible .flip { outline: 1px solid var(--ink); outline-offset: 3px; }

/* The card: picture on the front, passage on the back */
.flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.tile.over .flip { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.front { background: var(--paper); }
.front img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
@media (hover: hover) { .tile:not(.over):hover .front img { transform: scale(1.035); } }
/* The next picture waits on top, invisible, and dissolves in slowly */
.front img.next { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease-in-out, transform .6s var(--ease); }
.front img.next.on { opacity: 1; }
.front img.next:not([src]) { display: none; }
.back { transform: rotateY(180deg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); display: flex; flex-direction: column; padding: clamp(10px, 7cqmin, 28px); color: var(--ink); }
.back .q { font-family: var(--serif); font-size: clamp(12px, 8.4cqmin, 26px); line-height: 1.22; letter-spacing: -.005em; margin: 0; overflow: auto; text-wrap: pretty; scrollbar-width: none; }
.back .q::-webkit-scrollbar { display: none; }
.back .who { margin: auto 0 0; padding-top: 8px; font-family: var(--sans); font-size: clamp(10px, 6cqmin, 13px); line-height: 1.35; color: var(--ink-3); }
.back .who em { font-style: normal; color: var(--magenta); }
.back .go { margin-top: 6px; font-family: var(--sans); font-size: clamp(10px, 6cqmin, 13px); color: var(--magenta); text-decoration: none; align-self: flex-start; border-bottom: 1px solid transparent; }
.back .go:hover { border-bottom-color: currentColor; }
.back .credit { margin: 6px 0 0; font-family: var(--sans); font-size: clamp(8px, 4.6cqmin, 11px); line-height: 1.3; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) { .flip { transition: none; } .front img.next { transition: none; } }

/* The pop-out: picture and the whole passage, centred over a veil; X in the top right */
.libveil { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(26, 17, 48, .38); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.libveil.on { opacity: 1; pointer-events: auto; }
.libcard { position: relative; width: min(460px, 100%); max-height: 100%; overflow: auto; background: var(--paper); box-shadow: 0 20px 60px rgba(26, 17, 48, .28); transform: translateY(10px) scale(.97); transition: transform .3s var(--ease); }
.libveil.on .libcard { transform: none; }
.libcard img { display: block; width: 100%; max-height: 46vh; object-fit: cover; }
.libcard .cap { padding: 18px 20px 20px; color: var(--ink); }
.libcard .q { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--ink); text-decoration: none; text-wrap: pretty; }
.libcard .q:hover, .libcard .q:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.libcard .who { margin: 12px 0 0; font-family: var(--sans); font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.libcard .who em { font-style: normal; color: var(--magenta); }
.libcard .credit { margin: 6px 0 0; font-family: var(--sans); font-size: 11px; line-height: 1.3; color: var(--ink-3); }
.libcard .x { position: absolute; top: 4px; right: 4px; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: #fff; filter: drop-shadow(0 0 3px rgba(26, 17, 48, .55)); cursor: pointer; }
.libcard .x:hover { opacity: .75; }