/* ============================================================================ The Library — endcap, controls, shelves, books, motion This is a BOOKCASE, not a product grid. The single change that does most of the work is a real wooden shelf plane: every row of books rests on a plank with a lit top edge, running the full container width whatever is standing on it, and each book casts a contact shadow down onto it. Wood tones come from --wood-* in library.css. They are golden and tan, never mahogany, and they are NOT derived from the banner: the banner is a mood image, not a colour source. Do not re-sample them when the banner changes. ========================================================================== */ /* ------------------------------------------------------------ THE SURFACE -- Warm paper rather than flat cream: a faint grain and a soft vignette, so the ground has some life in it. Richer over minimal, deliberately. -------------------------------------------------------------------------- */ .library { position: relative; isolation: isolate; } /* Grain. A PRE-RENDERED tile, not a live feTurbulence filter. The filter version re-ran over every painted pixel of a 4000px page and made the renderer stall hard enough to time out screenshot capture. A baked tile costs one decode and paints as a plain repeating background. */ .library::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAAAPoAAAD6AG1e1JrAAAgAElEQVR42k3dVY4kOxBAUS8hN/iGmZmZmZlho0/X0hn5o7qqMw1BpiCP379/bzdv3twuXLiwff36dTt06NB28ODB7dmzZ9uBAwe227dvb2fPnt1evHix7dq1a/vvv/+2L1++bN+/f99+/PixHT9+fLt8+fL28ePHbc+ePdvjx4+3d+/eze9bt25tb9682U6fPr3t3bt3u3Llynb37t357PDhw9ulS5dm358/f96eP3++PXjwYLt+/fqsW7v1e+/evW337t3biRMnZj+nTp2a9Y4ePTphuHr16iwb3H///t0+ffq07du3b8Jz7dq1CeOdO3dm/WCo79evX29nzpzZLl68OHH8+fPnxLM6tRW8wVO94K2PR48eTZr8+vVrwlC7lal89cI1+N6/fz/76HnwVSd8+g7uY8eObefPn5/w1vYIqBDvU8Nenjx5ciL+9OnTSfA6CegY1fvK3r9/fwJURxE/okTAyoTUt2/fJoEjSp+ACOiXL19OJAO2PiJI7yNIRO95H/V7Fjz79++fhOz/YAmu6gfbw4cPJ9IhWTvBmHDF3Pr98OHDFIBgq80jR478a7/69RcuMaS2e5YghVMMqJ36f/v27cSh/vodLNGitvUdLpWNJjt27JjMigmVr5/oFX2CaYREHUb4nTt3zgYiYtIegQMoIBoVAVxHARTgN27cmIj2LGRrOIbhchIRcSv36tWrCWydxvnqBJwR0bvaaKTVJuJibHAl2bUVMyJQxAz2hChiRZTKJY0xo/aCNYIER+/CK4KFV/V6Ft4RJ9iDu7rVa0SdO3du4l6/wVMf9V8fMfHPnz+zzerXXqMuIodnQtbICsaYE64xuT7rp+ejPwEX8QK0ynUeUHWIs4hVZzEigtVYROl9xAigmNbnyZMnE9gIGiKVidBJQ4CFVFISghE7QHufpPQ8BtdPcEQwoyt4YmwjtvIxKCKER/0Gf7AQmsoGS8StXFNJ/wd7ZYLHaKit6iNcRKqP6NCz6kYHEhxOtR+jG2U9D+cYkYDUbjD0f33GnGDod+00DY+I2jybRNRJyJPQpooIWEdJRWUCqGmg9cLcjuhxPemPYAFb5xEmhsawRkGdRsiAq98QrW7zbYJQGwlCjAhIQzViNQ0QhkYJqY5QET1mJpn1G1MjasQJ8eCoTjjVRv3WbvX77v/wA1cS3ScGVb+2SH/ljaJgqr/67f8EsvqmPyOx72jbSGoK6/dkQICGfEjUYb8Dsk9E61nvajjOtQjH9QiclMb1pBHHmwoCLmnqO6KHXFIUkaprQY7IprWIE6IRJCmMSRG69hAiRCtDEPoOtuCIiTEkONbFPnjDKTxjIimMkP1uREeI4K39yoRrBCLR9ZEgkPxgq0791Vb4WxfCuefBhE71VZtmj34b4SOiJNEhGqFq3JoA4Tqro8om9Ul/5XqfxEfQCBhBk94YFdEiRIRrGumTlPRduYgS4AHbdBDBzPUhaYrreb/rr3aTpuCIsREpJvXO5iFGW4v6v6mhPoPTiK5eo6By4dzIiXgRzE4LwcIhnPru/2AMjoga02onXOojYkdHzAj2fkcfjKvd6vV8LsINiR6S4oAjXSGX5AR4jddJv3vf8xhXwzEngoR0BK1ujGvqqe3K1VltRAC7q9rqee2GZPUCrncxvXIha3oL1mA0fQRHbcaQyvU84UjqY3LC0nN49Y4QxDCjPiEJ1ogWoY2yygZvjEpi+yQAtRvTqhNxbU/D3QioTG0Fezj1HXw2CzEtoRghQFKrVEO9aB5LgkI0QgR8TGouI0012LMYELf7BLx1pbrVw/0Qrp/aC/CQsGcmeQFavxE7plQ+AtZHRAw5U1dzbAQxxUVsU14jKSk1oiNWsEWMCGBBtjOznjSNhlMwBwvmkdyEqXZjTO0FfyOjPmJsv8Oz9uo7nGrDOaky0SQahuNoGnFQ6EVEqfMIEpIR03wZYhE2xGNUw693NVr9OmnUBGQIG/5JUASvbEgHbO3XZn2TuMraO0fM+m6k2SZWL6mMQL0PifoMjogYMR2kYqLFv/oxElEjWpKYEDWlhFOECq+IFnEjuANdMNUX4rarq49+x0gH0OhX+eALz/qMEY3mcK98MCX99TPXgBBsPorzIZkkIWpEcyoM6BCt8STIlBUXq9uwbyqIaHXUd0DVeURr+Pa80VablQ/w2o2YEQeQIRux68Mwj8AxtDLWjxCOkfXRx6GyZ9WLOM4YwZkgBJdp1iKawPQsYYwZEbqNQEypz9rtXUwN9mAJ9soGK9jCLcG0ywuHaFX7jdTo0LPgqJ0YPUdAhWyx4lwNVCkgQwaT4mi/Q673dd77JKeytm4xpuHcM3vgAKpen4BvetFP7xpdETZGxJwYVn+tB9aSCBZ8SW3INt3E5IiV5Ec4J05TW4xB+HBMeusrgsSU+o8QEYb6JUGqTvA1Oo3s6jkjRQd9B3/1Et7are/KRk/rSr8TmGBy2A3fYUtoYYREhWskwON8w8U8GsBxPyD7rl6ES2L67dyASY70jvNJafVqr/6sISEeERy6el9554vK2mHVZkxJuqtXv3RZziwRzYJcn8Ge5NWHHUnEiBBNvfVRGzEtIva772BLUBudTWF92/Mn8X0SqGhUeeeaiN40R9hsIqoXvRKyUachVAH6oBAwFYRcBAjhpKdnEZhyLmmoTEDYzQRA5QLIljAEktjKJtm9C5iANMJ6Xzm7IyOLWiS4QiwC1Uajr34jdM+T4lXXEl4xurpJaTDXhoNjOFcupsT0cI9JwZjwhUtt94kehCu4Kx9Be9fI7H31w6M2w7/6CYQtc1NQdWonGBP64dBSxV6GbJ3XmBW/DkMmAgd4ElWHETFArBd0RA07x+3qRkT6pb4jWsRtKmrI9n+/AUiqks7e05skBCETYkZWhA0hJ8sI2KcylbXoWbxjSASqv6Q+AvW7d42m4KaeMU1F9NqJRpU1/TUK6qe2w5MqJ8JGo4QkQepd7TltNwJicjSd54Aa7buHPs21dRJxI3JAB2SEJlXVC9kACskAjMh0OwGRlEZIxOhZCMUkyEDUVFF/RlUC0P+0oDE9ROvD4kiTGiMqH1OqGyF7pv3gi/H26X1H8AgVUUypwdz/TY3rGuLg2f+Ubk7LVCoR33qoPd9GfeWaBoNtmN+TXHqROjO/NWSpjyNEAFQnQiV11L19nB3o9OuMMi7AqC/qp98RhGSZowOqkVO79PG1HbJJWjBFeDaAGMgu0O+I5KBoH05NHeL09lQOEbi+Y2LCloRSXdd+9ezCgskojnHBnWBUj6o6HBKCmB7ewRtsMSg6xnQCEr1Gf5xOVyVRFXoesaoUUhEkqbDYVtbuJYmllIpZAdMC2DTRdyMoKYzZfSrHNkDjmSTGICrjCGBXEvEQopETMYIv2GJOROxZ8GFO9RIC6pKIHp71GQGDszoOoDG++tYhGtfwrK9+m3IqY0FOSCziwdL/0QUd6zt6BXfMb8TUZ8wd9vYV7kWA1LlhQzKbQkh9BAvJpCSkqGUb8hEoosW4njF4VMZhrfcBGxEiQP02vbDAVTbGJUW2xn1iTHA5IDpNR5AkMaK3c6EyqVzPnBOoXOor2GJQfbMA9j6haPSGh7WHwaZn0aQ6tUsRl7A04oKx/k3HfcekBMs01WiwVZ8WMeqFJDSiOeWFUIA5lPV/xKIKtpelUq4+baJ9coyLATEvokbw+ut3w9AuobaoESJyfUSk2oyQwVR7IWzbWdsRJNjt1WvDuaSySS17hqkm4gY3u0H9J50EwehmXqTziSZMrRGZQceMYctNExBs9RsjlG0GiBkxG37D/rpGe2HqqUAEqrFVr2KbSe9TeWuDHQN1a+9CpCnIziUiRPzaYwum96d3IRBOr8EXPBGrNnpfH0ynjCu2lxHdbiMY4dKIomZp1PR/9UxTmFldW/Pw6RkDks1K+EWD6EZdXXkGppjFJl1fMal30TgaUMyNpK5hFhKsUeY6Q5GNlZLNNizEWM0q27sArq2GY9Ib4CEWQhY0ev4AjQikNSCTwJAM2CSxvhMCIyG4YgpdTwysbG0yfFAX939MCIeIE7wRwBbZmsDmzRDVuhJhg51lrNHBSBQBY1jvg7dvU47NBjMpTWn/mw2CO6ZE6xGSdRqAEb7CddqQC7A6rHEHjYAOgN5FjMo114Yw/Uzt9b5FhySwStm6RYyQajTwoIiBTV+9I7URlKmzuhGK3SHEI25EDtH6SnqNgmCJGBHLYhuslbUdDb/KxdzwD8YEIQaHq/NOUp8QUPYFw6q+7jv6RIdGQ4ROMCKytS8ca8MU2/8j6auDEKnjCieBcat3SVHDqEq8BmJayAZ4vxlqKhtgSXMAQKD/jTCKMrsh6mOLWtKZMNhpsLX2Cbn6jXBJWghTDlLaJYVOsxG+/6nAEyQeCxSA1BoRJFjZtxnzK8v9Jnzru5FSvb7DuedGajAkeNGpdmNoRHdOYSUM5n9rQMBE8DpJAmu0SkmcfbbDT5VDqk5pSftN74J5zdsByBZKuwip2gjZCB9TbEcrX32eB/VRO1S6CM5dpTZpTulxIFe9RkMjJCZTjTOXsnOQyPrqWW1F4NrqWYJi/u9d7ZjHnbgjOHV1z4za3jl0mdrAMpVxlFZcPmJIlSJmzwOW4T2pqJGGL+LE9crQe0cMBA9Z9uE67F3I1A9/m5gfwPQ6fUc4c2tlqEhCxHTH8B0TnWpNjz0L4f63w+l38DlIBUuSnZQGZ9MFT4qIT8EWfAlF7VSvfmwc6ssZJDgZtUxj3FXYsOmAmhbDM5oM26g+JDOp55JRg1W0eyE9cbHfVKy2qAzP1paI1fxqXx9itVWZkOl5nyQvpvKowPT6t8Xtf4s7x68IF2Gcrmu7fozeYOaaEmzhlJCBpWkxPJqCazNBTABsmW23LZq1ob71K5olHE76zLOsdL2zTsQARqiejwoxhjOwxJmGcQSly0gaapxOhgqizm036ywEKb0CPOSSDHMyq5Q+Iz7dUsTkIsjAHaCmhJjJdaa6MaDyCUAjtn5qg1aWPZjuhstN9WrTOSFCsoaxDjLSJAj9dpisHAtbbdpmO/EGFw+L+ojJMYQavDLBYFMwWPEp5ELGh1KOytY+mm3A0GcHNr/VZoA0qhjok9qGZsBULkmKySGd9LW+xIgApKupHieqGFSbtcHlo+dJOvMmbSjPuojEckU1Hsx9s2LFsKS+kWcbazGPiBSA/V+daGL+dgaJJhbn6vLoc1CLyaai+kywo2twjBCwv43TFa5Bug8eABZVeowqO1BRI8fIkDFdBCQdSOXrK4Tqj9Rw8qr/nkeEiMEh1ghi3Kg900X9By9FV8wJ0doJ9hjVqIvJTuccZqnZYxZnrN5RE8TUfvcu3CNq3wmXM1EMZ4hPsBzoYljllI8e7Ny+Y+S0B4RIjXBYNbwC1hRjrxtRIiy3OqdCuh3ezrXTd4SgLg6YvtlgOfuGZGXql+uiaaIy9Vl7Id27hm7IJl211aiIYa0zMa93fSeRCVHC49hvCqKxXS1kvXOoa+oI5/qwdQ5vamp27d41AsBXO7bv0aU2w6F2KhMM0c0ZJVgH7+IkrQp8d0Is5JsKQq6KSTCdeu/rLEmuIc5dEbr6dh8Ucoz4dUwtq43Kx9QYaeRxB+/TCOPWQkp9GGp4xa32agaj4Oc5F6OTQCd8hqHacYCKeEZQI8U2lfOtAxfLXZ9goR2OATYHnLD4ytLQBltwjSqHdI05ijccuYzUWf9HCFJAjWsh5E5eGxHJFjamVZYHAE/jCBEwjOK1Y8sa4dloa7NRFUK1GVHYf7mCcI1hgDdtBnPSGTy+aWQrG95sztTevW/kx7zw77fTbP07wQdP77jS81OtPS72HNQ4piXoZoNgjM6VnecAJzknzzrUAe+IEE+6azii9zupDvkYF/A9Z1vmMlg7TIARqD7qkx6FSzofzX4nLbWVVNVOxArpEAyWGB1RYwSnYqoTi3HSFYNiMtfGJK86fYyuCBQOtdN70xem1Z6dVXg02sKF7ipBoi1oxNh0BA/rGItejKo+peO0iIV40kzFaw/NKOFky/m2ihEuACnB6pQJkyMviYnjSXT/R0CM5HDFQkXhFyMtaMyFDlQ9Z9OlYmjqCObKc5e3MaitPlwMeTTH0GCvXnDzmq6Mc0dC5bfYCfqmYKAd5fUdTtGPqjqacmfvfe2YScQpTFWE8KQaC3CmxaabGmOG4/8piKNn1eU3mjTwsk5CQqr3tRH3WaAY1dkSON/G3OZY+3rt1IZTp8Wx/2sr4YgBFnPebzGMYZ3BiE07eCO83VI4JygOkus+nedEeHGb5CXNZZ6aofI0uRzHwoUwNRpomlnNpioiIjAoxNUkIwKZClj1a9j0Ql9j/o/zSR6HVIwLoH7zDgjBpJHOnMqWVYtTk61gCHB9EckTHAFfW5Rczi9Uwj2rbjAljRGhMj0LPjDQ43Aes4BHKN7Wpr/1nMCCGN5NdeFIwGJoawjHXLvMmO0UHE60CoORheUmArBzclQKQFamkPI/BZnhSZMZcoZ2jGJhimHcw82FTRtNT/UdAXrPtEfbGjKUcrVXXS7qIRkj+InGqJBjuwgmaor6cMLnQVfb4RzMwp2qWxsxM4KHY88p5UzFPN+oLwhN7+qLW88qbPRJMSH6DIqhJCRAAypCk3qIOtVZ6OxvrR/8+RnMKapoV+ucocecS7EX8PVJlV379ECC82JwcPIFcuwXQkSPVJmIkGRGQPopp3qHRyFGMTYBEP4Uw4K7UUv3JDiFudNBrL7rh9NCdOKLSrNaOY5ahJEqfPqGIjiFWMDEdZb9iMfRinWrxiJOnTWsHM4iih0HJ1W6Ec5YIdmw5tBbnwEeDNXn9lgfSaVDW0izhjVCRUz2HXx2Fg5q9RvTItAawSmqk6kwpif5EZr3Q2VYyIIhuBI8Cja7Qq6QCVl9Yly0EK5KRZNQ1W70CZZ+R8/BzduwcxKtQhLUe4YFBumQo9kLwJjCiibiJKCSMNrRkLMVpHcyNQlDMkoC3sJvn87jzNzPB5QHtx2K7bEwVX2ufpymy3BksHeiJwjBaGcX8R22TJUJQbSIYUl7ZQVp8OgLzgQimvDcqB4Pj2g9aC4jtijBOhDrFeA1VrmApFZOemMKb4kaxNWIFtFDJIDZfW3JkuSYVPs8m6u7HtZqIzicI+woKNpqM5irT4nHaw+yXCprF3Otb8GX4AlCZNgPl8rEVKFZtrTcbUxx/D0TTArNiB4MYgViMnjYqRO+2pq7oHVYV6jCdiQiAjkUmdebyyIKn3dhoiFRG3E4BgVEbUTokE3iAV9/60IcHPbitUerynZqZ0WCqM17xg5NxZxk2bVEuGDmGmK+FifW9MUTgh9R3xE/QtICc1kMJkaYYG5U0jfpg1NAzBLxbyFv9FEkxrjpns7PXmhnUh9iEb//DdfmemoKHsq9ixCV5XYYwUSMMzzUT4DXbnUY4gOMfThkIoqw0+CI2D3jpm6nFVGCN0I7RArqq81Gj3BT21vTYUwHa4TgtRFsFH7BZk0ibEJSIz7XG8o7whYtrTMxJDwTymBhK2609JmqCC7ZSVxSFbEc7WvUnMn7jRMVI30d0c9EGHtt+RmEh/K9ZM3iFRdT7XySLoq5CCC0afWtN99H0L7FnfHA6NMIipl2ZvXZ/5XnCNZI4LaO6UZ5wiUNgXNGcAnUY+/lUolW1tGYJczVyZ+CkamVlmAygOWfvtwczxbaMKU6oIJNmiOk+Z9OiNHBYlXZkKFfqQ5PCg64jBv1SR0SE+xqeGH0PAJSOTC08KDmj9nvmEDxxb+JD2hw0mPVZsR0yKp80snC5STM8zo6NIVGxGBLKBoFrGUOrwkQMyh3Gcq/6GNam7ugAA5I5jjhSAFJr08b6sQcQR2uLGxxmK9M9Vi1uAXGNGGaRtHqBq5ehBKsF9AypDi0UUnETMZ1zBNQyJhjmytSptFAvx8znYqTcmtE9aojCUf9MSDFjGAkkHxZI6x1E0NlhBGFJDY4nIXeziA9bil9M5gEJP24kZHUUm7Rw0gfYGiKwaIWECcmEJAmsjKNjAhF7xOQMSiE6ZMa2kky1YBAhwjLVb72xGclsTHE/G7OxcSEwKgL/spwQHBKjjDBbJdWf5yVKeoqF84Ob4z3fH5oVaNjNK2P2uW31LsYP+qYHyZnVJapOq4jKtkkM6T7BLjMJQLcqkPfEREFgfNcC4EADKgYQS3BXydmxoAEQB4fxnULNtjEoFlcKyciPWbw1Rf0V392TZVnHaNGJ1B8USN+ONJuMrAEiyByG4fa7L1zSn0nGOIPTFvNCMFtdEWH0QPBxDGAMV1IJhdsTkq8wcy5ASFJk8ADaQ8iSJx3HpD+JkRtL/kPSXwUobissDpxCbTlXFXGETXYzOuCtyMIW0dw2comgf3vdC0USgYYavjg5ueZRFPR21b3zMhkDaRrIjzUOxSejRgeiPU91dG9pMlMshlmkowAqFCNJkW9r3KAigULKd7CHKhCnmG7/2NciPITqo3eSQziaM5Y0jtxybzxeByHNBc/tuokk1IwgtV//zNT0vvQjgr4EO9Mnc7jo5EZTPyekl7aS+cQpkk+/xGWg4GTc7itOYmCm30jgZre0byGqQucOuVSCGFxubwjhAMJbqNbiaABK+CPTiXmJPUxkSVKQqba5NgUQNUTGJKUBBMvDHZidgN22jWbl8MaxlERVNYeP+YIZYpoEb+yYtyCgctNbdWnfEQRstHAwBNcHLbEANhJCu5ohqDQdOjrM8NUKc1qPCb0gt1X+hk5gETEWOVJbcO/b3occQVU0rUToZsbBSkEdMDUnmnGVKd9edn4d4Y0l3PqkT71HzPt8RMCqQuoV3oWwk63MYIdg80gAWE1S0KDjRFKirSEpfoyatWvaZrkIzp1CSMQAz5TZp8hkM02KyQCsgZCpqHLqTYOCrcXMyZ6JWIZyjEwBDi6xgzzfMByyYhpXAMtbBFZ1Hnvq+vU2O+QF/ITUi2KwWG0JbHhkfQK6qi96oj1tTngh1pdKgh6flqBmFT/zI28SERarqpnvkOcG/hcxezKcVOhK5uLMBfuOFNhOxJSFPeSHGE1Nc5zLWJRNIlwkZlQ7gaOWAEToU0FtW1nUH0mupBwKidB3GM4PIkjSBDofOS0iFGk0VrBbtCz3gVzAhD89WvryKe1vleNq+2z2IUETfxxjBF/EKPrI/qEs3wVMcX8Xz92dOE5VoO2SEepYISjBkQMiOtVFv/Enttz27+Iw1IUAI2wOO5UaqfUu9q37UsiuaK0laMmEIFjf1/ZEBdLbM/PFlwdCTQSADuiyhrZvLpjoHmfqVKQdzDqj5Gp9uubx4ZEIcHat2lTu9JaSgASg8KZi8xURQQ8wwfTnSQZdUBSRMPwgBB6Wh0eZDXOLiDEB/JNFfbMMSzG1kcE63+pJe1OYgjjNbWvdGZSR8pWJWIzwsfYGGjKqj9hSLXhpF/Z+u1bILqIGzFxcshJ/uew6JzBikaBGWGtkcFdf2ITnJStseFRuRFAIZwksngxukfEnkvOFBH71GiAB0gNim6nDzf0A94ug39OxOGyzn2l93YbASdTl7hbCUKChfWqoZ2g9L7fpkSxW6aKmN/7GJUwUXE3Gvl1xrRw4YPKA5reS8Kl4FoDByvD8CP+jLMw5y6eckJ/OTyIoxgRqMaoWQU4O1QwdCchdSBnRJxn6AhRMVNSjjkYSf6XZNEB1QbfSjlGqxNDWNf0JaiBuY/ZlM5dhEyw1I7IHueX6kRECWT5t8pn1AitPc62pqdGQQSvfzqiCCu1QjgpL9WanEvhFo2CyfQejMy5zi7B/i9XBE2jkHx2gIgrqZLnNU6NS+IF89nDm4LEd4lWFNvLXYPVSXqwkKdjYdS320jKGYH6RFBZshIiaQPo5oWr8uSL2BGlMry5uTDKZ8GGXFtCYevfekeXFbP1IdzWzEHvbysr8COi9z+j1gzSY51ileLTSFfCxMYJiTGa3j6OSnpUx9xcaCtDtDZpUO06xHvVnvw+EUrqBCfQ2qAGsLOgZayNngUbF3fZb8VjiT0w/dROjOZsbOvcc/EN4SOVjXWLi73zgh2X9JqcjJ0XqEWqJy8SIV9t0qMCUvVy/5MNtt+GpiN1c6mUATGNJ7Bccwgoa4l8ytVh0IGsYIWYHFG4ktDvJzX0TCLokxpbZ3kp+nZyF53P9UPa4PqwnYxABEy6Y/4+PEKMOF54nI6lpqEWSdDkpeNuYxSI5peCQdgVTXMzy1wDJL2La/bW7LPcDwVnM1VGhDoVGWm483KOIXzn2WirSwXN0Vd6sZCV1qs6HKySMD6WMU7WQ7HLprbKMHIIihZqZWqIIPT+Up9Jh2n/bt9vjaoOw4x1JgbJG8HcGI7cdRrV0cOJ2NlKgF8w0+IOwGmM67VEGFJFRvymCFKVBMZ5lim5OCvDkM3FnQcdzwI55Dgn1Q/Gsp0KE+IYVV1bP+FRNKjOEAIALYLyPyStbN/1K4PvGlrFtTDCkFzhUdGFvooTgtxA4orDm76IayVvbnFislLKDhktBssUe67QUco1mbNCwoJDAuXUaSjWYc8a4qujU1ImepG/Db1M9cX0NpJqAxxOx7UtGYgDl0Uz5OyuTKU0pxFJgB/lnVN7ROIeWb0IL6uJU2qjjWJOtJDDHvpEwGYH+v++6dTEIkhU2DtrJTvx9IzrDylsURLGL5hYcAVdjbgBKoe+Gc9rQ77knlUn5kZEmad6V/tMjfyEuJnECOkSHKICnu/mug2unB2O/XcEtW2OOFzHGfZdokD9zlbB8YteS0pn0Z+i5zkAxCCOWzEtwRM7bftOb2RbLalfePDYGCHjmM/7uc6SMJEztIXKMXZYIJNUhmoaQi7vSWGIcHuRAFxCaydQi5pdEbsBIgYXJCRUtfiJ3eJ62DtxuxGdApCHdaNGkkGaUSqM+rctr8/gkiWeEcqdAEJUaYbXzOxiBxwA5cqwo0z4ej/snwOUcWnU/wMAAAv2SURBVEVMbYCzc4Yg7wAJSTm+1rHVvfcOQpxr5X+TpsAVJBCP0BZDGsoYzZ2EyzkNrL07B1oxyUJquYH0nFFmVaJx2OLxHN6Iy6yadLJH8+gzZXJGCDaRM8KqJIxKECOyMCoWMHkueHkMZkB5DxQwZ0Yw97jIrugoH+H4lUolv+aA5ivJE0LqegHMDj9CjQTGUQWIt1oTt8rDyXpGhy9XqXwNcoOGdARc01Wu9x0kIAmaAHB2atlc+t89Nf22TrLpCoWiA5L0WzauytM7GeVU1v+SdUQMCq8QrDJpZ3arc67pCMqpld+O5E+2pVZ8dgMHHQef3kmG4QBTuz3nJMsjWVYXQRmMOiHEpyjGSaUvOC6m8v9nt5Z0mypFujXGohgmHloWLdkBZPRl8gy+3vG4EMZKiE03lRdVFC5ilYeV2jGed7PLG2T8CFG+PUJZI2JSxuNsTcbXMA5Jp0BbQ3t5KgWnQ9JLzVBdTk8SPDnhinI3fVHOSbBKZSK5qwyHcoGGm/w9we+gJyMu15sEKiJZ+GWJkeFrdTfkZS6zGAVe9UxXwbu6sPQZ9NYsWhJg2K5FaNs8tx3F1YgmGRLfTplK6sSpz2JdORJBBV25pL4RWB+Ugjz1+J86uDlUSQ/GphuRpb5MIoOfCzzbBndITsFrEqXq89tJwGRIwdxwJgASLq3Z0mN+dXkIEkAKQfaU8KZJpdIYDj20iPTo9NghKvOgSHoAW9jkYBDpwq9mjXKRkInh32Jri8onVQCfu8sazvJCMxK5z8xptrY8l95MpCJLGecombFMp+La3EOgHtcRkTxJuw0KL4uYQljYHmJefUiv04fGVtwFre4cAb1EOKdINmChRW47ilmykjgviKyUjpcPKLuxaJKIJBJfmnp2AOuAyEPqCso9W19nEhH2SXgSLJOiXVtwi1BvRDGB8nelgOPIJUFtZUyN4rxsDKSz5BHNrT2CRy8Wr9rqOb9XvlFUGJ79swmLj+pj4aCkcjpd44JFLsZlXshUCRYmag3DOOCdLfgHGTFNTaY3N1HEdIcwuTxDTjQn5wA6F3O7nZeU+M4yjVqHu94hWHBKtyACPoYxoDTyIpggPF4idoYUeDLO83UVyb+69YjQcSrW9xDA5hBUIfvUGggJfi1UqaSSdYiHsuyCAvrMj7ZzGCMUlTOTJH2VDSi7K9HnpF16m76dKNctbbDYiTmROsTVvwNgROMWItKShU6aY1Y5hzeGIsF59GdO3Ul9dWiGuaNQddA5iUmjaR2ykYQwD2PuhD23k5HG3m1yQvvd8yhlfURwVuAwJRGSHYJpwXUfLjzgOlj/bulzQ58oHSFKAqb7LS+0OZ19Q4p587YNBkuVOC85KYIpQbQlFXQifNZ8L0qy3xRz4tViYnSjpRU/IEhEagaL+HDTAx9GV5hQRwvNWYP5NBYBnH7N8aTMRTXODSEpyJr7B/c8c2OMocd3jYmdEOdfuibGIgZ5OSRE/mtHgEgEprqwA5NW32ZBLJs1g8eIK1BqKzrRIbnggRrb9YZS0zNG8a5Gp+pydhu2ZVwuLBjmw+ZirulCcKTg4kUWIEJRXVPYKJCLwc0XnG57t0ayVJe7OodZ87y7xtzVJcRo1V9JJ9N7o8D1KL2rDyMkfJLyRrG4Z3YQUw2TKycE13pxVJB80EUWnIT5fbJ/UFiGFydmdypQYA66kzqkSxFXxUjvKN+wChkmRPZO3mw1bEsm/5D098x7bLmcaV0xKAtu/2uL/Vm+OheyyYwSvIic0DggcSnkqxMRKydpBg9ul8yJ7hQcaCG3cZBWR7Ys5x/CWn+UenZBpkvObXY/7ARu/Rj28sKIJOBms2V+DDChSm6wc5zHDCdY9lJXuVLIUXixCTet8EqWMo1/qEVM9AnPvHXRk0xVOJPtodAm6dMo4Pj7x2SbhnCuX1lMBB7yfrY9tz5gVgImkLuy8ozyAa1sMMQoroiuaok5HM6GYOJ2AVIWUHRxjpVnLQlgXuMlXH3JrSmYRKw07CMam2+Msouh/w9geapDgt6FDZnhxFZWSoOkSxSjMCobBXk8g4nHH8ONnZW0POu8bWdD4NgResaPR/ZgvkbsCvJki34Rqc9H1m18csaxpw8Lq5AgRF8PNyRJAgveBQ5B5m/5nu0wSIsUlU6p1gwhQq58JcV0U+y+EU+4Uu9jrKxc4tZWLz0pEpJyGwqJPiKEdJl8WcXI8Umtz4gk6DtBsLGobZcw2GbXFstXBOegUB3JXNf83NWpjbkLEjLPyG4rKE/zmt6X64lgZz6QrivhEiKdozhe3mpCTfl8uhFDXLKdC9MmP3vezm7Qs6MR8iTlANvtKs2iI6vHKMMA78pExpiY2buESaqC/qdZddmz6Hz5IcRAmznkQHWZtaj9CG90RL+ZLcUVS5Ru1L+A4TjFx32NWhGS6g4V4ficensuYFoyvKSA7si1VW4gsu21lsjWK1WA3ZlpiF7d3S8hF7GMRu7pEnjQwnI7kUwjeCgYRbXz5GayDC7zPUffaMM2YYq03aSC4dXNJCqpudyng8u14GxSJo2LRY3UWQBdLSK/tB2Sfa5077LcSpAqih3RYoDkT646DNCeu8Y8YtvxsHwJhE4i+eAL4qN7T6rZFdx3UHl5gVzYYEdD/cDV3j1mFmlxBbwy6lcAogW5MpIV8ilKgCy6BELs8iDxOMJiE/Ku62NKE+nIGONmJdtDd7sYmq4IEW3pks/KiZtyjogYnvNVkn1L7iJqZCnB1Od3z74sRaRFUWoEScM54jZN2gQkRBxwIyo1hws4ZRCLeAILmRlFclaGbsh0TSMqN6uwJ5fZDfkYIlISzz2b7sMOxC0XIhtt3xztZZHlBCvJd4hQ8sUkbh/WAUmT6JpY4EKCb70TsBQIDjbyVzjLCF+y/ZM3iNa1skaXCxqCXyIl94Q5UVNJM3faztI1MV26P0F8M8O/oA/Tjk2B/NgzVwRznatFpPsSNM2fXeBbZWxBZZeK4HZSEqXKYCXREwO1UeXOsvVaXBmu6H2kgZSfJ8Lw0RF6FCGkV+YSycHKLRurlpZDgEjQCMFrmUFHzgmjlLZT7mp5tcOJF6FQ1+hYGTufNcdeONmK05UN6mFGD+nhuZRTlplnqQUY6e0uMKzn9CiNmgiFUc4LMq67YMeocWBJogWCOKma9yElXRqVtmRMYgpilDRi4g4EVDDi99s64PxRP+LTxA24NY8XoHwUGC5DFt+lpidplcUau79eYDwP7WFOlveYn5Ch7spxuxPKNRdXcstz34vETw4wriAJ2JjRe7dNCAiUlVwuzz4Oafbl5noZR/gG2YdzNax94UT1i+AM++5Ek+mFxxo7BJWCq654Obs0wtWOCQO/KDZg29/gThBsOtbbZdHHlStDBpMqS+0YMfuIRhfbxB/Uzdo8H+o0RNx0WhkHvDqW8tdWlTeEm0rl3olAYs+oiqUDZgwR/mkn4koV0Tm2fpJlyIrimlkJlRqJCLa6qLt8VMp8BiXrQcQWCiWDPDeXcLNNZayXMEQQCcufUKxRYVewVkB6mBrjjs3lYw33Z2CnJhaXK1xJ2jMqZWpkC6mpykKclMqAKBd17dA3BWxtcW8RH0yTu2Z2l3ybcxidvPxEHK6kqLFohneCRNWcQNau07m0/NYLtg93kHEWlsrBnZTS2muLm+a8P8DtERReMqfY/dibS+Ebcq4H6feqlAs4HgUiwnmjVYcxxtXp1eMnmiQz0tC4kiapHi12PWMzsEZwLhO9yMgiJ5ybw8UmSF3AzBrs8lTUDyMStTfBocnsnUwp1gip8eWFWN3u+RC5LCnmzAANRhIu53YGdgM8DUQm0pFEWMn2XElC+xkC1gtXA1LtutDexQsSmVIIMoi4FsU9L84rTrLuAzbinOhdf2IjQf3sUrgIaGMhrkDscf27EZYSsQ/biMU0xvOXdSfCaq+QyMqUKKCP82/ts08M850FNKQsVuZFPjSckRgwXM0h9lbEoRhfaWXc90VdIMKlISiSnvFdkJwAPGsFN8OIVZsOhrwl6pfnGosXbw/OBathRzISQSO24oLxwtN21OiTt5rKIxxtXjixOT844IkgsqFAV3HX/wNScyxd6gHbuQAAAABJRU5ErkJggg=="); background-repeat: repeat; } /* Vignette: warms the middle and lets the edges fall away. */ .library::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, rgba(180, 146, 105, 0.10) 0%, rgba(180, 146, 105, 0) 60%), radial-gradient(100% 70% at 50% 100%, rgba(97, 76, 51, 0.10) 0%, rgba(97, 76, 51, 0) 65%); } /* ------------------------------------------------------------------ ENDCAP -- The display table you meet before the aisles. Cards are substantially LARGER than shelf books and equal sized to each other, so one or two items still read as a deliberate display rather than a gap. -------------------------------------------------------------------------- */ .endcap { padding-top: 10px; } .endcap__head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--gold); } .endcap__head h2 { margin: 0; font-family: var(--font-head); font-weight: 300; font-size: 40px; line-height: 1.05; letter-spacing: 3px; text-transform: uppercase; color: var(--brown); } .endcap__month { margin: 0; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); } .endcap__items { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 46px; margin: 40px 0 0; padding: 0; list-style: none; } .card--endcap { width: 300px; } /* Not a ghosted or blurred book, which reads as a broken image. Its own object: a gold ruled card on cream, visibly not a book. */ .endcap__coming { display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 300px; min-height: 340px; padding: 30px 28px; border: 1px solid var(--gold); border-left-width: 3px; } .endcap__coming-eyebrow { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); } .endcap__coming-title { font-family: var(--font-head); font-size: 28px; line-height: 1.2; color: var(--brown); } .endcap__coming-teaser { font-size: 14px; line-height: 1.6; color: var(--ink-soft); } /* ---------------------------------------------------------------- CONTROLS -- */ .controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 72px; padding-bottom: 18px; border-bottom: 1px solid var(--gold); } .controls__filters { display: flex; flex-wrap: wrap; gap: 10px; } .pill { font-family: var(--font-body); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--brown); background: transparent; border: 1px solid var(--hairline); border-radius: 16px; padding: 10px 20px; cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .pill:hover { border-color: var(--gold); } .pill.is-active { background: var(--gold); border-color: var(--gold); color: #fff; } .controls__search { position: relative; display: flex; align-items: center; gap: 8px; color: var(--ink-soft); border-bottom: 1px solid var(--hairline); padding-bottom: 4px; transition: border-color 0.2s var(--ease); } .controls__search:focus-within { border-color: var(--gold); } .controls__icon { flex: none; opacity: 0.7; } .controls__search input { width: 200px; border: 0; background: transparent; font-family: var(--font-body); font-size: 14px; color: var(--ink); padding: 4px 0; } .controls__search input:focus { outline: none; } .controls__search input::placeholder { color: var(--ink-soft); opacity: 0.75; } .controls__status { margin: 14px 0 0; font-size: 13px; letter-spacing: 0.4px; color: var(--ink-soft); min-height: 1.2em; } /* ---------------------------------------------------------------- SIGNAGE -- In a boutique the signage is part of the experience. Cormorant, large, letterspaced, gold rule beneath, and a lot of air above it. -------------------------------------------------------------------------- */ .shelves { margin-top: 10px; } .shelf { margin-top: 104px; } .shelf[hidden] { display: none; } .shelf__head { padding-bottom: 14px; border-bottom: 1px solid var(--gold); } .shelf__label { margin: 0; font-family: var(--font-head); font-weight: 300; font-size: 46px; line-height: 1.05; letter-spacing: 3.5px; text-transform: uppercase; color: var(--brown); } .shelf__blurb { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-soft); max-width: 62ch; } /* ------------------------------------------------------------ SHELF PLANE -- Row geometry is fixed per breakpoint so the plank can be drawn as a repeating background that lands exactly under every row, however many rows there are. --row-h is the band; the plank occupies its bottom --plank-h. -------------------------------------------------------------------------- */ .shelf__board { position: relative; margin-top: 40px; --book-w: 200px; --row-h: 368px; --plank-h: 18px; --book-drop: 6px; /* how far the books overlap the plank top */ } .shelf__items { display: grid; grid-template-columns: repeat(auto-fill, var(--book-w)); grid-auto-rows: var(--row-h); justify-content: start; align-items: end; column-gap: 44px; margin: 0; padding: 0; list-style: none; position: relative; z-index: 1; } /* The plank itself. Full container width, always, whatever is standing on it: a real shelf is longer than the books on it, and that is what makes a two book shelf read as a short shelf rather than a broken one. */ .shelf__planks { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient( to bottom, /* nothing until the bottom of the band */ rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--row-h) - var(--plank-h)), /* lit top edge, catching the light */ var(--wood-light) calc(var(--row-h) - var(--plank-h)), var(--wood-light) calc(var(--row-h) - var(--plank-h) + 2px), /* the face of the plank, rolling off into shadow */ var(--wood-mid) calc(var(--row-h) - var(--plank-h) + 2px), var(--wood-deep) calc(var(--row-h) - 4px), /* dark underside where it meets the air below */ rgba(46, 34, 22, 0.85) calc(var(--row-h) - 4px), rgba(46, 34, 22, 0.35) var(--row-h) ); } /* A soft shadow the plank throws down onto whatever is beneath it. */ .shelf__planks::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--row-h), rgba(0, 0, 0, 0) var(--row-h) ); } .shelf__more { margin-top: 30px; background: none; border: 0; border-bottom: 1px solid var(--gold); padding: 4px 0; font-family: var(--font-body); font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--brown); cursor: pointer; } .shelf__more:hover { color: var(--gold); } /* ------------------------------------------------------------------ BOOKS -- */ .card { margin: 0; position: relative; } .card[hidden] { display: none; } .card.is-collapsed { display: none; } .shelf.is-expanded .card.is-collapsed { display: block; } /* Books sit slightly INTO the plank rather than balancing on top of it. */ .shelf__items .card { margin-bottom: calc(var(--plank-h) - var(--book-drop)); } .card__link { display: block; text-decoration: none; color: inherit; } /* The tilt lives on this wrapper, NEVER on the focusable , and it is transform only, so nothing reflows and hit targets stay put. */ .card__object { display: block; position: relative; width: 100%; /* Heights vary per book, deterministic from the slug. Bottoms align. */ aspect-ratio: 1 / var(--book-ratio, 1.5); transform-origin: 12% 100%; background: var(--brown-deep); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); /* DEPTH AT REST, not only on hover. Two layers: a tight contact shadow and a wider diffuse one. */ box-shadow: 0 2px 3px rgba(46, 30, 18, 0.42), 0 10px 20px rgba(46, 30, 18, 0.24); } /* The contact shadow each book casts down onto the plank. */ .card__object::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -9px; height: 12px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(40, 26, 15, 0.5) 0%, rgba(40, 26, 15, 0) 72%); transition: opacity 260ms var(--ease), transform 260ms var(--ease); z-index: -1; } .card__face { display: block; width: 100%; height: 100%; overflow: hidden; } .card__face img { width: 100%; height: 100%; object-fit: cover; } /* Tool card: generated from the manifest, so no tool ever waits on artwork. A different kind of object on the same shelf, not a failed book. */ .card__face--tool { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; height: 100%; padding: 22px 20px 24px; background: var(--brown-deep); border: 1px solid rgba(202, 150, 63, 0.55); position: relative; } .card__eyebrow { position: absolute; top: 20px; left: 20px; font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); } .card__tooltitle { font-family: var(--font-head); font-size: 23px; line-height: 1.15; color: var(--cream); } .card__toolsub { font-size: 12px; line-height: 1.55; color: rgba(253, 251, 245, 0.72); } .card__corner { position: absolute; right: 14px; bottom: 14px; width: 22px; height: 22px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); } /* --- the reveal ------------------------------------------------------------ Captions are gone from under the covers; the cover carries the title. The subtitle and date come back on hover and on keyboard focus, and they live on the item page. The link's accessible name still carries all three, so this is a visual change only. */ .card__reveal { position: absolute; inset: auto 0 0 0; /* Lower third only. The artwork stays visible while the book lifts underneath. Cara enlarged the subtitles baked into the covers, so the panel repeating the title and subtitle was showing SMALLER, less legible copy over the top of larger, clearer copy. It now carries the one thing the cover does not: the date, plus a short affordance. */ height: 34%; justify-content: flex-end; display: flex; flex-direction: column; gap: 5px; padding: 0 13px 12px; background: linear-gradient(to top, rgba(24, 15, 9, 0.94) 0%, rgba(24, 15, 9, 0.82) 55%, rgba(24, 15, 9, 0) 100%); opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); } .card__reveal-date { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); } .card__reveal-cta { font-family: var(--font-head); font-size: 15px; letter-spacing: 0.4px; color: var(--cream); } /* --- DESKTOP: hover only where a real pointer exists ------------------------ This media query is the most important rule in the file. Without it, touch devices inherit a hover state that sticks after the tap. */ @media (hover: hover) and (pointer: fine) { .card__link:hover .card__object, .card__link:focus-visible .card__object { /* Turns toward you as if being pulled off the shelf. Origin is the spine side and the base, so it pivots on the plank rather than floating. */ transform: perspective(900px) rotateY(-6deg) translateY(-8px); box-shadow: 0 3px 4px rgba(46, 30, 18, 0.34), 0 22px 40px rgba(46, 30, 18, 0.34); } .card__link:hover .card__object::after, .card__link:focus-visible .card__object::after { opacity: 0.55; transform: scaleX(1.06); } .card__link:hover .card__reveal, .card__link:focus-visible .card__reveal { opacity: 1; transform: none; } } /* Focus gets the same forward movement as hover, plus a ring. Focus is never signalled by motion alone. */ .card__link:focus-visible { outline: none; } .card__link:focus-visible .card__object { outline: 2px solid var(--focus-dark); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-light), 0 2px 3px rgba(46, 30, 18, 0.42), 0 10px 20px rgba(46, 30, 18, 0.24); } .card__link:focus-visible .card__reveal { opacity: 1; transform: none; } /* --- TOUCH: a press-down, designed as its own thing ------------------------- The physical inverse of the desktop lift: pressed INTO the shelf rather than pulled off it, and the shadow tightens instead of growing. No tilt: a tilt with no pointer to tilt toward is meaningless. */ @media (hover: none), (pointer: coarse) { .card__link:active .card__object { transform: scale(0.97); box-shadow: 0 1px 1px rgba(46, 30, 18, 0.46), 0 3px 6px rgba(46, 30, 18, 0.20); transition: transform 90ms var(--ease), box-shadow 160ms var(--ease); } .card__link:active .card__object::after { opacity: 0.35; transform: scaleX(0.94); } .card__link:active .card__reveal { opacity: 1; transform: none; } } /* --- scroll-in settle: the thing hover cannot do --------------------------- */ /* REGRESSION FIX. The settle and the lift both animated .card__object at equal specificity, and the settle came later in the file, so its transform:none overrode the hover lift on every card once settled — which is every card. The settle now animates the LI and the lift animates the object inside it, so the two can never fight over the same property again. */ .card.will-settle { opacity: 0; transform: translateY(8px); } .card.has-settled { opacity: 1; transform: none; transition: opacity 420ms var(--ease), transform 420ms var(--ease); } .noscript-note { margin-top: 30px; padding: 16px 20px; border-left: 3px solid var(--gold); background: #fff; font-size: 14px; color: var(--ink-soft); } /* ------------------------------------------------------------- BREAKPOINTS -- Row geometry is restated per breakpoint because the plank is drawn from it. Change --book-w and --row-h together or the plank drifts off the books. -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .shelf__label { font-size: 40px; } .endcap__head h2 { font-size: 34px; } } @media (max-width: 991px) { .shelf { margin-top: 84px; } .shelf__label { font-size: 34px; letter-spacing: 2.6px; } .shelf__board { --book-w: 168px; --row-h: 310px; } .shelf__items { column-gap: 34px; } .endcap__items { gap: 30px; } .card--endcap, .endcap__coming { width: 240px; } .endcap__coming { min-height: 280px; } .endcap__head h2 { font-size: 30px; } .controls { margin-top: 56px; } } @media (max-width: 575px) { .shelf { margin-top: 64px; } .shelf__label { font-size: 27px; letter-spacing: 2px; } .shelf__board { --book-w: 138px; --row-h: 258px; --plank-h: 14px; } .shelf__items { column-gap: 22px; } .endcap__items { gap: 20px; } .card--endcap, .endcap__coming { width: 152px; } .endcap__coming { width: 100%; min-height: 0; } .endcap__head h2 { font-size: 25px; letter-spacing: 2px; } .card__tooltitle { font-size: 17px; } .card__toolsub { font-size: 11px; } /* Filters wrap rather than becoming a horizontal scroller: options hidden off screen do not get used. */ .controls { flex-direction: column; align-items: stretch; gap: 16px; } .controls__search input { width: 100%; } } /* Everything that moves, stops. Hover and focus become a shadow and border change only, and the scroll-in settle does not run at all. The reveal still appears, because it is information rather than decoration. */ @media (prefers-reduced-motion: reduce) { .card__object { transition: box-shadow 120ms linear; } .card__link:hover .card__object, .card__link:focus-visible .card__object { transform: none; box-shadow: 0 0 0 1px var(--gold), 0 4px 10px rgba(46, 30, 18, 0.28); } .card__link:active .card__object { transform: none; } .card__reveal { transition: none; transform: none; } .card.will-settle, .card.has-settled { opacity: 1; transform: none; transition: none; } } /* ====================================================================== POSITIONING LINE, ENDCAP FIGURE, CLOSING BLOCK ====================================================================== */ /* Introduces the page. Quiet on purpose: not a hero statement. The two sentences are separate lines, forced with display:block on spans rather than a
, so each sentence still wraps naturally inside its own line at narrow widths instead of breaking mid-sentence and leaving an orphan. The copy is untouched: this is a break, not a rewrite. */ .positioning { max-width: 68ch; margin: 0 0 54px; font-size: 16px; line-height: 1.85; color: var(--ink-soft); } .positioning__line { display: block; } /* At the narrowest widths the second sentence is long enough that a hard break plus natural wrapping can leave a one-word last line. Balancing the wrap keeps the ragged edge even and avoids the orphan. */ .positioning__line { text-wrap: pretty; } /* --- the endcap as a display table ----------------------------------- Sandee stands ON the plank rather than floating beside the cards: a cutout with nothing under it reads as clip art. Books and figure are both bottom-aligned to the same plane, and both overlap its top edge slightly so nothing looks balanced on a line. -------------------------------------------------------------------- */ .endcap__board { position: relative; display: flex; align-items: flex-end; gap: 40px; padding-bottom: 18px; margin-top: 40px; } .endcap__figure { flex: none; display: block; width: 190px; margin-bottom: -6px; /* overlaps the plank, same as the books */ position: relative; z-index: 1; } .endcap__figure img { display: block; width: 100%; height: auto; /* Grounding shadow so she sits on the surface rather than hovering. */ filter: drop-shadow(0 8px 10px rgba(46, 30, 18, 0.30)); } .endcap__plank { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(to bottom, var(--wood-light) 0, var(--wood-light) 2px, var(--wood-mid) 2px, var(--wood-deep) 14px, rgba(46, 34, 22, 0.85) 14px, rgba(46, 34, 22, 0.35) 100%); } .endcap__items { margin: 0; flex: 1 1 auto; align-items: flex-end; } /* --- closing block ---------------------------------------------------- */ .closing { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center; margin-top: 104px; padding-top: 54px; border-top: 2px solid var(--gold); } .closing__media img { display: block; width: 100%; height: auto; box-shadow: 0 2px 4px rgba(46, 30, 18, 0.28), 0 14px 30px rgba(46, 30, 18, 0.20); } .closing__heading { margin: 0 0 20px; font-family: var(--font-head); font-weight: 300; font-size: 40px; line-height: 1.1; letter-spacing: 2.4px; text-transform: uppercase; color: var(--brown); } .closing__body p { margin: 0 0 28px; max-width: 60ch; font-size: 16px; line-height: 1.85; color: var(--ink-soft); } .closing__cta { display: inline-block; padding: 15px 30px; background: var(--gold); color: #fff; font-size: 13px; letter-spacing: 2.72px; text-transform: uppercase; text-decoration: none; border-radius: 16px; transition: background-color 0.2s var(--ease); } .closing__cta:hover, .closing__cta:focus-visible { background: var(--brown); color: #fff; } @media (max-width: 991px) { /* Sandee needs horizontal room to stand without crowding the featured books. Below this width the endcap is already tight, so she is removed rather than shrunk into a smudge. Decorative and alt-empty, so nothing is lost to assistive tech. */ .endcap__figure { display: none; } .endcap__board { gap: 0; } .positioning { font-size: 15px; margin-bottom: 42px; } .closing { grid-template-columns: 300px 1fr; gap: 36px; margin-top: 84px; } .closing__heading { font-size: 32px; letter-spacing: 1.8px; } } @media (max-width: 767px) { .closing { grid-template-columns: 1fr; gap: 28px; margin-top: 64px; } .closing__media { max-width: 320px; } .closing__heading { font-size: 27px; } .closing__body p { font-size: 15px; } .closing__cta { display: block; text-align: center; letter-spacing: 2px; } }