@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');
/* The Library (History, Allegedly style guide): a dark case of pamphlets, each one a page on rag paper. */
:root{--t-rag:#14110E;--t-deep:#211C17;--t-ink:#F1E8D4;--t-faded:#B5A993;--t-seal:#E8848F;--t-gilt:#D9B46A;
  --rag:#EDE3CC;--deep:#E2D3B1;--ink:#1F1A15;--faded:#5C5046;--seal:#8A1C2B;--powder:#5F7C8B;--gilt:#B08A3E;
  --display-sc:"IM Fell English SC","Libre Caslon Text",Georgia,serif;--display:"IM Fell English","Libre Caslon Text",Georgia,serif;--text:"Libre Caslon Text",Georgia,serif}
*{box-sizing:border-box;margin:0}
body{background:var(--t-rag);color:var(--t-ink);font:400 17px/1.65 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--t-seal);outline-offset:2px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 24px;background:var(--t-rag);border-bottom:1.5px solid #F1E8D42e}
.top img{height:54px;width:auto;margin:-6px 0}
.top nav{display:flex;gap:20px;font:400 .86rem/1 var(--display-sc);letter-spacing:.14em}
.top nav a{text-decoration:none;color:var(--t-faded)}.top nav a:hover,.top nav a[aria-current]{color:var(--t-ink)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
.eyebrow{font:400 .8rem/1.4 var(--display-sc);letter-spacing:.2em;color:var(--t-faded)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08}

/* the wall */
.intro{padding-block:72px 40px}
.intro h1{font:400 clamp(3rem,7vw,6rem)/1 var(--display-sc);margin:.4rem 0 1rem}
.intro p{max-width:42rem;color:var(--t-faded)}
.key{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:1.4rem;font:400 .8rem/1 var(--display-sc);letter-spacing:.14em;color:var(--t-faded)}
.key span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:-1px}
.key .True::before{background:var(--powder)}.key .Disputed::before{background:var(--gilt)}.key .Rumor::before{background:var(--seal)}.key .Invented::before{background:#3a312a;outline:1px solid var(--t-faded)}
.case{background:linear-gradient(#3a2618,#2a1a10);padding:18px 18px 0;border:1.5px solid #5a3d27;box-shadow:inset 0 0 0 6px #23160d,0 30px 60px #0008;margin:0 0 80px}
.shelf{position:relative;padding:0 10px;margin-bottom:22px}
.shelf h2{font:400 .95rem/1 var(--display-sc);letter-spacing:.18em;color:var(--t-gilt);padding:14px 4px 12px}
.shelf h2 a{text-decoration:none}.shelf h2 a:hover{color:var(--t-ink)}
.row{display:flex;align-items:flex-end;gap:5px;min-height:290px;padding:0 6px;border-bottom:14px solid #5a3d27;box-shadow:0 10px 0 #23160d;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
.book{position:relative;flex:none;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;text-orientation:sideways;transform:rotate(180deg);text-decoration:none;padding:12px 0;
  width:var(--w);height:var(--h);background:var(--c);color:var(--tc,#F1E8D4);font:400 .84rem/1.12 var(--display-sc);letter-spacing:.04em;text-align:center;
  border-left:3px solid #0003;border-right:1px solid #fff2;box-shadow:inset 0 10px 0 -7px var(--band),inset 0 -10px 0 -7px var(--band);transition:transform .18s}
.book span{max-height:calc(var(--h) - 28px);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.book:hover,.book:focus-visible{transform:rotate(180deg) translateX(14px)}
.True{--c:#4E6774;--band:var(--t-gilt)}.Disputed{--c:#8C6A2C;--band:#F1E8D4}.Rumor{--c:#7A1A27;--band:var(--t-gilt)}.Invented{--c:#2E2620;--band:var(--t-seal)}

/* a book's page, on paper */
.page{background:var(--rag);color:var(--ink);padding:56px 0 96px}
.page .wrap{max-width:760px}
.crumbs{font:400 .82rem/1.4 var(--display-sc);letter-spacing:.14em;color:var(--faded)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--seal)}
.page h1{font:400 clamp(2.2rem,5vw,3.6rem)/1.08 var(--display);margin:22px 0 26px;padding-top:18px;position:relative}
.page h1::before,.page h1::after{content:"";position:absolute;left:0;right:0;background:var(--ink)}
.page h1::before{top:0;height:5px}.page h1::after{top:9px;height:1.5px}
.verdict{display:inline-grid;justify-items:center;gap:4px;padding:10px 20px 12px;color:var(--seal);border:3px solid var(--seal);border-radius:3px;outline:1.5px solid var(--seal);outline-offset:3px;transform:rotate(-3deg);margin:4px 0 26px}
.verdict small{font:400 11px/1 var(--display-sc);letter-spacing:.24em}
.verdict b{font:400 34px/1 var(--display-sc);font-weight:400;letter-spacing:.06em}
.answer{font-size:1.22rem;line-height:1.6}
.page h2{font:400 1.5rem/1.2 var(--display-sc);margin:44px 0 12px;letter-spacing:.02em}
.receipts{padding-left:1.4rem}
.receipts li{margin:0 0 .6rem}
.receipts a{color:var(--seal)}
.receipts span{color:var(--faded);font-style:italic}
.play{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:40px;padding:22px;background:var(--deep)}
.play img{width:220px;max-width:100%;aspect-ratio:16/9;object-fit:cover}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:.7em 1.3em;background:var(--ink);color:var(--rag);border:1.5px solid var(--ink);font:700 .74rem/1 "Courier Prime","Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.btn:hover{background:transparent;color:var(--ink)}
.more{list-style:none;padding:0;display:grid;gap:8px}
.more a{text-decoration:none;border-bottom:1px solid #1F1A1533}.more a:hover{color:var(--seal)}
.more small{font:400 .72rem/1 var(--display-sc);letter-spacing:.14em;color:var(--seal);margin-left:8px}
footer{padding:48px 0;color:var(--t-faded);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer nav{display:flex;gap:18px;font-family:var(--display-sc);letter-spacing:.1em}

@media (max-width:700px){
  .top{padding:8px 16px}.top img{height:40px;margin:-4px 0}.top nav{gap:12px;font-size:.78rem}
  .wrap{padding-inline:16px}
  .intro{padding-block:40px 28px}
  .case{padding:12px 10px 0}
  .row{display:grid;gap:6px;min-height:0;border-bottom-width:10px;padding-bottom:10px;overflow:visible}
  .book{writing-mode:horizontal-tb;transform:none;width:auto;height:auto;min-height:48px;justify-content:flex-start;padding:10px 14px;text-align:left;font-size:.95rem;box-shadow:inset 10px 0 0 -6px var(--band)}
  .book span{max-height:none;-webkit-line-clamp:3}
  .book:hover,.book:focus-visible{transform:translateX(6px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}