/* go.css: the permanent "From the books" pages (/go/self and the rest). Each printed code opens one of these, scrolled to
   the card for the thing the book mentions; that card is highlighted. Light colors only: dark mode is the site's inversion filter. */
:root{
  --go-ink:#2B2620; --go-muted:#554E42; --go-acc:#3E6B4C; --go-acc-h:#2E5539; --go-paper:#FAF6EB; --go-hi:#FFF4C9; --go-line:#E4D9BE;
  --go-ui:var(--d17-ui, var(--tol-sans, "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif));
  --go-head:"Fraunces", Georgia, serif; --go-read:"Lora", Georgia, serif;
}
html body.go-page{ margin:0; background:var(--go-paper); }
html body main.read.gop{ background:none; border:0; border-radius:0; box-shadow:none; max-width:46rem; margin:0 auto; padding:clamp(1rem, 3vw, 2.2rem) 16px 3rem; box-sizing:border-box; }
.gop p, .gop h1, .gop h2, .gop li{ max-width:none; }
html body main.read.gop :is(p, h1, h2, li){ --bb-fill:transparent; --bb-edge:transparent; --bb-shadow:none; }
.gop .go-k{ margin:0 0 .3rem; font:700 .85rem/1.2 var(--go-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--go-acc); }
html body main.read.gop .go-h1{ margin:0 0 .5rem; padding:0; border:0; background:none; font:500 clamp(2rem, 1.4rem + 3vw, 3.2rem)/1.06 var(--go-head); letter-spacing:-.02em; color:var(--go-ink); text-wrap:balance; }
.gop .go-lede{ margin:0 0 1.4rem; font:400 1.08rem/1.55 var(--go-read); color:var(--go-muted); }
html body main.read.gop .go-h2{ margin:1.8rem 0 .7rem; padding:0; border:0; background:none; font:italic 500 1.3rem/1.25 var(--go-head); color:var(--go-acc-h); }
.gop .go-list{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
html body main.read.gop .go-card{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:.85rem; align-items:center; margin:0; padding:.75rem .85rem; width:auto; max-width:none !important;
  background:#fff; border:2px solid transparent; border-radius:14px; box-shadow:0 1px 3px rgba(43,38,32,.1); scroll-margin-top:calc(var(--tol-bar-h, 64px) + 16px); }
.gop .go-card::before{ content:none !important; }
html body main.read.gop .go-card.is-here, html body main.read.gop .go-card:target{ border-color:var(--go-acc); background:var(--go-hi); }
.gop .go-here{ grid-column:1 / -1; margin:0 0 .1rem; font:700 .85rem/1.2 var(--go-ui); color:var(--go-acc-h); }
.gop .go-pic svg{ display:block; width:48px; height:48px; }
.gop .go-mono{ display:grid; place-items:center; width:48px; height:48px; border-radius:13px; background:#E7F0E9; color:var(--go-acc-h); font:700 .95rem/1 var(--go-ui); }
.gop .go-tx{ display:grid; gap:.15rem; min-width:0; }
.gop .go-name{ font:700 1.02rem/1.3 var(--go-ui); color:var(--go-ink); overflow-wrap:anywhere; }
.gop .go-line{ font:400 .95rem/1.4 var(--go-read); color:var(--go-muted); }
.gop .go-line:empty{ display:none; }
.gop .go-kind{ font:400 .85rem/1.3 var(--go-ui); color:#6E6656; }
.gop .go-more{ margin-left:.3rem; color:var(--go-acc-h); font-weight:600; text-underline-offset:3px; }
.gop .go-open{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:64px; padding:.4rem .9rem; border-radius:10px; background:var(--go-acc); color:#fff; font:700 1rem/1 var(--go-ui); text-decoration:none; }
.gop .go-open:hover{ background:var(--go-acc-h); }
.gop .go-open:focus-visible, .gop .go-nav a:focus-visible, .gop .go-more:focus-visible{ outline:3px solid var(--go-acc); outline-offset:3px; }
.gop .go-nav{ margin:2.2rem 0 0; padding:1rem 0 0; border-top:1px solid var(--go-line); display:flex; flex-wrap:wrap; gap:.5rem; }
.gop .go-nav p{ flex-basis:100%; margin:0 0 .2rem; font:700 1rem/1.3 var(--go-ui); color:var(--go-ink); }
.gop .go-nav a{ display:inline-flex; align-items:center; min-height:44px; padding:.3rem .9rem; border:2px solid var(--go-line); border-radius:999px; background:#fff; color:var(--go-ink); font:600 .95rem/1.2 var(--go-ui); text-decoration:none; }
.gop .go-nav a[aria-current]{ border-color:var(--go-acc); color:var(--go-acc-h); }
@media (max-width:420px){ html body main.read.gop .go-card{ grid-template-columns:40px minmax(0,1fr); } .gop .go-pic svg, .gop .go-mono{ width:40px; height:40px; } .gop .go-open{ grid-column:2; justify-self:start; } }