/* The anti-library: a searchable list in the personal site's editorial frame. */
.antilibrary [hidden]{display:none!important}
.antilibrary{padding-bottom:90px;min-height:70vh}
/* The headline takes the left of the top section and the open list's small illustration fills the space beside
   it; the two text columns sit underneath, with the headline centred on the picture so the gap stays even. */
.al-intro{padding:55px 0 50px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head art" "body body";gap:0 24px;align-items:center}
.al-intro-head{grid-area:head}
.al-intro h1{font-size:clamp(50px,6.8vw,96px);margin:22px 0 0;max-width:7.4em}
.al-intro h1 em{color:var(--rust)}
.al-intro-body{grid-area:body;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start;margin-top:34px}
.al-intro-body .case-deck{font-size:19px;line-height:1.55;max-width:none}
.al-intro-deck .case-deck+.case-deck{margin-top:18px}
.al-intro-note{color:var(--muted);font-size:16px;border-left:1px solid var(--rust);padding-left:22px}
.al-intro-note p+p{margin-top:14px}
.al-intro cite{font-style:italic}
.al-term{font-style:italic;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rust);text-decoration-thickness:2px;text-underline-offset:5px}

.al-browser{border-top:1px solid var(--ink)}
.al-tabs{display:flex;gap:30px;padding:22px 0 0;flex-wrap:wrap}
.al-tabs button{font:inherit;font-family:var(--serif);font-size:30px;letter-spacing:-.04em;background:none;border:0;padding:0 0 8px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.al-tabs button span{font-family:var(--sans);font-size:11px;letter-spacing:.08em;vertical-align:super;margin-left:3px}
.al-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--rust)}
.al-tabs button:hover{color:var(--rust)}
.al-tabs button:focus-visible,.al-button:focus-visible,.al-controls input:focus-visible,.al-controls select:focus-visible,.al-item:focus-visible{outline:3px solid var(--rust);outline-offset:3px}

/* The combined still life (record, books, television, reel) sits beside the headline on every tab, edges feathered
   into the paper. The medium's own picture is the small one at the end of the tab row; like everything on the site
   it changes without motion, staying hidden until the new file has loaded, then swapping in. */
/* The still life sits centred in the space right of the headline and level with it (the label above the headline
   is why it drops 36px), like the path-page photos. */
.al-art{grid-area:art;margin:36px 0 0;width:min(100%,400px);justify-self:center;aspect-ratio:3/2;overflow:hidden}
.al-art img,.al-medium img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse farthest-side at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse farthest-side at 50% 50%,#000 72%,transparent 100%)}
.al-tabrow{display:flex;align-items:center;gap:40px}
.al-tabs{min-width:0}
.al-medium{order:-1;margin:16px 0 0;width:176px;aspect-ratio:3/2;flex:none;overflow:hidden}
.al-medium[hidden]{display:none}
.al-medium img{opacity:0}.al-medium.is-shown img{opacity:1}
.al-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:14px 20px;padding:26px 0 18px;align-items:end;position:sticky;top:var(--sticky-top,0px);z-index:3;background:var(--paper);border-bottom:1px solid var(--line)}
.al-controls .label,.al-flags legend{display:block;color:var(--muted);margin-bottom:6px}
.al-controls input[type=search],.al-controls select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:0;padding:10px 12px;height:47px;box-sizing:border-box}
.al-controls select{appearance:none;padding-right:34px;text-overflow:ellipsis;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.al-controls input[type=search]{border-color:var(--ink)}
.al-field[hidden]{display:none}
/* Filters in use sit beside the count as chips that take themselves off; nothing shows when nothing is narrowed. */
.al-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0}
.al-applied{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.al-chip{font:inherit;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--ink);border-radius:999px;padding:5px 8px 5px 13px;min-height:32px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;max-width:100%}
.al-chip span{font-size:16px;line-height:1;color:var(--muted)}
.al-chip:hover{border-color:var(--rust);color:var(--rust)}
.al-chip:hover span{color:var(--rust)}
.al-chip:focus-visible,.al-tag:focus-visible,.al-check input:focus-visible,.al-controls select:focus-visible,.al-controls input[type=search]:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
.al-check{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;min-height:40px;padding:0 6px}
.al-check input{width:16px;height:16px;margin:0;accent-color:var(--ink)}

.al-status{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0 6px;font-size:14px;color:var(--muted)}
.al-status .al-actions{flex:none}
.al-actions{display:flex;gap:10px;flex-wrap:wrap}
.al-button{font:inherit;font-size:13px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:9px 16px;cursor:pointer;min-height:40px}
.al-button:hover{background:var(--rust);border-color:var(--rust)}
.al-button:disabled{opacity:.45;cursor:default}
.al-button.al-quiet{background:none;color:var(--ink)}
.al-button.al-quiet:hover{color:var(--rust);background:none}

.al-part{color:var(--rust);margin:60px 0 0;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.al-shelf h2{display:flex;align-items:baseline;gap:16px;font-size:clamp(30px,3.4vw,44px);margin:44px 0 6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.al-part+.al-shelf h2{margin-top:26px}
.al-shelf h2 .index{font-size:20px;letter-spacing:0}
.al-paths h2 .al-shelf-name{font-style:italic}
/* Paths follow a person, threads follow an idea: a quiet note after the heading, 20px from it on its baseline. */
.al-shelf-note{margin-left:4px;font-family:var(--sans);font-size:14px;font-weight:400;font-style:normal;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--muted);min-width:0}
.al-paths-body{padding:16px 0 8px}
.al-paths-names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.al-paths-names a{display:inline-block;font-family:var(--serif);font-size:18px;letter-spacing:-.01em;padding:4px 12px;border:1px solid var(--line);text-decoration:none}
.al-paths-names a:hover,.al-paths-names a:focus-visible{border-color:var(--rust);color:var(--rust)}
.al-paths-names .al-done a{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}
.al-shelf-count{margin-left:auto;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--muted)}
/* The heading is the button that folds its shelf. The mark flips between open and closed without moving. */
.al-shelf-toggle{all:unset;box-sizing:border-box;display:flex;align-items:baseline;gap:inherit;width:100%;cursor:pointer}
.al-shelf-toggle:hover .al-shelf-name{color:var(--rust)}
.al-shelf-toggle:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
.al-fold-mark{font-family:var(--sans);font-size:20px;line-height:1;color:var(--muted);width:20px;text-align:center}
.al-fold-mark:before{content:'−'}
.al-shelf-toggle[aria-expanded=false] .al-fold-mark:before{content:'+'}
.al-shelf-toggle[aria-expanded=false]{color:var(--muted)}
/* Folded shelves stack closer, so a fully folded list reads as a table of contents. */
.al-shelf:has(.al-list[hidden]) + .al-shelf h2{margin-top:22px}
.al-list{display:grid}
.al-item{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.5fr);grid-template-areas:"cover head body";gap:6px 28px;padding:18px 0;border-bottom:1px solid var(--line);scroll-margin:160px;align-items:start}
/* A title off screen skips layout and paint until it scrolls near, so a long list stays quick on phones. The clip
   margin keeps the cover's soft shadow from being cut at the row's edge. */
.al-item{content-visibility:auto;contain-intrinsic-size:auto 150px;overflow-clip-margin:16px}
.al-item-head{grid-area:head;min-width:0}.al-item-body{grid-area:body;min-width:0}.al-tags{grid-area:tags}
.al-cover{grid-area:cover;position:relative;display:block;width:64px;aspect-ratio:2/3;background:var(--cover-paper);overflow:hidden;text-decoration:none;box-shadow:0 3px 10px #302b2818}
[data-cover=square] .al-cover{aspect-ratio:1}
.al-cover span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:28px;color:var(--muted)}
.al-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--cover-paper)}
.al-item h3 a{text-decoration:none}
.al-item h3 a:hover{text-decoration:underline}
.al-ext{font-family:var(--sans);font-size:13px;color:var(--rust);opacity:0}
.al-item h3 a:hover .al-ext,.al-item h3 a:focus-visible .al-ext{opacity:1}
.al-item h3{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.02em;line-height:1.2}
/* The title, creator and year open the title's page as one link: the title link stretches over that block, and
   hovering anywhere on it marks the title the way hovering the title does. */
.al-ident{position:relative;width:fit-content;max-width:100%}
.al-ident h3 a:after{content:'';position:absolute;inset:0}
.al-ident:hover h3 a{text-decoration:underline}
.al-ident:hover .al-ext{opacity:1}
.al-ident h3 a:focus-visible{outline:none}
.al-ident:has(h3 a:focus-visible){outline:3px solid var(--rust);outline-offset:3px}
.al-by{font-size:14px;margin-top:5px}
.al-genres{font-size:12px;color:var(--rust);margin-top:4px;letter-spacing:.01em}
.al-more{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12px}
.al-more a{color:var(--muted);text-underline-offset:3px}
.al-more a:hover{color:var(--rust)}
.al-note{font-size:15px;color:var(--muted);line-height:1.5}
.al-where{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:8px}
/* Titles on the list carry no tags since 2026-10-13 (docs/antilibrary-page.md). The tag styles below stay for the
   digests page, which shows Draft, Digested and Fully read as tags, and for the path link under a creator's name. */
.al-tags{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.al-tag{font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border:1px solid var(--line);white-space:nowrap;color:var(--ink);background:none}
.al-tags li{display:flex}
.al-tag-start{color:var(--rust);border-color:var(--rust)}
.al-tag-done{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* The picked title is simply highlighted; the site does not animate, so neither does this. */
.al-picked{background:var(--highlight);box-shadow:-14px 0 0 var(--highlight),14px 0 0 var(--highlight)}
.al-picked .al-item-head:before{content:'Picked for you';display:block;font-family:var(--sans);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--rust);margin-bottom:4px}
.al-credit{font-size:12px;color:var(--muted);padding-top:40px}
.al-link{font:inherit;color:inherit;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;margin-left:6px}
.al-link:hover{color:var(--rust)}
.al-fold{font-size:13px;color:var(--ink);margin:0 10px 0 0;min-height:40px}
.al-status .al-actions{align-items:center}
.al-link:focus-visible,.al-toggle input:focus-visible,.al-remove:focus-visible{outline:3px solid var(--rust);outline-offset:3px}

/* Finished titles stay on the shelf, struck through. */
.al-done h3 a{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}
.al-done .al-by,.al-done .al-note{color:var(--muted);opacity:.75}
.al-done .al-cover{filter:grayscale(1);opacity:.55}
.al-owner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:10px}
.al-owner-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.al-owner-tags{padding-left:14px;border-left:1px solid var(--line)}
.al-owner-tags .al-toggle{color:var(--muted)}
.al-owner-note{font-size:12px;color:var(--muted);min-height:32px;display:inline-flex;align-items:center}
/* Owner checkboxes: a dashed underline marks a change not yet sent to the site. */
.al-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;min-height:32px;border-bottom:1px solid transparent}
.al-toggle input{width:15px;height:15px;margin:0;accent-color:var(--ink);cursor:inherit}
.al-toggle.al-unsent{border-bottom:1px dashed var(--ink)}
.al-toggle:has(input:disabled){opacity:.5;cursor:default}
.al-remove{font:inherit;font-size:12px;background:none;border:0;color:var(--rust);padding:0;margin-left:auto;cursor:pointer;min-height:32px;text-decoration:underline;text-underline-offset:3px}
.al-owner-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding:12px 16px;background:var(--lavender);font-size:14px}
.al-owner-bar a.al-button{text-decoration:none;display:inline-flex;align-items:center}
.al-owner-bar a.al-button:hover{color:var(--paper)}
.al-owner-bar a.al-button.al-quiet:hover{color:var(--rust)}
.al-empty{padding:50px 0;font-family:var(--serif);font-size:24px;color:var(--muted)}
.al-empty .al-button{margin-top:18px;font-family:var(--sans)}

@media(max-width:1000px){.al-intro{gap:0 24px}.al-item{grid-template-columns:64px minmax(0,1fr) minmax(0,1.4fr);gap:8px 24px}.al-tags{flex-direction:row;flex-wrap:wrap;align-items:flex-start}}
@media(max-width:700px){
.antilibrary{padding-bottom:60px}.al-intro{padding:35px 0 36px}.al-intro h1{font-size:clamp(46px,12vw,59px);max-width:none}
.al-intro{display:block}.al-intro h1{margin-bottom:0}.al-intro-body{grid-template-columns:1fr;gap:26px;margin-top:28px}.al-intro-body .case-deck{font-size:17px}.al-intro-note{font-size:15px}.al-art{grid-area:auto;width:auto;margin:0 -8px}
.al-tabrow{gap:0 18px;flex-wrap:wrap}.al-medium{width:140px;margin:10px 0 0}.al-tabs{flex:none;max-width:100%;gap:16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 0 -20px;padding:18px 20px 0}.al-tabs::-webkit-scrollbar{display:none}.al-tabs button{font-size:23px;white-space:nowrap;flex:none}.al-tabs button span{display:none}
.al-controls{grid-template-columns:1fr;gap:12px;padding:16px 0 14px;position:static}
.al-status{flex-wrap:wrap;gap:12px}.al-summary{display:contents}#al-count{flex:1}.al-applied{order:1;flex:1 1 100%}
.al-shelf h2{font-size:28px;gap:12px;margin-top:36px}
.al-paths .al-shelf-toggle{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px}.al-paths .al-shelf-note{grid-row:2;grid-column:1/-1;margin:0}
.al-item{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"cover head" "cover body";gap:6px 16px;padding:16px 0}.al-cover{width:56px}.al-ext{opacity:1}
.al-item h3{font-size:21px}.al-note{font-size:14px}
}
/* Threads: a header over the titles when an old ?thread= link narrows the list. */
.al-thread-head{margin:34px 0 6px;padding-bottom:18px;border-bottom:1px solid var(--ink);display:grid;grid-template-columns:minmax(0,68ch) minmax(0,300px);justify-content:space-between;align-items:center;gap:0 40px}
.al-thread-art{margin:0;aspect-ratio:3/2;overflow:hidden}.al-thread-art[hidden]{display:none}
.al-thread-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse farthest-side at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse farthest-side at 50% 50%,#000 62%,transparent 100%)}
@media(max-width:700px){.al-thread-head{grid-template-columns:1fr}.al-thread-art{order:-1;width:200px;margin-bottom:6px}}
.al-thread-head .label{color:var(--rust)}
.al-thread-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1.1;margin:8px 0 10px;text-wrap:balance}
.al-thread-head p:not(.label){font-size:16px;line-height:1.55;color:var(--ink)}
.al-thread-head .al-thread-out{font-size:13px;margin-top:10px}
.al-thread-out .al-link{margin:0}
/* Threads aside: each thread links to its own page, like a path, with its stop count. */
.al-threads .al-paths-names a span{font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-left:4px}
.al-paths + .al-paths h2{margin-top:22px}
/* Sorted by creator: a heavier rule where the next creator starts. */
.al-by-creator .al-creator-start{border-top:3px solid var(--ink);margin-top:-1px}
.al-step{font-size:15px;line-height:1.5;color:var(--ink);margin-bottom:8px;padding-left:12px;border-left:2px solid var(--rust)}

/* Artist paths (artist.html): a door, the listening order, then every record by year on one rail, with the
   skipped ones muted. Same paper, serif and rust as the list; nothing moves. */
.ap-head{padding:55px 0 50px}
.ap-back{margin:0 0 26px}
/* Back to albums is a link dressed as the site's filled button: no underline, ink on paper, rust on hover. */
.ap-back a.al-button{display:inline-flex;align-items:center;text-decoration:none;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ap-back a.al-button:hover,.ap-back a.al-button:focus-visible{background:var(--rust);border-color:var(--rust);color:var(--paper)}
.ap-head .label a{text-decoration:none}.ap-head .label a:hover{text-decoration:underline}
.ap-head h1{font-size:clamp(50px,6.8vw,96px);margin:22px 0 26px}
.ap-head h1 em{color:var(--rust)}
.ap-name{text-decoration:none}.ap-name:hover,.ap-name:focus-visible{color:var(--rust)}
.ap-name .al-ext{font-size:.25em;vertical-align:super;opacity:1}
.ap-head .case-deck{font-size:19px;line-height:1.55}
.ap-head .case-deck a{color:var(--rust)}
.ap-head .case-facts{grid-template-columns:repeat(4,minmax(0,1fr));border-top-color:var(--ink)}
.ap-head .case-facts dd{font-family:var(--serif);font-size:18px;letter-spacing:-.02em}
/* A path's photo (artist, author or director) fills the space right of the name, from the Back button to the end of
   the note, in its own shape: about as tall as the name and note beside it (270px), narrower for a portrait, wider
   for a group, so it fills the space without taking over. On phones it sits right under the name, full width, with a
   portrait trimmed to a wide frame so it doesn't push the note off the screen. The text keeps its usual width and the
   photo sits centred in the space left over, so it is as far from the text as from the page's right edge. Colours are
   toned down a little so a bright stage shot sits quietly on the paper. */
.ap-head.ap-has-photo{display:grid;grid-template-columns:minmax(0,720px) minmax(auto,1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:48px;
  grid-template-areas:"back photo" "crumb photo" "title photo" "deck photo" "facts facts"}
.ap-has-photo .ap-back{grid-area:back}.ap-has-photo>.label{grid-area:crumb}.ap-has-photo h1{grid-area:title}.ap-has-photo .case-deck{grid-area:deck}.ap-has-photo .case-facts{grid-area:facts}
.ap-photo{grid-area:photo;margin:0;align-self:center;justify-self:center;--ar:1.333}
.ap-photo img{width:clamp(170px,calc(min(270px,21vw) * var(--ar)),min(420px,32vw));aspect-ratio:var(--ar);object-fit:cover;object-position:50% 25%;background:#e9dfce;
  filter:saturate(.75) sepia(.08) contrast(.95)}
.ap-photo figcaption{margin-top:9px;font-size:11px;line-height:1.45;color:var(--muted);text-align:right;width:0;min-width:100%}
.ap-photo figcaption a{text-decoration:none}.ap-photo figcaption a:hover{color:var(--rust)}
.ap-photo .al-ext{font-size:11px;opacity:1}
/* A thread's spool sits where a path's photo would, smaller and on the paper itself (no frame, no credit), as it does
   over a thread on the list. On phones it stays small above the name instead of running full width. */
.ap-photo.ap-art{--ar:1.5}
.ap-art img{width:clamp(170px,22vw,300px);height:auto;object-fit:contain;background:none;filter:none;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse farthest-side at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse farthest-side at 50% 50%,#000 62%,transparent 100%)}
.ap-section{border-top:1px solid var(--ink);padding-bottom:40px}
.ap-section+.ap-section{border-top:0}
.ap-section:has(> [hidden]){padding-bottom:0}
.ap-section h2{display:flex;align-items:baseline;gap:16px;font-size:clamp(30px,3.4vw,44px);margin:26px 0 6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ap-section h2 .index{font-size:20px;letter-spacing:0}
/* Listening order: bigger covers, the step number as a large rust numeral, and the door on a lavender band. */
.ap-steps{list-style:none;margin:0;padding:0}
.ap-steps .ap-step{grid-template-columns:104px minmax(0,1fr) minmax(0,1.3fr);gap:6px 32px;padding:26px 0;align-items:start}
.ap-steps .al-cover{width:104px;box-shadow:0 4px 14px #302b281f}
.ap-steps .al-item h3{font-size:25px}
.ap-num{font-size:44px;line-height:.9;margin-bottom:12px}
.ap-step{scroll-margin:calc(var(--masthead-h) + 30px)}
.ap-step.ap-door{background:var(--lavender);box-shadow:-28px 0 0 var(--lavender),28px 0 0 var(--lavender);border-bottom-color:transparent}
.ap-step.ap-door .al-note{color:var(--ink)}
.ap-lede{color:var(--muted);font-size:15px;margin:14px 0 22px;max-width:640px}
/* The whole run: one vertical rail, a filled rust dot for each record on the path, a hollow one for the rest. */
.ap-timeline{list-style:none;margin:0;padding:4px 0 0;position:relative}
.ap-timeline:before{content:'';position:absolute;left:96px;top:0;bottom:0;width:1px;background:var(--line)}
.ap-row{display:grid;grid-template-columns:64px minmax(0,1fr) 90px;gap:4px 28px;align-items:baseline;padding:11px 0}
.ap-what{position:relative;padding-left:30px;min-width:0}
.ap-what:before{content:'';position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;background:var(--rust);box-shadow:0 0 0 3px var(--paper)}
.ap-skipped .ap-what:before{background:var(--paper);border:1px solid var(--line);width:7px;height:7px}
.ap-heard .ap-what:before{background:var(--ink);border:0;width:9px;height:9px}
.ap-year{font-family:var(--serif);font-style:italic;color:var(--rust);font-size:18px;text-align:right}
.ap-title{font-family:var(--serif);font-size:21px;letter-spacing:-.02em;line-height:1.25}
.ap-title a{text-decoration:none}.ap-title a:hover{text-decoration:underline}
.ap-credit{font-family:var(--sans);font-size:12px;letter-spacing:0;color:var(--muted)}
.ap-why{font-size:14px;color:var(--muted);margin-top:3px;max-width:720px}
.ap-mark{justify-self:end;font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border:1px solid var(--ink);white-space:nowrap;text-decoration:none}
a.ap-mark:hover{border-color:var(--rust);color:var(--rust)}
.ap-skipped .ap-year,.ap-skipped .ap-title{color:var(--muted)}
.ap-skipped .ap-mark{border-color:var(--line);color:var(--muted)}
.ap-heard .ap-title a{color:var(--muted)}
/* On the list, an artist's path is a link rather than a filter. */
a.al-tag-path{text-decoration:none}
.al-path-link{margin:10px 0 4px}.al-path-link .al-tag{display:inline-block;font-size:11px;padding:5px 11px}
a.al-tag-path:hover{border-color:var(--rust);color:var(--rust)}
@media(max-width:1000px){.ap-steps .ap-step{grid-template-columns:88px minmax(0,1fr) minmax(0,1.2fr)}.ap-steps .al-cover{width:88px}}
@media(max-width:700px){.ap-head{padding:35px 0 36px}.ap-head h1{font-size:clamp(46px,12vw,59px)}.ap-head .case-deck{font-size:17px}
.ap-steps .ap-step{grid-template-columns:72px minmax(0,1fr);gap:6px 18px;padding:20px 0}.ap-steps .al-cover{width:72px}.ap-steps .al-item h3{font-size:22px}.ap-num{font-size:34px;margin-bottom:8px}
.ap-step.ap-door{box-shadow:-20px 0 0 var(--lavender),20px 0 0 var(--lavender)}
.ap-timeline:before{left:66px}.ap-row{grid-template-columns:48px minmax(0,1fr);gap:4px 14px}.ap-what{padding-left:24px}.ap-mark{grid-column:2;justify-self:start;margin-left:24px}.ap-title{font-size:18px}}
.ap .al-owner-bar{margin:0 0 26px}
.ap .al-owner-bar a{color:var(--ink)}
.ap-what .al-owner-actions{margin-top:6px}
@media(max-width:1000px){.ap-head .case-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ap-head .case-facts{grid-template-columns:1fr}}
@media(max-width:700px){.ap-head.ap-has-photo{display:block}.ap-photo{margin:0 0 26px}.ap-photo img{width:100%;aspect-ratio:var(--ar-phone,var(--ar))}.ap-photo figcaption{text-align:left}}
@media(max-width:700px){.ap-art{margin:0 0 6px}.ap-art img{width:200px;aspect-ratio:3/2}}
/* Phones: the count gets its own line above the buttons. */
@media(max-width:700px){
#al-count{flex:1 1 100%}
}