/* The threshold (Simon, Nov 4): a photograph of a bookshelf that passes for a flat page, until one book slides back. */
#thresh { position:absolute; inset:0; z-index:8; overflow:hidden; background:#000; cursor:default; touch-action:pan-y; }
#thresh.gone { display:none; }
#thresh.sky { background:transparent; }
#thPush { position:absolute; inset:0; overflow:hidden; animation:thIn 1.3s ease-out both; }
@keyframes thIn { from { opacity:0; } to { opacity:1; } }
#thPhoto { position:absolute; left:0; top:0; width:1376px; height:768px; transform-origin:0 0; }
#thPhoto > * { position:absolute; left:0; top:0; width:1376px; height:768px; display:block; }
/* the dimmed grade Simon chose; each piece carries it, so the light between them stays bright */
#thPhoto img { filter:saturate(.72) brightness(.72) contrast(1.06) sepia(.14); }
#thLight { background:#fffdf4; opacity:0; clip-path:polygon(747px 233px, 830px 231px, 833px 240px, 833px 510px, 752px 510px); }
#thSpine { clip-path:polygon(747px 233px, 830px 231px, 833px 240px, 833px 510px, 752px 510px); transform-origin:790px 510px; }
#thNext { clip-path:polygon(832px 258px, 903px 258px, 903px 246px, 947px 246px, 947px 510px, 832px 510px); }
#thVig { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 72% 72% at 56% 50%, transparent 45%, rgba(8,4,2,.72) 100%); }
#thFx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; }
#thNight { position:absolute; inset:0; z-index:7; pointer-events:none; mix-blend-mode:multiply; background:#fff; display:none; }
#thHaze, #thGold { position:absolute; inset:0; opacity:0; pointer-events:none; }
#thHaze { background:radial-gradient(ellipse at 50% 50%, rgba(226,236,242,0) 40%, rgba(226,236,242,.8) 100%); }
#thGold { background:radial-gradient(circle at 50% 50%, #fff, #fffdf6 55%, #fff4dc); }
#thDust { position:absolute; left:50%; top:50%; width:166%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; opacity:0; pointer-events:none; background:radial-gradient(closest-side, rgba(235,225,200,0) 58%, rgba(235,225,200,.85) 76%, rgba(235,225,200,0)); }

#thCopy { position:absolute; left:0; right:0; bottom:6px; text-align:center; font:10px/1.2 Georgia, serif; color:rgba(239,229,203,.42); pointer-events:none; }
#thSkip { position:absolute; right:8px; bottom:3px; z-index:2; background:none; border:0; padding:3px 6px; font:11px/1.2 Georgia, serif; color:rgba(239,229,203,.42); cursor:pointer; }
#thSkip:hover { color:rgba(239,229,203,.85); text-decoration:underline; }
#thresh.sky #thSkip { color:rgba(50,40,30,.45); }
#thresh.skipping { opacity:0; transition:opacity .35s; }
#thCard { position:absolute; left:50%; top:50%; width:min(500px, calc(100% - 24px)); max-height:calc(100% - 24px); overflow:auto; touch-action:pan-y; opacity:0; visibility:hidden; transform:translate(-50%,-50%); background:#efe5cb; color:#2b211a; border:1px solid #8a6d3b; border-radius:6px; padding:18px 24px 16px; box-shadow:0 10px 34px rgba(0,0,0,.55); font:15px/1.42 Georgia, serif; }
#thCard blockquote { margin:0; font-size:18px; line-height:1.32; font-style:italic; }
#thCard .by { margin:3px 0 10px; font-size:13px; color:#5a4632; }
#thCard p { margin:0 0 9px; }
#thCard .imp { margin-top:12px; padding-top:11px; border-top:1px solid #c9b78f; }
#thCard .off { color:#8d8270; }
#thCard h2 { margin:0 0 3px; font:400 18px Georgia, serif; }
#thCard .off p { font-size:13px; margin-bottom:8px; }
#thCard .btns { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
#thCard button { font:14px Georgia, serif; border-radius:999px; padding:7px 16px 8px; }
#thCard .choose { background:#d9cfb6; color:#9a9080; border:1px solid #c6baa0; cursor:not-allowed; }
#thCard .sample { background:#2b211a; color:#efe5cb; border:1px solid #2b211a; cursor:pointer; }
#thCard .sample:disabled { opacity:.45; cursor:default; }
#thBarWrap { height:5px; background:#d3c7aa; border-radius:3px; margin-top:12px; overflow:hidden; display:none; }
#thBar { height:100%; width:0; background:#2b211a; }
#thStatus { font-size:13px; margin-top:5px; min-height:18px; color:#5a4632; }
@media (max-width:700px) { #thCard { padding:14px 16px 12px; font-size:14px; } #thCard blockquote { font-size:16px; } }