/* angle of doubt. Black and white, system monospace, no external assets. */
:root{--fg:#f2f2f2;--mid:#bdbdbd;--dim:#7a7a7a;--faint:#4f4f4f;--line:#232323;--line2:#333;
 --mono:ui-monospace,"JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;--w:1080px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;scroll-behavior:smooth}
body{color:var(--fg);font:15px/1.65 var(--mono);min-height:100vh;position:relative;-webkit-font-smoothing:antialiased;
 background:#000 radial-gradient(#1a1a1a 1px,transparent 1px) 0 0/22px 22px}
body::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:50;opacity:.07;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
a:focus-visible,input:focus-visible{outline:1px dashed var(--fg);outline-offset:3px}
::selection{background:var(--fg);color:#000}
[hidden]{display:none!important}
.wrap{width:min(var(--w),calc(100vw - 48px));margin:0 auto;position:relative}

/* header */
.top{border-bottom:1px solid var(--line);position:relative;z-index:2;background:rgba(0,0,0,.6)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.04em;white-space:nowrap}
.brand svg{width:26px;height:26px;transition:transform .25s}
.brand:hover svg{transform:rotate(-12deg)}
.nav{display:flex;gap:4px;font-size:13px;min-height:31px;align-items:center}
.nav a{padding:6px 12px;color:var(--dim);border:1px solid transparent;transition:color .2s,border-color .2s,transform .2s}
.nav a:hover{color:var(--fg);border-color:var(--line2);transform:rotate(-1.5deg)}
.nav a[aria-current]{color:var(--fg);border-color:var(--line2)}
.nav a[aria-current]::before{content:"∠ ";color:var(--dim)}

/* hero */
.hero{padding:88px 0 24px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:48px;align-items:center}
/* hero art: swap via tools/images.py. screen blend drops its black background onto the page's dot grid */
.art img{display:block;width:100%;height:auto;mix-blend-mode:screen}
h1,h2,h3{font-weight:500;letter-spacing:.01em}
.hero h1{font-size:44px;line-height:1.1;letter-spacing:-.01em}
.hero .tag{font-size:19px;color:var(--mid);margin-top:14px;max-width:560px}
.hero .lede{max-width:540px;color:var(--dim);margin-top:22px}
.meta{display:flex;gap:8px 26px;margin-top:26px;font-size:12px;color:var(--dim);letter-spacing:.08em;flex-wrap:wrap;min-height:20px}
.meta b{color:var(--fg);font-weight:500}

/* section labels */
section{padding-top:72px}
.label{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.label::after{content:"";flex:1;border-top:1px dashed var(--line2)}
.label b{color:var(--fg);font-weight:500}

/* controls */
.controls{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0 14px;margin-bottom:8px;display:flex;flex-direction:column;gap:10px}
.search{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.search label,.fl{width:64px;flex:none;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.search input{flex:1;max-width:460px;background:#000;border:1px solid var(--line2);color:var(--fg);font:inherit;font-size:14px;padding:8px 12px;border-radius:0;transition:border-color .2s}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:var(--fg);outline:none}
.fbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.chip{border:1px solid var(--line2);padding:3px 10px;color:var(--dim);transition:border-color .2s,color .2s,transform .2s;white-space:nowrap}
.chip b{font-weight:400;color:var(--faint);margin-left:6px}
.chip:hover{color:var(--fg);transform:rotate(-1.5deg)}
.chip[aria-current]{border-color:var(--fg);color:var(--fg)}
.chip[aria-current] b{color:var(--mid)}
.count{font-size:12px;color:var(--dim);margin-top:6px}
.count a{color:var(--mid);border-bottom:1px dashed var(--faint)}
.count a:hover{color:var(--fg)}

/* results */
.gb{color:var(--mid);font-size:13px;margin:22px 0 14px;max-width:640px}
.ext,.changes,.changes ul{list-style:none}
.ext li{border-bottom:1px solid var(--line)}
.ext li>a{display:grid;grid-template-columns:100px 1fr auto;gap:18px;padding:14px 4px;transition:transform .2s,background .2s;transform-origin:left center}
.ext li>a:hover{transform:rotate(-.5deg);background:rgba(255,255,255,.03)}
.ext li>a:hover .x{color:var(--fg)}
.ext .ty{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;padding-top:2px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.new{font-style:normal;font-size:10px;letter-spacing:.12em;color:#000;background:var(--fg);padding:0 5px}
.ext .bd{display:flex;flex-direction:column;gap:3px;min-width:0}
.ext .n{font-size:14px}
.ext .w{color:var(--dim);font-size:12px}
.ext .w em{font-style:normal;color:var(--faint)}
.ext .nt{color:var(--mid);font-size:12.5px;opacity:.85}
.ext .x{align-self:center;color:var(--faint);font-size:14px}
.st{display:inline-block;margin-left:8px;border:1px dashed var(--faint);color:var(--dim);font-size:10px;padding:0 5px;vertical-align:2px}
/* reviews, talks and podcasts under a book: indented to the text column */
.ext .rv{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:-6px;padding:0 4px 14px 122px;font-size:12px}
.rv .rl{color:var(--faint);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.rv a{color:var(--mid);border-bottom:1px dashed var(--faint);transition:color .2s,border-color .2s}
.rv a:hover{color:var(--fg);border-color:var(--fg)}
.rv small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-left:6px}
.empty{color:var(--dim);border:1px dashed var(--line2);padding:20px;font-size:13px}
.empty a{color:var(--fg);border-bottom:1px dashed var(--faint)}

/* recently added */
.changes>li{display:grid;grid-template-columns:100px 1fr;gap:18px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:13px}
.changes time{color:var(--dim);font-size:12px;letter-spacing:.08em;padding-top:1px}
.changes li li{color:var(--mid)}
.changes li li a{color:var(--fg);border-bottom:1px dashed var(--faint)}
.changes li li a:hover{border-color:var(--fg)}
.changes li li span{color:var(--dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-left:6px}

/* links */
.links{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.links a{display:flex;justify-content:space-between;gap:10px;padding:14px 16px;border:1px solid var(--line);background:rgba(0,0,0,.7);font-size:13px;transition:border-color .2s,transform .2s}
.links a span{color:var(--dim)}
.links a:hover{border-color:var(--fg);transform:rotate(-1.5deg)}
.nojs p{color:var(--mid);margin-bottom:22px;max-width:620px}
.nojs p a{border-bottom:1px dashed var(--faint)}

/* footer */
.foot{margin-top:110px;border-top:1px solid var(--line);padding:34px 0 46px;font-size:12px;color:var(--dim)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot .motto{letter-spacing:.16em;color:var(--mid)}

@media (max-width:760px){
 body{font-size:14px}
 .wrap{width:calc(100vw - 36px)}
 .top .wrap{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 0 12px}
 .nav{margin-left:-12px;gap:2px;max-width:calc(100% + 12px);overflow-x:auto;scrollbar-width:none;white-space:nowrap}
 .nav a{padding:5px 10px}
 .hero{padding:44px 0 8px}
 .hero .wrap{grid-template-columns:1fr;gap:28px}
 .hero h1{font-size:32px}
 .hero .tag{font-size:16px}
 section{padding-top:56px}
 .search{flex-direction:column;align-items:stretch;gap:6px}
 .search input{max-width:none}
 .fl{width:100%}
 .ext li>a{grid-template-columns:1fr auto;gap:4px 14px;padding:14px 2px}
 .ext .rv{padding:0 2px 14px}
 .ext .ty{grid-column:1/-1;flex-direction:row;align-items:center}
 .ext .bd{grid-column:1}
 .links{grid-template-columns:1fr}
 .changes>li{grid-template-columns:1fr;gap:4px}
 .foot{margin-top:80px}
 .foot .wrap{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.fbar{position:relative;padding-left:74px}
.fbar .fl{position:absolute;left:0;top:5px}
@media (max-width:760px){.fbar{padding-left:0}.fbar .fl{position:static;margin-top:8px}}

/* reserve space so the list arriving doesn't shove the footer into view (layout shift) */
main{min-height:100vh}