/* What every era has in common: how things work, not how they look. Each era's file comes after this, in the same download. */
:root { color-scheme: light dark; }
:root.light { color-scheme: light; }
:root.dark { color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--page); }
button { font: inherit; color: inherit; cursor: pointer; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 232px; grid-template-rows: auto 1fr; column-gap: 24px; padding-top: 16px; align-items: start; }
.main { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.side { grid-column: 2; grid-row: 1; }
.rec { margin: 0 0 7px; overflow-wrap: anywhere; }
.rec summary, .rest > summary { cursor: pointer; list-style: none; }
.rec summary::-webkit-details-marker, .rest > summary::-webkit-details-marker { display: none; }
.rec[open] .short { display: none; }
.rec p { margin: 2px 0 0; }
.rec .meta { color: var(--hush); font-size: 11px; }
.rec .meta a { color: var(--soft); }
.more, .rest > summary { color: var(--link); }
.rest > summary:hover, .more:hover { text-decoration: underline; }
/* shows while a page is being fetched; hides itself as soon as anything arrives after it */
.loading { margin: 40px 0; text-align: center; }
.loading:not(:last-child) { display: none; }
.spin { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--track); border-top-color: var(--band); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* A PDF: pages drawn on the server, without their paper margins, on the same panels as everything else. */
.pg { position: relative; overflow: hidden; margin-bottom: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; scroll-margin-top: 8px; }
.pg img { display: block; width: 100%; height: 100%; }
.pg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg text { fill: transparent; font-family: Georgia, serif; }
.pg text::selection { fill: transparent; background: rgba(60, 120, 230, .35); }
.pg rect { fill: transparent; }
.pg a:hover rect { fill: rgba(60, 120, 230, .14); }
.pic { display: none; position: absolute; }
/* At night the page goes dark to match the panel. The pictures on it are turned back, because a photo isn't ink. */
:root.dark .pg img { filter: invert(1) hue-rotate(180deg) var(--night, contrast(.66)); }
:root.dark .pic { display: block; -webkit-backdrop-filter: var(--unnight, contrast(1.515)) hue-rotate(180deg) invert(1); backdrop-filter: var(--unnight, contrast(1.515)) hue-rotate(180deg) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .pg img { filter: invert(1) hue-rotate(180deg) var(--night, contrast(.66)); }
  :root:not(.light) .pic { display: block; -webkit-backdrop-filter: var(--unnight, contrast(1.515)) hue-rotate(180deg) invert(1); backdrop-filter: var(--unnight, contrast(1.515)) hue-rotate(180deg) invert(1); }
}
.side.toc { grid-row: 2; position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 24px); overflow-y: auto; margin-top: 18px; }
.toc .sub a { padding-left: 16px; }
/* no choice is Auto, so the page can say which is on without the server knowing anything but the class */
:root:not(.light):not(.dark) [value="auto"], .light [value="light"], .dark [value="dark"] { color: var(--ink); font-weight: bold; }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.search button { display: none; } /* Enter does it, in the eras that don't show a button */
.foot { display: flex; align-items: baseline; gap: 18px; }
.foot > a { margin-right: auto; }
.foot button { padding: 0; border: 0; background: none; color: var(--soft); font: inherit; }
.foot button:hover { text-decoration: underline; }
.pg, .entry, .mine, #foot { scroll-margin-top: var(--under-header, 8px); }
.pg { content-visibility: auto; }
@media (max-width: 760px) {
  .cols { display: flex; flex-direction: column; align-items: stretch; }
  .main { order: -1; }
  .side.toc { position: static; max-height: none; }
}
/* A thing in a list: a picture of one shape, its title, where it's from. Without a picture, a cover made of type. */
.card { display: block; text-decoration: none; }
.pic { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover { position: absolute; inset: 0; display: flex; overflow: hidden; overflow-wrap: anywhere; background-color: var(--cover); color: var(--on-cover); }
.kind { position: absolute; left: 5px; bottom: 5px; padding: 0 5px; color: #fff; font-size: 11px; line-height: 16px; background: rgb(25 22 18 / .82); border-radius: 3px; }
.card h3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.card small { display: flex; gap: .35em; white-space: nowrap; }
.card small span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card small time { flex: none; }
.card small time::before { content: "· "; }
.eyebrow time::before { content: " · "; }
.done .pic { opacity: .55; }
.filters h4 { margin: 0; }
.filters summary { cursor: pointer; }
:root.dark .k-paper img { filter: invert(1) hue-rotate(180deg) var(--night, contrast(.66)); }
@media (prefers-color-scheme: dark) { :root:not(.light) .k-paper img { filter: invert(1) hue-rotate(180deg) var(--night, contrast(.66)); } }
/* A plain page, as they were in 2010: a colored band, tabs, one column to read and one to narrow it down. See docs/DESIGN.md. */
:root { --ui: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif; --head: "Helvetica Neue", Helvetica, Arial, sans-serif; --read: Georgia, "Times New Roman", Times, serif;   --band: light-dark(#d9601a, #a84a12); --band-dark: light-dark(#b84d10, #7a360c); --accent: light-dark(#b84d10, #f0964f); --link: light-dark(#2a5db0, #7fb2f0);
  --text: light-dark(#333, #d8d2c4); --ink: light-dark(#222, #eee8da); --title: light-dark(#1a1a1a, #f2ecde); --gone: light-dark(#777, #a09889); --soft: light-dark(#666, #b0a899); --hush: light-dark(#6b6b6b, #a09889);
  --page: light-dark(#f4f0e6, #1e1b17); --panel: light-dark(#fff, #2d2828); --tint: light-dark(#faf7f0, #262220); --hover: light-dark(#ebe5d6, #38322c); --sunk: light-dark(#f5f3ec, #221f1c);
  --line: light-dark(#ddd8cc, #453e36); --rule: light-dark(#eee9de, #3b3530); --track: light-dark(#d9d2c1, #4a433a);
  --note: light-dark(#fbf8ec, #322c22); --note-line: light-dark(#e8e0c7, #4f4633); --note-rule: light-dark(#eee7d0, #453d2d);
  --btn: light-dark(#f7f4ec, #3a342d); --btn-ink: light-dark(#222, #eee8da); --btn-line: light-dark(#bdb6a6, #5e564b); --btn-hover: light-dark(#8f8877, #857c6e);
  --field: light-dark(#fff, #262220); --field-ink: light-dark(#222, #eee8da); --field-line: light-dark(#c9c2b1, #5e564b);
}
:root.light { color-scheme: light; }
body { margin: 0; color: var(--text); font: 13px/1.5 var(--ui); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: 980px; max-width: 100%; margin: 0 auto; padding: 0 12px; }
main.wrap { min-height: 60vh; }
.top { background: var(--band); }
.bar { display: flex; align-items: center; gap: 18px; height: 50px; }
.logo { color: #fff; font: bold 32px/50px var(--head); letter-spacing: -.035em; }
.logo:hover { text-decoration: none; }
.search { flex: 0 1 300px; margin: 0 0 0 6px; }
.search input { width: 100%; height: 26px; padding: 0 9px; border: 1px solid var(--band-dark); border-radius: 3px; font: 13px var(--ui); color: var(--field-ink); background: var(--field); }
.you { margin-left: auto; color: #fff; font-size: 13px; font-weight: bold; }
.you.on { text-decoration: underline; }
.tabs { background: var(--band-dark); }
.tabs .wrap { display: flex; gap: 2px; padding-top: 5px; overflow-x: auto; }
.tabs a { flex: none; padding: 5px 13px 6px; color: #fff; font-size: 13px; font-weight: bold; border-radius: 4px 4px 0 0; }
.tabs a:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.tabs a.on { color: var(--ink); background: var(--page); }
h1.page { margin: 18px 0 2px; font: bold 22px/1.2 var(--head); letter-spacing: -.01em; color: var(--ink); }
.page-sub { margin: 0 0 4px; color: var(--soft); font-size: 13px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 7px; }
section:first-child > .section-head { margin-top: 0; }
.section-head h2 { margin: 0; font: bold 16px/1.2 var(--head); color: var(--ink); }
.end { margin: 26px 0 8px; text-align: center; color: var(--soft); font: bold 14px var(--head); }
.empty { margin: 0; padding: 34px 20px; text-align: center; color: var(--soft); font-size: 13px; }
.who { font-weight: bold; }
.side section { margin-bottom: 18px; }
.side h4 { margin: 0 0 4px; padding-bottom: 3px; font: bold 12px var(--ui); color: var(--ink); border-bottom: 1px solid var(--line); }
.side h4 a { color: inherit; }
.side ul { margin: 0; padding: 0; list-style: none; }
.side li a { display: block; padding: 2px 6px; margin: 0 -6px; border-radius: 3px; }
.side li a:hover { background: var(--hover); text-decoration: none; }
.side li a.on { color: #fff; font-weight: bold; background: var(--band-dark); }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 16px 0 4px; color: var(--soft); }
.btn { display: inline-block; padding: 3px 11px; color: var(--btn-ink); font: 13px/18px var(--ui); white-space: nowrap; border: 1px solid var(--btn-line); border-radius: 3px; background: var(--btn); }
.btn:hover { text-decoration: none; border-color: var(--btn-hover); }
.btn.small { padding: 1px 8px; font-size: 11px; }
.btn.on { color: #fff; font-weight: bold; border-color: var(--band-dark); background: var(--band-dark); }
.btn.go { color: #fff; font-weight: bold; border-color: var(--band-dark); background: var(--band-dark); }
.crumbs { display: flex; justify-content: space-between; gap: 12px; padding-top: 13px; }
.pn { display: flex; gap: 12px; white-space: nowrap; }
.it-head { margin-top: 8px; }
.it-head h1 { margin: 0; font: bold 26px/1.2 var(--read); color: light-dark(#111, #f2ecde); overflow-wrap: anywhere; }
.it-meta { margin: 4px 0 0; color: var(--soft); }
.rec, .side li { font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.why { padding: 8px 11px 9px; background: var(--note); border: 1px solid var(--note-line); border-radius: 5px; }
.side .why h4 { padding: 0; border: 0; }
.notice { padding: 28px 22px; text-align: center; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
.notice p { margin: 0 0 12px; }
.mine { margin-top: 18px; scroll-margin-top: 12px; }
.mine label { display: block; margin-bottom: 3px; font-weight: bold; color: var(--ink); }
.mine textarea { display: block; width: 100%; min-height: 80px; margin-bottom: 5px; padding: 6px 8px; resize: vertical; color: var(--field-ink); font: 12px/1.5 var(--ui); background: var(--field); border: 1px solid var(--field-line); border-radius: 3px; }
.sheet { padding: 24px clamp(16px, 6%, 40px) 36px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 5px; font: 17px/1.6 var(--read); overflow-wrap: break-word; }
.byline { margin: 0 0 16px; font: 12px var(--ui); color: var(--soft); }
.sheet img { display: block; max-width: 100%; height: auto; margin: 1em auto; background: light-dark(transparent, #fff); }
.sheet blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid light-dark(#ddd, #453e36); }
.sheet pre { overflow-x: auto; padding: 10px 12px; font: .8em/1.45 Menlo, Monaco, monospace; background: var(--sunk); }
.sheet code { font: .88em Menlo, Monaco, monospace; }
.sheet table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .84em; }
.sheet td, .sheet th { padding: 3px 8px; border: 1px solid light-dark(#ddd, #453e36); }
.sheet figcaption { font: 12px/16px var(--ui); color: var(--soft); text-align: center; }
.sheet h1, .sheet h2, .sheet h3 { line-height: 1.25; margin: 1.4em 0 .5em; }
.thin { margin: 26px 0 0; padding: 11px 13px; text-align: center; font: 13px/19px var(--ui); background: var(--tint); border: 1px solid var(--line); }
.pg-bar { margin: 0 0 7px; color: var(--hush); font-size: 11px; }
.pg-bar a { color: var(--soft); }
.abstract { padding: 22px 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; font: 15px/1.55 var(--read); }
.abstract p:not(.byline) { margin: 0 0 14px; }
.embed { display: block; width: 100%; height: 232px; border: 0; background: #1a1a1a; }
.player { padding: 13px 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
.ep-now { margin: 0 0 8px; font-weight: bold; font-size: 13px; color: var(--ink); }
.player audio { display: block; width: 100%; }
.eps { margin: 12px 0 0; padding: 4px 0 4px 34px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.eps li { padding: 3px 12px 3px 0; }
.eps li.on a { font-weight: bold; color: var(--accent); }
.eps span { color: var(--hush); font-size: 11px; }
.prose { max-width: 62ch; font-size: 13px; line-height: 1.6; }
.foot { padding-top: 28px; padding-bottom: 26px; font-size: 11px; }
.foot a { color: var(--soft); }
.choose { color: var(--hush); }
/* A pinboard: framed snapshots on the cream page */
.filters { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 15px; margin: 12px 0 14px; font-size: 14px; }
.filters h4 { display: none; }
.filters .on { color: var(--ink); font-weight: bold; }
.filters summary { color: var(--link); }
.filters details[open] > div { position: absolute; z-index: 2; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 3px 15px; margin-top: 5px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 2px 6px rgb(40 30 10 / .2); }
.surprise { margin-left: auto; font-weight: bold; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.card { padding: 6px 6px 9px; color: var(--title); background: var(--panel); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 1px 2px rgb(60 45 15 / .12); }
.card:hover { text-decoration: none; border-color: var(--btn-hover); }
.card:visited { color: var(--gone); }
.card h3 { margin: 7px 2px 2px; font: bold 15px/1.25 var(--read); }
.card small { margin: 0 2px; color: var(--soft); font-size: 12px; }
.pic { box-shadow: 0 0 0 1px light-dark(#e6e1d3, #3b3530); background: var(--tint); }
.cover { align-items: center; justify-content: center; padding: 12px; --on-cover: #fff; font: bold 18px/1.15 var(--read); text-align: center; background-image: linear-gradient(rgb(255 255 255 / .1), rgb(0 0 0 / .14)); box-shadow: inset 0 0 0 4px rgb(255 255 255 / .18); }
.c0 { --cover: #7a4a6e; } .c1 { --cover: #3f6b6b; } .c2 { --cover: #8a5a2b; } .c3 { --cover: #4a5f8a; } .c4 { --cover: #6b6a2e; } .c5 { --cover: #8a4040; } .c6 { --cover: #3f6b48; } .c7 { --cover: #5f4f7a; }
.no-pic { display: grid; grid-template-columns: minmax(0, 1fr); }
.no-pic .pic, .no-pic h3 { grid-area: 1 / 1; }
.no-pic .cover { font-size: 0; }
.no-pic .pic { width: 100%; min-height: 100%; }
.no-pic h3 { z-index: 1; align-self: center; margin: 0; padding: 12px 14px; color: #fff; font: bold 16px/1.22 var(--read); text-align: center; -webkit-line-clamp: 6; }
.no-pic small { margin-top: 7px; }
.pick { margin-bottom: 18px; }
.pick .card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 8px 18px 8px 8px; color: var(--title); }
.pick-words { display: block; }
.pick .no-pic { grid-template-columns: minmax(0, 1fr); padding: 8px; }
.pick .no-pic .pic, .pick .no-pic .pick-words { grid-area: 1 / 1; }
.pick .no-pic .pic { aspect-ratio: auto; height: 100%; }
.pick .no-pic .pick-words { z-index: 1; padding: 34px 40px; color: #fff; text-align: center; }
.pick .no-pic .eyebrow { color: #fff; }
.eyebrow { color: var(--soft); font-size: 12px; font-weight: bold; }
.pick h2 { margin: 3px 0 7px; font: bold 25px/1.18 var(--read); }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pick .card { grid-template-columns: 1fr; padding: 8px; gap: 8px; } .pick h2 { font-size: 21px; } }
@media (max-width: 760px) {
  .side { margin-top: 18px; }
  .bar { gap: 10px; }
  .search { flex: 1 1 auto; margin: 0; }
  .logo { font-size: 26px; }
  .it-head h1 { font-size: 21px; }
}

.choose [value="2010"] { color: var(--ink); font-weight: bold; }

/* A cover: a book jacket. A keyline, the site's name small at the top, and the title in Georgia at whatever size fills it. */
.no-pic .cover { align-items: flex-start; padding: 13px 8px 0; font: bold 10px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; background-image: linear-gradient(rgb(255 255 255 / .09), rgb(0 0 0 / .1)); box-shadow: inset 0 0 0 5px var(--cover), inset 0 0 0 6px rgb(255 255 255 / .42); }
.no-pic:hover .cover { background-image: linear-gradient(rgb(255 255 255 / .16), rgb(0 0 0 / .04)); }
.no-pic h3 { padding: 26px 14px 12px; font-size: 17px; line-height: 1.2; text-wrap: pretty; }
.no-pic.t-short h3 { font-size: 20px; line-height: 1.16; }
.no-pic.t-long h3 { padding: 26px 14px 10px; font-size: 14px; line-height: 1.22; -webkit-line-clamp: 5; }
.pick .no-pic .cover { font-size: 0; }
@media (max-width: 640px) { .no-pic .cover { font-size: 0; } .no-pic h3, .no-pic.t-short h3, .no-pic.t-long h3 { padding: 13px 12px; font-size: 14px; } .no-pic.t-short h3 { font-size: 17px; } }