/* Kyle Parker Cunningham — the archive's public pages, direction D
   (ratified 2026-10-15; src/pages/kpc/). C's house — Coelacanth at its
   optical sizes, the apparatus in small capitals, one rubric red, "none
   recorded" said plainly — with A's views (pictures, photograph) set in C's
   faces under .va, and B's (ledger, sheet) keeping their sans and mono
   content under .vb, with their displays in Coelacanth.

   Ported from the mockup's d/style.css. Every face is served from
   /static/kpc/fonts (default-src 'self'); see the README there for where each
   came from and why Coelacanth is OpenType. No local() sources: every reader,
   Kyle included, sees the files this site serves. */

@font-face{font-family:"Coel Text";src:url("fonts/Coelacanth.206fd7ca.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Coel Text";src:url("fonts/Coelacanth-It.45ca254f.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Coel Text";src:url("fonts/Coelacanth-Semibd.9e119ea2.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Coel Display";src:url("fonts/CoelacanthDisplay.73140167.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Coel Display";src:url("fonts/CoelacanthDisplay-It.fc59c9b4.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Coel Caption";src:url("fonts/CoelacanthCaption.802a1d95.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Coel Caption";src:url("fonts/CoelacanthCaption-It.f6816b6d.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin.7150c0ec.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";src:url("fonts/martian-mono-latin.29bf2691.woff2") format("woff2");font-weight:300 500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#fbfaf6; --ink:#1b1a18; --muted:#6f6a61; --line:#d9d4c9; --rubric:#9e2a1e;
  --text:"Coel Text","EB Garamond",Georgia,serif; --display:"Coel Display","Coel Text",Georgia,serif; --caption:"Coel Caption","Coel Text",Georgia,serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif; --mono:"Martian Mono",ui-monospace,Menlo,monospace; --faint:#eeeae2;
  --gutter:clamp(16px,4vw,64px); --max:1400px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#161513; --ink:#e9e4da; --muted:#9b9488; --line:#34312c; --rubric:#e07a68; --faint:#221f1c; color-scheme:dark}}
:root[data-theme=dark]{--bg:#161513; --ink:#e9e4da; --muted:#9b9488; --line:#34312c; --rubric:#e07a68; --faint:#221f1c; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 clamp(17px,.6vw + 13px,20px)/1.45 var(--text);font-feature-settings:"onum" 1,"kern" 1,"liga" 1}
a{color:inherit;text-decoration:none}
a:hover{color:var(--rubric)}
img{display:block;max-width:100%;height:auto}
h1,h2{font-weight:400;margin:0}
.sc{font-family:var(--caption);font-variant-caps:all-small-caps;letter-spacing:.08em;font-size:1.05em}

/* running head */
.run{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:1rem;max-width:var(--max);margin:0 auto;padding:16px var(--gutter);font-family:var(--caption);font-size:.82rem;letter-spacing:.06em;color:var(--muted)}
.run>a{color:var(--ink)}
.run>a span{color:var(--muted)}
.run nav{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;font-variant-caps:all-small-caps;letter-spacing:.1em;font-size:1.05rem}
.run .sec{text-align:right;font-style:italic;font-family:var(--text)}

main{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* title page */
.tp{text-align:center;padding:clamp(56px,10vw,150px) 0 clamp(48px,7vw,100px);border-bottom:1px solid var(--line)}
.tp .pre{font-family:var(--caption);font-variant-caps:all-small-caps;letter-spacing:.14em;color:var(--muted);margin:0 0 1.4rem}
.tp h1{font-family:var(--display);font-size:clamp(3rem,9vw,8.4rem);line-height:.92;letter-spacing:-.012em}
.tp .sub{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,2rem);margin:1.4rem 0 0}
.tp .count{color:var(--rubric);font-family:var(--caption);font-variant-caps:all-small-caps;letter-spacing:.14em;margin:1rem 0 0}

.contents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,72px);padding:clamp(32px,5vw,72px) 0}
.contents h2{font-family:var(--caption);font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:1.05rem;color:var(--muted);margin:0 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--ink)}
.contents h2:not(:first-child){margin-top:2rem}
.lead{list-style:none;margin:0;padding:0}
.lead a{display:flex;align-items:baseline;gap:.4rem;padding:.18rem 0}
.lead .dots{flex:1;border-bottom:1px dotted var(--muted);transform:translateY(-.3em);min-width:1rem}
.lead .n{font-variant-numeric:oldstyle-nums tabular-nums;color:var(--muted)}
.lead.years{columns:2;column-gap:2rem}
.lead.years li{break-inside:avoid}

/* entries */
.entries{list-style:none;margin:0;padding:0}
.entry{display:grid;grid-template-columns:clamp(84px,9vw,132px) minmax(0,1fr);gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);align-items:start}
.entry .pl{display:block}
.entry .pl img{width:100%;aspect-ratio:var(--ar);object-fit:contain;object-position:left top}
.entry .tx{display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:.6rem}
.entry .tx.unnumbered{grid-template-columns:1fr}
.entry .no{color:var(--rubric);font-family:var(--caption);font-size:.85rem;grid-row:span 2;padding-top:.15rem}
.entry p{margin:0;font-size:.98rem;line-height:1.38}
.entry .ti i{font-size:1.08em}
.entry .tail{color:var(--muted);font-size:.9rem;margin-top:.2rem}
.contents .entry{grid-template-columns:72px minmax(0,1fr)}
.contents .entry .tx{grid-template-columns:1fr}
.contents .entry .no{display:none}

/* the catalogue */
.cat-head{padding:clamp(32px,5vw,72px) 0 1.2rem;border-bottom:1px solid var(--ink)}
.cat-head h1{font-family:var(--display);font-size:clamp(2.6rem,5vw,4.6rem);line-height:1}
.find{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:baseline;margin:1.2rem 0 .8rem}
.find input,.find select{font:inherit;font-size:1rem;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--ink);padding:.2rem 0;border-radius:0}
.find input{min-width:min(100%,26ch)}
.find button{font:inherit;font-variant-caps:all-small-caps;letter-spacing:.12em;background:none;color:var(--rubric);border:0;padding:0;cursor:pointer}
.jump{font-variant-numeric:oldstyle-nums;color:var(--muted);margin:0;line-height:1.9;word-spacing:.35em}
.jump a:hover{color:var(--rubric)}
.year{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,5fr);gap:var(--gutter);padding:1.8rem 0;border-bottom:1px solid var(--line)}
.year h2{position:sticky;top:12px;align-self:start;display:grid}
.year h2 span{font-family:var(--display);font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;color:var(--rubric);font-variant-numeric:oldstyle-nums}
.year h2 small{font-family:var(--caption);font-variant-caps:all-small-caps;letter-spacing:.12em;color:var(--muted);font-size:1rem}
.year .entries{columns:2 380px;column-gap:var(--gutter)}
.year .entry{break-inside:avoid}

/* one work: a spread — plate on the verso, the entry on the recto */
.spread{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;padding-top:clamp(16px,2vw,32px);align-items:start}
.verso{padding-right:clamp(24px,4vw,72px);border-right:1px solid var(--line)}
.plate{margin:0}
.plate img{width:100%;max-height:calc(100svh - 110px);object-fit:contain;aspect-ratio:var(--ar)}
.fig{margin:clamp(24px,3vw,48px) 0 0}
.fig figcaption{font-family:var(--caption);font-size:.85rem;color:var(--muted);margin-top:.4rem}
.recto{padding-left:clamp(24px,4vw,72px);position:sticky;top:12px}
.recto .no{color:var(--rubric);margin:0 0 1rem;font-family:var(--caption)}
.tomb{padding-bottom:1rem;border-bottom:1px solid var(--ink);margin-bottom:1rem}
.tomb p{margin:0}
.tomb .h{font-family:var(--display);font-style:italic;font-size:clamp(2rem,3vw,3rem);line-height:1.05;margin-bottom:.4rem}
.prose{padding-bottom:1rem;border-bottom:1px solid var(--ink);margin-bottom:1rem;max-width:36em}
.prose .lede{font-style:italic;font-size:1.08rem;margin:0 0 .8rem}
.prose .narrative p{margin:0 0 .8em}
.prose .narrative p:last-child{margin-bottom:0}
.prose .narrative h2,.prose .narrative h3{font-family:var(--caption);font-variant:small-caps;letter-spacing:.06em;font-size:1rem;font-weight:400;color:var(--muted);margin:1rem 0 .4rem}
.prose .narrative img{max-width:100%;height:auto}
.recto section{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.8rem;padding:.35rem 0}
.recto section h2{color:var(--muted);font-size:1rem;padding-top:.08rem}
.recto section p,.recto section ol{margin:0;font-size:.98rem}
.recto section ol{padding-left:1.1rem}
.recto .nil{color:var(--muted);font-style:italic}
.recto section a{border-bottom:1px solid var(--line)}
.turn{max-width:var(--max);margin:clamp(28px,4vw,56px) auto 0;padding:1rem var(--gutter);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;font-size:.95rem}

/* chapter */
.opener{text-align:center;padding:clamp(48px,8vw,120px) 0 clamp(28px,4vw,56px)}
.opener h1{font-family:var(--display);font-size:clamp(2.8rem,7vw,6.4rem);line-height:.95;font-style:italic}
.opener .facts{color:var(--muted);margin:1rem 0 0}
.plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px) var(--gutter)}
.cp{margin:0}
.cp>a{display:block}
.cp img{width:100%;aspect-ratio:var(--ar);object-fit:contain}
.cp figcaption{margin-top:.5rem;font-size:.98rem}
.cp .n{color:var(--rubric);font-family:var(--caption);margin-right:.3rem}

.colo{max-width:var(--max);margin:clamp(40px,6vw,90px) auto 0;padding:24px var(--gutter) 48px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;text-align:center}
.colo p{max-width:62ch;margin:0 auto}
.colo a{border-bottom:1px solid var(--line)}

@media (max-width:860px){
  .run{grid-template-columns:minmax(0,1fr);gap:.3rem}
  .run .sec{display:none}
  .contents{grid-template-columns:minmax(0,1fr)}
  .year{grid-template-columns:1fr;gap:.6rem}
  .year h2{position:static;grid-auto-flow:column;justify-content:start;align-items:baseline;gap:.8rem}
  .spread{grid-template-columns:minmax(0,1fr)}
  .verso{padding-right:0;border-right:0}
  .recto{padding-left:0;position:static;margin-top:1.4rem}
  .recto section{grid-template-columns:1fr;gap:0}
  .plates{grid-template-columns:minmax(0,1fr)}
  .plate img{max-height:none}
}


/* ================================================================ D */

.nil{color:var(--muted);font-style:italic}

/* the switch between views: links, so it works with no script */
.bar{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
main .bar{padding:0}
.views{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .55rem;margin:.7rem 0 0;font-family:var(--caption);font-variant-caps:all-small-caps;letter-spacing:.1em;font-size:1.08rem;color:var(--muted)}
.views>.sc{font-size:1em;margin-right:.35rem}
.views a{color:var(--ink)}
.views a:hover{color:var(--rubric)}
.views [aria-current]{color:var(--rubric)}
.views .dot{color:var(--line)}
.cat-head .views{margin:.9rem 0 .2rem}


/* A's pictures, in C's faces */
.va .rows{display:flex;flex-wrap:wrap;gap:14px}
.va .rows::after{content:"";flex-grow:999999}
.va .rows .cell{flex:var(--ar) 1 calc(var(--ar) * var(--h));min-width:0}
.va .rows figure{margin:0}
.va .rows img{width:100%;aspect-ratio:var(--ar);object-fit:cover}
.va .rows figcaption{padding-top:.35rem;font-size:.92rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va .rows .n{color:var(--rubric);font-family:var(--caption)}
.va .rows .cell:hover i{color:var(--rubric)}
.va.catalogue .year{grid-template-columns:minmax(100px,.7fr) minmax(0,6fr)}

/* A's photograph, with C's label */
.photo .ph{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:clamp(24px,4vw,72px);padding-top:1rem;align-items:start}
.photo .pics{display:grid;gap:clamp(16px,2vw,28px)}
.photo .pics figure{margin:0}
.photo .lead img{width:100%;max-height:calc(100svh - 140px);object-fit:contain;object-position:left top;aspect-ratio:var(--ar)}
.photo .label{position:sticky;top:16px;padding-bottom:1rem}
.photo .label h1{font-family:var(--display);font-style:italic;font-size:clamp(2.1rem,3.2vw,3.4rem);line-height:1.02;margin-bottom:1rem}
.ph-tomb{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.3rem 1.1rem;margin:0 0 1.2rem;padding:.9rem 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.ph-tomb dt{color:var(--muted);font-size:1rem;padding-top:.05rem}
.ph-tomb dd{margin:0}
.ph-tomb a,.photo .label section a{border-bottom:1px solid var(--line)}
.photo .label section{margin:0 0 1rem}
.photo .label section h2{color:var(--muted);font-size:1rem;margin-bottom:.15rem}
.photo .label ul{list-style:none;margin:0;padding:0;font-size:.97rem}
.photo .label p{margin:0;font-size:.97rem}

/* B's ledger and sheet: sans and mono for the content, the serif for the displays */
.vb{
  --cell:var(--bg);
  font:400 13px/1.55 var(--mono);letter-spacing:.02em;
  .lab{display:block;font:400 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .lab a{color:var(--ink)}
  .lab a:hover{color:var(--rubric)}
  .big{font:400 clamp(44px,5.4vw,92px)/.95 var(--display);letter-spacing:-.01em;margin:.35rem 0 .9rem;overflow-wrap:anywhere}
  .disp{font:400 1.8rem/1 var(--display);margin:0 0 .3rem}
  .sheet{overflow-x:clip;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line);margin-top:1rem}
  .cell{position:relative;grid-column:span 12;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(12px,2vw,24px);background:var(--cell);min-width:0}
  .xh{position:absolute;width:14px;height:14px;pointer-events:none}
  .xh::before,.xh::after{content:"";position:absolute;background:var(--ink)}
  .xh::before{left:6px;top:0;width:1px;height:14px}
  .xh::after{top:6px;left:0;height:1px;width:14px}
  .xh.tl{left:-7px;top:-7px}
  .xh.tr{right:-7px;top:-7px}
  .xh.bl{left:-7px;bottom:-7px}
  .xh.br{right:-7px;bottom:-7px}

  /* ledger */
  .panel{display:grid;gap:14px}
  .find{display:grid;grid-template-columns:2fr 1fr 1.4fr auto;gap:10px;align-items:end;margin:0}
  .find label{display:grid;gap:4px}
  .find input,.find select{font:400 12px var(--mono);letter-spacing:.06em;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--ink);padding:6px 0;border-radius:0;width:100%;min-width:0}
  .find button{font:500 10px var(--mono);letter-spacing:.14em;background:var(--ink);color:var(--bg);border:0;padding:10px 14px}
  .facets{display:flex;flex-wrap:wrap;gap:6px}
  .facets a{font-size:10px;letter-spacing:.12em;border:1px solid var(--line);padding:5px 8px}
  .facets a:hover{border-color:var(--ink)}
  .facets b{font-weight:500;color:var(--muted);margin-left:6px}
  .table{padding:0}
  .row{display:grid;grid-template-columns:64px 44px minmax(0,2.2fr) 52px minmax(0,1.8fr) 96px 120px;gap:14px;align-items:center;padding:8px clamp(12px,2vw,24px);border-bottom:1px solid var(--faint)}
  .row.head{font-size:9.5px;letter-spacing:.14em;color:var(--muted);position:sticky;top:0;background:var(--bg);z-index:2;border-bottom:1px solid var(--line)}
  .row:not(.head):hover{background:var(--faint)}
  .row:not(.head):hover .c-ti i{color:var(--rubric)}
  .c-th img{width:64px;height:48px;object-fit:cover}
  .c-no,.c-yr,.c-sz{font-size:11px;font-variant-numeric:tabular-nums}
  .c-ti{font:400 17px/1.2 var(--text)}
  .row.head .c-ti{font:inherit}
  .imp{font:500 11px var(--mono);color:var(--rubric);margin-left:4px}
  .c-me{font-size:11px;color:var(--muted)}
  .c-pa{display:flex;height:14px}
  .c-pa i{display:block;height:100%}
  .pager{display:flex;justify-content:space-between;align-items:center}
  .pager a{font-size:10px;letter-spacing:.14em;border:1px solid var(--ink);padding:8px 12px}

  /* spec sheet */
  .spec .plate{grid-column:span 7;display:grid;place-items:center;padding:clamp(16px,3vw,48px);background:var(--faint)}
  .spec .plate figure{margin:0;width:100%}
  .spec .plate img{margin:0 auto;max-height:calc(100svh - 160px);width:auto;max-width:100%;object-fit:contain}
  .spec .reads{grid-column:span 5}
  .reads .grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
  .reads .ro{display:block;padding:9px 10px 9px 0;border-bottom:1px solid var(--faint)}
  .reads .ro.wide{grid-column:1 / -1}
  .reads .ro .k{display:block;margin-bottom:3px;font-size:10px;letter-spacing:.14em;color:var(--muted)}
  .reads .ro .v{display:block;font:600 14px/1.25 var(--sans);letter-spacing:0}
  .reads .ro .v a{border-bottom:1px solid var(--line)}
  .reads .ro.nil .v{font:400 10px var(--mono);letter-spacing:.14em;color:var(--muted)}
  .reads .ro.nil{font-style:normal}
  .palette{margin-top:18px}
  .pbar{display:flex;height:58px;margin:8px 0 0;border:1px solid var(--line)}
  .pbar span{min-width:0}
  .legend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:9.5px;letter-spacing:.06em;color:var(--muted)}
  .legend i{display:inline-block;width:8px;height:8px;margin-right:5px;vertical-align:-1px}
  .spec>.cell:not(.plate):not(.reads){grid-column:span 6}
  .spec .more{grid-column:span 6;margin:0;display:grid;place-items:center;background:var(--faint)}
  .spec .more img{max-height:70svh;width:auto}
  .scale{margin:0}
  .scale svg{width:100%;max-height:420px;margin-top:10px}
  .scale .grid line{stroke:var(--faint);stroke-width:.6}
  .scale .work{stroke:var(--ink);stroke-width:1}
  .scale .ref{fill:none;stroke:var(--muted);stroke-dasharray:4 3;stroke-width:1}
  .noscale p{font:800 22px/1.1 var(--sans);margin:.6rem 0 0;max-width:24ch}
  .pig{width:100%;border-collapse:collapse;margin-top:10px;font-size:11px}
  .pig th{text-align:left;font-weight:400;font-size:9.5px;letter-spacing:.14em;color:var(--muted);border-bottom:1px solid var(--ink);padding:6px 8px 6px 0}
  .pig td{padding:8px 8px 8px 0;border-bottom:1px solid var(--faint)}
  .lf{display:inline-flex;gap:2px;vertical-align:middle}
  .lf i{width:8px;height:10px;border:1px solid var(--muted)}
  .lf i.on{background:var(--ink);border-color:var(--ink)}
  .log{list-style:none;margin:10px 0 0;padding:0}
  .log li{display:grid;grid-template-columns:96px 84px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--faint);font-size:11px}
  .log .d{font-variant-numeric:tabular-nums;color:var(--muted)}
  .log .ev{font-weight:500}
  .tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
  .tags a{font-size:10px;letter-spacing:.12em;border:1px solid var(--line);padding:5px 8px}
  .tags a:hover{border-color:var(--ink)}
  .sibs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
  .sib{width:116px;display:grid;gap:4px;font-size:10px;letter-spacing:.12em;padding:4px;border:1px solid transparent}
  .sib img{width:100%;aspect-ratio:1;object-fit:cover}
  .sib.here{border-color:var(--ink)}
  .sib:hover span{color:var(--rubric)}

  @media (max-width:960px){
    .spec .plate,.spec .reads,.spec>.cell:not(.plate):not(.reads),.spec .more{grid-column:span 12}
    .find{grid-template-columns:1fr 1fr}
    .find label:first-of-type{grid-column:1 / -1}
    .row{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"th ti yr" "th me sz" "th pa pa";gap:2px 12px;padding:10px 12px}
    .row .c-th{grid-area:th}
    .row .c-ti{grid-area:ti}
    .row .c-yr{grid-area:yr}
    .row .c-me{grid-area:me}
    .row .c-sz{grid-area:sz}
    .row .c-pa{grid-area:pa;height:6px;margin-top:4px}
    .row .c-no,.row.head{display:none}
    .log li{grid-template-columns:84px 1fr}
    .log li span:last-child{grid-column:1 / -1}
  }
}

/* the plate page: every impression in number order, gaps shown */
.plate-page .opener h1{font-style:italic}
.strip{display:flex;justify-content:center;gap:clamp(12px,2vw,28px);align-items:stretch;margin:0 0 clamp(28px,4vw,56px)}
.strip .imp{flex:4 1 0;max-width:560px;min-width:0;margin:0;display:flex;flex-direction:column;justify-content:flex-end}
.strip .imp a{display:block}
.strip .imp img{width:100%;aspect-ratio:var(--ar);object-fit:contain}
.strip .imp figcaption{margin-top:.5rem;font-size:.95rem}
.strip .n{color:var(--rubric);font-family:var(--caption);margin-right:.25rem}
.strip .gap{flex:calc(var(--n) * .6) 1 0;max-width:calc(var(--n) * 120px);min-height:9rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;text-align:center;padding:1rem .5rem;border:1px dashed var(--line);color:var(--muted);font-style:italic;font-size:.9rem}
.strip .gap .n{font-style:normal;font-size:1.25rem;color:var(--muted);margin:0}
.plate-apparatus{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.4fr);gap:var(--gutter);border-top:1px solid var(--ink);padding-top:1.4rem}
.pfacts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.3rem 1rem;margin:0;align-self:start}
.pfacts dt{color:var(--muted);font-size:1rem}
.pfacts dd{margin:0}
.plate-apparatus h2{color:var(--muted);font-size:1.05rem;margin:0 0 .4rem}
.plate-apparatus h2:not(:first-child){margin-top:1.6rem}
.pencil{list-style:none;padding:0;margin:0}
.pencil li{padding:.2rem 0}
.pencil .n{color:var(--rubric);font-family:var(--caption);margin-right:.4rem}

@media (max-width:860px){
  .va.catalogue .year{grid-template-columns:minmax(0,1fr)}
  .va .rows{gap:10px}
  .va .rows .cell{flex-basis:calc(var(--ar) * var(--h) * .62)}
  .photo .ph{grid-template-columns:minmax(0,1fr)}
  .photo .label{position:static}
  .photo .lead img{max-height:none}
  .strip{flex-direction:column}
  .strip .imp{max-width:none}
  .strip .gap{max-width:none;min-height:0;flex-direction:row;padding:.7rem}
  .plate-apparatus{grid-template-columns:minmax(0,1fr)}
}

/* ================================================================ live
   What the mockup did not have to draw: a skip link, the filter line, the
   empty states, imageless works, a collection's introduction, the ledger's
   previous page, the prints list and an edition's run on a plate page. */

.skip-link{position:absolute;left:-9999px;top:0;padding:.5rem .8rem;background:var(--bg);color:var(--ink);border:1px solid var(--ink);z-index:10}
.skip-link:focus{left:var(--gutter);top:8px}
:focus-visible{outline:2px solid var(--rubric);outline-offset:2px}

.filters{margin:.2rem 0 .8rem;color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline}
.filters .count{font-family:var(--caption);font-variant-caps:all-small-caps;letter-spacing:.12em;color:var(--rubric)}
.filters a{color:var(--ink);border-bottom:1px solid var(--line)}
.filters a:hover{color:var(--rubric)}
.filters .clear{font-variant-caps:all-small-caps;letter-spacing:.1em;border:0;color:var(--rubric)}
.empty{color:var(--muted);font-style:italic;padding:2rem 0}
.empty a{color:var(--ink);border-bottom:1px solid var(--line)}
.year.flat{grid-template-columns:minmax(0,1fr)}

.entry .pl.none{display:block;aspect-ratio:1;border:1px solid var(--line)}
.va .rows .none{display:block;aspect-ratio:var(--ar);border:1px solid var(--line);background:var(--faint)}
.spread.solo{grid-template-columns:minmax(0,1fr)}
.spread.solo .recto{padding-left:0;position:static;max-width:52rem}
.photo .ph.solo{grid-template-columns:minmax(0,1fr)}
.tomb .subt,.photo .label .subt{color:var(--muted);font-style:italic;margin:0 0 .3rem}
.tomb .imp-line a,.ph-tomb dd a{border-bottom:1px solid var(--line)}
.turn a i{font-style:italic}

.opener .intro{max-width:38rem;margin:1.6rem auto 0;text-align:left}
.opener .intro p{margin:0 0 .8rem}
.opener .filters{justify-content:center;margin-top:1rem}
.opener .aside{color:var(--muted);font-style:italic;max-width:34rem;margin:.8rem auto 0}
.opener .aside a{color:var(--ink);border-bottom:1px solid var(--line)}
.cp figcaption a{border-bottom:1px solid transparent}
.cp figcaption a:hover{border-bottom-color:var(--line)}
.notfound .opener h1{font-style:normal}

.vb .pager a[rel=prev]{justify-self:start}
.vb .facets a[aria-current]{border-color:var(--ink);color:var(--rubric)}
.vb .filters.lab{display:flex;margin:0}
.vb .filters.lab a{color:var(--ink)}
.vb .reads.solo{grid-column:span 12}
.vb .side{margin-top:10px}
.vb .side a{border-bottom:1px solid var(--line)}
.vb .sib .none{display:block;aspect-ratio:1;background:var(--faint)}

.plate-page .run-head{text-align:center;color:var(--muted);font-size:1.05rem;margin:0 0 .8rem}
.strip{flex-wrap:wrap}
.strip .imp{flex:1 1 220px}
.strip .gap{flex:0 1 calc(var(--n) * 90px)}
.strip .none{display:block;aspect-ratio:1;border:1px solid var(--line)}

/* The pencilling is recorded verbatim, its spacing included. */
.insc{white-space:pre-wrap}
/* A tall photograph meets the viewport's height and keeps its own width, so
   the colour painted behind it while it loads never shows as side bars. */
.plate img,.photo .lead img{width:auto;max-width:100%;height:auto}
.plate img{margin:0 auto}

/* ================================================================ pass 1
   Design pass 1 over the live site, 2026-10-16. Each rule says what it
   fixes; the measurements are in the pass's report. Four rules above were
   changed in place: the running head's section word in Text italic, and the
   entry's and photograph's titles italic themselves (both so that a page no
   longer fetches a whole face for one word or for a heading's strut — see
   fonts/README.md § the weight); the scale labels' size left to the drawing;
   and a chapter's caption, where only the picture link is a block. */

/* A missing inventory number is a gap like any other: quiet, not rubric,
   and in the Text italic every other gap is set in (the line's own Caption
   face has an italic that nothing else on the page needs). */
.recto .no.missing{color:var(--muted)}
.recto .no .nil{font-family:var(--text)}

/* The foot turns through the catalogue in time; its name is shown so it is
   not read as the entry's "Either side", which turns along a plate. */
.turn{flex-wrap:wrap;align-items:baseline;row-gap:.1rem}
.turn .lbl{flex-basis:100%;color:var(--muted);font-size:.85rem}
.turn a{padding:.3rem 0}
.turn + .colo{margin-top:clamp(24px,3vw,48px)}

/* The running head's section word, when it is a link up (a plate's page). */
.run a.sec{color:var(--muted)}
.run a.sec:hover{color:var(--rubric)}

/* Title page: the plates across the whole measure, in columns. */
.contents .by-plate{grid-column:1 / -1}
.contents .by-plate h2{margin-top:0}
.contents .by-plate h2 a:hover{color:var(--rubric)}
.lead.platelist{columns:4 15rem;column-gap:2rem}
.lead.platelist li{break-inside:avoid}

/* /prints: fifty plates are a contact sheet, not a chapter of full pages. */
.prints .plates{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px)}

/* A spread whose entry carries prose can run past the screen; a sticky entry
   then hides its own last lines until the plate runs out. Only an entry
   without prose sticks, and only on a screen tall enough to hold one. A
   single plate (it is sized to the screen) stays beside long prose instead. */
.recto:has(.prose){position:static}
@media (min-width:861px) and (min-height:761px){
  .verso:not(:has(.fig)){position:sticky;top:12px}
}
@media (max-height:760px){.recto{position:static}}

/* The sheet's corner crosshairs sit 7px outside its edge; the clip that
   keeps the sheet inside a phone cut the left two away. */
.vb .sheet{overflow:clip;overflow-clip-margin:8px}

/* The sheet's title holds nothing but an italic title, like the entry's and
   the photograph's (above): italic itself, so its strut asks for no face
   the glyphs do not use. */
.vb .reads .big{font-style:italic}

/* Phone: tap targets at least 24px tall where they stand alone. */
.run>a,.run nav a{display:inline-block;padding:.15rem 0}
.jump a{display:inline-block;padding:.15rem 0}
.filters a{display:inline-block;padding:.12rem 0}

.vb .c-sz .u{display:none}

@media (max-width:860px){
  .turn a{padding:.45rem 0}
}
@media (max-width:960px){
  /* The order's longest option, whole, beside the year. */
  .vb .find{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
  .vb .c-sz .u{display:inline}
}
@media (max-width:480px){
  /* The three views on one line. */
  .views{font-size:.98rem;letter-spacing:.06em;gap:.15rem .4rem}
  .views>.sc{margin-right:.15rem}
  .prints .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ================================================================ pass 2
   Design pass 2 over the live site, 2026-10-16. Each rule says what it
   fixes. One rule above went: the true-scale drawing's lettering, now a key
   under it (the rule for the key is here). */

/* The true-scale key: the palette key's type, and its swatches drawn as the
   shapes are, the work filled and ruled in ink, the letter sheet dashed. */
.vb .scale .key i{box-sizing:border-box;border:1px solid var(--ink)}
.vb .scale .key i.ref{border:1px dashed var(--muted);background:none}

/* The plate's four registration marks sit across the cell's edges; the cells
   after it in the sheet painted over half of the lower right one (and on some
   sheets the upper right). They are drawn above every cell now. */
.vb .xh{z-index:1}

/* The foot's two rules (In time, the colophon) were the only rules on these
   pages wider than the text: 58px past it on either side at 1440, and to the
   screen's edges on a phone. They now span the measure every page keeps. */
.turn,.colo{width:calc(100% - 2 * var(--gutter));max-width:calc(var(--max) - 2 * var(--gutter));padding-left:0;padding-right:0}

/* A contents line that wraps (Alligator Juniper (Adobe Canyon)) carries its
   leader and its count on its last line, the leader running on from the
   last word, as a printed contents sets it; it had them beside the first
   line. The leader is drawn under the whole line at its last baseline, the
   words and the count each sit on the page's colour over it, and the count
   floats to the end of the line it comes on. */
.lead a{display:block;padding:.18rem 0;background:linear-gradient(90deg,var(--muted) 1px,transparent 1px) 0 calc(100% - .18rem - .55em)/3px 1px repeat-x}
.lead a::after{content:"";display:block;clear:both}
.lead .l{background:var(--bg);padding-right:.4rem}
.lead .dots{display:none}
.lead .n{float:right;background:var(--bg);padding-left:.4rem}

/* The photograph view's label, like the entry's recto, sticks beside the
   pictures only on a screen tall enough to hold it. Measured over all 169
   public works: the tallest label is about 590px, so on a shorter screen a
   sticky label could hide its own last lines. */
@media (max-height:760px){.photo .label{position:static}}

/* On a phone a plate's strip runs down the page, so a gap's flex basis
   (its share of a row on a wide screen) became its height: "#1, #2 not in
   the archive" stood in a dashed box 180px tall. There it is one line. */
@media (max-width:860px){.strip .gap{flex:none}}

/* Tap targets that stand alone: the plates' heading on the title page and
   the impressions either side, at least 24px tall. The either-side links
   are underlined like every link beside them, so their reach is widened by
   an invisible box around each rather than by padding, which would have
   dropped the underline below its neighbours'. */
.contents .by-plate h2 a{display:inline-block;padding:.2rem 0}
.recto section a[rel],.photo .label section a[rel],.vb .side a{position:relative}
.recto section a[rel]::after,.photo .label section a[rel]::after,.vb .side a::after{content:"";position:absolute;inset:-6px -3px}