/* on every page: the bar's live Find and its panel (search-02, canon 3.15); the cards' rules (3.4); the site foot (Footer 03's A, home-67; R35); a form's button and a refused file's line; the spotlight's record line alone; small text at 4.5:1 and a phone's bar links at 24px (common.A11Y_CSS, r0927e); the faces' stand-ins (r0928 perf) */
.card:hover .sq:after{transform:scale(1.015)}
.card[data-loop] .sq{isolation:isolate}
.card .sq:after{transform:scale(1.3)}
.card:hover .sq:after{transform:scale(1.3195)}
.chsec .card .sq:after{transform:none}
.chsec .card:hover .sq:after{transform:scale(1.015)}
.card .sq .lp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.3195);opacity:0;transition:opacity .35s ease;z-index:1;pointer-events:none}
.card .sq .lp.on{opacity:1}
.chsec .card:hover .sq:after,.chsec .card .sq .fl{will-change:transform,opacity}
.find input{flex:1;min-width:0;width:100%;height:12px;margin:0;padding:0;border:0;outline:0;background:transparent;font:inherit;line-height:1;letter-spacing:inherit;text-transform:uppercase;color:var(--text)}
.find input::placeholder{color:var(--dim);opacity:1}
.find:focus-within{border-bottom-color:var(--muted)}
.find:focus-within svg{color:var(--text)}
.fwrap{position:absolute;left:0;right:0;top:100%;pointer-events:none}
.fbox{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:0 var(--m);max-width:1640px;margin:0 auto}
.fpan{grid-column:9/-1;pointer-events:auto;padding:22px;max-height:calc(100vh - var(--nav) - 40px);overflow:auto;background:rgba(10,11,12,.6);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.fpan[hidden]{display:none}
.fpan .gh{display:block;position:relative;margin:0 0 12px;font-family:var(--disp);font-size:11px;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.fpan .gh:before{content:"::";color:var(--cc);position:absolute;right:100%;margin-right:10px}
.fpan .fr+.gh{margin-top:22px}
.fpan .fr{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;margin:0 -22px;padding:6px 22px;--pc:var(--cc);--pi:#fff;transition:background-color .25s ease}
.fpan .fs{width:44px;height:44px;background-color:var(--black);background-size:cover;background-position:center}
.fpan .pt{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpan .pa{display:block;margin-top:2px;font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpan .pa i{color:var(--dim);padding:0 7px;font-style:normal}
.fpan .pa .num{color:var(--cc)}
.fpan .fr:hover,.fpan .fr.on{background:color-mix(in oklch,var(--pc) 62%,transparent)}
.fpan .fr:hover .pa,.fpan .fr.on .pa,.fpan .fr:hover .pa i,.fpan .fr.on .pa i,.fpan .fr:hover .pa .num,.fpan .fr.on .pa .num{color:rgba(255,255,255,.7)}
.fpan .ff{display:flex;margin-top:22px}
.fpan .K.none{display:block}
.card .sq.pos:after{transform:none}
.card:hover .sq.pos:after{transform:scale(1.015)}
.card .sq.pos .lp{inset:auto;left:var(--ll);top:var(--lt);width:var(--lw);height:var(--lh);object-fit:fill;transform-origin:var(--lo);transform:scale(1.015)}
/* Footer 03: the signature, Elsewhere, the newsletter, in two lines */
.pf{background:#0a0b0c;border-top:1px solid #2a2e32;padding:40px 0;cursor:default}
.pf .cols{grid-template-rows:auto auto;row-gap:8px;align-items:center}
.pf .flk{grid-column:1/5;grid-row:1;align-self:end;justify-self:start;display:block;color:#9a9ea3;transition:color .2s}
.pf .flk:hover{color:#fff}
.pf .flg{display:block;height:14px;width:161px;fill:currentColor}
.pf .L{grid-row:1;align-self:end;font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pf .l2{grid-column:5/8}
.pf .l1{grid-column:8/13}
.pf .sk{grid-column:1/5;grid-row:2;color:#9a9ea3;white-space:nowrap}
.pf .K i{color:#5c6065}
.pf .socs{grid-column:5/8;grid-row:2;display:flex;align-items:center;gap:18px}
.pf .sl{display:inline-flex;align-items:center;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#9a9ea3;text-decoration:none;transition:color .2s}
.pf .sl:hover{color:#fff}
.pf .sl .ico{display:inline-block;width:12px;height:12px;margin-right:8px}
.pf .sl .ico-x{width:10px;height:10px;margin:0 9px 0 1px;fill:var(--cc)}
.pf .sl .ico-instagram{fill:url(#dc-ig)}
.pf .fnl{grid-column:8/13;grid-row:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gut);align-items:center;margin:0;position:relative}
.pf .fnl .fld{grid-column:1/4;display:block;width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid var(--dim);color:var(--white);font:400 15px/1.5 var(--txt);padding:3px 0 5px;outline:none;border-radius:0}
.pf .fnl .fld:focus{border-bottom-color:var(--white)}
.pf .fnl .btn{grid-column:4/6;justify-self:start}
.pf .fnl .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.pf .fnl .sn{display:none;grid-column:1/-1;margin:0;font:400 15px/1.5 var(--txt);color:var(--text)}
.pf .fnl.sent>:not(.sn){display:none}
.pf .fnl.sent>.sn{display:block}
.pf.err .l1{color:var(--cc)}
.pf.err .nf .fld{border-bottom-color:var(--cc)}
@media (min-width:901px) and (max-width:1009px){
  .pf .flk{grid-column:1/7;grid-row:1}
  .pf .sk{grid-column:1/7;grid-row:2}
  .pf .l2{grid-column:7/13;grid-row:1}
  .pf .socs{grid-column:7/13;grid-row:2}
  .pf .l1{grid-column:1/13;grid-row:3;margin-top:26px}
  .pf .fnl{grid-column:1/9;grid-row:4;grid-template-columns:repeat(8,minmax(0,1fr))}
  .pf .fnl .fld{grid-column:1/7}
  .pf .fnl .btn{grid-column:7/9}
}
@media (max-width:900px){
  .pf .cols{grid-template-rows:none}
  .pf .flk,.pf .sk,.pf .L,.pf .fnl,.pf .socs{grid-column:1/-1;grid-row:auto}
  .pf .flk{order:1}.pf .sk{order:2}.pf .l2{order:3;margin-top:40px}.pf .socs{order:4;margin-top:6px}
  .pf .l1{order:5;margin-top:40px}.pf .fnl{order:6;margin-top:6px;grid-template-columns:1fr;row-gap:26px}
  .pf .fnl .fld,.pf .fnl .btn{grid-column:1/-1}
}
/* Home 69: the foot in the light set on a phone */
@media (max-width:900px){
  .pf{background:#f1f1ee;border-top:0;--white:#0d0e10;--text:#2a2d31;--muted:#62666b;--dim:#9a9ea3}
  .pf .flk,.pf .sl{color:#2a2d31}
  .pf .flk:hover,.pf .sl:hover{color:#0d0e10}
  .pf .sk{color:#62666b}
  .pf .K i{color:#9a9ea3}
  .pf.err .l1{color:#cc1100}
}
/* Consent 02: the analytics consent, a bar at the foot */
.ck2{position:fixed;z-index:40;background:rgba(10,11,12,.6);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);display:none}
.ck2.on{display:block}
.ck2 p{margin:0;font:400 15px/1.5 var(--txt);color:var(--text)}
.ck2 .acts{display:flex;gap:12px;align-items:center}
.ck2 .btn,.ck2 .lnk{margin:0}
.ck2.a{left:0;right:0;bottom:0;border-top:1px solid #2a2e32}
.ck2.a .cols{padding-top:18px;padding-bottom:18px;align-items:center}
.ck2.a p{grid-column:1/9}
.ck2.a .acts{grid-column:9/13;justify-content:flex-end}
@media (max-width:900px){
  .ck2.a p,.ck2.a .acts{grid-column:1/-1}
  .ck2.a .acts{justify-content:flex-start;margin-top:14px}
}
button.btn{border:0;margin:0}
.app .L.dl{margin:8px 0 0}
.app .lk3 .dl+.fld{margin-top:14px}
.spot .lede .K:first-child{margin-top:0}
.ruler .years,.srt span{--dim:#7d848c} .light{--muted:#62666b} .light dt{color:var(--muted)} .light .num{--cc:#cc1100;--ac:#cc1100} @media (max-width:900px){.bar .logo{position:relative} .bar .logo::after{content:"";position:absolute;inset:-4px} .bar .nav a::after{content:"";position:absolute;inset:-2px}}
/* the bar's Chapters menu (canon 3.18, chaptermenu-01; app/site/chmenu.php, chmenu.js): Find's panel under the bar while the
   mouse is on Chapters or on it, the desk only; Names, Pictures or Latest six as the admin's Settings has it */
.chmw{position:absolute;left:0;right:0;top:100%;pointer-events:none}
.chmg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:0 var(--m);max-width:1640px;margin:0 auto}
.chm{grid-column:1/-1;pointer-events:auto;padding:22px;max-height:calc(100vh - var(--nav) - 40px);overflow:auto;background:rgba(10,11,12,.6);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.chm[hidden]{display:none}
.chm .chh{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}
.chm .gh{display:block;position:relative;font-family:var(--disp);font-size:11px;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.chm .gh:before{content:"::";color:var(--cc);position:absolute;right:100%;margin-right:10px}
.chm .chh .lnk{padding:3px 8px 2px;font-size:10px;vertical-align:1px}
.chm .chv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(var(--rows,11),auto);grid-auto-flow:column;column-gap:var(--gut)}
.chm .fr{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;margin:0 -10px;padding:6px 10px;--pc:var(--cc);--pi:#fff;transition:background-color .25s ease;min-width:0}
.chm .fs{width:44px;height:44px;background-color:var(--black);background-size:cover;background-position:center}
.chm .ft{min-width:0}
.chm .pt{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chm .pa{display:block;margin-top:2px;font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chm .pa i{color:var(--dim);padding:0 7px;font-style:normal}
.chm .pa .num{color:var(--cc);margin:0}
.chm .fr:hover{background:color-mix(in oklch,var(--pc) 62%,transparent)}
.chm .fr:hover .pa,.chm .fr:hover .pa i,.chm .fr:hover .pa .num{color:rgba(255,255,255,.7)}
/* Names: the number, right to one edge, and the name, one line a chapter */
.chm .chn .fr{grid-template-columns:88px minmax(0,1fr);column-gap:12px;align-items:baseline;padding:5px 10px}
.chm .chn .pa{margin:0;text-align:right}
/* Latest six: the chapters index's card, his crop at 3:2 */
.chm .chl{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row}
.chm .chl .sq{aspect-ratio:3/2}
.chm .chl .card .sq:after{transform:none}
.chm .chl .card:hover .sq:after{transform:scale(1.015)}
.chm .chl .cap .pa i{color:var(--dim);padding:0 7px;font-style:normal}
.chm .chl .cap .pa .num{color:var(--cc);margin:0}
.chm .chl .card:hover .cap .pa .num,.chm .chl .card:hover .cap .pa i{color:var(--pi)}
.chm .short .chw,.chm .tight .nb{display:none}
@media (max-width:900px){.chmw{display:none}}
h1.t{font-weight:400}.pv .panel.one h1.nm{display:inline;margin:0;font-weight:400}
:root{--disp:"Michroma","Michroma Fallback",sans-serif;--mono:"Kode Mono","Kode Mono Fallback",monospace;--txt:"Instrument Sans","Instrument Sans Fallback",sans-serif}
/* a piece's way back (r1013n2; app/site/views/piece.php, www piece.js; his 13 Oct, of the stage's top left under the
   logo: "it feels like this is the natural spot for it. can we create a uniform experience in this area?"): the page the
   piece was opened from, named in the nav's words (11px, .05em, the muted grey, the text's under the mouse), its left the
   logo's, its 23px box from the bar's foot; the piece clear of its words by 16px, else the stage starting 30px lower (.bkr,
   piece.js; a track's player always): its words 16px over the piece as the record's are under it, 33px under the nav's,
   twice that (r1013n3; his 13 Oct: "is this the optimal spacing? explain the logic to me, tighten it if it is not in fact
   optimal."; it was 22px over the piece and 49px under the nav, the stage 52px lower); the desk alone */
.pv .pbk{position:absolute;z-index:3;top:0;left:calc(max(0px, (100% - 1640px) / 2) + var(--m));display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 2 * var(--m));padding:6px 0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .25s ease}
.pv .pbk b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pv .pbk span{display:inline-block;font-size:13px;line-height:11px;transition:transform .25s ease}
.pv .pbk:hover{color:var(--text)} .pv .pbk:hover span{transform:translateX(-3px)}
@media (min-width:901px){.pv{--bkh:30px} .pv.one.bkr{padding-top:calc(1px + var(--bkh))} .pv.one.bkr .fit.au .player{height:calc(100vh - var(--nav) - 25px - var(--ph) - var(--bkh))}}
@media (max-width:900px){.pv .pbk{display:none}}
/* a picture's full view (r1013n2; www piece.js): over the page and the bar on the black, the picture as large as the window
   lets it under the plates and over its credit, zoomed to its file's own pixels at most; -, the size and + at the top
   left, Close at the right; the credit on the glass at the foot as Exhibition's (canon 3.20), held over the consent bar */
.pv .pic.fvo{cursor:zoom-in}
html.fvon{overflow:hidden}
.fv{position:fixed;inset:0;z-index:60;display:none;background:var(--black);touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
.fv.on{display:block}
.fv img{position:absolute;left:0;top:0;display:block;max-width:none;max-height:none;transform-origin:0 0;-webkit-user-drag:none;touch-action:none}
.fv.zk img{cursor:zoom-in} .fv.zm img{cursor:grab} .fv.zg,.fv.zg img{cursor:grabbing}
.fv .fvzc{position:absolute;z-index:2;top:16px;left:var(--m);display:flex;gap:6px}
.fv .fvzc[hidden]{display:none}
.fv .fvzc .lnk{min-width:2.6em;text-align:center} .fv .fvzc .lnk:before{content:none}
.fv .fvzc .lnk.off{opacity:.3;pointer-events:none}
.fv .fvx{position:absolute;z-index:2;top:16px;right:var(--m)}
.fv .fvc{position:absolute;z-index:2;right:var(--m);bottom:calc(22px + var(--ck,0px));max-width:calc(100% - 2 * var(--m));box-sizing:border-box;padding:10px 14px 9px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.78);background:rgba(10,11,12,.8);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.fv .fvc b{color:#fff;font-weight:500} .fv .fvc i{color:rgba(255,255,255,.35);padding:0 7px}
@media (max-width:900px){.fv .fvzc{top:14px;left:16px} .fv .fvx{top:14px;right:16px} .fv .fvc{bottom:calc(16px + var(--ck,0px));right:16px;max-width:calc(100% - 32px)}}
@media (max-width:560px){.fv .fvc{white-space:normal;line-height:1.5;padding:8px 14px 7px} .fv .fvc b{display:block} .fv .fvc b+i{display:none}}
