dl.kv{display:grid;grid-template-columns:8em minmax(0,1fr);column-gap:var(--space-4)}
dl.kv dt,dl.kv dd{padding:var(--space-2) 0;border-top:1px solid var(--guide)}
dl.kv dt{color:var(--mute)}
dl.kv dd{min-width:0;overflow-wrap:anywhere;font:400 var(--type-caption)/1.5 var(--mono)}

/* The collection rail becomes wrapped rows below 900 px. */
body:has(dialog[open]){overflow:hidden}
.skip{position:absolute;top:var(--space-3);left:-9999px;z-index:var(--layer-toast);padding:var(--space-2) var(--space-3);background:var(--ink);color:var(--ground)}
.skip:focus{left:var(--space-3)}
.portal-grid{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.side{background:var(--deep)}
.rail{position:sticky;top:0;display:flex;flex-direction:column;gap:var(--space-5);min-height:100dvh;max-height:100dvh;overflow:auto;padding:var(--space-5) var(--space-5)}
.rail h2{margin-bottom:var(--space-2)}
.rail-list{display:grid;gap:var(--space-1)}
.rail-list a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);padding:var(--space-2) var(--space-2);text-decoration:none}
.rail-list a:hover{text-decoration:underline;text-underline-offset:.18em}
/* Current: weight and the 2px ink edge on the row, no fill. */
.rail-list a[aria-current]{font-weight:600;box-shadow:inset 2px 0 0 var(--ink)}
.rail-list b{font:400 var(--type-caption)/1.5 var(--mono)}
.btn{display:inline-block;padding:var(--space-2) var(--space-3);border:1px solid var(--ink);font:400 var(--type-small)/1.2 var(--sans);text-decoration:none}
.btn:hover{background:var(--deep)}
.btn.primary{background:var(--lime);color:var(--on-lime);border-color:var(--lime);font-weight:600}
.lounge-access summary{cursor:pointer;list-style:none;color:var(--mute)}
.lounge-access summary:hover,.lounge-access[open] summary{color:var(--ink)}
.lounge-access summary::-webkit-details-marker{display:none}
.lounge-access p{margin-top:var(--space-3);font-size:var(--type-small)}
.lounge-access code{font:400 var(--type-caption)/1.5 var(--mono);overflow-wrap:anywhere}
.instruments{display:grid;gap:var(--space-5)}
.census-box summary{list-style:none}
.census-box summary::-webkit-details-marker{display:none}
.census{display:grid;gap:var(--space-1)}
.cell{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-2);text-align:left}
.cell .lab{font:400 var(--type-small)/1.5 var(--sans)}
.cell b{font:400 var(--type-caption)/1.5 var(--mono)}
.cell:hover{background:var(--ground)}
/* A census filter is a toggle: pressed is the deep fill, an ink outline and weight 600,
   as in the Lounge; on the deep side the ink ring carries the state. */
.cell[aria-pressed="true"]{background:var(--deep);box-shadow:inset 0 0 0 1px var(--ink);font-weight:600;transition:none}
.cell[aria-pressed="true"] .lab{font-weight:600}
.find{display:block}
.find .sign{display:block;margin-bottom:var(--space-1)}
.find input{width:100%;min-width:0;padding:var(--space-1) 0 var(--space-1);border-bottom:1px solid var(--ink);font-size:var(--type-small)}
.find input::placeholder{color:var(--mute);opacity:1}
.theme-toggle{align-self:flex-start;margin-top:auto;padding:0;color:var(--mute)}
.theme-toggle:hover{color:var(--ink)}
.mainc{min-width:0;padding:var(--space-5) var(--margin) 0;overflow-wrap:anywhere}
.intro{padding-bottom:var(--space-5);border-bottom:1px solid var(--ink)}
/* Display and statements set in the wordmark's cut. */
.display{max-width:22ch;font:var(--cut-weight) var(--type-display)/var(--leading-display) var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking)}
.deck{max-width:66ch;margin-top:var(--space-4);color:var(--mute)}
/* The Clojure lead keeps its links and lineage; its two columns are a record. */
.lead{padding:var(--space-5) 0 var(--space-6);border-bottom:1px solid var(--rule)}
.lead-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-5) var(--space-6);align-items:start}
.lead-piece{display:contents}
a.plate{grid-column:1;grid-row:1 / span 2;display:block;position:relative;isolation:isolate;max-width:400px;background:var(--plate)}
.lead-text{grid-column:2;min-width:0}
.lead-text .context{color:var(--mute);font:400 var(--type-caption)/1.5 var(--mono)}
.lead-text h2{margin:var(--space-1) 0 var(--space-4);font:var(--cut-weight) var(--type-statement)/var(--leading-statement) var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking)}
.lead-text p{max-width:66ch}
.lineage{display:grid;gap:var(--space-1);margin-top:var(--space-4)}
.kin-card{position:relative;isolation:isolate;display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--space-2);align-items:center;min-width:0;padding:var(--space-2) 0;border:0;border-top:1px solid var(--guide);color:inherit;text-align:left;text-decoration:none}
.kin-card:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.kin-card .nm{font:400 var(--type-caption)/1.45 var(--mono);overflow-wrap:anywhere}
.kin-card .nums{display:block;color:var(--mute);font:400 var(--type-caption)/1.45 var(--mono)}
.kin-card .pct{font:inherit;color:var(--ink)}
.lead-text h2 a{text-decoration:none}
.lead-text h2 a:hover,.lead-text h2 a:focus-visible,.kin-card:hover .nm,.kin-card:focus-visible .nm,.also a:hover b,.also a:focus-visible b{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
.also{grid-column:2;min-width:0}
.also .label{margin-bottom:var(--space-1);color:var(--mute)}
.also a{position:relative;isolation:isolate;display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-3);align-items:center;padding:var(--space-2) 0;border-top:1px solid var(--guide);text-decoration:none}
.also a:last-child{border-bottom:1px solid var(--guide)}
.also b{display:block;font:400 var(--type-caption)/1.45 var(--mono)}
.also small{display:block;margin-top:var(--space-1);color:var(--mute);font:400 var(--type-caption)/1.45 var(--mono)}
/* While a search is typed the query takes the display slot and the newest record folds to one caption row. */
.find-clear{margin-top:var(--space-3)}
.mainc[data-searching] .lead{padding:var(--space-3) 0}
.mainc[data-searching] .lead-in{grid-template-columns:52px minmax(0,1fr);gap:0 var(--space-3);align-items:center}
.mainc[data-searching] a.plate{grid-column:1;grid-row:1;width:52px;max-width:52px}
.mainc[data-searching] .lead-text{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5em;font:400 var(--type-caption)/1.45 var(--mono)}
.mainc[data-searching] .lead-text::before{content:"Newest";order:-2;color:var(--mute)}
.mainc[data-searching] .lead-text h2{order:-1;margin:0;font:inherit;letter-spacing:0}
.mainc[data-searching] .lead-text .context{font:inherit}
.mainc[data-searching] .lead-text .kv,.mainc[data-searching] .lineage,.mainc[data-searching] .also{display:none}
.desknav{padding:var(--space-4) 0 var(--space-3);border-bottom:1px solid var(--rule)}
.desknav ul{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4)}
.desknav li{display:flex;align-items:baseline}
.desknav li:has(> a[hidden]){display:none}
.desknav a,.desknav .more button{text-decoration:none}
.desknav a:hover{text-decoration:underline;text-underline-offset:.18em}
.desknav .more button:hover{color:var(--ink)}
.desknav .more button{color:var(--mute)}
.desknav:not(.all) li[data-rest]{display:none}
.desk{margin-top:var(--space-6);scroll-margin-top:var(--space-4)}
.desk-head h2{font-size:var(--type-head)}
.desk-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-4)}
.desk-head .count{color:var(--mute);font:400 var(--type-caption)/1.5 var(--mono)}
/* A day's wall is one ruled sheet: cells share guide hairlines under a rule. */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(176px,100%),1fr));gap:0;margin:var(--space-4) 0 var(--space-3);border-top:1px solid var(--rule);border-left:1px solid var(--guide)}
.wall>.piece{padding:var(--space-3) var(--space-3) var(--space-5);border-right:1px solid var(--guide);border-bottom:1px solid var(--guide)}
.piece{position:relative;isolation:isolate;display:grid;align-content:start;min-width:0;text-decoration:none;font:400 var(--type-caption)/1.45 var(--mono)}
.cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5em;margin-top:var(--space-2);min-width:0}
.cap .name{flex:1;min-width:0;overflow-wrap:anywhere}
.piece:hover .name,.piece:focus-visible .name{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
.caption-detail{flex-basis:100%;color:var(--mute)}
/* The record window shows true color on a deep sage plate. */
dialog.plate{width:min(860px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:auto;border:1px solid var(--ink);background:var(--ground);color:var(--ink)}
dialog.plate::backdrop{background:var(--veil)}
.viewer{display:grid;grid-template-columns:minmax(180px,300px) minmax(0,1fr);align-items:start}
.stage{min-width:0}
.art{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:contain}
.art.waiting{opacity:0}
.stage-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2);padding:var(--space-3)}
.navb{padding:var(--space-2) var(--space-3);border:1px solid var(--ink);font:400 var(--type-small)/1.2 var(--sans)}
.navb:hover{background:var(--deep)}
.counter{color:var(--mute);font:400 var(--type-caption)/1.5 var(--mono)}
.record{min-width:0;padding:var(--space-5) var(--space-5) var(--space-5)}
.rec-eyebrow{color:var(--mute);font:400 var(--type-caption)/1.5 var(--mono)}
.rec-name{margin:var(--space-1) 0 var(--space-4);font:var(--cut-weight) var(--type-statement)/var(--leading-statement) var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking)}
/* The serif italic has one job: the voice of cursed things. */
.cursed-name,.rec-name.cursed-name,.lead-text h2.cursed-name{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;letter-spacing:0}
.rec-rows.kv{display:block}
.rec-rows > div{display:grid;grid-template-columns:7em minmax(0,1fr);column-gap:var(--space-4)}
.rec-sec{margin-top:var(--space-3)}
.rec-sec .label{color:var(--mute);margin-bottom:var(--space-1)}
.kin{display:grid;gap:var(--space-1)}
.mix{display:grid;gap:var(--space-1);font:400 var(--type-caption)/1.5 var(--mono)}
.mix li{display:flex;justify-content:space-between;gap:var(--space-2);padding:var(--space-1) 0}
.mix b{font-weight:400;white-space:nowrap}
.rec-full{display:inline-block;margin-top:var(--space-5)}
/* Never mind is a dismiss: plain mute text. */
.rec-close{display:block;margin-top:var(--space-3);padding:var(--space-2) 0;border:0;color:var(--mute)}
.rec-close:hover{color:var(--ink)}
@media (max-width:899px){
  .portal-grid{display:block}.side{border-bottom:1px solid var(--ink)}
  .rail{position:static;min-height:0;max-height:none;padding:var(--space-5) var(--margin);gap:var(--space-4);overflow:visible}
  .lounge-access{align-self:flex-start}
  .rail-list,.census{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-2)}
  .rail-list li,.census li{display:flex;align-items:baseline}
  .rail-list a,.cell{display:inline-flex;width:auto;gap:.35em;padding:var(--space-1) var(--space-2)}
  .rail-list a[aria-current]{box-shadow:inset 0 -2px 0 var(--ink)}
  .census-box summary{cursor:pointer}
  .census-box summary h2::after{content:"show";margin-left:.5em;color:var(--mute);font:400 var(--type-small)/1.5 var(--sans);font-stretch:100%;letter-spacing:0}
  .census-box[open] summary h2::after{content:"hide"}
  .find{max-width:24em}.instruments{gap:var(--space-4)}
  .lead-in{grid-template-columns:minmax(0,1fr)}
  a.plate{grid-column:1;grid-row:auto;width:100%}
  .lead-text,.also{grid-column:1}
}
@media (max-width:599px){
  .wall{grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr))}
  .wall>.piece{padding:var(--space-2) var(--space-2) var(--space-3)}
  .viewer{grid-template-columns:minmax(0,1fr)}
  .stage .art-plate{aspect-ratio:auto}
  .stage .art{max-height:40dvh;aspect-ratio:auto;object-fit:contain}
  .record{padding:var(--space-4)}.rec-rows > div{grid-template-columns:6em minmax(0,1fr)}
}
:root[data-theme="light"] .rail .sign,:root[data-theme="light"] .rail input::placeholder{color:var(--ink)}
@media (forced-colors:active){
  .rail-list a[aria-current],dialog.plate{border-color:CanvasText}
}
@media print{.side,.skip,.desknav{display:none}.portal-grid{display:block}.mainc{padding:0}.piece{break-inside:avoid}}