/* Books4Bots public site. Minimal monochrome hairline (docs/BRAND.md): no accent colour, no shadows, no glows.
   Fonts are the visitor's own installed Geist, Instrument Serif and Newsreader when present, otherwise the system's
   (no font is fetched from anywhere). Light and dark follow the visitor's setting. */
:root{
  color-scheme:light dark;
  --canvas:#FAFAFA;--plate:#FFFFFF;--ink:#0A0A0A;--ink2:#52525B;--line:#E4E4E7;
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){:root{--canvas:#08090A;--plate:#101014;--ink:#FAFAFA;--ink2:#A1A1AA;--line:#27272A}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/1.55 var(--sans);letter-spacing:-.005em;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:16px;top:-60px;background:var(--ink);color:var(--canvas);padding:8px 14px;z-index:10}
.skip:focus{top:12px}
main,.bar,.foot{width:100%;max-width:1120px;margin:0 auto;padding-left:16px;padding-right:16px}
@media (min-width:700px){main,.bar,.foot{padding-left:32px;padding-right:32px}}
main{flex:1;padding-bottom:56px}

/* header */
header.top{border-bottom:1px solid var(--line);background:var(--canvas)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.word{display:inline-flex;flex-direction:column;text-decoration:none;line-height:.9}
.word i{font:italic 400 22px/1 var(--display);letter-spacing:-.01em}
.word b{font:700 15px/1.1 var(--sans);letter-spacing:-.03em;margin-left:1px}
nav.main{display:flex;gap:6px 22px;align-items:center;flex-wrap:wrap;font-size:15px}
nav.main a{text-decoration:none;padding:6px 0}
nav.main a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
nav.main form{display:inline;margin:0}
.who{color:var(--ink2);font-size:14px}

/* type */
h1,h2,h3{font-family:var(--sans);font-weight:500;letter-spacing:-.03em;line-height:1.08;margin:0}
h1{font-size:clamp(32px,5.4vw,56px);letter-spacing:-.045em}
h2{font-size:clamp(22px,3vw,30px)}
h3{font-size:17px;letter-spacing:-.02em;line-height:1.25}
p{margin:0 0 12px}
.kick{font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);margin:0 0 12px}
h1+p,h1+.lead{margin-top:16px}
.lead{font-size:clamp(17px,2vw,20px);color:var(--ink2);max-width:60ch}
.mute{color:var(--ink2)}
.mono{font-family:var(--mono)}
.sec{padding:clamp(36px,6vw,72px) 0;border-top:1px solid var(--line)}
.sec:first-child{border-top:0}
.sec>h2{margin-bottom:16px}
.crumbs{color:var(--ink2);font-size:14px;padding:22px 0 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* controls */
.btn{display:inline-block;font:500 15px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;border:1px solid var(--ink);border-radius:999px;padding:13px 22px;background:var(--ink);color:var(--canvas);cursor:pointer}
.btn:hover{text-decoration:none;opacity:.88}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{padding:9px 16px;font-size:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.badge{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;border:1px solid var(--ink);border-radius:999px;padding:5px 10px}
.badge.quiet{border-color:var(--line);color:var(--ink2)}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.chip{display:inline-block;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:4px 11px;text-decoration:none;color:var(--ink2)}
a.chip:hover{border-color:var(--ink);color:var(--ink)}

/* search form */
.find{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));align-items:end;border:1px solid var(--line);background:var(--plate);border-radius:14px;padding:18px;margin:22px 0}
.find .q{grid-column:1/-1}
.find label{display:block;font:500 12px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
input[type=search],select{width:100%;font:400 16px/1.2 var(--sans);color:var(--ink);background:var(--canvas);border:1px solid var(--ink2);border-radius:10px;padding:11px 12px;min-height:44px}
.count{color:var(--ink2);margin:0 0 18px}
.pager{display:flex;gap:12px;justify-content:space-between;margin-top:32px}

/* shelf of book characters */
.grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,3vw,32px);grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.card{position:relative;border-top:1px solid var(--line);padding:14px 2px 6px;transition:transform .3s ease}
.card:hover,.card:focus-within{transform:translateY(-6px)}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card .sub{display:block;color:var(--ink2);font-size:13.5px;margin-top:3px}
.card .badge{margin-top:10px}
.chr{display:block;width:100%;max-width:150px;height:auto;margin:0 auto 10px;color:var(--ink)}
.chr .p{fill:var(--plate);stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.chr .l{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.chr .d{fill:none;stroke:var(--ink2);stroke-width:1;stroke-linecap:round}
.chr .ball{fill:currentColor}
.chr .face text{fill:currentColor}
.chr .head,.chr .ant{transform-box:fill-box;transition:transform .35s ease}
.chr .head{transform-origin:50% 100%}
.chr .ant{transform-origin:50% 100%}
.card:hover .head,.card:focus-within .head,.hero-b:hover .head{transform:rotate(-4deg)}
.card:hover .ant,.card:focus-within .ant,.hero-b:hover .ant{transform:rotate(7deg)}
.big .chr{max-width:320px}
@media (prefers-reduced-motion:reduce){.card,.chr .head,.chr .ant{transition:none}.card:hover,.card:focus-within{transform:none}.card:hover .head,.card:focus-within .head,.hero-b:hover .head,.card:hover .ant,.card:focus-within .ant,.hero-b:hover .ant{transform:none}}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(32px,6vw,72px) 0 clamp(28px,5vw,56px)}
.hero .row{margin-top:24px}
.hero-b{justify-self:center;width:100%;max-width:340px}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-b{order:-1;max-width:200px}}
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{border:1px solid var(--line);background:var(--plate);border-radius:14px;padding:18px;counter-increment:s}
.steps li::before{content:"0" counter(s);font:500 12px var(--mono);color:var(--ink2);display:block;margin-bottom:8px}
.steps h3{margin-bottom:6px}
.steps p{color:var(--ink2);margin:0}
.facts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fact{border:1px solid var(--line);background:var(--plate);border-radius:14px;padding:18px}
.fact b{display:block;font:500 clamp(30px,4vw,42px)/1 var(--sans);letter-spacing:-.04em;margin-bottom:8px}
.fact p{color:var(--ink2);margin:0;font-size:15px}

/* book page */
.book{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start;padding-top:26px}
@media (max-width:820px){.book{grid-template-columns:1fr}.book .big{max-width:230px}}
.book h1{font:500 clamp(30px,4.4vw,46px)/1.06 var(--serif);letter-spacing:-.02em;margin-bottom:10px}
.by{font-size:17px;margin:0 0 4px}
.shelfcard{border:1px solid var(--line);background:var(--plate);border-radius:14px;margin:22px 0;display:grid}
.shelfcard div{padding:14px 18px;border-top:1px solid var(--line)}
.shelfcard div:first-child{border-top:0}
.shelfcard dt{font:500 12px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.shelfcard dd{margin:0}
.facts-list{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:18px 0}
.facts-list dt{color:var(--ink2)}
.facts-list dd{margin:0}
.prose{max-width:66ch}
.note{font-size:14px;color:var(--ink2);max-width:60ch;margin-top:12px}

/* connect */
.stepsl{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:14px}
.stepsl li{counter-increment:n;border:1px solid var(--line);background:var(--plate);border-radius:14px;padding:16px 18px 16px 52px;position:relative}
.stepsl li::before{content:counter(n);position:absolute;left:18px;top:16px;font:500 13px var(--mono);color:var(--ink2)}
code,pre.cmd{font:400 14px/1.5 var(--mono)}
pre.cmd{margin:10px 0 0;padding:12px 14px;border:1px solid var(--ink2);border-radius:10px;background:var(--canvas);white-space:pre-wrap;word-break:break-all;user-select:all}
details.client{border:1px solid var(--line);background:var(--plate);border-radius:14px;margin:12px 0;padding:0}
details.client>summary{cursor:pointer;padding:16px 18px;display:flex;gap:10px 14px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-weight:500;list-style:none}
details.client>summary::-webkit-details-marker{display:none}
details.client>summary::after{content:"+";font:400 20px var(--mono);color:var(--ink2);margin-left:auto}
details.client[open]>summary::after{content:"\2212"}
details.client .inner{padding:0 18px 18px}
.status{font:500 12px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--ink2)}
.status.tested{border-color:var(--ink);color:var(--ink)}
.legal{white-space:pre-wrap;font:400 14px/1.55 var(--mono);border:1px solid var(--line);background:var(--plate);border-radius:14px;padding:16px;max-height:420px;overflow:auto}
.legal-wrap{margin:14px 0 22px}

/* footer */
footer.foot{border-top:1px solid var(--line);padding-top:28px;padding-bottom:40px;color:var(--ink2);font-size:14px;max-width:none}
footer.foot>div{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
footer.foot p{max-width:62ch;margin:0}
.empty{border:1px dashed var(--ink2);border-radius:14px;padding:28px;color:var(--ink2);text-align:center}